/* Public site: header with the brand and page menu, and the footer.
 *
 * Mobile first. The header spans the full window width at every size, and its
 * height, side padding and text scale fluidly with the viewport, so the brand
 * sits at the left edge and the menu at the right edge on phones and wide
 * monitors alike. Below 1024px the menu folds behind a toggle once
 * static/js/site-header.js has marked the header as enhanced; without the
 * script the menu simply wraps under the brand, so it is always reachable.
 * (1024px: the six entries no longer fit beside the brand on one line on
 * portrait tablets, so they fold there too.)
 */

/* Menu face, served locally (variable font, weights 300-700, Latin subset;
   licence in static/fonts/OFL-Quicksand.txt). */
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/Quicksand-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

.site-body {
  /* Fluid header metrics: phone values at 360px, growing with the window. */
  --site-header-height: clamp(64px, 3.25rem + 1.5vw, 104px);
  --site-header-gutter: clamp(var(--space-md), 3.5vw, 7rem);
  --site-brand-size: clamp(1.375rem, 0.95rem + 1.4vw, 3rem);
  --site-nav-size: clamp(1rem, 0.85rem + 0.4vw, 1.5rem);
  --site-nav-gap: clamp(var(--space-2xs), 0.6vw, var(--space-lg));

  display: flex;
  flex-direction: column;
}

/* ----------------------------------------------------------------- Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-chrome);
  border-bottom: 1px solid var(--color-chrome-border);
}

.site-header__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  min-height: var(--site-header-height);
  padding: var(--space-xs) var(--site-header-gutter);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  font-size: var(--site-brand-size);
  line-height: 1;
}

.site-header__brand:hover {
  text-decoration: none;
}

/* Hamburger toggle: only shown on small screens once the script runs. */
.site-header__toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-chrome-border);
  border-radius: var(--radius-md);
  background-color: var(--color-chrome-raised);
  color: var(--color-brand);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.site-header__toggle:hover {
  border-color: var(--color-brand);
}

.site-header__toggle-bars,
.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  transition: transform var(--transition-normal), opacity var(--transition-fast);
}

.site-header__toggle-bars {
  position: relative;
}

.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-header__toggle-bars::before {
  transform: translateY(-6px);
}

.site-header__toggle-bars::after {
  transform: translateY(6px);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars {
  background-color: transparent;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::before {
  background-color: var(--color-brand);
  transform: rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::after {
  background-color: var(--color-brand);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------------- Menu */

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--site-nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75em;
  border-radius: var(--radius-md);
  font-family: var(--font-menu);
  font-size: var(--site-nav-size);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-site-nav-text);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.site-nav__link:hover {
  color: var(--color-company);
  background-color: var(--color-chrome-raised);
  text-decoration: none;
}

/* Signed in: the "Profile" entry carries an avatar icon. */
.site-nav__link--profile {
  gap: 0.45em;
}

.site-nav__icon {
  flex: 0 0 auto;
  width: 1.2em;
  height: 1.2em;
  color: var(--color-company);
}

/* Current page: a gold underline, so the state does not rely on colour alone. */
.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 0.75em;
  bottom: 6px;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--color-brand);
}

/* Phones and tablets with the script: the menu becomes a drop-down panel. */
@media (max-width: 1023.98px) {
  .site-header[data-nav-enhanced] .site-nav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    padding: var(--space-xs) var(--site-header-gutter) var(--space-md);
    background-color: var(--color-chrome);
    border-bottom: 1px solid var(--color-chrome-border);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity var(--transition-normal), transform var(--transition-normal),
      visibility 0s linear var(--transition-normal);
  }

  .site-header[data-nav-enhanced].is-nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--transition-normal), transform var(--transition-normal);
  }

  .site-header[data-nav-enhanced] .site-nav__list {
    flex-direction: column;
    align-items: stretch;
  }

  .site-header[data-nav-enhanced] .site-nav__link {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .site-header__toggle {
    display: none;
  }
}

/* ------------------------------------------------------------------- Main */

.site-main {
  flex: 1 0 auto;
}

/* ----------------------------------------------------------------- Footer */

