/* ==================================================================
   brand.css — Monash Digital Guidelines: typography, colour, site nav.
   Shared by the landing page and the expo pages.

   Sizes are taken from the Digital Guidelines typography tables
   (desktop p.3, mobile p.4). The guidelines quote both em and px; these
   use rem, which is the same number against a 16px root and does not
   compound when nested.

   Body text is set in Roboto rather than the Helvetica Neue named in the
   type tables. Helvetica Neue is a commercial face that ships only on
   Apple platforms, so on Windows and Android it silently became Arial,
   and the copies on public CDNs are redistributed without a licence.
   The guidelines themselves point the way out (p.3): "Roboto is used in
   the online space to ensure stylistic consistency across different
   operating systems." Roboto is free, servable, normal-width like
   Helvetica Neue, and consistent on every OS. Note this is Roboto, not
   Roboto Condensed — a condensed face is drawn for display and hurts
   legibility in running text at 16px.

   Century Schoolbook is still licensed and still falls back to Georgia.
   Ask SMC for the licensed webfont files (Monash holds the typeface
   licence; what is needed is the web-embedding files and confirmation
   the domain is covered), then add @font-face here.
   ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Roboto:wght@400;500;700&display=swap');

:root {
    /* -- Monash primary palette (Digital Guidelines p.5) -------------- */
    --monash-white: #FFFFFF;
    --monash-blue: #006DAE;
    --monash-black: #000000;
    --monash-grey-800: #3c3c3c;
    --monash-grey-600: #505050;
    --monash-grey-100: #F6F6F6;

    /* -- Web-accessible secondary palette, WCAG AA with white text --- */
    --monash-blue-aa: #00739d;
    --monash-purple: #6f64a9;
    --monash-fuchsia: #c90095;
    --monash-ruby: #c800d9;
    --monash-red: #df0021;
    --monash-orange: #c33603;
    --monash-umber: #795548;
    --monash-olive: #616d3a;
    --monash-green: #006f29;

    /* -- Typefaces --------------------------------------------------- */
    /* --font-script is a Noto face for the page's script (CmsHelper::htmlAttributes).
       It follows the Latin face, so names and numbers stay in the brand type. */
    --font-banner: "Roboto Condensed", var(--font-script, Arial), Arial, sans-serif;
    --font-heading: "Century Schoolbook", "New Century Schoolbook",
                    "Century Schoolbook L", Georgia, var(--font-script, serif), serif;
    /* Arial trails Roboto deliberately: it is named as Monash's system
       typeface on the same page, so the fallback also lands on an approved
       face rather than on an arbitrary one. */
    --font-body: "Roboto", var(--font-script, Arial), Arial, sans-serif;

    /* -- Type scale, desktop ----------------------------------------- */
    --type-banner-heading: 4.6875rem;   /* 4.7em  / 75px   */
    --type-banner-subtext: 2.65625rem;  /* 2.65em / 42.5px */
    --type-intro-heading: 2.625rem;     /* 2.625em / 42px  */
    --type-intro-text: 1.5rem;          /* 1.5em  / 24px   */
    --type-featured-heading: 1.5rem;    /* 1.5em  / 24px   */
    --type-body: 1rem;                  /* 1em    / 16px   */
    --type-button: 1rem;                /* 1em    / 16px   */
    --type-link: 1rem;                  /* 1em    / 16px   */
    --type-footer-link: 0.8125rem;      /* 0.8125em / 13px */
}

/* The guidelines give a desktop and a mobile scale but do not name the
   breakpoint; 768px is this project's choice, not a brand requirement. */
@media (max-width: 768px) {
    :root {
        --type-banner-heading: 2rem;        /* 2em      / 32px */
        --type-banner-subtext: 0.9375rem;   /* 0.9375em / 15px */
        --type-intro-heading: 1.5rem;       /* 1.5em    / 24px */
        --type-intro-text: 1.125rem;        /* 1.125em  / 18px */
        --type-featured-heading: 1.3125rem; /* 1.3125em / 21px */
        --type-body: 0.9375rem;             /* 0.9375em / 15px */
        --type-button: 1rem;                /* 1em      / 16px */
        --type-link: 0.9375rem;             /* 0.9375em / 15px */
        --type-footer-link: 0.75rem;        /* 0.75em   / 12px */
    }
}

