/* public/css/nav.css */
/* ============================================================================
   MAIN NAVIGATION
   ----------------------------------------------------------------------------
   Four fixed items and a search box. Everything inside the dropdowns is drawn
   from the database.

   Self-contained and namespaced under .cc-, so it can be loaded alongside
   tl.css without touching anything already styled.

   COLOUR NOTE, carried over from the earlier audit: the brand gold #D4AF37
   measures 2.10:1 on white — a clear AA failure for text. On the dark header it
   measures 8.26:1 and is perfectly safe, so gold is used freely here for nav
   text and sparingly elsewhere. Where a gold surface carries a label, the label
   is charcoal, not white.
   ========================================================================== */

:root {
    --cc-ink:      #0B1220;   /* header ground — the deep navy from the concept */
    --cc-ink-2:    #111A2B;
    --cc-line:     rgba(212,175,55,.18);
    --cc-gold:     #D4AF37;
    --cc-gold-lo:  #B8902B;
    --cc-text:     #E8E6E1;
    --cc-quiet:    #9AA1AD;
    --cc-paper:    #FFFFFF;
    --cc-header-h: 122px;  /* 90px logo + 16px clearance top and bottom */
}

/* ---- Utility strip -------------------------------------------------------- */
/* Utility strip: text up a step, padding unchanged. It is the first thing on the
   page and was reading as fine print rather than as contact details. */
