/* ────────────────────────────────────────────────────────────
   RASC GA 2027 — shared site styles
   Visual: "Limestone City"
     Background: pale stone-grey (#F1ECE3)
     Text:       charcoal (#1F1F1F)
     Primary:    Lake Ontario blue (#0B4F6C)
     Secondary:  copper (#B87333)
     Headlines:  Playfair Display
     Body:       Inter
   Applied to every page except registration.html (which has its own
   registration.css for form-specific layout). The same tokens appear
   in registration.css — keep them in sync.
   ──────────────────────────────────────────────────────────── */

:root {
    --stone:        #F1ECE3;
    --stone-dark:   #E5DECF;
    --paper:        #FFFFFF;
    --ink:          #1F1F1F;
    --ink-muted:    #555555;
    --rule:         #C9C2B5;
    --lake:         #0B4F6C;
    --lake-dark:    #08374C;
    --copper:       #B87333;
    --copper-dark:  #8E5824;
    --shadow:       0 1px 2px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);

    --max-content:  880px;
    --gap-small:    12px;
    --gap-med:      24px;
    --gap-large:    48px;

    --nav-height:   64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--stone);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--lake); text-decoration: none; }
a:hover { color: var(--copper); }

h1, h2, h3, h4 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--lake);
    margin: 0 0 var(--gap-small);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1 { font-size: 2.4em; font-weight: 700; }
h2 { font-size: 1.6em; margin-top: var(--gap-large); }
h3 { font-size: 1.2em; margin-top: var(--gap-med); color: var(--ink); }
h4 { font-size: 1.0em; margin-top: var(--gap-med); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

p, ul, ol { margin: 0 0 var(--gap-small); }
strong { color: var(--ink); font-weight: 600; }

ul, ol { padding-left: 22px; }
li { margin-bottom: 4px; }

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

/* ──────────────────────────────────────────────────
   Navigation (sticky top bar + mobile hamburger)
   ────────────────────────────────────────────────── */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.site-nav .nav-inner {
    max-width: var(--max-content);
    margin: 0 auto;
    padding: 0 20px;
    height: var(--nav-height);
    display: flex;
    align-items: center;
}

.site-nav .brand {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.15em;
    color: var(--lake);
    letter-spacing: -0.01em;
}

.site-nav .brand .year { color: var(--copper); }

.site-nav .nav-links {
    flex: 1;
    display: flex;
    gap: 22px;
    list-style: none;
    margin: 0 0 0 20px;
    padding: 0;
    align-items: center;
}

/* Centre the regular nav items between the brand (left) and the
   Register button (right). Auto margins on the first regular item
   and on the CTA take all the free space symmetrically. */
.site-nav .nav-links > .nav-item:first-child { margin-left: auto; }
.site-nav .nav-links > .nav-item-cta { margin-left: auto; }

.site-nav .nav-item { position: relative; }

.site-nav .nav-item > a,
.site-nav .nav-item > .nav-parent {
    color: var(--ink);
    font-size: 0.93em;
    font-weight: 500;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
    transition: color 0.12s, border-color 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

.site-nav .nav-item > .nav-parent .caret {
    font-size: 0.7em;
    color: var(--ink-muted);
    transition: transform 0.15s;
}

.site-nav .nav-item > a:hover,
.site-nav .nav-item > .nav-parent:hover {
    color: var(--lake);
}

.site-nav .nav-item > a.current,
.site-nav .nav-item.current-branch > .nav-parent {
    color: var(--lake);
    border-bottom-color: var(--copper);
}

.site-nav .nav-item > a.cta {
    background: var(--copper);
    color: var(--paper);
    padding: 8px 16px;
    border-radius: 6px;
    border-bottom: none;
    margin-left: 8px;
}
.site-nav .nav-item > a.cta:hover { background: var(--copper-dark); color: var(--paper); border-bottom-color: transparent; }

/* ── Submenu (desktop hover) ── */
.site-nav .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: -10px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: var(--shadow);
    list-style: none;
    padding: 6px 0;
    margin: 0;
    min-width: 230px;
    z-index: 20;
}

/* Invisible bridge — fills the visual gap so the cursor stays inside
   the .nav-item hover zone as it moves from the parent down to the
   first submenu item. Without it, the dropdown closes on traverse. */
.site-nav .nav-item.has-children > .nav-parent::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
}

.site-nav .nav-item.has-children:hover .submenu,
.site-nav .nav-item.has-children:focus-within .submenu {
    display: block;
}

.site-nav .nav-item.has-children:hover > .nav-parent .caret {
    transform: rotate(180deg);
}

.site-nav .submenu li { margin: 0; }

.site-nav .submenu a {
    display: block;
    padding: 9px 18px;
    color: var(--ink);
    font-size: 0.92em;
    font-weight: 400;
    border-bottom: none;
}

.site-nav .submenu a:hover {
    background: var(--stone);
    color: var(--lake);
}

