/* ═══════════════════════════════════════════════════════════════
   move2nanaimo — global.css
   Design tokens, reset, typography, layout primitives.
   Loaded on every page via inc/enqueue.php.
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. Design tokens ──────────────────────────────────────── */

:root {
    /* Brand palette — Island Roots Group coastal teal.
       Deep teal drives primary CTAs and brand; sky blue is the
       secondary accent used for highlights, links, and button fills. */
    --color-primary:        #2D5F6E;   /* Deep teal — main brand colour */
    --color-primary-dark:   #1E4D5C;   /* Darker teal — hover, banners */
    --color-primary-light:  #EEF2F5;   /* Very light blue-grey — page bg */
    --color-accent:         #7BBCC8;   /* Sky blue — secondary brand colour */
    --color-accent-dark:    #5A9BAA;   /* Mid teal — accent hover states */
    --color-accent-light:   #C5DDE3;   /* Pale blue — button fills, highlights */

    /* Text */
    --color-text-dark:      #1a2e33;   /* Near-black with teal undertone */
    --color-text-mid:       #3d5a62;
    --color-text-light:     #7a9ea8;

    /* Surfaces */
    --color-bg-white:       #ffffff;
    --color-bg-cream:       #f7fafb;   /* Clean white with slight blue tint */
    --color-bg-section:     #EEF2F5;   /* Alternating section background */
    --color-border:         #d0dfe4;
    --color-border-strong:  #a8c4cc;

    /* Semantic status */
    --color-success:        #5A9BAA;
    --color-warning:        #c7891f;
    --color-error:          #b53a3a;
    --color-info:           #1a6b9e;

    /* Hero overlay — deep teal, IRG-consistent */
    --color-hero-overlay:   rgba(29, 77, 92, 0.58);

    /* Typography */
    --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-accent:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Type scale (modular, ratio ~1.25) */
    --fs-xs:   0.75rem;    /* 12px */
    --fs-sm:   0.875rem;   /* 14px */
    --fs-base: 1rem;       /* 16px */
    --fs-md:   1.125rem;   /* 18px */
    --fs-lg:   1.375rem;   /* 22px */
    --fs-xl:   1.75rem;    /* 28px */
    --fs-2xl:  2.25rem;    /* 36px */
    --fs-3xl:  3rem;       /* 48px */
    --fs-4xl:  3.75rem;    /* 60px — hero only */

    /* Line heights */
    --lh-tight:   1.15;
    --lh-snug:    1.3;
    --lh-normal:  1.55;
    --lh-relaxed: 1.7;

    /* Letter spacing */
    --ls-tight:   -0.015em;
    --ls-normal:  0;
    --ls-wide:    0.04em;
    --ls-caps:    0.12em;

    /* Spacing scale (4px base) */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  3rem;
    --space-8:  4rem;
    --space-9:  6rem;
    --space-10: 8rem;

    /* Radius */
    --radius-sm:    4px;   /* Buttons, pills */
    --radius-md:    8px;   /* Cards */
    --radius-lg:    12px;  /* Modals, panels */
    --radius-xl:    20px;
    --radius-full:  999px;

    /* Elevation — soft, never harsh */
    --shadow-xs: 0 1px 2px rgba(26, 46, 51, 0.04);
    --shadow-sm: 0 1px 3px rgba(26, 46, 51, 0.06), 0 1px 2px rgba(26, 46, 51, 0.04);
    --shadow-md: 0 4px 12px rgba(26, 46, 51, 0.07), 0 2px 4px rgba(26, 46, 51, 0.04);
    --shadow-lg: 0 12px 32px rgba(26, 46, 51, 0.09), 0 4px 8px rgba(26, 46, 51, 0.04);

    /* Layout */
    --container-sm:     640px;
    --container-md:     800px;
    --container-lg:     1100px;
    --container-xl:     1280px;
    --container-wide:   1440px;
    --container-pad:    clamp(1rem, 4vw, 2rem);

    /* Header */
    --header-height:        72px;
    --header-height-mobile: 64px;

    /* Motion */
    --ease-out:      cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-in-out:   cubic-bezier(0.45, 0, 0.25, 1);
    --duration-fast: 150ms;
    --duration-med:  250ms;
    --duration-slow: 400ms;

    /* Z-index */
    --z-base:      1;
    --z-sticky:    100;
    --z-dropdown:  200;
    --z-header:    500;
    --z-overlay:   800;
    --z-modal:     900;
    --z-toast:     1000;
}


/* ─── 2. Modern reset ───────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-normal);
    color: var(--color-text-dark);
    background-color: var(--color-bg-cream);
    overflow-x: hidden;
}

/* Remove default margins */
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
    margin: 0;
}

ul, ol {
    padding: 0;
    list-style: none;
}

/* Media elements behave predictably */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 0.75rem;
}

/* Form elements inherit typography */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

/* Table sensible defaults */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

/* Links reset (styled per-component) — teal for affordance, since
   --color-primary is now charcoal (indistinguishable from body text). */
