/*
Theme Name: AutoBlasting
Theme URI: https://autoblasting.dk
Author: AutoBlasting (powered by Optima Force)
Author URI: https://autoblasting.dk
Description: AutoBlasting.dk - Dry Ice Blasting, sandblæsning og laserrens af biler og autodele. Specialiseret tema med integreret bookingsystem, cryo-industrial designsystem og fuld SEO-stack. Powered by Optima Force ApS.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autoblasting
Tags: custom-logo, custom-menu, featured-images, theme-options, translation-ready, booking, cars
*/

/* ==========================================================================
   AutoBlasting — Cryo-Industrial Design System
   Design tokens live here. Component styles are loaded from
   /assets/css/ via @import statements at the bottom.
   ========================================================================== */

:root {
    /* ----- Brand: Ice / Cyan ----- */
    --ab-ice-50:   #EAFBFD;
    --ab-ice-100:  #C6F2F7;
    --ab-ice-200:  #9DE7EF;
    --ab-ice-300:  #5DD9E6;
    --ab-ice-400:  #1FC6D7;
    --ab-ice-500:  #00C2D4;   /* primary brand */
    --ab-ice-600:  #009AAD;
    --ab-ice-700:  #006F7E;
    --ab-ice-800:  #044855;
    --ab-ice-900:  #0A2A33;

    /* ----- Base: Petrol / Deep navy ----- */
    --ab-petrol-50:  #ECF1F4;
    --ab-petrol-100: #C9D5DC;
    --ab-petrol-200: #8AA0AC;
    --ab-petrol-300: #4A6571;
    --ab-petrol-400: #1F3744;
    --ab-petrol-500: #0F2632;
    --ab-petrol-600: #0A1E2A;   /* base / dark surface */
    --ab-petrol-700: #061620;
    --ab-petrol-800: #030D14;
    --ab-petrol-900: #01060A;

    /* ----- Accent: Molten Orange (used sparingly) ----- */
    --ab-orange-300: #FF9F66;
    --ab-orange-400: #FF7E33;
    --ab-orange-500: #FF6A1A;   /* primary accent */
    --ab-orange-600: #E2520B;
    --ab-orange-700: #B53D02;

    /* Bright cyan accent — used on eyebrows, Book nu CTAs, footer icons + dividers, topbar phone */
    --ab-ice-brand:      #6ECCDC;
    --ab-ice-brand-dark: #45B7C9;

    /* ----- Neutrals ----- */
    --ab-white:      #DFEDF3;
    --ab-paper:      #F7F9FA;     /* soft off-white surface */
    --ab-frost:      #F0F6F8;     /* slightly cooler off-white */
    --ab-line:       #E3EAEE;
    --ab-line-strong:#C9D5DC;
    --ab-ink-900:    #06141C;
    --ab-ink-700:    #1B2A33;
    --ab-ink-500:    #3F5460;
    --ab-ink-400:    #5C7280;
    --ab-ink-300:    #8FA3AE;

    /* ----- Semantic ----- */
    --ab-success:   #16B57F;
    --ab-warning:   #F2A93B;
    --ab-danger:    #E54848;
    --ab-info:      var(--ab-ice-500);

    /* ----- Typography ----- */
    --ab-font-display: 'Anton', 'Impact', 'Arial Black', sans-serif;
    --ab-font-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;
    /* Previously JetBrains Mono — now mapped to body sans for a calmer feel.
       Kept as a separate variable so we can swap it back in one place if needed. */
    --ab-font-mono:    'Manrope', 'Segoe UI', system-ui, sans-serif;

    /* Modular type scale (clamp-based) */
    --ab-h1: clamp(2.5rem, 5.5vw, 5rem);
    --ab-h2: clamp(2rem, 4vw, 3.5rem);
    --ab-h3: clamp(1.5rem, 2.6vw, 2.25rem);
    --ab-h4: clamp(1.25rem, 1.8vw, 1.5rem);
    --ab-h5: 1.125rem;
    --ab-h6: 1rem;

    /* ----- Spatial — brand is sharp-edged, no border-radius anywhere ----- */
    --ab-radius-sm: 0;
    --ab-radius-md: 0;
    --ab-radius-lg: 0;
    --ab-radius-pill: 0;

    --ab-section-py: clamp(64px, 9vw, 120px);
    --ab-container:  1240px;
    --ab-gutter:     clamp(16px, 3vw, 32px);

    /* ----- Motion ----- */
    --ab-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ab-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ab-dur-fast:    160ms;
    --ab-dur:         280ms;
    --ab-dur-slow:    520ms;

    /* ----- Shadows — kept extremely subtle; no glow effects ----- */
    --ab-shadow-sm:  0 1px 2px rgba(10, 30, 42, 0.04);
    --ab-shadow:     0 2px 10px rgba(10, 30, 42, 0.06);
    --ab-shadow-lg:  0 10px 30px rgba(10, 30, 42, 0.10);
    --ab-shadow-glow: none;

    /* ----- Signature gradients ----- */
    --ab-ice-beam:    linear-gradient(125deg, var(--ab-ice-700) 0%, var(--ab-ice-500) 38%, var(--ab-ice-200) 72%, var(--ab-frost) 100%);
    --ab-frost-glass: linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.30) 100%);
    --ab-cryo-bg:     radial-gradient(120% 80% at 10% 0%, rgba(0,194,212,0.20) 0%, rgba(10,30,42,0) 60%),
                      radial-gradient(80% 60% at 90% 100%, rgba(255,106,26,0.10) 0%, rgba(10,30,42,0) 70%),
                      var(--ab-petrol-600);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: var(--ab-font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ab-ink-700);
    background: var(--ab-white);
    overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--ab-dur) var(--ab-ease); }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, textarea, select { font: inherit; }
