/*
Theme Name:   Astra Child — Speed Vending
Theme URI:    https://speedvending.net/
Description:  Child theme for Astra. Holds ALL custom CSS/JS for the Speed Vending redesign. Brand red extracted from the logo (#EB252E).
Author:       Speed Vending
Template:     astra
Version:      1.0.0
Text Domain:  astra-child
*/

/* ==========================================================================
   STEP 1 — FOUNDATION: brand color, typography, spacing
   ========================================================================== */

/* --- Brand palette (extracted from the Speed Vending logo) --- */
:root {
	--sv-red:        #EB252E; /* bright "SPEED" red — primary brand */
	--sv-red-deep:   #B81C24; /* hover / pressed */
	--sv-red-darker: #8F1B20; /* deep red from logo, for gradients */
	--sv-ink:        #231F20; /* near-black "VENDING" — headings/text */
	--sv-ink-soft:   #3a3537;
	--sv-bg:         #ffffff;
	--sv-bg-soft:    #f6f6f7; /* clean light section background */

	/* Override Astra's default blue (#046bd2) globally via its own vars */
	--ast-global-color-0: var(--sv-red);       /* primary: links, buttons */
	--ast-global-color-1: var(--sv-red-deep);  /* hover/secondary */
	--ast-global-color-2: var(--sv-ink);       /* headings */
	--ast-global-color-primary: var(--sv-red);
}

/* --- Typography: Poppins headings, Inter body --- */
body,
button,
input,
select,
textarea,
.ast-container,
p, li, td, th, .wp-block-paragraph {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body {
	color: var(--sv-ink-soft);
	font-size: 1.05rem;
	line-height: 1.8;            /* generous body line height */
	letter-spacing: 0.1px;
}

.entry-content p,
.wp-block-group p {
	line-height: 1.85;
	margin-bottom: 1.4em;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.wp-block-heading {
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--sv-ink);
	letter-spacing: -0.015em;
	line-height: 1.18;
}

/* Larger, bolder section headings */
h1, .wp-block-heading[class*="level-1"] {
	font-weight: 800;
	font-size: clamp(2.3rem, 5vw, 3.6rem);
}

h2, .wp-block-heading {
	font-weight: 800;
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	margin-bottom: 0.6em;
}

h3 {
	font-weight: 700;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
}

/* --- Links --- */
a {
	color: var(--sv-red);
	transition: color 0.2s ease;
}
a:hover,
a:focus {
	color: var(--sv-red-deep);
}

/* Heading-link hover → brand red */
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover,
.wp-block-heading a:hover {
	color: var(--sv-red);
}

/* --- Buttons: brand red with a smooth color transition (the hover "pop"
       scale is added in the polish step) --- */
.wp-block-button__link:not(.has-background),
.ast-button,
.button,
button.menu-toggle,
input[type="submit"],
.wpcf7-submit {
	background-color: var(--sv-red);
	border-color: var(--sv-red);
	color: #fff;
	border-radius: 8px;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	letter-spacing: 0.2px;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.wp-block-button__link:not(.has-background):hover,
.ast-button:hover,
.button:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover {
	background-color: var(--sv-red-deep);
	border-color: var(--sv-red-deep);
	color: #fff;
}

/* Outline button variant → red outline that fills on hover */
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
	color: var(--sv-red);
	border-color: currentColor;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* --- Spacing: more breathing room between sections --- */
.wp-block-group {
	padding-top: clamp(56px, 7vw, 96px) !important;
	padding-bottom: clamp(56px, 7vw, 96px) !important;
}
.wp-block-group .wp-block-heading.has-text-align-center {
	margin-bottom: 1.2em;
}
.wp-block-columns {
	gap: clamp(1.5rem, 3vw, 3rem);
}

/* ==========================================================================
   Pre-existing site fixes (migrated here so all custom CSS lives in the
   child theme). Was previously in the Customizer "Additional CSS".
   ========================================================================== */

/* Hide site title text (logo carries the brand) */
.ast-site-title-wrap .site-title,
.ast-site-title-wrap .site-description { display: none !important; }

/* Hide auto page titles */
.entry-title,
.page-title,
.ast-archive-title { display: none !important; }

/* Logo size */
.custom-logo { max-height: 60px !important; width: auto !important; }

/* Equal-height machine image containers */
.wp-block-columns.are-vertically-aligned-center .wp-block-column .wp-block-image {
	height: 350px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.wp-block-columns.are-vertically-aligned-center .wp-block-column .wp-block-image img {
	max-height: 350px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
}
.wp-block-columns.are-vertically-aligned-center .wp-block-column {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

/* ==========================================================================
   STEP 2 — POLISH: feature cards + button "pop" hover
   ========================================================================== */

/* --- Feature cards: the 3 "Pourquoi choisir" columns become elevated cards.
       Scoped to plain columns (the Distributors block carries
       .are-vertically-aligned-center, so it is excluded). --- */
.wp-block-columns:not(.are-vertically-aligned-center) > .wp-block-column {
	background: var(--sv-bg);
	border: 1px solid #ececee;
	border-radius: 16px;
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem);
	box-shadow: 0 1px 2px rgba(35, 31, 32, 0.04),
	            0 8px 24px rgba(35, 31, 32, 0.05);
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
	position: relative;
	overflow: hidden;
}

/* Red accent bar that grows across the top on hover */
.wp-block-columns:not(.are-vertically-aligned-center) > .wp-block-column::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--sv-red), var(--sv-red-darker));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.32s ease;
}