.site-nav .submenu a.current {
    color: var(--lake);
    background: rgba(11, 79, 108, 0.05);
    font-weight: 600;
}

.site-nav .hamburger {
    display: none;
    background: none;
    border: 1px solid var(--rule);
    border-radius: 6px;
    cursor: pointer;
    padding: 6px 10px;
    font-size: 1.2em;
    color: var(--lake);
}

@media (max-width: 960px) {
    .site-nav .nav-links { display: none; }
    .site-nav .hamburger { display: block; }

    .site-nav.open .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: var(--paper);
        padding: 8px 20px 20px;
        gap: 0;
        border-bottom: 1px solid var(--rule);
        box-shadow: var(--shadow);
        align-items: stretch;
        max-height: calc(100vh - var(--nav-height));
        overflow-y: auto;
    }

    /* Cancel the desktop auto-margins so mobile items stack normally. */
    .site-nav.open .nav-links > .nav-item:first-child,
    .site-nav.open .nav-links > .nav-item-cta {
        margin-left: 0;
    }

    .site-nav.open .nav-item > a,
    .site-nav.open .nav-item > .nav-parent {
        padding: 12px 0 6px;
        border-bottom: 1px solid var(--rule);
        border-radius: 0;
        text-align: left;
        display: block;
        font-size: 1em;
    }

    .site-nav.open .nav-item.has-children > .nav-parent {
        font-weight: 700;
        color: var(--lake);
        cursor: default;
        border-bottom: 1px solid var(--rule);
    }

    .site-nav.open .nav-item.has-children > .nav-parent .caret {
        display: none;
    }

    .site-nav.open .submenu {
        display: block !important;
        position: static;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0;
        margin: 0 0 4px;
        min-width: 0;
    }

    .site-nav.open .submenu a {
        padding: 10px 0 10px 16px;
        font-size: 0.95em;
        border-bottom: 1px solid var(--rule);
    }

    .site-nav.open .nav-item > a.cta {
        margin: 16px 0 0;
        text-align: center;
        border-radius: 6px;
        border-bottom: none;
        padding: 14px 16px;
    }
}

/* ──────────────────────────────────────────────────
   Hero (used on the Home page)
   ────────────────────────────────────────────────── */

.hero {
    text-align: center;
    padding: 56px 20px;
    position: relative;
    overflow: hidden;
    min-height: clamp(320px, 44vh, 460px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image:
        radial-gradient(ellipse 88% 78% at 50% 46%, rgba(16,9,4,0.58) 0%, rgba(28,16,8,0.28) 54%, rgba(46,27,13,0.30) 100%),
        linear-gradient(rgba(150,92,34,0.12), rgba(150,92,34,0.12)),
        url('assets/kingston-hero.jpg');
    background-size: cover;
    background-position: center top;
    background-color: #2a1a0e;
    color: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.hero .eyebrow {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78em;
    font-weight: 600;
    color: #F0E4CE;
    margin: 0 0 10px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}

.hero h1 {
    font-size: clamp(2.4em, 6.5vw, 4em);
    color: var(--paper);
    margin: 0 0 14px;
    text-shadow: 0 2px 22px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
}

.hero h1 .year { color: #E6A15C; }

.hero .dates {
    font-size: 1.1em;
    color: #F6EEE0;
    margin: 8px 0 4px;
    font-weight: 500;
    text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

.hero .venue {
    font-size: 0.95em;
    color: #E7DAC6;
    margin: 0 0 32px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

.hero .cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Secondary CTA in the hero needs a light treatment to read against the photo */
.hero .btn-secondary {
    background: transparent;
    color: var(--paper) !important;
    border-color: rgba(255,255,255,0.9);
}
.hero .btn-secondary:hover {
    background: var(--paper);
    color: var(--lake) !important;
}

/* Photo credit — small, lower-right of the hero */
.hero .photo-credit {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.68em;
    color: rgba(255,255,255,0.55);
    margin: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.hero .photo-credit a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.3);
}

.hero .photo-credit a:hover {
    color: rgba(255,255,255,0.85);
}

/* ──────────────────────────────────────────────────
   Page header (used on internal pages)
   ────────────────────────────────────────────────── */

.page-header {
    text-align: center;
    padding: 48px 20px 32px;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}

.page-header .eyebrow {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.74em;
    font-weight: 600;
    color: var(--copper);
    margin: 0 0 8px;
}

.page-header h1 {
    font-size: clamp(1.8em, 4.5vw, 2.6em);
    margin: 0;
}

.page-header .header-logo {
    max-width: 120px;
    height: auto;
    margin: 0 auto 16px;
    display: block;
    transition: opacity 0.15s;
}

.page-header .header-logo-link {
    display: block;
    text-decoration: none;
}

.page-header .header-logo-link:hover .header-logo {
    opacity: 0.75;
}

/* ──────────────────────────────────────────────────
   Buttons (primary = copper, secondary = lake outline)
   ────────────────────────────────────────────────── */

.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1em;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.15s, color 0.15s, transform 0.05s;
    line-height: 1.2;
}

.btn-primary {
    background: var(--copper);
    color: var(--paper) !important;
    box-shadow: var(--shadow);
}
.btn-primary:hover { background: var(--copper-dark); color: var(--paper) !important; }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
    background: transparent;
    color: var(--lake) !important;
    border: 1.5px solid var(--lake);
}
.btn-secondary:hover { background: var(--lake); color: var(--paper) !important; }

/* ──────────────────────────────────────────────────
   Content container
   ────────────────────────────────────────────────── */

.page {
    max-width: var(--max-content);
    margin: 0 auto;
    padding: 36px 20px 64px;
}

.page > section + section {
    margin-top: var(--gap-large);
}

.lead {
    font-size: 1.12em;
    color: var(--ink);
    margin-bottom: var(--gap-med);
    line-height: 1.55;
}

/* ──────────────────────────────────────────────────
   Cards
   ────────────────────────────────────────────────── */

.card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: var(--gap-small);
    box-shadow: var(--shadow);
}

.card h3, .card h2 { margin-top: 0; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--gap-small);
    margin-top: var(--gap-med);
}