/* ------------------------------------------------------------------
   Guideline roles
   ------------------------------------------------------------------ */

.t-banner-heading {
    font-family: var(--font-banner);
    font-weight: 400;
    font-size: var(--type-banner-heading);
}

.t-banner-subtext {
    font-family: var(--font-banner);
    font-weight: 400;
    font-size: var(--type-banner-subtext);
}

.t-intro-heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: var(--type-intro-heading);
}

.t-intro-text {
    font-family: var(--font-banner);
    font-weight: 400;
    font-size: var(--type-intro-text);
}

.t-featured-heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: var(--type-featured-heading);
}

.t-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--type-body);
}

/* ------------------------------------------------------------------
   Site nav — shared chrome
   ------------------------------------------------------------------ */

.site-nav {
    position: relative;
    z-index: 10;
    display: flex;
    width: 100%;
    padding: 2rem;
    justify-content: space-between;
    /* Centred: the wordmark is taller than the links, and topping the links
       out against it left them floating above its lower half. */
    align-items: center;
}

/* The landing page keeps its nav over the full-bleed hero. z-index 3 clears
   the page sections, which sit at 1 so they can scroll over the reveal
   footer; at 1 the nav would be painted over by later sections. */
.site-nav--fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
}

/* Stays at the top of the viewport as the page scrolls. Needs an opaque
   background, which the page supplies — the bar is transparent otherwise so a
   hero can show through it. */
.site-nav--sticky {
    position: sticky;
    top: 0;
    /* Above any other sticky bar on the page, so the two stack rather than
       overlap where they meet. */
    z-index: 30;
    background-color: var(--site-nav-bg, transparent);
}

.nav-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav-brand__mask {
    display: block;
    overflow: hidden;
    line-height: 0;
    /* The brand is a flex container; without this the mask is a shrinkable
       item of indeterminate width, which is what collapses the logo below. */
    flex: 0 0 auto;
}

.nav-brand__line {
    display: block;
    will-change: transform;
}

/* The supplied SVG has no fill attributes, so it renders black — invisible
   on these dark grounds. brightness(0) flattens it to black and invert(1)
   lifts it to #FFFFFF, giving a reversed lockup without a second asset.
   Replace with Monash's official reversed artwork when it is available. */
.nav-brand__logo {
    display: block;
    width: auto;
    height: 2rem;
    /* Use a viewport-based bound: percentages collapse this auto-width flex item. */
    max-width: min(16rem, calc(100vw - 6rem));
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.nav-links {
    display: flex;
    gap: 2rem;
    min-width: 0;
}

/* Link text, 1em desktop / 0.9375em mobile. */
.nav-links a {
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--type-link);
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--monash-white);
    text-decoration: none;
    /* Transparent by default so hovering does not shift the layout. */
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

/* Guidelines p.10: buttons and links underline on hover.
   Drawn as a border on the anchor rather than text-decoration: the landing
   page preloader splits these links into GSAP word masks with
   `overflow: clip` and a box exactly the height of the text, so a text
   underline sits below that box and is clipped away. A border on the anchor
   is outside the masks and renders on both pages. */
.nav-links a:hover,
.nav-links a:focus-visible {
    border-bottom-color: currentColor;
}

/* The page or section being displayed (nav.php marks Find a project and Past
   projects, landing_page.js marks About us) being bold and underlined. */
.nav-links > a[aria-current] {
    font-weight: 700;
    border-bottom-color: currentColor;
}

/* Tablets keep one row: links and gaps shrink with the screen
   (under 768px the burger menu takes over). */
@media (max-width: 1000px) {
    .nav-links {
        gap: clamp(0.75rem, 1.5vw, 2rem);
    }

    .nav-links a {
        font-size: clamp(0.6875rem, 0.25rem + 0.85vw, 1rem);
        white-space: nowrap;
    }
}

/* Language menu: a native <details>, so it opens without script. */
.nav-lang {
    position: relative;
    line-height: 1;
}

.nav-lang summary {
    display: inline-block;
    vertical-align: top;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--type-link);
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--monash-white);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.nav-lang summary::-webkit-details-marker {
    display: none;
}