.wp-block-columns:not(.are-vertically-aligned-center) > .wp-block-column:hover {
	transform: translateY(-6px);
	border-color: transparent;
	box-shadow: 0 4px 10px rgba(35, 31, 32, 0.06),
	            0 18px 40px rgba(235, 37, 46, 0.12);
}
.wp-block-columns:not(.are-vertically-aligned-center) > .wp-block-column:hover::before {
	transform: scaleX(1);
}

/* Emoji in the feature heading reads as an icon: bigger, on its own line */
.wp-block-columns:not(.are-vertically-aligned-center) > .wp-block-column > h3.wp-block-heading {
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
}

/* Respect reduced-motion: no lift/transform, keep the static card */
.sv-reduce-motion .wp-block-columns:not(.are-vertically-aligned-center) > .wp-block-column,
.sv-reduce-motion .wp-block-columns:not(.are-vertically-aligned-center) > .wp-block-column::before {
	transition: none;
}
.sv-reduce-motion .wp-block-columns:not(.are-vertically-aligned-center) > .wp-block-column:hover {
	transform: none;
}

/* --- Button "pop": lift + brand-tinted shadow on hover --- */
.wp-block-button__link:not(.has-background):hover,
.ast-button:hover,
.button:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(235, 37, 46, 0.28);
}
.wp-block-button__link:not(.has-background):active,
.ast-button:active,
.button:active,
input[type="submit"]:active,
.wpcf7-submit:active {
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(235, 37, 46, 0.22);
}

/* Outline button fills with brand red on hover */
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover {
	background-color: var(--sv-red);
	color: #fff;
	border-color: var(--sv-red);
}

.sv-reduce-motion .wp-block-button__link:hover,
.sv-reduce-motion .ast-button:hover,
.sv-reduce-motion input[type="submit"]:hover,
.sv-reduce-motion .wpcf7-submit:hover {
	transform: none;
}

/* ==========================================================================
   STEP 3 — MOTION: scroll reveal + hero stagger
   Gated on .sv-js so no-JS visitors (and reduced-motion, which exits early
   in animations.js) always see fully-rendered content.
   ========================================================================== */

