/* Shared header/nav CSS + design-system tokens (DECISION-003, WP-A0).

   Extracted from home_redesign.css so every "-redesign" page (currently
   just Home; About/Technologies/Services/Contact land on the same system
   next via WP-B1..B4) shares one copy instead of each page ticket having
   to edit a common file - that would have made the four page tickets race
   on the same lines when dispatched in parallel. Pure move: no color/token
   VALUES changed. See home_redesign.css's own header comment for the
   pixel-verification history these values trace back to (SESSION_REVIVAL.md).

   Selector lists below mirror base.html's `redesigned_pages` set, one body
   class per page key (`{{ page.key|lower }}-redesign`). Today only
   body.home-redesign is ever rendered; the other four classes are inert
   until their own page ticket lands. */

body.home-redesign,
body.about-redesign,
body.technologies-redesign,
body.services-redesign,
body.contact-redesign {
    --hr-bg: #000000;
    --hr-primary: #01CED3;
    --hr-secondary: #238CB6;
    --hr-highlight: #B533F7;
    --hr-light: #FFFFFF;
    --hr-text-muted: #918b8e;
}

/* --- Header / nav, restyled to match the locked reference --- */
/* Sticky, and shrinks on scroll (hr-nav-scrolled class toggled by JS in
   templates/pages/home.html's extra_js block). header carries the sticky
   position - it has no overflow:hidden ancestor between it and the
   viewport, so this is safe. */
body.home-redesign header { position: sticky; top: 0; z-index: 50; background: var(--hr-bg) !important; }
body.about-redesign header { position: sticky; top: 0; z-index: 50; background: var(--hr-bg) !important; }
body.technologies-redesign header { position: sticky; top: 0; z-index: 50; background: var(--hr-bg) !important; }
body.services-redesign header { position: sticky; top: 0; z-index: 50; background: var(--hr-bg) !important; }
body.contact-redesign header { position: sticky; top: 0; z-index: 50; background: var(--hr-bg) !important; }

body.home-redesign .navbar.navbar-dark,
body.home-redesign .navbar-dark.bg-dark,
body.about-redesign .navbar.navbar-dark,
body.about-redesign .navbar-dark.bg-dark,
body.technologies-redesign .navbar.navbar-dark,
body.technologies-redesign .navbar-dark.bg-dark,
body.services-redesign .navbar.navbar-dark,
body.services-redesign .navbar-dark.bg-dark,
body.contact-redesign .navbar.navbar-dark,
body.contact-redesign .navbar-dark.bg-dark { background: var(--hr-bg) !important; position: relative; z-index: 5; }

body.home-redesign .navbar,
body.about-redesign .navbar,
body.technologies-redesign .navbar,
body.services-redesign .navbar,
body.contact-redesign .navbar {
    padding: 20px 0; border-bottom: none !important; box-shadow: none !important;
    transition: padding 0.25s ease, box-shadow 0.25s ease;
}
body.home-redesign .navbar.hr-nav-scrolled,
body.about-redesign .navbar.hr-nav-scrolled,
body.technologies-redesign .navbar.hr-nav-scrolled,
body.services-redesign .navbar.hr-nav-scrolled,
body.contact-redesign .navbar.hr-nav-scrolled {
    padding: 8px 0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
}
/* Gradient-logo trick: mask the real transparent PNG with a gradient fill,
   overlaid on top of (and matching the size of) the plain <img> which is
   hidden but still occupies layout space and keeps the real alt text. */
body.home-redesign .navbar-brand,
body.about-redesign .navbar-brand,
body.technologies-redesign .navbar-brand,
body.services-redesign .navbar-brand,
body.contact-redesign .navbar-brand {
    position: relative; display: inline-block; height: 88px;
    transition: height 0.25s ease;
}
body.home-redesign .navbar-brand img,
body.about-redesign .navbar-brand img,
body.technologies-redesign .navbar-brand img,
body.services-redesign .navbar-brand img,
body.contact-redesign .navbar-brand img { height: 88px; width: auto; visibility: hidden; transition: height 0.25s ease; }

body.home-redesign .navbar.hr-nav-scrolled .navbar-brand,
body.home-redesign .navbar.hr-nav-scrolled .navbar-brand img,
body.about-redesign .navbar.hr-nav-scrolled .navbar-brand,
body.about-redesign .navbar.hr-nav-scrolled .navbar-brand img,
body.technologies-redesign .navbar.hr-nav-scrolled .navbar-brand,
body.technologies-redesign .navbar.hr-nav-scrolled .navbar-brand img,
body.services-redesign .navbar.hr-nav-scrolled .navbar-brand,
body.services-redesign .navbar.hr-nav-scrolled .navbar-brand img,
body.contact-redesign .navbar.hr-nav-scrolled .navbar-brand,
body.contact-redesign .navbar.hr-nav-scrolled .navbar-brand img { height: 48px; }

