/* ==========================================================================
   Sydney University Astronomy Society
   Recreation of usydastro.au (Google Sites, captured 2025-03-16)

   Colour and typography are taken from the original: the brand blue is
   sampled from the site logo and matches the colour Google Sites passed
   to the embedded Google Calendar (#1a5dad); the fonts are those the
   original requested from Google Fonts.
   ========================================================================== */

:root {
  --brand: #1a5dad;
  --brand-dark: #144a8a;
  /* Dark theme: --paper is the page background, --surface the raised panels
     that sit on it. --link is lightened from --brand because the brand blue
     is far too dark to remain readable against black. */
  --link: #8ab4f8;
  --ink: #e8eaed;
  --muted: #9aa0a6;
  --rule: #2c2c2e;
  /* --paper is only the fallback painted behind the fixed backdrop layer.
     --surface and --wash are translucent so that backdrop reads through
     the panels and section bands sitting on top of it. */
  --paper: #05070c;
  --surface: rgba(18, 18, 18, 0.82);
  --wash: rgba(255, 255, 255, 0.05);
  --font-head: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Lato", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1120px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* The light-painting photo — the one the original used as the gallery band —
   now backs the whole site. It is pinned to the viewport with a fixed layer
   rather than `background-attachment: fixed`, which iOS Safari ignores, so
   the page content scrolls over a still image. The gradient scrim keeps body
   copy readable wherever it lands. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(4, 8, 14, 0.58), rgba(4, 8, 14, 0.7)),
    url("../img/events-banner.jpg") center / cover no-repeat;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--link);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 0.5em;
}

h2 {
  font-size: 2rem;
  margin-top: 0;
}

h3 {
  font-size: 1.25rem;
  margin-bottom: 0.35em;
}

p {
  margin: 0 0 1em;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- skip link ---------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}

.skip:focus {
  left: 0;
}

/* ---------- top bar ------------------------------------------------------ */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.topbar__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.brandmark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}

.brandmark img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

.brandmark span {
  font-family: var(--font-head);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.nav a {
  font-family: var(--font-head);
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 4px;
}

.nav a:hover,
.nav a:focus {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}

.nav a[aria-current="page"] {
  color: var(--link);
  font-weight: 500;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 1.3rem;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--ink);
}

/* ---------- hero --------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: var(--brand-dark);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.34);
}

.hero__inner {
  position: relative;
  /* Above every slide. The slides live in their own stacking context
     (isolation on .hero__slides), so this 1 only has to beat that container,
     but being explicit is what keeps the title permanently legible no matter
     which slide is current or whether it has finished loading. */
  z-index: 1;
  padding: 72px 24px 62px;
  max-width: 900px;
}

.hero__eyebrow {
  font-family: var(--font-head);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 12px;
}

.hero h1 {
  font-size: clamp(1.7rem, 4.4vw, 3rem);
  margin: 0;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5);
}

.hero__credit {
  margin: 22px 0 0;
  font-size: 0.7rem;
  opacity: 0.85;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* ---------- hero slideshow ----------------------------------------------- */

/* The home page hero now crossfades through the event gallery photos
   instead of showing one static shot. The figures stack in a fixed-height
   band; each image covers it via object-fit and swaps with a long opacity
   transition. The band keeps --brand-dark behind it, matching the original
   hero treatment. With JS off, the first figure simply sits there still. */
.hero__slides {
  position: absolute;
  inset: 0;
  background: var(--brand-dark);
  overflow: hidden;
  /* Keep the slides' own z-indexes (the crossfade's is-current) contained
     here, so they can never rise above .hero__inner's text. */
  isolation: isolate;
}

/* Same veil the old static hero photo sat behind, so the title keeps its
   contrast over bright photos too. Painted after the slides at the same
   z-level, which in tree order puts it above them. */
.hero__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.34);
  z-index: 1;
}

.hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.hero__slide.is-current {
  opacity: 1;
  z-index: 1;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide {
    transition: none;
  }
}

/* ---------- generic sections -------------------------------------------- */

.section {
  padding: 56px 0;
}

.section--wash {
  background: var(--wash);
}

/* The gallery band's own photo moved to the fixed page backdrop (see
   body::before), so this is now a translucent tint that still separates the
   gallery from the section above while letting the backdrop read through. */
.section--banner {
  background: rgba(13, 27, 42, 0.55);
  color: #fff;
}

.section--banner .lede {
  color: rgba(255, 255, 255, 0.82);
}

