/*
 * 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, full-height. 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.
 * ======================================================================== */
.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: hidden;
    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) {
    .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 …) */