/**
 * iTech Store Global Styles
 * Based on the itech-design-system
 */

/* Design tokens.
   -------------------------------------------------------------------------
   Visual language v2 (issue #37) is the expand half of an expand-contract:
   the v2 tokens are declared BESIDE the v1 ones, and the v1 ones stay until
   every template has migrated. They are deleted in the contract ticket (#50).

   These properties, tailwind.config.js and theme.json must agree. Radii,
   shadows, the section rhythm and the container widths live HERE and the
   Tailwind tokens reference them, so each value is written once and every
   utility that uses it reads the same property — no more properties declared
   in this file while the real numbers sit in the Tailwind config. Colours and
   the type scale are literal in the config instead, because Tailwind needs the
   literal to build the alpha-modifier and clamp() forms. */
:root {
    /* --- v1, retired in #50 ------------------------------------------- */
    --deep-night: #0A0A0F;
    --electric: #3D5BFF;
    --snow: #F5F5F2;
    --graphite: #5A5A66;
    --mist: #F2F2EE;
    --sunset: #FF6A3D;

    --radius-card: 28px;
    --radius-tile: 36px;

    /* --- v2: Paper, one ramp for marketing AND store ------------------ */
    /* Hue-free. The ramp was specified warm-neutral; judged on screen against
       the blue in #37 the warmth was rejected, so each step keeps the
       lightness it was specified at and drops its hue. Every contrast figure
       in the specification survives the swap to two decimals. */
    --paper-ink: #191919;
    --paper-secondary: #676767;
    --paper-muted: #A4A4A4;
    --paper-border: #DEDEDE;
    --paper-border-subtle: #ECECEC;
    --paper-tint: #F2F2F2;
    --paper-subtle: #F5F5F5;
    --paper-canvas: #FAFAFA;
    --paper-surface: #FFFFFF;

    /* --- v2: one accent ---------------------------------------------- */
    /* ~4.9:1 on white — it passes AA for body copy with no margin to
       spare, so it is never used for small secondary text. */
    --accent: #155DFC;
    --accent-hover: #1351DB;
    --accent-subtle: #EFF6FF;

    /* --- v2: state feedback only, not brand colours ------------------- */
    --success: #10B981;
    --danger: #EF4444;

    /* --- v2: four radius steps and no fifth --------------------------- */
    --radius-sm: 8px;    /* inputs, badges, small controls */
    --radius-md: 12px;   /* buttons, image wells */
    --radius-lg: 20px;   /* cards, bento tiles */
    --radius-pill: 999px; /* chips, filter tags, avatars only */

    /* --- v2: two shadows, both neutral -------------------------------- */
    /* No shadow on this site carries a colour: the tint is the ink, and the
       ink is rgb(25, 25, 25) now that the ramp is hue-free. */
    --shadow-card: 0 1px 3px rgba(25, 25, 25, 0.04), 0 8px 24px rgba(25, 25, 25, 0.06);
    --shadow-card-hover: 0 2px 4px rgba(25, 25, 25, 0.05), 0 12px 32px rgba(25, 25, 25, 0.09);
    --shadow-overlay: 0 4px 12px rgba(25, 25, 25, 0.06), 0 24px 64px rgba(25, 25, 25, 0.14);

    /* --- v2: one section rhythm, two containers ----------------------- */
    /* 64px is the mobile value; the media query below lifts it to 96px on
       desktop. One token, two numbers — which is why the rhythm is a
       property rather than a number in the Tailwind config. */
    --section-y: 64px;
    --container-content: 1200px;
    --container-prose: 720px; /* ~75 characters at 17px */

    --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Matches Tailwind's `md` breakpoint, so `py-section` and a `md:` utility
   change at the same place. */
@media (min-width: 768px) {
    :root {
        --section-y: 96px;
    }
}

body {
    background-color: var(--deep-night);
    color: var(--snow);
    font-family: 'Switzer', sans-serif;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    /* Every weight the site asks for has its own file, so there is nothing
       legitimate left for the browser to fake. This makes that a guarantee
       rather than a convention: if a stray declaration ever asks for a weight
       with no cut behind it, the nearest real cut renders instead of a
       smeared synthetic one. Weight only — synthetic italic stays available,
       because none of the three faces ships an italic file. */
    font-synthesis-weight: none;
}

/* Base element resets */
ins {
    text-decoration: none;
}

/* Tailwind's preflight sets `b, strong { font-weight: bolder }`. `bolder` is
   RELATIVE, not absolute: inside a parent already at 700 it computes to 900 —
   a weight none of these faces ships. It surfaced on the checkout order total,
   a <strong> inside a 700 table row. Pinning both to the real bold cut keeps
   every computed weight on the ladder the font files actually cover. */
b,
strong {
    font-weight: 700;
}

/* Typography Utility.
   Kept in step with the `display-xl` Tailwind token by hand — it is the same
   step of the same scale, and two disagreeing definitions of display-xl is
   exactly the drift v2 is closing. Nothing in the theme uses this class today
   (the templates use `text-display-xl`), so the v2 numbers land here without
   moving anything on screen. */
.display-xl {
    font-size: clamp(48px, 8vw, 112px);
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.text-gradient-silver {
    background: linear-gradient(170.948deg, #FFFFFF 0%, #E2E8F0 50%, #45556C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-premium {
    /* Light-canvas headline gradient: the 0% stop was #90A1B9 (2.63:1 on
       white), failing WCAG AA even for large text. #64748B holds ~4.7:1. */
    background: linear-gradient(90deg, #64748B 0%, #0F172B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Custom Utilities for iTech */
/* The display face ships one cut only, so the utility carries the weight with
   it — asking for Cabinet Grotesk at any other weight has no file behind it. */
.font-display { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700; }
.font-text-medium { font-family: 'Switzer', sans-serif; font-weight: 500; }

.glass-dark {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.shadow-premium {
    box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, 0.25);
}

.text-gradient-services {
    background: linear-gradient(90deg, #155DFC 0%, #615FFF 50%, #90A1B9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Descender fix for every clipped-fill headline ------------------------------
   The gradient headlines above (and the ad-hoc Tailwind `bg-clip-text` gradient
   in section-capas-intro) paint their fill with background-clip: text while
   sitting on display headings with a very tight line-height (.text-display-* and
   .display-xl run line-height: .85). That combination clips the last line's
   descenders — g, p, y, ç, the hyphen — because the glyphs extend below the
   element's paint box, so the gradient never reaches them and the tails read as
   sliced off. Reserving ~0.2em of padding-bottom extends the paint box just past
   the descenders (~0.18em of overflow at these sizes) so the fill covers the
   full glyph. Any new clip-to-text class MUST be added to this list. */
.text-gradient-silver,
.text-gradient-premium,
.text-gradient-services,
.bg-clip-text {
    padding-bottom: 0.2em;
}

/* Interaction utilities */
.transition-premium {
    transition: all 600ms var(--ease-premium);
}

.hover-scale:hover {
    transform: translateY(-6px);
}

/* Hero animations (moved here from the former hero block) */
@keyframes drift-slow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, 20px) scale(1.1); }
}

@keyframes drift-slower {
    0%, 100% { transform: translate(0, 0) scale(1.1); }
    50% { transform: translate(-40px, -30px) scale(1); }
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-drift-slow {
    animation: drift-slow 15s infinite alternate var(--ease-premium);
}

.animate-drift-slower {
    animation: drift-slower 20s infinite alternate var(--ease-premium);
}

.animate-fade-in-up {
    animation: fade-in-up 800ms forwards var(--ease-premium);
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* Mobile full-screen overlay nav */
.itech-nav-overlay {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms var(--ease-premium), visibility 0s linear 400ms;
}

.itech-nav-overlay.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 400ms var(--ease-premium), visibility 0s linear 0s;
}

.itech-overlay-link {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 400ms var(--ease-premium), transform 400ms var(--ease-premium);
}

.itech-nav-overlay.is-open .itech-overlay-link {
    opacity: 1;
    transform: translateY(0);
}

/* Search overlay: a Spotlight-style command palette. Same open/close mechanics
   as the nav overlay above (distinct trigger set: desktop + mobile-overlay
   search buttons), but instead of a flat backdrop the page frosts through, and
   the palette card zooms in a touch — mirroring the macOS/iOS search primitive
   iTech's own customers use on the devices sold here. */
.itech-search-overlay {
    background: rgba(10, 10, 15, 0.7);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
    backdrop-filter: blur(20px) saturate(1.1);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms var(--ease-premium), visibility 0s linear 400ms;
}

.itech-search-overlay.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 400ms var(--ease-premium), visibility 0s linear 0s;
}

/* Palette card: settles in from slightly above with a subtle scale. */
.itech-search-card {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
    transition: opacity 420ms var(--ease-premium), transform 420ms var(--ease-premium);
}

.itech-search-overlay.is-open .itech-search-card {
    opacity: 1;
    transform: none;
}

/* Input frame — glass at rest, an Electric hairline glow on focus-within. Kept
   subtle so the crisp 2px keyboard focus-ring on the input stays the primary
   focus signal, not a competing halo. */
.itech-search-field {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
    transition: border-color 240ms var(--ease-premium), background-color 240ms var(--ease-premium);
}

.itech-search-field:focus-within {
    border-color: rgba(61, 91, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
}

.itech-search-field-icon {
    color: rgba(245, 245, 242, 0.55);
    transition: color 240ms var(--ease-premium);
}

.itech-search-field:focus-within .itech-search-field-icon {
    color: var(--electric);
}

/* Mono micro-labels + kbd hint: the brand's utility face doing structural work. */
.itech-search-eyebrow {
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(245, 245, 242, 0.4);
}

.itech-kbd {
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1;
    color: rgba(245, 245, 242, 0.5);
    padding: 4px 8px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
}

/* Popular-search chips — each submits the same ?s= search the form does. */
.itech-search-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(245, 245, 242, 0.85);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 200ms var(--ease-premium), border-color 200ms var(--ease-premium), background-color 200ms var(--ease-premium), transform 200ms var(--ease-premium);
}

.itech-search-chip:hover {
    color: #fff;
    border-color: rgba(61, 91, 255, 0.7);
    background: rgba(61, 91, 255, 0.14);
    transform: translateY(-1px);
}

/* "Explorar" jump links to real theme pages. */
.itech-search-jump {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    color: var(--snow);
    text-decoration: none;
    transition: border-color 200ms var(--ease-premium), background-color 200ms var(--ease-premium);
}

.itech-search-jump-label {
    font-weight: 500;
    font-size: 15px;
}

.itech-search-jump-arrow {
    color: rgba(245, 245, 242, 0.35);
    transition: color 200ms var(--ease-premium), transform 200ms var(--ease-premium);
}

.itech-search-jump:hover {
    border-color: rgba(61, 91, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

.itech-search-jump:hover .itech-search-jump-arrow {
    color: var(--electric);
    transform: translateX(3px);
}

#itech-overlay-menu > li:nth-child(1) .itech-overlay-link { transition-delay: 80ms; }
#itech-overlay-menu > li:nth-child(2) .itech-overlay-link { transition-delay: 140ms; }
#itech-overlay-menu > li:nth-child(3) .itech-overlay-link { transition-delay: 200ms; }
#itech-overlay-menu > li:nth-child(4) .itech-overlay-link { transition-delay: 260ms; }
#itech-overlay-menu > li:nth-child(5) .itech-overlay-link { transition-delay: 320ms; }
#itech-overlay-menu > li:nth-child(6) .itech-overlay-link { transition-delay: 380ms; }
#itech-overlay-menu > li:nth-child(7) .itech-overlay-link { transition-delay: 440ms; }
#itech-overlay-menu > li:nth-child(8) .itech-overlay-link { transition-delay: 500ms; }

/* Global 2px Electric focus ring — :focus-visible keeps it a keyboard-only
   affordance. !important because component styles elsewhere (WooCommerce
   form-field resets, Tailwind's focus:outline-none utility) set `outline:
   none` without !important; this must win everywhere so no interactive
   element on the site is ever left without a visible focus state. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.itech-focus-ring:focus-visible {
    outline: 2px solid var(--electric) !important;
    outline-offset: 2px !important;
}

/* Scroll-adaptive navbar pill: main.js (IntersectionObserver) toggles the
   --dark modifier as sections carrying data-canvas cross the pill, so the
   glass always contrasts with what's behind it. Light is the default/no-JS
   fallback since the pill starts over the dark hero canvas. */
.itech-navbar-pill {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
}

.itech-navbar-pill--dark {
    background: rgba(20, 20, 28, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
}

.itech-navbar-pill--dark .itech-navbar-logo-text {
    color: var(--snow);
}

/* Site-wide reduced-motion guard: collapses every CSS transition/animation
   (Tailwind utilities, WooCommerce transitions, the fluid-type sweep, the
   hero/gobear-hero "orb" drift, the overlay/navbar animations above) to
   near-zero duration, then explicitly zeroes the transform on the specific
   decorative/looping animations so they settle at their resting frame
   instead of freezing mid-drift or mid-hover. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .itech-nav-overlay,
    .itech-nav-overlay .itech-overlay-link,
    .itech-search-overlay,
    .itech-search-card,
    .itech-search-chip:hover,
    .itech-search-jump:hover .itech-search-jump-arrow,
    .itech-navbar-pill,
    .animate-drift-slow,
    .animate-drift-slower,
    .animate-fade-in-up,
    .hover-scale:hover {
        transform: none !important;
    }

    /* Reveals are DISABLED here, not merely shortened (issue #40). The rule
       above collapses the animation to 0.01ms, which relies on `forwards`
       carrying the element from `opacity-0` to its resting state — a reveal
       that is still technically running. This removes the animation outright
       and pins the resting state, so a reduced-motion visitor is never handed
       an invisible headline if the animation does not run at all. */
    .animate-fade-in-up {
        animation: none !important;
        opacity: 1 !important;
    }
}