.section--banner .gallery img {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

/* Deliberately not given a measure limit. The original 62ch cap wrapped
   body copy at roughly half the container width, which read as arbitrary
   mid-sentence breaks. Flex children would otherwise shrink to fit, hence
   the explicit 100% below. */
.lede {
  font-size: 1.08rem;
  max-width: none;
  width: 100%;
}

/* ---------- card grid (home page activities) ----------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 28px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 26px 24px;
}

/* Card logos sit inline before the title text, at emoji size, aligned like
   an emoji glyph would be (see vertical-align). Must override the global
   img { display: block } rule, which would otherwise force each icon onto
   its own line above the title. */
.card h3 img {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  vertical-align: -0.18em;
  margin-right: 0.4em;
}

.card h3 {
  color: var(--link);
}

.card p:last-child {
  margin-bottom: 0;
}

/* ---------- event gallery ------------------------------------------------ */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.gallery button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.gallery button:hover img,
.gallery button:focus img {
  transform: scale(1.06);
}

/* ---------- lightbox ----------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
}

.lightbox[open],
.lightbox.is-open {
  display: flex;
}

.lightbox img {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
}

.lightbox__bar {
  position: absolute;
  top: 16px;
  right: 18px;
  display: flex;
  gap: 10px;
}

.lightbox__bar button {
  background: rgba(255, 255, 255, 0.14);
  border: 0;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.lightbox__bar button:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* ---------- committee ---------------------------------------------------- */

.committee {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
  margin-top: 30px;
}

.person {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  margin: 0;
}

.person img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--wash);
}

.person figcaption {
  padding: 16px 18px 20px;
}

.person h3 {
  margin: 0 0 2px;
  font-size: 1.1rem;
}

.person .role {
  color: var(--link);
  font-family: var(--font-head);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}

.person .degree {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0 0 10px;
}

.person .fact {
  font-size: 0.92rem;
  font-style: italic;
  margin: 0;
}

/* ---------- contact details --------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  margin-top: 28px;
}

.contact h3 {
  color: var(--link);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.contact address {
  font-style: normal;
  line-height: 1.7;
}

/* ---------- panels / embeds --------------------------------------------- */

.panel {
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}

.calendar-frame {
  width: 100%;
  height: 640px;
  border: 0;
  display: block;
}

.notice {
  background: var(--wash);
  border-left: 4px solid var(--brand);
  padding: 16px 20px;
  margin: 22px 0 0;
  font-size: 0.95rem;
}

.notice p:last-child {
  margin-bottom: 0;
}

/* ---------- photo submission form ---------------------------------------- */

.submit-form {
  margin-top: 26px;
  max-width: 720px;
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: rgba(10, 10, 10, 0.72);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 11px 13px;
}

.field input[type="file"] {
  width: 100%;
  font: inherit;
  color: var(--muted);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 1px;
}

.field textarea {
  resize: vertical;
}

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 20px;
}

.hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 6px 0 0;
}

.field--check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  max-width: 60ch;
}

.field--check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 5px;
}

.field--check label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
}

.previews {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.previews:empty {
  display: none;
}

.previews li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 8px 12px;
}

.previews img {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 4px;
}

.previews__meta {
  font-size: 0.92rem;
}

.previews__dims {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}

.button {
  font: inherit;
  font-family: var(--font-head);
  font-size: 1rem;
  color: #fff;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 6px;
  padding: 12px 22px;
  cursor: pointer;
}

.button:hover,
.button:focus-visible {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

.button--ghost {
  color: var(--link);
  background: none;
  border-color: var(--rule);
}

.button--ghost:hover,
.button--ghost:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--link);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.form-status {
  min-height: 1.4em;
  margin: 4px 0 18px;
  font-size: 0.95rem;
}

.form-status--ok {
  color: #9be7a8;
}

.form-status--warn {
  color: #ffd479;
}

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

.site-foot {
  /* Matches the topbar: translucent dark surface and a hairline rule, rather
     than the original solid brand-blue bar (which was too bright for the
     dark theme). */
  background: var(--surface);
  border-top: 1px solid var(--rule);
  color: #fff;
  padding: 40px 0 34px;
  margin-top: 20px;
}

.site-foot__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.site-foot a {
  color: #fff;
  text-decoration: underline;
}

.site-foot h3 {
  margin: 0 0 8px;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.85);
}

.site-foot__block p {
  margin: 0;
}