/* --- Hero stagger: h1 / subhead / buttons fade up on load --- */
.sv-js .sv-hero-in {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.sv-js .sv-hero-in.sv-in {
	opacity: 1;
	transform: none;
}

/* --- Scroll reveal: sections, cards, and distributor columns --- */
.sv-js .sv-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.sv-js .sv-reveal.sv-in {
	opacity: 1;
	transform: none;
}

/* The distributor columns are display:flex !important (migrated rule); the
   reveal transform still applies to the flex item, so nothing to override. */

/* ==========================================================================
   STEP 4 — STICKY HEADER: pinned + shrink-on-scroll
   Stickiness is pure CSS (works without JS); JS only adds .sv-scrolled.
   ========================================================================== */

/* Pin the primary header to the top. z-index keeps it above revealed content
   and the cover hero. */
#masthead .ast-main-header-wrap {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--sv-bg);
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Smoothly compact the header bar + logo once scrolled. */
#masthead .ast-primary-header-bar,
#masthead .site-primary-header-wrap {
	transition: padding-top 0.3s ease, padding-bottom 0.3s ease;
}
#masthead .custom-logo {
	transition: max-height 0.3s ease;
}

/* Scrolled state: subtle shadow + tighter bar + slightly smaller logo. */
.sv-scrolled #masthead .ast-main-header-wrap {
	box-shadow: 0 4px 18px rgba(35, 31, 32, 0.10);
}
.sv-scrolled #masthead .ast-primary-header-bar,
.sv-scrolled #masthead .site-primary-header-wrap {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}
.sv-scrolled #masthead .custom-logo {
	max-height: 46px !important;
}

/* ==========================================================================
   STEP 5 — HERO: brand gradient overlay + CTA hierarchy
   Scoped to .home .wp-block-cover (the only cover on the front page) so
   covers on other pages are untouched.
   ========================================================================== */

