/* ==================================================================
   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-banner: "Roboto Condensed", Arial, sans-serif;
    --font-heading: "Century Schoolbook", "New Century Schoolbook",
                    "Century Schoolbook L", Georgia, 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", 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;
    /* expo_search.css sets `img { max-width: 100% }`. Inside an auto-width
       flex item that percentage has no basis to resolve against and collapses
       the logo to 0px wide, so it is explicitly lifted here. */
    max-width: none;
    filter: brightness(0) invert(1);
}

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

/* Link text, 1em desktop / 0.9375em mobile. */
.nav-links a {
    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;
}

@media (max-width: 1000px) {
    .nav-links {
        flex-direction: column;
        gap: 0.25rem;
        text-align: right;
    }
}

/* ------------------------------------------------------------------
   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 {
    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: 0;
    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(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;
}

@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;
    }
}