.socials {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.socials a:hover {
  background: rgba(255, 255, 255, 0.3);
}

.socials img,
.socials svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Discord and email are inline SVG rather than the rescued white PNGs, so
   they need an explicit fill (the discs behind them are always brand blue,
   which means currentColor would come out dark on the light backgrounds). */
.socials svg {
  fill: #fff;
}

/* Social badges sitting on a light background: the rescued icons are the
   white variants, so they need a coloured disc behind them. Must come
   after the rule above, which it ties with on specificity. */
.socials--onlight a {
  background: var(--brand);
}

.socials--onlight a:hover,
.socials--onlight a:focus {
  background: var(--brand-dark);
}

.usu {
  margin-left: auto;
  text-align: right;
}

/* The "Supported by USU" mark is white-on-transparent, drawn for the
   coloured footer bar — it must not sit on a light background. */
.usu img {
  width: 200px;
}

.site-foot__legal {
  max-width: var(--wrap);
  margin: 30px auto 0;
  text-align: center;
  padding: 18px 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- under-construction notice ------------------------------------ */

/* Without scripting this is a red band at the top of the document: a visitor on
   a locked-down browser is still told, and the page below still scrolls. The
   inline script in the page head adds "js" to <html>, which promotes the very
   same markup to a modal over the page, and adds "construction-dismissed" once
   the notice has been acknowledged so it stays away for the rest of the visit. */
.construction {
  background: #c62828;
  color: #fff;
  padding: 18px 24px;
  text-align: center;
}

.construction__panel {
  max-width: 720px;
  margin: 0 auto;
}

.construction__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.construction__note {
  margin: 8px 0 0;
  font-size: 1.05rem;
}

.construction__dismiss {
  margin-top: 22px;
}

.js .construction {
  position: fixed;
  inset: 0;
  /* Above the lightbox, below the skip link, which must stay reachable. */
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 5, 10, 0.78);
}

.js .construction__panel {
  width: 100%;
  max-width: 620px;
  background: #c62828;
  border-radius: 10px;
  padding: 34px 30px 30px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}

.js .construction__title {
  font-size: clamp(1.5rem, 4.4vw, 2.35rem);
}

.js .construction__note {
  font-size: clamp(1rem, 2.4vw, 1.25rem);
}

.construction-dismissed .construction {
  display: none;
}

/* ---------- gallery admin ------------------------------------------------ */

/* The caretaker's page. Dark like the site, deliberately plainer: the only job
   here is scanning the grid and removing one photo. */
.admin__wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 36px 24px 80px;
}

.admin__wrap h1 {
  font-family: var(--font-head);
  font-weight: 300;
}

.admin__back {
  font-size: 0.9rem;
}

.admin__flash {
  padding: 12px 16px;
  border-left: 4px solid var(--brand);
  background: var(--wash);
  border-radius: 4px;
}

.admin__flash--ok {
  border-left-color: #4caf50;
}

.admin__flash--bad {
  border-left-color: #c62828;
}

.admin__login {
  max-width: 360px;
  margin: 26px 0 40px;
}

.admin__login label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.admin__login input[type="password"] {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: rgba(10, 10, 10, 0.72);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 11px 13px;
  margin-bottom: 16px;
}

.admin__meta {
  color: var(--muted);
  font-size: 0.92rem;
}

.admin__logout {
  margin: 0 0 24px;
}

.admin__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
}

.admin__card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}

.admin__card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.admin__card figcaption {
  padding: 12px 14px 16px;
}

.admin__file {
  font-family: var(--font-head);
  margin: 0 0 4px;
}

.admin__detail {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.85rem;
}

.button--danger {
  background: #c62828;
  border-color: #c62828;
}

.button--danger:hover,
.button--danger:focus-visible {
  background: #9f1f1f;
  border-color: #9f1f1f;
}

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 760px) {
  .nav-toggle {
    display: block;
  }

  /* Longer brand name needs to sit beside the hamburger on small screens. */
  .brandmark span {
    font-size: 1.05rem;
  }

  .nav {
    display: none;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav.is-open {
    display: flex;
  }

  .nav a {
    padding: 12px 8px;
    border-top: 1px solid var(--rule);
  }

  .hero {
    min-height: 260px;
  }

  .section {
    padding: 40px 0;
  }

  .site-foot__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .usu {
    margin-left: 0;
    text-align: left;
  }

  .calendar-frame {
    height: 480px;
  }
}

@media print {
  .topbar,
  .site-foot,
  .lightbox,
  .construction {
    display: none;
  }
}