/* Four columns on desktops (About Us wider; five when the "Apps" column is
   shown), two on tablets, one on phones, then a bottom bar with the
   copyright and the social links.

   Like the header, the footer spans the full window with the same side
   gutter, and its text, spacing and icons grow fluidly with the window
   (clamp(): phone size at ~360px, largest size on wide monitors), so header
   and footer keep the same proportions on every device. Everything is set in
   the header menu face (Quicksand, served locally). */
.site-footer {
  --site-footer-reveal: 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Body text: 15px on phones, ~18px on laptops, 21px on wide monitors. */
  --site-footer-text: clamp(0.9375rem, 0.8rem + 0.35vw, 1.3125rem);
  --site-footer-heading: clamp(1.125rem, 0.9rem + 0.6vw, 1.875rem);
  --site-footer-small: clamp(0.8125rem, 0.72rem + 0.25vw, 1.125rem);
  --site-footer-gap: clamp(var(--space-xl), 1rem + 2.5vw, 6rem);
  --site-footer-space: clamp(var(--space-2xl), 1.5rem + 3vw, 6rem);
  /* Touch targets: never below 44px, and taller as the text grows. */
  --site-footer-target: max(44px, 2.6em);

  position: relative;
  background-color: var(--color-chrome);
  border-top: 1px solid var(--color-chrome-border);
  color: var(--color-chrome-text-muted);
  font-family: var(--font-menu);
  font-size: var(--site-footer-text);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.site-footer__inner {
  padding: var(--site-footer-space) var(--site-header-gutter) 0;
  transition: opacity var(--site-footer-reveal), transform var(--site-footer-reveal);
}

/* Set by site-footer.js only while the footer is still below the window. */
.site-footer__inner[data-reveal="pending"] {
  opacity: 0;
  transform: translateY(1.5rem);
}

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

/* The <nav> landmark wraps the two link columns, but `display: contents`
   lets those columns sit in the footer grid as if they were its children. */
.site-footer__nav {
  display: contents;
}

.site-footer__heading {
  position: relative;
  margin-bottom: 0.9em;
  padding-bottom: 0.6em;
  font-family: var(--font-menu);
  font-size: var(--site-footer-heading);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  color: var(--color-chrome-text);
}

/* The short brand-yellow underline under every heading (scales with it). */
.site-footer__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.2em;
  height: max(3px, 0.14em);
  border-radius: var(--radius-pill);
  background-color: var(--color-brand);
}

.site-footer__about {
  max-width: 30em;
  line-height: 1.8;
}

.site-footer__links,
.site-footer__contact-list,
.site-footer__social {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Every link (and the GST button) is a full touch target. `flex` with
   `fit-content` keeps each row exactly that tall (an inline box would add line
   spacing below it) while the clickable area hugs the text. */
.site-footer__link {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: var(--site-footer-target);
  color: var(--color-brand);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: max(2px, 0.1em);
  text-underline-offset: 0.3em;
  overflow-wrap: anywhere;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast),
    transform var(--transition-normal);
}

.site-footer__link:hover {
  color: var(--color-chrome-text);
  text-decoration-color: var(--color-brand);
}

/* Link lists: the hovered entry slides slightly to the right. */
.site-footer__links .site-footer__link:hover {
  transform: translateX(0.25em);
}

/* Current page: underlined, so the state does not rely on colour alone. */
.site-footer__link[aria-current="page"] {
  color: var(--color-chrome-text);
  text-decoration-color: var(--color-brand);
}

/* Buttons do not inherit fonts by default; keep the link's own weight. */
.site-footer__link--button {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: start;
  cursor: pointer;
}

.site-footer__contact {
  font-style: normal;
}

/* Contact rows are separated by thin lines. */
.site-footer__contact-item {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding-block: 0.2em;
  border-bottom: 1px solid var(--color-chrome-border);
}

.site-footer__contact-item:last-child {
  border-bottom: 0;
}

.site-footer__contact-item--address {
  align-items: flex-start;
  padding-block: 0.75em;
}

.site-footer__icon {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  color: var(--color-brand);
}

/* Line the pin up with the first address line. */
.site-footer__contact-item--address .site-footer__icon {
  margin-top: 0.25em;
}