.cc-utility {
    background: #060A12; color: var(--cc-quiet);
    font-size: .88rem; padding: .5rem 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.cc-utility-link { color: var(--cc-quiet); text-decoration: none; display: inline-flex;
    align-items: center; gap: .45rem; font-weight: 500; }
.cc-utility-link:hover { color: var(--cc-gold); }
.cc-utility-sep { width: 1px; height: 14px; background: rgba(255,255,255,.15); margin: 0 1.25rem; }

/* ---- Header --------------------------------------------------------------- */
.cc-header {
    background: linear-gradient(180deg, var(--cc-ink) 0%, var(--cc-ink-2) 100%);
    border-bottom: 1px solid var(--cc-line);
    position: sticky; top: 0; z-index: 1000;
}
.cc-bar {
    display: flex; align-items: center; gap: 1.35rem;
    min-height: var(--cc-header-h);
}
.cc-logo { flex: none; display: block; }
/* The logo sits inside the bar, at the same 90px as the footer mark, with real
   space around it.

   Matching the footer matters more than it sounds: the same mark at two different
   sizes on one page reads as two slightly different logos rather than one brand.
   The bar is then sized to the logo plus its padding — 90 + 16 + 16 = 122 — so the
   mark never touches the frame and nothing has to overflow to fit.

   The padding is on the anchor, not the image, so the clickable area covers the
   whitespace too. A logo whose hit area stops at the artwork is a small, constant
   irritation on the one link every visitor tries first. */
.cc-logo {
    position: relative; z-index: 2;
    display: flex; align-items: center;
    padding: 16px 20px 16px 0;      /* clearance top, bottom and right */
    margin-left: -4px;              /* optical alignment with the nav below it */
}
.cc-logo img { height: 90px; width: auto; display: block; }

@media (max-width: 991px) {
    /* Smaller mark and tighter padding, so it does not crowd the burger. */
    .cc-logo { padding: 10px 12px 10px 0; }
    .cc-logo img { height: 62px; }
}

/* ---- Menu and links ------------------------------------------------------- */
.cc-menu { display: flex; align-items: center; gap: 1.5rem; flex: 1; }

.cc-nav { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.cc-item { position: relative; }

.cc-link {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem .85rem; border-radius: 6px;
    color: var(--cc-text); text-decoration: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .94rem; font-weight: 500; letter-spacing: .005em;
    white-space: nowrap;
    transition: color .16s ease, background .16s ease;
}
.cc-link:hover, .cc-item:hover > .cc-link { color: var(--cc-gold); background: rgba(212,175,55,.07); }
.cc-link.is-active { color: var(--cc-gold); }
.cc-link.is-active::after {
    content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .25rem;
    height: 2px; background: var(--cc-gold);
}
.cc-link i { font-size: .75em; opacity: .7; transition: transform .18s ease; }
.cc-item:hover > .cc-link i { transform: rotate(180deg); }

/* Non-mega items stay relative; mega items hand positioning to the bar. */
.cc-has-mega { position: static; }
.cc-link { position: relative; }

.cc-mega {
    position: absolute; top: calc(100% - 4px); left: 0; right: 0;
    width: 100%; max-width: 1240px; margin: 0 auto;
    transform: translateY(-6px);
    background: var(--cc-paper);
    border: 1px solid rgba(0,0,0,.07);
    border-top: 3px solid var(--cc-gold);
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(212,175,55,.2), 0 0 34px rgba(212,175,55,.1),
    0 24px 60px rgba(5,10,20,.32);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    z-index: 1001;
    overflow: hidden auto;
    max-height: calc(100vh - var(--cc-header-h) - 60px);
}
.cc-has-mega:hover > .cc-mega,
.cc-has-mega:focus-within > .cc-mega {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    /* No delay opening — the menu should feel instant on the way in. */
    transition-delay: 0s;
}

/* ── Keeping the panel open while you travel to it ───────────────────────────
 *
 * The panel is positioned against the HEADER BAR (.cc-has-mega is position:static,
 * so the absolute box resolves against the bar), while the thing being hovered is
 * the nav item — which is shorter than the bar and vertically centred in it.
 *
 * That leaves a strip of dead space between the bottom of the link and the top of
 * the panel. Moving the pointer down from "Services" crosses it, :hover is lost,
 * and the menu closes before you arrive. On a bar this tall the gap is a few pixels
 * of screen and an eternity of pointer travel.
 *
 * Two fixes, both needed:
 *
 *   1. A bridge. An invisible pseudo-element spanning the gap, so the pointer never
 *      actually leaves .cc-has-mega on its way down. Bridging is better than simply
 *      padding the link, because padding would also enlarge the gold hover
 *      background and change how the bar looks.
 *
 *   2. A closing delay. 180ms before the panel starts to fade, so clipping a corner
 *      or overshooting by a few pixels does not dismiss it. Applied only to the
 *      closing direction — opening stays instant.
 */
/* The bridge hangs off the LINK, which is already position:relative — .cc-has-mega
   has to stay static so the panel can span the full width of the bar. */
.cc-has-mega > .cc-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 34px;          /* comfortably more than the gap on any header height */
    background: transparent;
    display: none;
}

/* Only while hovering, so it can never sit over a neighbouring item and swallow
   its clicks. */
.cc-has-mega:hover > .cc-link::after,
.cc-has-mega:focus-within > .cc-link::after { display: block; }

/* The forgiving close. Hiding waits; showing does not. */
.cc-mega {
    transition-delay: .18s;
}


.cc-mega-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    align-items: start;              /* columns size to their own content */
    gap: 1.25rem 2rem;
    padding: 1.5rem 1.75rem;
}
/* Services carries the most blocks, so it gets a tighter minimum. */
.cc-mega-services { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Mega-menu columns. Services uses .cc-mega-block per category; Jurisdictions
   and Knowledge Centre use .cc-mega-col. Both are grid children and size to
   their own content, which is what lets a panel be as wide as it has content
   for rather than a fixed number of tracks. */
.cc-mega-block, .cc-mega-col { min-width: 0; }
.cc-mega-block + .cc-mega-block { margin-top: 0; }

.cc-mega-col--narrow { border-left: 1px solid #EFEDE8; padding-left: 1.5rem; }

.cc-mega-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--cc-gold-lo); margin: 0 0 .85rem;
    padding-bottom: .5rem; border-bottom: 1px solid #EFEDE8;
}