ul, ol { list-style: none; }

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ab-font-display);
    font-weight: 400; /* Anton is already heavy */
    line-height: 1.05;
    letter-spacing: -0.005em;
    color: var(--ab-ink-900);
    text-transform: uppercase;
}
h1 { font-size: var(--ab-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--ab-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--ab-h3); letter-spacing: -0.01em; }
h4 { font-size: var(--ab-h4); }
h5 { font-size: var(--ab-h5); letter-spacing: 0.02em; }
h6 { font-size: var(--ab-h6); letter-spacing: 0.04em; }

p { margin: 0 0 1em; }
strong, b { font-weight: 500; }
/* Anton (display font) only ships in weight 400 — synthesised bold looks broken.
   Reset strong inside known display-font contexts so it inherits normal weight. */
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
.ab-hero__title strong,
.ab-hero__spec strong,
.ab-contact-info__value,
strong.ab-contact-info__value,
.ab-cart-price,
.ab-cart__row strong { font-weight: 400; }
em, i { font-style: italic; }

/* Cyan filled pill — used as section eyebrow and card tagline */
.ab-eyebrow {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 7px 12px;
    background: var(--ab-ice-brand);
    color: var(--ab-petrol-700);
    font-family: var(--ab-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border-radius: 0;
    line-height: 1;
    white-space: nowrap;
    /* Cross-axis alignment is inherited from parent — so eyebrow follows
       the parent's align-items (flex) or text-align (block) automatically:
         - default section-head (left-aligned) → eyebrow left
         - .ab-section-head--center → eyebrow centered
         - .ab-section-head--right  → eyebrow right
    */
}
/* .is-light kept as a no-op — pill is self-colored, looks the same on dark + light backgrounds */
.ab-eyebrow.is-light { background: var(--ab-ice-brand); color: var(--ab-petrol-700); }

.ab-mono { font-family: var(--ab-font-mono); letter-spacing: 0.04em; }

.ab-lead {
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    color: var(--ab-ink-500);
    line-height: 1.55;
    max-width: 56ch;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.ab-container {
    width: 100%;
    max-width: var(--ab-container);
    margin: 0 auto;
    padding-left: var(--ab-gutter);
    padding-right: var(--ab-gutter);
}
.ab-section { padding: var(--ab-section-py) 0; position: relative; }
.ab-section--dark { background: var(--ab-petrol-600); color: var(--ab-ice-100); }
.ab-section--dark h1, .ab-section--dark h2, .ab-section--dark h3, .ab-section--dark h4 { color: var(--ab-white); }
.ab-section--frost { background: var(--ab-frost); }
.ab-section--cryo { background: var(--ab-cryo-bg); color: var(--ab-ice-100); }
.ab-section--cryo h1, .ab-section--cryo h2, .ab-section--cryo h3, .ab-section--cryo h4,
.ab-hero h1, .ab-hero h2, .ab-hero h3,
.ab-page-hero h1, .ab-page-hero h2, .ab-page-hero h3,
.ab-404 h1, .ab-404 h2, .ab-book h1, .ab-book h2 { color: var(--ab-white); }

.ab-grid { display: grid; gap: var(--ab-gutter); }
.ab-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ab-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ab-grid--4 { grid-template-columns: repeat(4, 1fr); }

.ab-section-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 720px;
    margin-bottom: clamp(40px, 5vw, 72px);
}
.ab-section-head--center { text-align: center; margin-left: auto; margin-right: auto; align-items: center; }

/* ==========================================================================
   Buttons — flat, smooth hover transitions with subtle lift
   ========================================================================== */
.ab-btn {
    --bg: var(--ab-ice-500);
    --fg: var(--ab-white);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 30px 16px 32px;
    font-family: var(--ab-font-display);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: var(--fg);
    background: var(--bg);
    border-radius: var(--ab-radius-md);
    /* Material-style easing — gives a smooth, perceptible transition (not snappy) */
    transition: background-color 380ms cubic-bezier(0.4, 0, 0.2, 1),
                color           380ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color    380ms cubic-bezier(0.4, 0, 0.2, 1),
                transform       380ms cubic-bezier(0.4, 0, 0.2, 1);
    isolation: isolate;
    border: 0;
    will-change: transform, background-color;
}
.ab-btn:hover  { background: var(--ab-ice-600); color: var(--fg); transform: translateY(-2px); }
.ab-btn:active { transform: translateY(0); transition-duration: 120ms; }

.ab-btn--accent { --bg: var(--ab-ice-brand); --fg: var(--ab-petrol-700); }
.ab-btn--accent:hover { background: var(--ab-ice-brand-dark); color: var(--ab-petrol-700); }

.ab-btn--ghost {
    --bg: transparent;
    --fg: var(--ab-ink-900);
    border: 1.5px solid var(--ab-ink-900);
    padding-top: 14.5px; padding-bottom: 14.5px;
}
.ab-btn--ghost:hover { background: var(--ab-ink-900); color: var(--ab-white); }

/* Ghost button on dark backgrounds — including hero & page-hero */
.ab-section--dark .ab-btn--ghost,
.ab-section--cryo .ab-btn--ghost,
.ab-hero .ab-btn--ghost,
.ab-page-hero .ab-btn--ghost,
.ab-book .ab-btn--ghost {
    --fg: var(--ab-white);
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ab-section--dark .ab-btn--ghost:hover,
.ab-section--cryo .ab-btn--ghost:hover,
.ab-hero .ab-btn--ghost:hover,
.ab-page-hero .ab-btn--ghost:hover,
.ab-book .ab-btn--ghost:hover {
    background: var(--ab-white);
    color: var(--ab-petrol-600);
    border-color: var(--ab-white);
}

.ab-btn--lg { padding: 20px 36px 20px 40px; font-size: 1.05rem; }
.ab-btn--lg.ab-btn--ghost { padding-top: 18.5px; padding-bottom: 18.5px; }
.ab-btn--sm { padding: 12px 22px; font-size: 0.85rem; }
.ab-btn--sm.ab-btn--ghost { padding-top: 10.5px; padding-bottom: 10.5px; }

.ab-btn .ab-btn-arrow {
    width: 14px; height: 2px; background: currentColor; position: relative;
    flex-shrink: 0;
}
.ab-btn .ab-btn-arrow::after {
    content: ''; position: absolute; right: 0; top: -3px;
    width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-top: 2px solid currentColor;
    transform: rotate(45deg);
}

/* ==========================================================================
   The signature orange slash — used as logo connector + as decoration
   ========================================================================== */
.ab-slash {
    display: inline-block;
    width: 14px; height: 3px;
    background: var(--ab-orange-500);
    transform: skewX(-28deg);
    vertical-align: middle;
}

/* ==========================================================================
   Spec badge — clean text pills with display-font value + body-font label.
   No prefix dot. No glow.
   ========================================================================== */
.ab-readout {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(10, 30, 42, 0.55);
    color: var(--ab-ice-200);
    font-family: var(--ab-font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border-radius: var(--ab-radius-sm);
    border: 1px solid rgba(255,255,255,0.10);
    line-height: 1.1;
    white-space: nowrap;
}
.ab-readout strong {
    color: var(--ab-white);
    font-family: var(--ab-font-display);
    font-size: 1rem;
    letter-spacing: 0.02em;
    font-weight: 400;
}
.ab-readout sup {
    color: var(--ab-orange-400);
    font-size: 0.85em;
    margin-left: 1px;
    line-height: 0;
    vertical-align: super;
}
.ab-readout--orange {
    background: rgba(255,106,26,0.10);
    border-color: rgba(255,106,26,0.40);
}
.ab-readout--orange strong { color: var(--ab-orange-400); }
.ab-readout--light {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
    color: var(--ab-ice-100);
}

/* ==========================================================================
   Accessibility utilities
   ========================================================================== */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; top: -100px; left: 0;
    background: var(--ab-orange-500); color: white; padding: 12px 18px; z-index: 100000;
}
.skip-link:focus { top: 0; }

:focus-visible {
    outline: 2px solid var(--ab-ice-500);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
}

/* Component stylesheets are enqueued separately in functions.php. */