/*
Theme Name:   Vruumy
Theme URI:    https://vruumy.com.br
Description:  Tema oficial da Vruumy — Concessionária Infantil premium de carros elétricos para crianças. Child theme do Storefront com identidade "showroom": fundo escuro dominante, acentos em neon azul→rosa, gradientes sutis e tipografia Orbitron + Montserrat.
Author:       Vruumy
Author URI:   https://vruumy.com.br
Template:     storefront
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  vruumy
*/

/* ==========================================================================
   1. Design tokens — paleta, tipografia e efeitos da marca Vruumy
   ========================================================================== */
:root {
	--vruumy-blue:  #00B2FF;
	--vruumy-pink:  #FF2D8E;
	--vruumy-black: #000000;
	--vruumy-gray:  #1A1A23;
	--vruumy-white: #FFFFFF;

	--vruumy-gray-light: #2A2A35;
	--vruumy-text-muted: #9A9AAE;
	--vruumy-border: rgba(255, 255, 255, .08);

	--vruumy-gradient:      linear-gradient(90deg, var(--vruumy-blue) 0%, var(--vruumy-pink) 100%);
	--vruumy-gradient-soft: linear-gradient(135deg, rgba(0, 178, 255, .14), rgba(255, 45, 142, .14));

	--vruumy-glow-blue:  0 0 18px rgba(0, 178, 255, .45);
	--vruumy-glow-pink:  0 0 18px rgba(255, 45, 142, .45);
	--vruumy-shadow-deep: 0 20px 60px rgba(0, 0, 0, .55);

	--vruumy-font-heading: 'Orbitron', 'Arial Narrow', sans-serif;
	--vruumy-font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

	--vruumy-radius: 14px;
	--vruumy-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================================
   2. Base — modo escuro por padrão (showroom)
   ========================================================================== */
html { background-color: var(--vruumy-black); }

body {
	background-color: var(--vruumy-black);
	color: var(--vruumy-white);
	font-family: var(--vruumy-font-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#page {
	background-color: var(--vruumy-black);
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--vruumy-font-heading);
	color: var(--vruumy-white);
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 700;
}

p { color: var(--vruumy-text-muted); }

a {
	color: var(--vruumy-blue);
	transition: color .25s var(--vruumy-ease);
}
a:hover, a:focus { color: var(--vruumy-pink); }

::selection { background: var(--vruumy-pink); color: var(--vruumy-white); }

/* Barra de rolagem com toque neon (navegadores baseados em WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--vruumy-black); }
::-webkit-scrollbar-thumb { background: var(--vruumy-gradient); border-radius: 10px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: fixed;
	top: -100px;
	left: 1rem;
	z-index: 99999;
	background: var(--vruumy-gradient);
	color: var(--vruumy-white);
	padding: .75rem 1.25rem;
	border-radius: 8px;
	text-decoration: none;
	font-family: var(--vruumy-font-heading);
	letter-spacing: .08em;
	transition: top .25s var(--vruumy-ease);
}
.skip-link:focus { top: 1rem; color: var(--vruumy-white); }

/* ==========================================================================
   3. Botões e formulários — tratamento neon global
   ========================================================================== */
.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
	display: inline-block;
	font-family: var(--vruumy-font-heading);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .8rem;
	font-weight: 600;
	background: var(--vruumy-gradient);
	color: var(--vruumy-white);
	border: none;
	border-radius: 999px;
	padding: .9em 2em;
	cursor: pointer;
	box-shadow: var(--vruumy-glow-blue);
	transition: transform .25s var(--vruumy-ease), box-shadow .25s var(--vruumy-ease), opacity .25s var(--vruumy-ease);
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	transform: translateY(-2px);
	box-shadow: var(--vruumy-glow-pink);
	opacity: .94;
	color: var(--vruumy-white);
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
	background-color: var(--vruumy-gray);
	border: 1px solid var(--vruumy-border);
	color: var(--vruumy-white);
	border-radius: 8px;
	padding: .75em 1em;
	font-family: var(--vruumy-font-body);
	transition: border-color .25s var(--vruumy-ease), box-shadow .25s var(--vruumy-ease);
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--vruumy-blue);
	box-shadow: 0 0 0 3px rgba(0, 178, 255, .18);
}

::placeholder { color: var(--vruumy-text-muted); opacity: 1; }

/* Ícones SVG inline em estilo "linha" usados no cabeçalho, rodapé e selos */
.vruumy-icon { display: inline-flex; flex-shrink: 0; }
.vruumy-icon svg { display: block; width: 1.4em; height: 1.4em; }