.nav-lang summary:hover,
.nav-lang summary:focus-visible,
.nav-lang[open] summary,
.nav-lang__menu a[aria-current] {
    border-bottom-color: currentColor;
}

.nav-lang__menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    inset-inline-end: 0;
    z-index: 20;
    display: grid;
    gap: 0.75rem;
    min-width: 10rem;
    margin: 0;
    padding: 1rem 1.25rem;
    list-style: none;
    text-align: start;
    background-color: var(--site-nav-menu-bg, rgba(8, 10, 14, 0.97));
}

/* Tracking pulls joined letters apart and crowds CJK; other scripts go without. */
html[data-script] * {
    letter-spacing: normal !important;
}

/* ------------------------------------------------------------------
   Burger menu (phones)

   Pages opt in with the nav element's `menu` flag, which adds
   `.site-nav--menu`, the toggle and site_nav.js. Under 768px the links
   leave the bar and become a full-screen overlay above everything else on
   the page; the burger and the lockup stay on top of it. A click on the
   burger or anywhere on the overlay closes it again.
   ------------------------------------------------------------------ */

.nav-toggle {
    display: none;
}

@media (max-width: 767px) {
    .nav-toggle {
        position: relative;
        z-index: 2;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0 0.5rem;
        margin-right: -0.5rem;
        background: none;
        border: 0;
        color: var(--monash-white);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-toggle:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

    .nav-toggle__bar {
        display: block;
        width: 100%;
        height: 2px;
        background-color: currentColor;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    /* Bars fold into an X while the menu is open. */
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .site-nav--menu .nav-brand {
        position: relative;
        z-index: 2;
    }

    /* Doubled class: page stylesheets (landing_page.css, expo_search.css)
       lay the links out as a row or column and must not win here. */
    .site-nav.site-nav--menu .nav-links {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 6rem 1.25rem 2rem;
        overflow-y: auto;
        text-align: left;
        background-color: var(--site-nav-menu-bg, rgba(8, 10, 14, 0.97));
        opacity: 0;
        visibility: hidden;
        /* Closed, it must not take taps: the landing page makes nav links
           visible after its intro, which overrides the hidden above, and the
           invisible links caught taps meant for the page (Find a project
           opened the Information room pop-up). */
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    }

    .site-nav.site-nav--menu .nav-links.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.25s ease, visibility 0s;
    }

    .site-nav.site-nav--menu .nav-links a {
        padding: 1.25rem 0;
        font-size: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .site-nav.site-nav--menu .nav-links a:hover,
    .site-nav.site-nav--menu .nav-links a:focus-visible {
        border-bottom-color: currentColor;
    }

    .site-nav.site-nav--menu .nav-lang summary {
        display: block;
        padding: 1.25rem 0;
        font-size: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .site-nav.site-nav--menu .nav-lang__menu {
        position: static;
        gap: 0;
        padding: 0 0 0 1.5rem;
        background: none;
    }

    .site-nav.site-nav--menu .nav-lang__menu a {
        display: block;
        padding: 0.875rem 0;
        font-size: 1.25rem;
    }

    /* While open, lift the whole bar (and a sticky header around it) above
       every other layer on the page, and stop the page scrolling behind. */
    html.nav-menu-open {
        overflow: hidden;
    }

    html.nav-menu-open .site-nav--menu,
    html.nav-menu-open .expo-header {
        z-index: 1000;
    }
}

/* ------------------------------------------------------------------
   Site footer

   Default is an ordinary footer at the end of the document. The
   scroll-reveal is layered on top of that by the `footer-reveal` class,
   which the element's own script adds only when the footer is shorter
   than the viewport — a fixed element taller than the screen could never
   be seen in full.

   When revealed, the page's sections must be opaque and above z-index 0
   or the footer shows through them. Stacking on these pages:
       0  footer          (fixed, revealed)
       1  page sections   (scroll over it)
       3  fixed nav / corner login
       4  preloader
   ------------------------------------------------------------------ */

.site-footer {
    overflow-wrap: anywhere;
    background-color: var(--site-footer-bg, var(--monash-black));
    color: var(--monash-white);
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 75rem;
    margin: 0 auto;
    padding: 3rem 2rem;
}

/* --- reveal mode --------------------------------------------------- */

.site-footer-revealer {
    display: none;
}

.footer-reveal .site-footer-revealer {
    display: block;
    position: relative;
    width: 100%;
    height: var(--site-footer-h, 0px);
}

.footer-reveal .site-footer {
    position: fixed;
    left: 0;
    bottom: var(--cms-preview-height, 0px);
    z-index: 0;
    width: 100%;
}

/* --- type ---------------------------------------------------------- */

/* Footer links: 0.8125em/13px desktop, 0.75em/12px mobile
   (Digital Guidelines p.3-4). Everything in here sits at that size. */
.site-footer,
.site-footer__text,
.site-footer__list a,
.site-footer__acknowledgement {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--type-footer-link);
    line-height: 1.6;
}

.site-footer a {
    color: var(--monash-white);
    text-decoration: none;
}

/* Guidelines p.10: links underline on hover. */
.site-footer a:hover,
.site-footer a:focus-visible {
    text-decoration: underline;
}

.site-footer__acknowledgement {
    max-width: 60rem;
    margin: 0 auto;
    text-align: center;
    color: var(--monash-grey-100);
}

.site-footer__acknowledgement a {
    text-decoration: underline;
}

.site-footer__heading {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.site-footer__legalheading {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--type-footer-link);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

/* --- layout -------------------------------------------------------- */

.site-footer__columns,
.site-footer__legal {
    display: grid;
    grid-template-columns: repeat(var(--footer-columns, 2), minmax(0, 1fr));
    gap: 2rem 3rem;
}

.site-footer__col p {
    max-width: 34ch;
    margin-bottom: 1rem;
}

.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.site-footer__list li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.site-footer__list svg {
    flex: 0 0 auto;
    width: 0.9em;
    height: 0.9em;
    /* baseline alignment on a flex row leaves icons riding high */
    transform: translateY(0.1em);
}

.site-footer__legal {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.site-footer__copyright {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--type-footer-link);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* Clears the landing page's fixed corner login button, which sits over
       the footer once it is revealed. */
    padding-left: 8rem;
    text-align: right;
}

.cms-preview-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .75rem;
    background: #fff;
    color: #111;
    border-top: 3px solid #006dae;
    font: 14px/1.4 sans-serif;
}
.cms-preview-banner a { color: #006dae; text-decoration: underline; }
.cms-preview-banner form { margin: 0; }
.cms-preview-banner button { padding: .5rem; cursor: pointer; }
.cms-preview-active { padding-bottom: var(--cms-preview-height, 0px); }
.expo-search h2, .expo-search p { overflow-wrap: anywhere; }
.site-footer__legal .site-footer__col p { margin-bottom: 0; max-width: none; }
@media (min-width: 769px) {
    .site-footer__columns { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
}

@media (max-width: 768px) {
    .site-footer__columns,
    .site-footer__legal {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer__inner {
        padding: 2rem 1.25rem;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .site-nav {
        padding: 1.25rem;
    }

    .nav-brand__logo {
        height: 1.5rem;
    }
}

/* ------------------------------------------------------------------
   Brochure and Information Room pop-ups (nav.php, site_nav.js)
   ------------------------------------------------------------------ */
.nav-dialog {
    /* Centred on screen; a page's margin reset pin it top-left. */
    position: fixed;
    inset: 0;
    margin: auto;
    height: fit-content;
    width: min(28rem, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background-color: #111216;
    color: var(--monash-white);
}

.nav-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

.nav-dialog__box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.75rem;
    font-family: var(--font-body);
}

.nav-dialog__title {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.nav-dialog__text {
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.85;
}

.nav-dialog__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.nav-dialog__button {
    padding: 0.6rem 1.4rem;
    border: 1px solid var(--monash-white);
    border-radius: 2rem;
    background: none;
    color: var(--monash-white);
    font: inherit;
    font-size: var(--type-button);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-dialog__button:hover,
.nav-dialog__button:focus-visible {
    background-color: var(--monash-white);
    color: var(--monash-black);
}

.nav-dialog__button--go {
    border-color: var(--monash-blue);
    background-color: var(--monash-blue);
}