a {
    color: var(--color-accent-dark);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

a:hover,
a:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Focus ring — accessible, matches brand */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Selection colour */
::selection {
    background-color: var(--color-accent-light);
    color: var(--color-accent-dark);
}

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


/* ─── 3. Typography ─────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-dark);
}

h1, .h1 {
    font-size: clamp(var(--fs-2xl), 5vw + 1rem, var(--fs-4xl));
    font-weight: 700;
    line-height: var(--lh-tight);
    margin-bottom: var(--space-5);
}

h2, .h2 {
    font-size: clamp(var(--fs-xl), 3vw + 0.75rem, var(--fs-3xl));
    font-weight: 700;
    margin-bottom: var(--space-4);
}

h3, .h3 {
    font-size: clamp(var(--fs-lg), 2vw + 0.5rem, var(--fs-2xl));
    margin-bottom: var(--space-4);
}

h4, .h4 {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-3);
}

h5, .h5 {
    font-size: var(--fs-lg);
    font-family: var(--font-body);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

h6, .h6 {
    font-size: var(--fs-md);
    font-family: var(--font-body);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

p {
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--color-text-dark);
}

p + p {
    margin-top: var(--space-4);
}

.lead {
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text-mid);
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.muted {
    color: var(--color-text-light);
}

.tagline {
    font-family: var(--font-accent);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--color-text-mid);
}

strong, b {
    font-weight: 600;
}

em, i {
    font-style: italic;
}

small {
    font-size: var(--fs-sm);
}

blockquote {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-style: italic;
    line-height: var(--lh-normal);
    color: var(--color-text-dark);
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--color-accent);
    margin: var(--space-6) 0;
}

blockquote cite {
    display: block;
    margin-top: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-style: normal;
    font-weight: 500;
    color: var(--color-text-mid);
}

code, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

code {
    background-color: var(--color-bg-section);
    padding: 0.125em 0.375em;
    border-radius: var(--radius-sm);
}


/* ─── 4. Layout primitives ──────────────────────────────────── */

.container {
    width: 100%;
    max-width: var(--container-lg);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.container--sm   { max-width: var(--container-sm); }
.container--md   { max-width: var(--container-md); }
.container--xl   { max-width: var(--container-xl); }
.container--wide { max-width: var(--container-wide); }
.container--full { max-width: none; }

/* Section vertical rhythm — generous white space by default */
.section {
    padding-top: clamp(var(--space-7), 8vw, var(--space-9));
    padding-bottom: clamp(var(--space-7), 8vw, var(--space-9));
}

.section--tight { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.section--loose { padding-top: var(--space-10); padding-bottom: var(--space-10); }

/* Section backgrounds */
.section--cream   { background-color: var(--color-bg-cream); }
.section--section { background-color: var(--color-bg-section); }
.section--white   { background-color: var(--color-bg-white); }
.section--primary { background-color: var(--color-primary); color: #fff; }
.section--primary h1, .section--primary h2, .section--primary h3,
.section--primary h4, .section--primary h5, .section--primary h6 { color: #fff; }
.section--primary p { color: rgba(255, 255, 255, 0.85); }
.section--accent  { background-color: var(--color-accent); color: #fff; }
.section--accent h1, .section--accent h2, .section--accent h3,
.section--accent h4, .section--accent h5, .section--accent h6 { color: #fff; }
.section--accent-light { background-color: var(--color-accent-light); }

/* Section header (eyebrow + title + subtitle) */
.section-header {
    max-width: var(--container-md);
    margin: 0 auto var(--space-7);
    text-align: center;
}

.section-header--left {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}


/* ─── 5. Grid helpers ───────────────────────────────────────── */

.grid {
    display: grid;
    gap: var(--space-5);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (max-width: 900px) {
    .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}


/* ─── 6. Flex helpers ───────────────────────────────────────── */

.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }


/* ─── 7. Spacing utilities ──────────────────────────────────── */

.mt-0 { margin-top: 0; }        .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: var(--space-1); }  .mb-1 { margin-bottom: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }  .mb-2 { margin-bottom: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }  .mb-3 { margin-bottom: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }  .mb-4 { margin-bottom: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }  .mb-5 { margin-bottom: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }  .mb-6 { margin-bottom: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }  .mb-7 { margin-bottom: var(--space-7); }


/* ─── 8. Text alignment ─────────────────────────────────────── */

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-accent  { color: var(--color-accent); }
.text-white   { color: #fff; }
.text-muted   { color: var(--color-text-light); }


/* ─── 9. Divider ───────────────────────────────────────────── */

.divider {
    border: 0;
    height: 1px;
    background-color: var(--color-border);
    margin: var(--space-6) 0;
}

.divider--accent {
    width: 48px;
    height: 3px;
    background-color: var(--color-accent);
    border-radius: var(--radius-full);
    margin: var(--space-4) auto var(--space-5);
}


/* ─── 10. Accessibility & print ─────────────────────────────── */

[hidden] { display: none !important; }

@media print {
    .site-header,
    .site-footer,
    .lead-capture-bar,
    .cta-section {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    a::after {
        content: ' (' attr(href) ')';
        font-size: 0.85em;
        color: #666;
    }
}