/* Taller, anchored hero with a branded base behind the (low-res) machine img */
.home .wp-block-cover {
	min-height: clamp(440px, 72vh, 660px);
	background: linear-gradient(125deg, var(--sv-red-darker) 0%, #1a1a2e 60%, #14142b 100%);
	overflow: hidden;
}

/* The small source image is scaled up as cover — blur + scale it so it reads
   as an intentional textured backdrop rather than a pixelated photo. */
.home .wp-block-cover .wp-block-cover__image-background {
	filter: blur(3px) saturate(1.1);
	transform: scale(1.08);
	opacity: 0.9;
}

/* Replace the flat 60% black dim with a brand-toned gradient wash. Semi-
   transparent so the machine still shows through; full opacity on the span. */
.home .wp-block-cover .wp-block-cover__background.has-background-dim {
	background: linear-gradient(125deg,
		rgba(143, 27, 32, 0.90) 0%,
		rgba(35, 31, 32, 0.82) 52%,
		rgba(20, 20, 43, 0.90) 100%) !important;
	opacity: 1 !important;
}

/* --- Hero text: legibility + measure --- */
.home .wp-block-cover .wp-block-cover__inner-container {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}
.home .wp-block-cover h1 {
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
	margin-bottom: 0.5em;
}
.home .wp-block-cover .wp-block-cover__inner-container > p {
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
	line-height: 1.7;
	max-width: 640px;
	margin: 0 auto 2em;
	color: rgba(255, 255, 255, 0.92) !important;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

/* --- CTA hierarchy --- */
.home .wp-block-cover .wp-block-buttons {
	gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* PRIMARY: brand-gradient, large, prominent (overrides inline #e63946) */
.home .wp-block-cover .wp-block-button:not(.is-style-outline--1) .wp-block-button__link {
	background-color: var(--sv-red) !important;
	background-image: linear-gradient(135deg, var(--sv-red) 0%, var(--sv-red-deep) 100%) !important;
	border: none !important;
	color: #fff !important;
	font-size: 1.05rem;
	padding: 0.95em 2.2em;
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(235, 37, 46, 0.38);
}
.home .wp-block-cover .wp-block-button:not(.is-style-outline--1) .wp-block-button__link:hover {
	background-image: linear-gradient(135deg, var(--sv-red-deep) 0%, var(--sv-red-darker) 100%) !important;
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(235, 37, 46, 0.46);
}

/* SECONDARY: ghost / outline, clearly subordinate (white border, fills on hover) */
.home .wp-block-cover .wp-block-button.is-style-outline--1 .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.04) !important;
	border: 2px solid rgba(255, 255, 255, 0.75) !important;
	color: #fff !important;
	font-size: 1.05rem;
	padding: calc(0.95em - 2px) 2em;
	border-radius: 10px;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.home .wp-block-cover .wp-block-button.is-style-outline--1 .wp-block-button__link:hover {
	background-color: #fff !important;
	color: var(--sv-ink) !important;
	border-color: #fff !important;
	transform: translateY(-3px);
}

/* Reduced motion: keep the lift transforms off the hero CTAs */
.sv-reduce-motion .home .wp-block-cover .wp-block-button__link:hover {
	transform: none;
}

/* ==========================================================================
   STEP 6 — MOBILE MENU: trigger + panel styled to match the new buttons
   The toggle is only visible on mobile (Astra hides it on desktop), and the
   panel selectors are scoped to #ast-hf-mobile-menu, so desktop is untouched.
   ========================================================================== */

/* --- Hamburger trigger: tidy branded button (base red bg comes from Step 1;
       SVG bars are fill:currentColor → already white via the base color) --- */
.main-header-menu-toggle.ast-mobile-menu-trigger-minimal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 11px;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(235, 37, 46, 0.28);
	transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.main-header-menu-toggle.ast-mobile-menu-trigger-minimal .mobile-menu-toggle-icon,
.main-header-menu-toggle.ast-mobile-menu-trigger-minimal .ast-mobile-svg {
	color: #fff;
}
.main-header-menu-toggle.ast-mobile-menu-trigger-minimal:hover {
	background-color: var(--sv-red-deep) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(235, 37, 46, 0.34);
}
/* Open state: pressed/darker so it reads as active. Astra's mobile-header
   trigger does NOT update aria-expanded — on open it adds the `toggled` class
   to this button (style.js initMobileToggle, ~L289). Hook the class, not aria. */
.main-header-menu-toggle.ast-mobile-menu-trigger-minimal.toggled {
	background-color: var(--sv-red-darker) !important;
	box-shadow: 0 3px 8px rgba(235, 37, 46, 0.30);
}
.sv-reduce-motion .main-header-menu-toggle.ast-mobile-menu-trigger-minimal:hover {
	transform: none;
}

/* --- Mobile menu panel: clean rows with dividers, brand hover/active --- */
#ast-hf-mobile-menu {
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
}
#ast-hf-mobile-menu .menu-item > .menu-link,
#ast-hf-mobile-menu .menu-item > a,
#ast-hf-mobile-menu .page_item > a {
	padding: 0.95em 1.1em;
	font-weight: 600;
	color: var(--sv-ink);
	border-bottom: 1px solid #ececee;
	border-left: 3px solid transparent;
	transition: color 0.2s ease, background-color 0.2s ease, border-left-color 0.2s ease;
}
#ast-hf-mobile-menu .menu-item > a:hover,
#ast-hf-mobile-menu .page_item > a:hover,
#ast-hf-mobile-menu .menu-item > .menu-link:hover {
	color: var(--sv-red);
	background-color: rgba(235, 37, 46, 0.06);
	border-left-color: var(--sv-red);
}

/* Active page: brand red with a solid left accent */
#ast-hf-mobile-menu .current-menu-item > a,
#ast-hf-mobile-menu .current_page_item > a,
#ast-hf-mobile-menu .current-menu-item > .menu-link {
	color: var(--sv-red);
	border-left-color: var(--sv-red);
	background-color: rgba(235, 37, 46, 0.05);
}

/* Sub-menu rows: indented and slightly lighter */
#ast-hf-mobile-menu .sub-menu .menu-item > a,
#ast-hf-mobile-menu .children .page_item > a {
	padding-left: 2em;
	font-weight: 500;
	color: var(--sv-ink-soft);
}

/* Sub-menu expand caret toggle picks up brand red on hover */
#ast-hf-mobile-menu .ast-menu-toggle:hover {
	color: var(--sv-red);
}