/*
 * CormackCoreWeb 2.0 - Main Stylesheet
 * Author: Charlie - Cormack Advertising
 */

/* ===========================================================================
 * Fonts
 * Headings / emphasis: Eurostile Extended (licensed .otf in /assets/fonts/).
 * Body: Montserrat (Google, enqueued in functions.php)
 * ======================================================================== */
@font-face {
    font-family: 'Eurostile Extd';
    src: url('../fonts/Eurostile Extended-Regular.otf') format('opentype');
    /* Covers 200–400 until a real Light file is supplied (then split this out). */
    font-weight: 200 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Eurostile Extd';
    src: url('../fonts/Eurostile Extended-Regular Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Eurostile Extd';
    src: url('../fonts/Eurostile Extended-Medium.otf') format('opentype');
    /* Covers 600 too (emphasis) — no dedicated SemiBold file supplied. */
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Eurostile Extd';
    src: url('../fonts/Eurostile Extended-Black.otf') format('opentype');
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Eurostile Extd';
    src: url('../fonts/Eurostile Extended-Black Italic.otf') format('opentype');
    font-weight: 800 900;
    font-style: italic;
    font-display: swap;
}

/* ===========================================================================
 * Design tokens
 * ======================================================================== */
:root {
    /* Families */
    --font-heading: 'Eurostile Extd', sans-serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    /* Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;

    /* Heading convention (all sections): un-spanned = light, <span> emphasis = semibold */
    --fw-heading: 200;   /* extra-light — plain heading text (was 300) */
    --fw-emphasis: 600;  /* semibold — <span> emphasis words */
    --fw-button: 400;    /* CTA buttons */

    /* Type scale — ALL fluid (clamp: min mobile, vw scaling, max = design px).
       Convention going forward: never hardcode font-size px; use these tokens. */
    --fs-hero: clamp(28px, 6.5vw, 54px);    /* hero headline        */
    --fs-h2: clamp(24px, 4.2vw, 39px);      /* section heading      */
    --fs-h3: clamp(20px, 2.6vw, 27px);      /* tile heading         */
    --fs-h4: clamp(17px, 2vw, 21px);        /* sub-heading          */
    --fs-lead: clamp(16px, 2vw, 19px);      /* lead / feature copy  */
    --fs-body-lg: clamp(15px, 1.8vw, 17px);
    --fs-body: clamp(15px, 1.6vw, 21px);    /* tile body copy (21px)*/
    --fs-body-sm: clamp(14px, 1.5vw, 15px);
    --fs-label: clamp(13px, 1.4vw, 14px);
    --fs-micro: clamp(12px, 1.2vw, 13px);
    --fs-nav: clamp(20px, 3.2vw, 30px);     /* full-screen nav links */

    /* Line heights */
    --lh-tight: 1.1;     /* ~109–112% headings    */
    --lh-body: 1.395;    /* 139.5% body copy      */

    /* Border-radius scale — fluid; never hardcode radius px, use these. */
    --radius-sm: clamp(8px, 1.2vw, 12px);
    --radius-md: clamp(18px, 3vw, 32px);
    --radius-lg: clamp(28px, 4.5vw, 50px);   /* image frames          */
    --radius-xl: clamp(34px, 5.5vw, 63px);   /* large tiles / cards   */
    --radius-pill: 999px;

    /* Spacing — responsive edge padding (100px desktop, scales down on small screens) */
    --space-edge: clamp(20px, 6vw, 100px);
    --space-topbar: clamp(20px, 3vw, 50px);   /* hero top-bar top/bottom inset (50px) */

    /* Hero top-bar row height (= the glass pill button, the tallest element).
       Logo and Logicor pill are sized to match. Drives nav-button size + centring.
       Fluid: scales smoothly with viewport, no breakpoint snap. */
    --topbar-h: clamp(40px, 5vw, 48px);

    /* Accent colours */
    --color-green: #00FF95;          /* CTA / brand green     */
    --color-glass: #00FF9433;        /* hamburger glass tint  */

    /* Colours */
    --color-navy: #001A32;   /* primary text     */
    --color-blue: #008DFF;   /* accent           */
    --color-white: #FFFFFF;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Text selection highlight — brand green */
::selection {
    background: var(--color-green);
    color: var(--color-navy);
}
::-moz-selection {
    background: var(--color-green);
    color: var(--color-navy);
}

body {
    font-family: var(--font-body);
    font-optical-sizing: auto;
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-navy);
}

/* Headings — Eurostile Extd, uppercase, navy */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    text-transform: uppercase;
    color: var(--color-navy);
}

h1 { font-size: var(--fs-h2); }   /* default H1 = section scale; hero overrides below */
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-heading); }   /* 200 — 100 lighter than regular */
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-body-lg); }
h6 { font-size: var(--fs-body-sm); }

p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* Hero headline is fully styled in custom.css (.hero-title) — see there for
   the fluid size + proportional line-height. */

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ===========================================================================
 * Stacking sections
 * Each .section is sticky at the top of the viewport. Because later sections
 * come later in the DOM, they scroll up and cover the pinned earlier ones
 * (card-stack reveal). No JS, no scroll-snap. The #contact block is a normal
 * (non-sticky) block, so it scrolls naturally after the last section.
 *
 * One-screen lock vs. scroll-through:
 *   - The hero is clamped to exactly one screen (see .hero in custom.css) — it
 *     never grows or scrolls internally.
 *   - Every other section fills at least one screen (min-height) but is allowed
 *     to grow taller when its content needs it. A sticky section taller than the
 *     viewport stays pinned at top:0 and scrolls through its own overflow before
 *     its bottom edge reaches the viewport bottom and the next section pulls up.
 *     So extra content reads naturally before the card-stack advances.
 * ======================================================================== */
.sections {
    position: relative;
}

.section {
    position: sticky;
    top: 0;
    min-height: 100vh;          /* always fills the screen */
    min-height: 100svh;         /* respects mobile browser UI bars */
    display: flex;
    align-items: center;
    /* overflow stays visible so content past the first screen can scroll
       through rather than being clipped. Sections that need to clip an
       oversized image do so on the image's own wrapper, not here. */
    overflow: visible;
    background: var(--color-white); /* opaque so it fully covers the one below */
}

/* ---------------------------------------------------------------------------
 * Mobile: drop the card-stack. Sections are no longer pinned or clamped to one
 * screen — they grow to fit their content and scroll normally, so nothing gets
 * clipped (e.g. the last row of accordion labels). Fit-to-one-screen is a
 * desktop-only behaviour.
 * ------------------------------------------------------------------------ */
@media (max-width: 760px) {
    /* Guard against any stray element forcing a horizontal scrollbar.
       Safe here because sticky stacking is already disabled on mobile
       (overflow on an ancestor would otherwise break position:sticky). */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    .section {
        position: relative;     /* un-pin: no sticky stacking */
        top: auto;
        min-height: 0;          /* let content set the height */
        overflow: visible;      /* never clip overflowing content */
        align-items: stretch;   /* tall content starts at the top, isn't centre-clipped */
    }
}

/* Hero section component styles live in custom.css (.hero …) */