.card-grid .card { margin-bottom: 0; }

/* ──────────────────────────────────────────────────
   Key facts strip
   ────────────────────────────────────────────────── */

.key-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--gap-small);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 24px;
    box-shadow: var(--shadow);
    margin: var(--gap-med) 0;
}

.key-facts .fact {
    text-align: center;
    padding: 8px;
}

.key-facts .fact .label {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72em;
    font-weight: 600;
    color: var(--copper);
    margin: 0 0 6px;
}

.key-facts .fact .value {
    font-family: 'Playfair Display', serif;
    font-size: 1.4em;
    color: var(--lake);
    font-weight: 600;
    margin: 0;
}

.key-facts .fact .value-sub {
    font-size: 0.85em;
    color: var(--ink-muted);
    font-family: 'Inter', sans-serif;
    margin-top: 2px;
}

/* ──────────────────────────────────────────────────
   Schedule / data tables
   ────────────────────────────────────────────────── */

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--gap-med) 0;
    font-size: 0.95em;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
}

.data-table th,
.data-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

.data-table th {
    background: var(--lake);
    color: var(--paper);
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78em;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:nth-child(even) td { background: var(--stone); }

.data-table .day-row td {
    background: var(--lake-dark) !important;
    color: var(--paper);
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 1.05em;
    text-align: center;
}

.data-table .highlight-row td {
    background: rgba(184, 115, 51, 0.08) !important;
}

@media (max-width: 600px) {
    .data-table { font-size: 0.88em; }
    .data-table th, .data-table td { padding: 8px 10px; }
}

/* ──────────────────────────────────────────────────
   Pull-quote / callout
   ────────────────────────────────────────────────── */

.callout {
    background: var(--lake);
    color: var(--paper);
    border-radius: 10px;
    padding: 24px 28px;
    margin: var(--gap-med) 0;
    box-shadow: var(--shadow);
}

.callout h3 {
    color: var(--paper);
    margin-top: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.25em;
}

.callout p { color: rgba(255,255,255,0.9); margin-bottom: 0; }

.callout.copper { background: var(--copper); }

/* ──────────────────────────────────────────────────
   Footer
   ────────────────────────────────────────────────── */

.site-footer {
    background: var(--paper);
    border-top: 1px solid var(--rule);
    padding: 32px 20px;
    text-align: center;
    font-size: 0.9em;
    color: var(--ink-muted);
}

.site-footer a { color: var(--lake); }

.site-footer .footer-logo-link {
    display: inline-block;
    margin-bottom: 14px;
}
.site-footer .footer-logo {
    max-width: 96px;
    height: auto;
    margin: 0 auto;
    display: block;
    transition: opacity 0.15s;
}
.site-footer .footer-logo-link:hover .footer-logo { opacity: 0.75; }

.site-footer .fineprint {
    font-size: 0.8em;
    margin-top: 10px;
    color: var(--ink-muted);
}

/* ──────────────────────────────────────────────────
   Utilities
   ────────────────────────────────────────────────── */

.text-center { text-align: center; }
.muted { color: var(--ink-muted); }
.eyebrow-small {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75em;
    font-weight: 600;
    color: var(--copper);
}

@media (max-width: 600px) {
    body { font-size: 15px; }
    .page { padding: 24px 16px 48px; }
    .hero { padding: 48px 16px 40px; }
    .page-header { padding: 36px 16px 24px; }
    .card { padding: 20px; }
}


/* National flag ribbon under the footer logo — single row, scales to fit, no wrap */
.footer-flags{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:4px;margin:0 auto 16px;padding:0 4px;}
.footer-flags img{height:clamp(12px,2.5vw,22px);width:auto;display:block;border-radius:1.5px;box-shadow:0 0 0 1px rgba(0,0,0,.20);}
@media(max-width:440px){.footer-flags{gap:2px;}.footer-flags img{height:10px;}}