.site-footer__link--contact {
  min-width: 0;
}

.site-footer__address {
  min-width: 0;
  color: var(--color-chrome-text);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.site-footer__address-line {
  display: block;
}

/* ------------------------------------------------------ Footer bottom bar */

.site-footer__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--site-footer-space);
  padding-block: clamp(var(--space-lg), 1rem + 1vw, 2.5rem);
  border-top: 1px solid var(--color-chrome-border);
  font-size: var(--site-footer-small);
  text-align: center;
}

.site-footer__copyright {
  letter-spacing: 0.01em;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6em;
}

.site-footer__social-link {
  display: inline-grid;
  place-items: center;
  width: max(44px, 2.75em);
  height: max(44px, 2.75em);
  border: 1px solid var(--color-chrome-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-chrome-raised);
  color: var(--color-brand);
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast);
}

.site-footer__social-link:hover {
  border-color: var(--color-brand);
  background-color: var(--color-brand);
  color: var(--color-brand-contrast);
  transform: translateY(-2px);
}

.site-footer__social-icon {
  width: 45%;
  height: 45%;
}

/* Tablets: two columns (About | Useful Links, then Policy Pages | Contact). */
@media (min-width: 640px) {
  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__bar {
    flex-direction: row;
    justify-content: space-between;
    text-align: start;
  }
}

/* Laptops and up: four columns. From 1100px each column is wide enough for a
   phone number or an e-mail address on one line. */
@media (min-width: 1100px) {
  .site-footer__columns {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }

  /* With the "Apps" column: five columns in one row. A flex row instead of
     the grid, so the columns present always share the full width by weight
     (About wider, the short Apps list narrower, Contact Us - the last
     column - wide enough for an e-mail address) whichever columns are
     hidden. The <nav> stays `display: contents`, so its columns are flex
     items too. */
  .site-footer__columns--with-apps {
    display: flex;
    align-items: flex-start;
  }

  .site-footer__columns--with-apps .site-footer__column {
    flex: 1 1 0;
    min-width: 0;
  }

  .site-footer__columns--with-apps .site-footer__column--about {
    flex-grow: 1.15;
  }

  /* Never narrower than its longest label, so each app name stays on one line. */
  .site-footer__columns--with-apps .site-footer__column--apps {
    flex-grow: 0.6;
    min-width: max-content;
  }

  .site-footer__columns--with-apps .site-footer__column--apps .site-footer__link {
    white-space: nowrap;
  }

  /* Contact Us starts a little further right, away from the Policy Pages column. */
  .site-footer__columns--with-apps > .site-footer__column:last-child:not(.site-footer__column--about) {
    flex-grow: 1.65;
    padding-inline-start: clamp(1rem, 0.5rem + 2vw, 3.5rem);
  }
}

/* ------------------------------------------------------ Footer GST dialog */

.site-footer-dialog {
  width: min(28rem, calc(100vw - 2 * var(--space-md)));
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

.site-footer-dialog[open] {
  animation: site-footer-dialog-in var(--transition-normal);
}

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

.site-footer-dialog__body {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-lg) var(--space-sm);
}

.site-footer-dialog__title {
  font-size: var(--font-size-lg);
}

.site-footer-dialog__value {
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  user-select: all;
}

.site-footer-dialog__status {
  min-height: 1.5em;
  color: var(--color-success);
  font-size: var(--font-size-sm);
}

.site-footer-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
}

@keyframes site-footer-dialog-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__toggle-bars,
  .site-header__toggle-bars::before,
  .site-header__toggle-bars::after,
  .site-header[data-nav-enhanced] .site-nav,
  .site-header[data-nav-enhanced].is-nav-open .site-nav,
  .site-footer__inner,
  .site-footer__link,
  .site-footer__social-link {
    transition: none;
  }

  .site-footer__inner[data-reveal="pending"] {
    opacity: 1;
    transform: none;
  }

  .site-footer__social-link:hover,
  .site-footer__links .site-footer__link:hover {
    transform: none;
  }

  .site-footer-dialog[open] {
    animation: none;
  }
}