/* =============================================================================
   MyCV.ie - shared site header
   -----------------------------------------------------------------------------
   The same header and nav as the homepage, for every other page except the
   thank-you pages (those are deliberately kept bare so nothing distracts from
   the next step).

   Used by: cv-review, guides, irish-cv-template, ats-cv-format,
   how-to-write-a-cv-ireland, privacy, terms.

   The homepage keeps its own inline copy. Two reasons it is not switched over:
   its header CSS is tangled up with the hero and the sticky mobile bar, and it
   is the one page that must not regress. If you change something here, mirror
   it in the Header block of index.html (search for the header rule near the top
   of its inline styles).

   Two deliberate differences from the homepage version:

   1. Everything is scoped under .site-header. Several of these pages already
      have their own bare `header { }` and `.logo { }` rules in their inline
      styles, and the class selector has to out-specify them.
   2. The See Packages button stays visible in the mobile drop-down. On the
      homepage it is hidden there because the sticky bottom bar already carries
      it, and no other page has that bar.

   Colours fall back to literals so this file still renders correctly if it
   loads on a page that has not defined the custom properties.
   ============================================================================= */

.site-header {
    background: var(--primary-dark, #0f172a);
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 3px solid var(--accent-purple, #8b5cf6);
}

.site-header .header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.site-header .logo {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-light, #ffffff);
    letter-spacing: -0.02em;
    text-decoration: none;
    /* privacy.html and terms.html declare .logo as a centred block with
       `max-width: 820px; margin: 0 auto`. Auto margins on a flex item swallow
       the free space in the row, which shoves the logo into the middle of the
       header, so all three have to be reset here. cv-review.html centres its
       text the same way. */
    display: block;
    flex: 0 0 auto;
    max-width: none;
    margin: 0;
    text-align: left;
}

.site-header .logo span { color: var(--accent-purple, #8b5cf6); }

.site-header .nav {
    display: flex;
    gap: 1.75rem;
    align-items: center;
}

.site-header .nav a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.site-header .nav a:hover { color: var(--text-light, #ffffff); }

/* The current page's own nav item, so people know where they are. */
.site-header .nav a[aria-current="page"] { color: var(--accent-light-purple, #a78bfa); }

.site-header .nav .nav-cta {
    background: var(--accent-purple, #8b5cf6);
    color: #ffffff;
    padding: 0.8rem 1.2rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.site-header .nav .nav-cta:hover { background: var(--accent-light-purple, #a78bfa); color: #ffffff; }

/* Hamburger: hidden on desktop, becomes the only nav control on mobile */
.site-header .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 9px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.site-header .nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-light, #ffffff);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.site-header .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
    .site-header { padding: 0.85rem 1.25rem; }

    .site-header .nav-toggle { display: flex; }

    /* The nav becomes a drop-down panel under the header. */
    .site-header .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 0 0.75rem;
        background: var(--primary-dark, #0f172a);
        border-bottom: 3px solid var(--accent-purple, #8b5cf6);
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
    }

    .site-header .nav.open { display: flex; }

    .site-header .nav a {
        padding: 0.95rem 1.5rem;
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.85);
    }

    .site-header .nav a:active { background: rgba(255, 255, 255, 0.06); }

    /* Kept, unlike on the homepage, because these pages have no sticky bar. */
    .site-header .nav .nav-cta {
        margin: 0.6rem 1.5rem 0;
        padding: 0.9rem 1.2rem;
        text-align: center;
        font-size: 0.78rem;
    }
}