body.home-redesign .navbar-brand .hr-logo-gradient,
body.about-redesign .navbar-brand .hr-logo-gradient,
body.technologies-redesign .navbar-brand .hr-logo-gradient,
body.services-redesign .navbar-brand .hr-logo-gradient,
body.contact-redesign .navbar-brand .hr-logo-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--hr-highlight), var(--hr-primary));
    -webkit-mask-image: url('/static/images/logo_transparent.png');
    mask-image: url('/static/images/logo_transparent.png');
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: left center; mask-position: left center;
}

body.home-redesign .nav-link,
body.about-redesign .nav-link,
body.technologies-redesign .nav-link,
body.services-redesign .nav-link,
body.contact-redesign .nav-link {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; text-transform: uppercase; font-size: 15px;
    letter-spacing: 1px; color: var(--hr-light) !important;
}
body.home-redesign .nav-link.active,
body.home-redesign .nav-item .nav-link:hover,
body.about-redesign .nav-link.active,
body.about-redesign .nav-item .nav-link:hover,
body.technologies-redesign .nav-link.active,
body.technologies-redesign .nav-item .nav-link:hover,
body.services-redesign .nav-link.active,
body.services-redesign .nav-item .nav-link:hover,
body.contact-redesign .nav-link.active,
body.contact-redesign .nav-item .nav-link:hover { color: var(--hr-highlight) !important; }

/* --- Responsive: navbar-brand sizing on phone. (The original only ever
   had a navbar-brand-specific rule at the phone breakpoint below - the
   tablet breakpoint in home_redesign.css has no navbar-brand rule to
   move.) --- */
@media (max-width: 768px) {
    body.home-redesign .navbar-brand { height: 56px; }
    body.home-redesign .navbar-brand img { height: 56px; }
    body.about-redesign .navbar-brand { height: 56px; }
    body.about-redesign .navbar-brand img { height: 56px; }
    body.technologies-redesign .navbar-brand { height: 56px; }
    body.technologies-redesign .navbar-brand img { height: 56px; }
    body.services-redesign .navbar-brand { height: 56px; }
    body.services-redesign .navbar-brand img { height: 56px; }
    body.contact-redesign .navbar-brand { height: 56px; }
    body.contact-redesign .navbar-brand img { height: 56px; }

    body.home-redesign .navbar.hr-nav-scrolled .navbar-brand,
    body.home-redesign .navbar.hr-nav-scrolled .navbar-brand img { height: 40px; }
    body.about-redesign .navbar.hr-nav-scrolled .navbar-brand,
    body.about-redesign .navbar.hr-nav-scrolled .navbar-brand img { height: 40px; }
    body.technologies-redesign .navbar.hr-nav-scrolled .navbar-brand,
    body.technologies-redesign .navbar.hr-nav-scrolled .navbar-brand img { height: 40px; }
    body.services-redesign .navbar.hr-nav-scrolled .navbar-brand,
    body.services-redesign .navbar.hr-nav-scrolled .navbar-brand img { height: 40px; }
    body.contact-redesign .navbar.hr-nav-scrolled .navbar-brand,
    body.contact-redesign .navbar.hr-nav-scrolled .navbar-brand img { height: 40px; }
}

/* --- Connector-logo: the tiled sygnet-icon background motif, now
   required on every redesigned page (direct instruction, not just
   Home) - each page's own template must include a bare
   `<div class="hr-connector-logo" data-parallax="0.35"></div>` as the
   first child of its own top-level page wrapper (matching home.html's
   own structure) for this CSS + the parallax JS in site_redesign.js to
   have anything to act on. tests/test_redesigned_pages_have_connector_logo.py
   enforces the element's presence so a page cannot ship without it. */
body.home-redesign .hr-connector-logo,
body.about-redesign .hr-connector-logo,
body.technologies-redesign .hr-connector-logo,
body.services-redesign .hr-connector-logo,
body.contact-redesign .hr-connector-logo {
    position: absolute; top: -140px; right: -500px;
    width: 1700px; height: 3800px; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, var(--hr-highlight) 0%, #7a3fb0 20%, var(--hr-primary) 45%, var(--hr-primary) 75%, #7a3fb0 90%, var(--hr-highlight) 100%);
    -webkit-mask-image: url('/static/images/uv_sygnet_4x.png');
    mask-image: url('/static/images/uv_sygnet_4x.png');
    -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y;
    -webkit-mask-position: center top; mask-position: center top;
    -webkit-mask-size: 1700px 1970px; mask-size: 1700px 1970px;
}

@media (max-width: 1024px) {
    body.home-redesign .hr-connector-logo,
    body.about-redesign .hr-connector-logo,
    body.technologies-redesign .hr-connector-logo,
    body.services-redesign .hr-connector-logo,
    body.contact-redesign .hr-connector-logo { width: 680px; top: -150px; }
}

@media (max-width: 768px) {
    /* Purely decorative and sized for a wide desktop layout - hiding it
       rather than trying to make it behave on a phone screen; the browser
       also won't fetch the mask image once hidden. */
    body.home-redesign .hr-connector-logo,
    body.about-redesign .hr-connector-logo,
    body.technologies-redesign .hr-connector-logo,
    body.services-redesign .hr-connector-logo,
    body.contact-redesign .hr-connector-logo { display: none; }
}