.cc-mega-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 700; font-size: .95rem; color: #1A1A1D; text-decoration: none;
    padding-bottom: .45rem; margin-bottom: .5rem; border-bottom: 1px solid #EFEDE8;
}
.cc-mega-head:hover { color: var(--cc-gold-lo); }

.cc-mega-list { list-style: none; margin: 0; padding: 0; }
.cc-mega-list li + li { margin-top: .1rem; }
.cc-mega-list a {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .3rem 0; color: #4A4A4A; text-decoration: none; font-size: .88rem;
}
.cc-mega-list a:hover { color: var(--cc-gold-lo); }

.cc-mega-list--rich a { display: block; padding: .45rem 0; }
.cc-rich-name { display: block; font-weight: 600; color: #1A1A1D; font-size: .9rem; }
.cc-mega-list--rich a:hover .cc-rich-name { color: var(--cc-gold-lo); }
.cc-rich-note { display: block; font-size: .78rem; color: #8A8A8A; margin-top: .1rem; }

.cc-count {
    font-size: .72rem; color: #9A9A9A; font-variant-numeric: tabular-nums;
    background: #F5F3EE; border-radius: 100px; padding: .05rem .45rem; flex: none;
}

.cc-flags { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .75rem; }
.cc-flag {
    display: flex; align-items: center; gap: .6rem;
    padding: .4rem 0; text-decoration: none;
}
.cc-flag .fi { width: 22px; height: 16px; border-radius: 2px; flex: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.cc-flag-name { display: block; font-size: .87rem; color: #1A1A1D; font-weight: 600; }
.cc-flag:hover .cc-flag-name { color: var(--cc-gold-lo); }
.cc-flag-note { display: block; font-size: .74rem; color: #9A9A9A; }

.cc-mega-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .9rem 1.75rem; background: #FAF9F6;
    border-top: 1px solid #EFEDE8; border-radius: 0 0 9px 9px;
}
.cc-mega-foot a {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .85rem; font-weight: 600; color: var(--cc-gold-lo); text-decoration: none;
    display: inline-flex; align-items: center; gap: .4rem;
}
.cc-mega-foot a:hover { color: #1A1A1D; }

/* ---- Search --------------------------------------------------------------- */
.cc-search { position: relative; margin-left: auto; flex: 0 1 380px; min-width: 220px; }
.cc-search form { display: flex; align-items: stretch; }
.cc-search input {
    flex: 1; min-width: 0;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12); border-right: 0;
    border-radius: 8px 0 0 8px;
    padding: .62rem .9rem; color: var(--cc-text); font-size: .88rem;
    font-family: 'Inter', system-ui, sans-serif;
}
.cc-search input::placeholder { color: #7A828F; }
/* Gold glow. Present at rest so the search reads as a primary tool, stronger on
   focus. Kept low-opacity — on a dark navy bar a little gold carries a long way,
   and a heavy halo reads as a highlighter rather than as lighting. */
.cc-search form {
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(212,175,55,.22), 0 0 22px rgba(212,175,55,.14);
    transition: box-shadow .22s ease;
}
.cc-search form:hover {
    box-shadow: 0 0 0 1px rgba(212,175,55,.34), 0 0 30px rgba(212,175,55,.22);
}
.cc-search:focus-within form {
    box-shadow: 0 0 0 1px rgba(212,175,55,.55), 0 0 38px rgba(212,175,55,.3);
}
.cc-search input:focus {
    outline: none; background: rgba(255,255,255,.1);
    border-color: rgba(212,175,55,.55);
}
.cc-search button {
    flex: none; width: 48px; border: 0; cursor: pointer;
    border-radius: 0 8px 8px 0;
    background: linear-gradient(180deg, var(--cc-gold) 0%, var(--cc-gold-lo) 100%);
    /* Charcoal on gold, not white: white-on-gold measures 2.10:1 and fails AA. */
    color: #1A1A1D; font-size: 1rem;
}
.cc-search button:hover { filter: brightness(1.07); }

.cc-suggest {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--cc-paper); border: 1px solid rgba(0,0,0,.08);
    border-top: 3px solid var(--cc-gold); border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(212,175,55,.2), 0 0 34px rgba(212,175,55,.1),
    0 24px 60px rgba(5,10,20,.32);
    max-height: 70vh; overflow-y: auto; z-index: 1002;
}
.cc-sg-group + .cc-sg-group { border-top: 1px solid #F0EEE9; }
.cc-sg-label {
    font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--cc-gold-lo); padding: .7rem 1rem .35rem;
}
.cc-sg-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem 1rem; text-decoration: none; color: #1A1A1D;
}
.cc-sg-item:hover, .cc-sg-item.is-active { background: #FAF7EF; color: #1A1A1D; }
.cc-sg-item .fi { width: 20px; height: 15px; border-radius: 2px; flex: none; }
.cc-sg-title { font-size: .89rem; font-weight: 600; }
.cc-sg-note  { font-size: .76rem; color: #9A9A9A; margin-left: auto; flex: none; }
.cc-sg-all {
    display: block; padding: .7rem 1rem; text-align: center;
    background: #FAF9F6; border-top: 1px solid #F0EEE9;
    font-size: .84rem; font-weight: 600; color: var(--cc-gold-lo); text-decoration: none;
}
.cc-sg-empty { padding: 1.1rem 1rem; color: #8A8A8A; font-size: .87rem; }

/* ---- Mobile --------------------------------------------------------------- */
.cc-burger {
    display: none; margin-left: auto; background: none; border: 0;
    width: 44px; height: 44px; padding: 10px; cursor: pointer;
}
.cc-burger span {
    display: block; height: 2px; background: var(--cc-text); border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.cc-burger span + span { margin-top: 5px; }
.cc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1199px) {
    .cc-mega-services { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
    .cc-search { flex-basis: 280px; }
}

@media (max-width: 991px) {
    :root { --cc-header-h: 82px; }   /* 62px logo + 10px clearance */
    .cc-burger { display: block; }
    .cc-menu {
        position: fixed; inset: calc(var(--cc-header-h) + 36px) 0 0 0;
        background: var(--cc-ink); flex-direction: column; align-items: stretch;
        gap: 0; padding: 1rem; overflow-y: auto;
        transform: translateX(100%); transition: transform .25s ease;
    }
    .cc-menu.is-open { transform: translateX(0); }

    .cc-nav { flex-direction: column; align-items: stretch; order: 2; }
    .cc-link { padding: .9rem .4rem; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,.07); }
    .cc-link i { margin-left: auto; }

    /* On touch there is no hover, so panels stack open beneath their item. */
    .cc-mega {
        position: static; transform: none; opacity: 1; visibility: visible;
        pointer-events: auto; min-width: 0; box-shadow: none; border: 0;
        border-radius: 0; background: transparent; display: none;
    }
    .cc-item.is-open > .cc-mega { display: block; }
    .cc-mega-inner { grid-template-columns: 1fr !important; padding: .75rem .4rem; }
    .cc-mega-title, .cc-mega-head, .cc-rich-name, .cc-flag-name { color: var(--cc-text) !important; }
    .cc-mega-list a { color: var(--cc-quiet); }
    .cc-mega-foot { background: transparent; border: 0; flex-direction: column;
        align-items: flex-start; gap: .5rem; padding: .5rem .4rem 1.5rem; }
    .cc-count { background: rgba(255,255,255,.08); color: var(--cc-quiet); }

    .cc-search { order: 1; margin: 0 0 1rem; flex-basis: auto; width: 100%; }
}

/* ---- Quality floor -------------------------------------------------------- */
.cc-header a:focus-visible,
.cc-header button:focus-visible,
.cc-header input:focus-visible {
    outline: 2px solid var(--cc-gold);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .cc-mega, .cc-menu, .cc-link, .cc-link i, .cc-burger span {
        transition-duration: .001ms !important;
    }
}