/* SHARED FOUNDATION + HEADER + FOOTER */
@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --dark-blue: #1B3D5F;
    --light-blue: #DDE5EE;
    --light-bg: #F4F8FA;
    --white: #FFFFFF;
    --text: #1B3D5F;
    --muted: #878787;
    --border: #DCE8ED;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

@media (max-width: 900px) {
    html {
        /* Native smooth-scroll to an in-page anchor can land
           short on long jumps if anything above the target
           reflows mid-animation — an instant jump always
           lands exactly on target. */
        scroll-behavior: auto;
    }
}
body {
    margin: 0;
    font-family: "Inter", Arial, sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.5;
    overflow-x: hidden;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; }

header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 68px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(27,61,95,.08);
    z-index: 1000;
}
.header-inner {
    width: min(1400px, calc(100% - 60px));
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo, .main-nav { position:relative; z-index:2; }
.logo img, .footer-logo img { display:block; width:175px; height:auto; }
.main-nav { display:flex; align-items:center; gap:32px; height:100%; }
.nav-item { position:relative; height:100%; display:flex; align-items:center; }
.nav-trigger, .nav-link {
    border:0; background:none; color:var(--dark-blue);
    font-size:12px; font-weight:500; cursor:pointer;
    white-space:nowrap; text-decoration:none;
}
.nav-link { position:relative; display:flex; align-items:center; height:100%; }
.nav-link::before,
.nav-trigger::before {
    content:"";
    position:absolute;
    top:50%; left:-14px; right:-14px; height:34px;
    transform:translateY(-50%) scale(.9);
    border-radius:999px;
    background:rgba(27,61,95,.08);
    opacity:0;
    transition:opacity .25s ease, transform .25s ease;
    z-index:-1;
    pointer-events:none;
}
.nav-link:hover::before, .nav-link.nav-active::before { opacity:1; transform:translateY(-50%) scale(1); }
.nav-trigger { height:100%; display:flex; align-items:center; gap:6px; position:relative; }
.nav-item:hover .nav-trigger::before, .nav-trigger.nav-active::before { opacity:1; transform:translateY(-50%) scale(1); }
.nav-trigger::after {
    content:""; width:5px; height:5px;
    border-right:1px solid currentColor; border-bottom:1px solid currentColor;
    transform:rotate(45deg) translateY(-2px); transition:transform .25s ease;
}
.nav-trigger.nav-active { font-weight:600; }
.nav-item:hover .nav-trigger::after { transform:rotate(225deg) translateY(-1px); }

.dropdown-panel {
    position:fixed; top:68px; left:0; width:100%; padding:38px 0;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
    box-shadow:0 20px 50px rgba(27,61,95,.07);
}
.nav-item:hover .dropdown-panel { opacity:1; visibility:visible; transform:translateY(0); }

/* Suppresses any dropdown opening during the brief window
   right after load (see js/main.js), while fonts/images can
   still shift the nav's layout under a stationary cursor. */
header.no-flash .nav-item:hover .dropdown-panel {
    opacity:0 !important; visibility:hidden !important;
    transform:translateY(-8px) !important; transition:none !important;
}

/* Also hard-disable every other transition on the header
   during that same window, so nothing animates into its
   first real value. */
header.no-flash,
header.no-flash *,
header.no-flash *::before,
header.no-flash *::after {
    transition: none !important;
}

/* =========================================
   TRANSPARENT HEADER OVER HERO

   The header itself stays fully transparent.
   A pill-shaped glass panel starts out sized
   just to fit the nav links (always readable,
   since it brings its own light backdrop no
   matter what sits behind it in the hero). As
   the page scrolls, a second block — the dark-
   blue logo badge — grows in from the left edge
   at the same time the nav panel grows into a
   full-height bar; the two meet with no seam,
   forming one continuous full-width, full-height
   bar split into a dark-blue half (logo, always
   white on it) and a white half (nav).
========================================= */

@media (min-width: 901px) {

    header.header-transparent {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom-color: transparent;
    }

    /* Light gray by default (floating over the hero, or over
       the dark-blue badge below once expanded) — brightness(0)
       crushes the logo to solid black, then invert(96%) lifts
       it to ~#F4F4F4, matching --light-bg rather than stark
       white. The "light-hero" override below cancels this for
       pages with a plain light top section, but never for the
       expanded badge. */
    header.header-transparent .logo img {
        filter: brightness(0) invert(96%);
    }

    /* Pages whose top section is light rather than dark
       (products.php, metuWLI.php, metuStudio.php) keep the
       logo in its natural colour while unscrolled — only the
       expanded, always-dark-blue badge gets the white logo. */
    body.light-hero header.header-transparent:not(.is-scrolled) .logo img {
        filter: none;
    }

    header.header-transparent .logo-badge {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: calc(100% + 1px);
        background: var(--dark-blue);
        border-radius: 0 0 0 40px;
        opacity: 0;
        transition: opacity .4s ease;
        z-index: 1;
        pointer-events: none;
    }

    header.header-transparent.is-scrolled .logo-badge {
        opacity: 1;
    }

    header.header-transparent .nav-pill {
        position: absolute;
        top: 50%;
        left: 0;
        width: 0;
        height: 48px;
        transform: translateY(-50%);
        border-radius: 999px;
        background: rgba(255,255,255,.62);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 6px 24px rgba(27,61,95,.1);
        pointer-events: none;
        z-index: 1;
        transition:
            left .5s cubic-bezier(.22,1,.36,1),
            width .5s cubic-bezier(.22,1,.36,1),
            background .3s ease,
            box-shadow .3s ease,
            /* Faster than the dropdown panel's own .25s reveal
               (below), so the pill has already reached full
               header height by the time the panel becomes
               visible — otherwise the panel's edge shows above
               a pill that's still mid-grow, reading as a gap
               under the nav. */
            border-radius .15s ease,
            height .15s ease,
            top .15s ease,
            transform .15s ease;
    }

    header.header-transparent.is-scrolled .nav-pill {
        top: 0;
        /* height:100% alone falls 1px short here: the pill's
           containing block is the header's padding box, which
           excludes the header's own 1px border — leaving a
           hairline gap above the dropdown panel just below it. */
        height: calc(100% + 1px);
        transform: none;
        /* Square now — the rounded cap lives on the logo
           badge's left edge instead, since this bar sits
           flush against it with no seam in between. */
        border-radius: 0;
        background: rgba(255,255,255,.78);
        box-shadow: none;
        border-bottom: 1px solid rgba(27,61,95,.08);
    }
}

@media (max-width: 900px) {
    .nav-pill {
        display: none;
    }
}

.dropdown-inner {
    width:min(1200px, calc(100% - 60px)); margin:0 auto;
    display:grid; grid-template-columns:.7fr 1.3fr; gap:70px;
}
.dropdown-intro span {
    display:block; margin-bottom:12px; color:var(--muted); font-size:10px;
    font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.dropdown-intro h3 {
    max-width:350px; font-size:25px; line-height:1.15; font-weight:400;
    letter-spacing:-.025em;
}
.dropdown-intro p {
    max-width:350px; margin-top:15px; color:var(--muted);
    font-size:13px; line-height:1.7;
}
.dropdown-links { display:grid; grid-template-columns:repeat(2,1fr); }
.dropdown-link {
    padding:16px 18px; border-top:1px solid var(--border);
    transition:background .25s ease, padding-left .25s ease;
}
.dropdown-link:nth-child(3), .dropdown-link:nth-child(4) { border-bottom:1px solid var(--border); }
.dropdown-link:hover { padding-left:24px; background:var(--light-bg); }
.dropdown-link strong { display:block; margin-bottom:4px; font-size:13px; font-weight:500; }
.dropdown-link span { color:var(--muted); font-size:11px; }

footer { padding:60px 0 30px; background:var(--dark-blue); color:var(--white); }
.footer-inner { width:min(1200px, calc(100% - 60px)); margin:0 auto; }
.footer-top {
    display:flex; align-items:flex-start; justify-content:space-between;
    padding-bottom:45px; border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-links { display:flex; flex-wrap:wrap; gap:28px; color:rgba(255,255,255,.62); font-size:11px; }
.footer-links-break { display:none; }
.footer-links a { transition:color .2s ease; }
.footer-links a:hover { color:var(--white); }
.footer-bottom {
    padding-top:22px; display:flex; justify-content:space-between;
    color:rgba(255,255,255,.38); font-size:10px;
}

@media (max-width:1100px) { .main-nav { gap:21px; } }
@media (max-width:900px) {
    header { height:70px; }
    .header-inner { width:calc(100% - 40px); }
    .main-nav, .dropdown-panel { display:none; }
    .footer-top { flex-direction:column; gap:35px; }
    .footer-links { gap:18px; }
    .footer-links-break { display:block; flex-basis:100%; width:0; height:0; }
    .footer-bottom { flex-direction:column; gap:8px; }
}


/* =========================================
   MOBILE HEADER NAVIGATION
========================================= */

/* Desktop: hide mobile navigation */

.mobile-menu-toggle,
.mobile-nav {
    display: none;
}

/* Mobile navigation */

@media (max-width: 900px) {

    header {
        height: 70px;
        overflow: visible;
    }

    .header-inner {
        position: relative;
        width: calc(100% - 40px);
        overflow: visible;
    }

    /* Hide desktop navigation */

    .main-nav,
    .dropdown-panel {
        display: none;
    }

    /* Burger button */

    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;

        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 0;

        border: none;
        background: transparent;
        cursor: pointer;
        z-index: 1002;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--dark-blue);
        border-radius: 2px;
        transition: transform .25s ease, opacity .2s ease;
    }

    /* Burger transforms into X */

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Mobile dropdown */

    .mobile-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;

        padding: 16px 20px 26px;

        background: rgba(27, 61, 95, .92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 18px 30px rgba(0, 20, 35, .25);
        border-top: 1px solid rgba(255, 255, 255, .08);

        max-height: calc(100dvh - 75px);
        overflow-y: auto;
        z-index: 1001;
    }

    .mobile-nav.is-open {
        display: block;
    }

    /* Navigation links */

    .mobile-nav-link {
        display: block;
        padding: 17px 0;

        color: var(--white);
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;

        border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

    .mobile-nav-row {
        display: flex;
        align-items: stretch;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

    .mobile-nav-row .mobile-nav-link {
        flex: 1;
        border-bottom: none;
    }

    /* Submenu arrow */

    .mobile-submenu-toggle {
        position: relative;
        width: 48px;
        min-width: 48px;

        border: none;
        background: transparent;
        cursor: pointer;
    }

    .mobile-submenu-toggle span {
        position: absolute;
        top: 19px;
        left: 17px;

        width: 10px;
        height: 10px;

        border-right: 2px solid var(--white);
        border-bottom: 2px solid var(--white);

        transform: rotate(45deg);
        transition: transform .25s ease;
    }

    .mobile-submenu-toggle.is-open span {
        transform: rotate(225deg);
    }

    /* Submenu links */

    .mobile-submenu {
        display: none;
        padding: 8px 0 14px 16px;
        background: rgba(255, 255, 255, .04);
    }

    .mobile-submenu.is-open {
        display: block;
    }

    .mobile-submenu a,
    .mobile-nav-disabled {
        display: block;
        padding: 12px 0;

        color: var(--light-blue);
        font-size: 13px;
        line-height: 1.5;
        text-decoration: none;
    }

    .mobile-nav-disabled {
        opacity: .5;
    }
}

/* Mobile navigation – consistent text colors */
@media (max-width: 900px) {

    .tech-page .mobile-nav .mobile-nav-link,
    .tech-page .mobile-nav .mobile-nav-link:visited {
        color: #FFFFFF;
    }

    .tech-page .mobile-nav .mobile-submenu a,
    .tech-page .mobile-nav .mobile-submenu a:visited {
        color: #DDE5EE;
    }
}

/* Compact mobile dropdown – Technology page */
@media (max-width: 900px) {

    .tech-page .mobile-nav {
        padding: 10px 20px 16px;
    }

    .tech-page .mobile-nav-link {
        padding: 12px 0;
        font-size: 13px;
    }

    .tech-page .mobile-submenu {
        padding: 5px 0 10px 16px;
    }

    .tech-page .mobile-submenu a,
    .tech-page .mobile-nav-disabled {
        padding: 9px 0;
        font-size: 12px;
    }
}

/* Mobile menu – same font sizes as homepage */
@media (max-width: 900px) {

    .tech-page .mobile-nav .mobile-nav-link {
        font-size: 15px;
        padding: 17px 0;
    }

    .tech-page .mobile-nav .mobile-submenu a,
    .tech-page .mobile-nav .mobile-nav-disabled {
        font-size: 13px;
        padding: 12px 0;
    }
}