/* =============================================================================
   GURSC — Site stylesheet
   -----------------------------------------------------------------------------
   Organised top to bottom:
     1. Tokens        6. Cards & grids
     2. Reset/base    7. Shop
     3. Layout        8. Forms
     4. Header/nav    9. Notices
     5. Hero         10. Footer
   Change colours in section 1 only — everything else reads from those tokens.
   ========================================================================== */

/* -- 1. Tokens ------------------------------------------------------------ */

:root {
  /* Club colours — sampled directly from the club crest, so the site and the
     badge are the same navy and the same red. Do not "tidy" these by eye.
     Crest navy = #001f67 (60% of the crest), crest red = #ce132a.
     Every pairing below has been contrast-checked to WCAG AA. */
  --blue-900: #001139;   /* deepest — page header, footer, hero */
  --blue-800: #001f67;   /* THE crest navy — headings, forum bars */
  --blue-700: #1f3a79;
  --blue:     #10439b;   /* links — 9.14:1 on white */
  --blue-400: #8c9abb;
  --red:      #ce132a;   /* crest red — buttons, accents. 5.60:1 with white */
  --red-dark: #9b0e20;   /* button hover */

  /* Neutrals */
  --ink:       #16191f;
  --ink-soft:  #4a5261;
  --ink-faint: #737d8c;
  --line:      #dfe3ea;
  --surface:   #ffffff;
  --surface-2: #f4f6fa;
  --surface-3: #e9edf4;

  /* Type */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  /* Spacing & shape */
  --wrap: 1120px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(0, 17, 57, .10), 0 2px 8px rgba(0, 17, 57, .06);
  --shadow-md: 0 2px 6px rgba(0, 17, 57, .12), 0 10px 28px rgba(0, 17, 57, .10);
}

/* -- 2. Reset & base ------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.2;
  color: var(--blue-900);
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-700); }

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

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--red); color: #fff; padding: .75rem 1.25rem;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

/* -- 3. Layout ------------------------------------------------------------ */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.section { padding: 4rem 0; }
.section-alt { background: var(--surface-2); }

/* The header is sticky, so a jump to #about or #hamilton would otherwise land
   with the heading hidden underneath it. Leave room for the header. */
section[id] { scroll-margin-top: 6rem; }

.section-title {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  margin-bottom: 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 3px solid var(--red);
  display: inline-block;
}

.prose { max-width: 68ch; color: var(--ink-soft); }
.prose p { font-size: 1.0625rem; }

.page-head {
  background: var(--blue-900);
  color: #fff;
  padding: 3rem 0 2.5rem;
}
.page-title {
  color: #fff;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  margin-bottom: .4rem;
}
.page-intro {
  max-width: 60ch;
  color: rgba(255, 255, 255, .85);
  font-size: 1.1rem;
  margin: 0;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* -- 4. Header & navigation ----------------------------------------------- */

.site-header {
  background: var(--blue-900);
  border-bottom: 4px solid var(--red);
  position: sticky; top: 0; z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 78px;
}

.brand {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; color: #fff; padding: .4rem 0;
}
.brand-mark img { width: 46px; height: 46px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong {
  font-family: var(--font-display);
  font-size: 1.4rem; letter-spacing: .02em;
}
.brand-text small {
  font-size: .7rem; text-transform: uppercase;
  letter-spacing: .09em; color: rgba(255, 255, 255, .7);
}

/* On a narrow phone the full club name wraps onto two lines and makes the
   header top-heavy. Drop it there — the logo and GURSC identify the club, and
   the hero says the full name in full a few pixels further down. */
@media (max-width: 480px) {
  .brand-text small { display: none; }
}

.primary-nav ul {
  display: flex; gap: .25rem;
  list-style: none; margin: 0; padding: 0;
}
.primary-nav a {
  display: block;
  padding: .6rem .9rem;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  border-radius: var(--radius);
  border-bottom: 3px solid transparent;
}
.primary-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .09);
}
.primary-nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--red);
}

.nav-toggle {
  display: none;
  background: transparent; border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius); padding: .55rem .7rem; cursor: pointer;
}
.nav-toggle-bars { display: block; width: 22px; }
.nav-toggle-bars span {
  display: block; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bars span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 800px) {
  .nav-toggle { display: block; }
  .primary-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--blue-900);
    border-bottom: 4px solid var(--red);
    padding: .5rem 1.25rem 1rem;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav a {
    padding: .85rem .25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    border-radius: 0;
  }
  .primary-nav a[aria-current="page"] {
    border-bottom-color: var(--red);
  }
}

/* -- 5. Hero -------------------------------------------------------------- */

/* The hero is three stacked layers:
     0. a navy gradient background
     1. the Ibrox / Gilbert Scott artwork, anchored to the bottom
     2. a scrim that fades navy down over the artwork, so the white
        headline stays readable where it overlaps the buildings
     3. the text itself
   Without the scrim, white type over the white stonework is unreadable. */
/* The hero is a column: text on top, artwork underneath, never overlapping.
   An earlier version floated the text over the buildings and the outline
   button vanished into the stonework — text over busy artwork is a fight you
   lose. Stacking them means the artwork can stay at full strength. Its top
   edge is faded into the navy so it emerges from the background rather than
   sitting on it like a pasted-in photo. */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--blue-900) 0%, var(--blue-800) 100%);
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  padding-top: clamp(2rem, 4vh, 4.5rem);
}

.hero-inner { padding-bottom: clamp(1.5rem, 3vh, 3.5rem); }

.hero-skyline {
  position: relative;
  margin-top: auto;
  line-height: 0;
  pointer-events: none;
}
/* No scrim over the artwork. Its sky is transparent, so the hero's own
   gradient shows straight through and the spires silhouette against it
   naturally. An earlier overlay here just produced a visible seam. */
/* No height cap and no object-fit. The artwork simply keeps its own
   proportions at whatever width the screen is.
   Two earlier attempts got this wrong and are worth recording:
     - "cover" + a max-height sliced the spires off the top, because the
       artwork's steeples touch the very edge of its canvas and there is no
       spare sky to crop into.
     - "contain" + a max-height showed all of it but left 36% of the width as
       empty navy on a wide screen, so the skyline floated in the middle
       instead of spanning the page.
   Letting it size naturally means it is always complete AND always full
   width. The hero simply gets taller on a wider screen, which is what a
   full-bleed image does. */
.hero-skyline img {
  width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  .hero { padding-top: 3rem; }
  .hero-inner { padding-bottom: 2.5rem; }
}
/* The club's full name, stacked over three lines at equal size, the way it
   reads on the crest. Each line is its own block so it breaks in the same
   place at every screen width instead of rewrapping.
   The size is a little smaller than a one-line headline would be: three full
   lines carry far more visual weight than one, and at the old 3.6rem the
   block swamped the hero. */
.hero-title {
  color: #fff;
  margin-bottom: .6rem;
  font-size: clamp(1.3rem, 0.55rem + 4vw, 2.85rem);
  line-height: 1.14;
}
.hero-title span { display: block; }
.hero-tagline {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, .88);
  max-width: 44ch;
  margin: 0 auto 2rem;
}
.hero-actions {
  display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap;
}

/* -- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  font: inherit; font-weight: 700; font-size: 1rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }

.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.section .btn-ghost { border-color: var(--blue); color: var(--blue); }
.section .btn-ghost:hover { background: var(--blue); color: #fff; }

.btn-block { width: 100%; }

/* -- 6. Cards, fact boxes ------------------------------------------------- */

.card-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.card-title { font-size: 1.2rem; margin-bottom: .5rem; }
.card p { color: var(--ink-soft); font-size: .97rem; margin: 0; }

/* Portrait images in a sidebar — the club crest, and the Hamilton photograph.
   Sized so the lettering on the crest stays readable rather than shrinking. */
.aside-figure {
  margin: 0;
  text-align: center;
}
.aside-figure img {
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-inline: auto;
}
.aside-figure figcaption {
  margin-top: .9rem;
  font-size: .9rem;
  color: var(--ink-faint);
  letter-spacing: .02em;
}

@media (max-width: 860px) {
  /* Stacked layout — the crest no longer needs a whole column to itself. */
  .aside-figure img { max-width: 200px; }
}

/* -- CTA band ------------------------------------------------------------- */

.section-cta { background: var(--blue-900); color: #fff; text-align: center; }
.cta-title { color: #fff; font-size: 1.8rem; }
.cta-text {
  color: rgba(255, 255, 255, .85);
  max-width: 50ch; margin: 0 auto 1.75rem;
}

/* -- 7. Shop -------------------------------------------------------------- */

/* Holding panel shown while the shop is closed. Set $SHOP_COMING_SOON in
   includes/config.php to switch between this and the product grid below. */
.coming-soon {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: var(--radius-lg);
}
.coming-soon-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.25rem;
  opacity: .9;
}
.coming-soon-title {
  font-size: 1.6rem;
  margin-bottom: .75rem;
}
.coming-soon p {
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.coming-soon .btn { margin-top: .75rem; }

.product-grid {
  list-style: none; margin: 0 0 3rem; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.75rem;
}
.product {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}
.product:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.product-media { background: var(--surface-3); aspect-ratio: 4 / 3; }
.product-media img { width: 100%; height: 100%; object-fit: cover; }

.product-body {
  padding: 1.25rem;
  display: flex; flex-direction: column; flex: 1; gap: .4rem;
}
.product-name { font-size: 1.15rem; margin: 0; }
.product-price {
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 700;
  color: var(--red); margin: 0;
}
.product-blurb {
  color: var(--ink-soft); font-size: .93rem;
  margin: 0 0 1rem; flex: 1;
}
.product-form { margin: 0; }

.shop-footer {
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  text-align: center;
}
.shop-note {
  color: var(--ink-soft); font-size: .95rem;
  max-width: 60ch; margin: 1.25rem auto 0;
}
.shop-note-small { font-size: .875rem; color: var(--ink-faint); }

/* -- 8. Forms ------------------------------------------------------------- */

/* The join page is a single centred column. text-align on the column centres
   the heading (which is an inline-block, so it centres as a unit and keeps its
   red rule the width of the words). The form and any notices are set back to
   left-aligned — centred form labels are much harder to scan down. */
.contact-column {
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
}
.contact-column .contact-form,
.contact-column .notice { text-align: left; }

.contact-form { max-width: 34rem; margin: 1.5rem auto 0; }

/* Checkbox row: box and label side by side, label not bold like the others,
   and the whole row clickable via the <label for>. */
.field-check {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: 1.5rem;
}
.field-check input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: .2rem 0 0;
  flex: none;
  accent-color: var(--blue-800);
  cursor: pointer;
}
.field-check label {
  margin: 0;
  font-weight: 400;
  color: var(--ink-soft);
  cursor: pointer;
}

.field { margin-bottom: 1.25rem; }
.field label {
  display: block; font-weight: 600;
  margin-bottom: .35rem; color: var(--blue-900);
  font-size: .95rem;
}
.req { color: var(--red); }

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: .7rem .8rem;
  font: inherit; font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid #c3cad6;
  border-radius: var(--radius);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(16, 67, 155, .18);
}

.field-inline {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem;
}
.field-inline label { margin: 0; white-space: nowrap; }
.field-inline select { width: auto; flex: 1; padding: .5rem .6rem; }

.field-hint {
  font-size: .85rem; color: var(--ink-faint);
  margin: .4rem 0 0;
}

/* Honeypot: hidden from people, visible to naive bots. */
.hp-field {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* -- 9. Notices ----------------------------------------------------------- */

.notice {
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin: 0 0 1.5rem;
  border-left: 4px solid;
  font-size: .97rem;
}
.notice ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.notice code {
  background: rgba(0, 0, 0, .07);
  padding: .1em .35em; border-radius: 3px;
  font-size: .9em;
}
.notice-sm { font-size: .875rem; padding: .7rem .85rem; margin: 0; }

.notice-success { background: #e8f6ec; border-color: #2e7d4f; color: #1c4f32; }
.notice-error   { background: #fdeaec; border-color: var(--red); color: #7d1123; }
.notice-warn    { background: #fff6e3; border-color: #b8860b; color: #6b4e08; }
.notice-info    { background: var(--surface-2); border-color: var(--blue-400); color: var(--ink-soft); }

.wrap > .notice-warn { margin-top: 1.5rem; }

/* -- 10. Footer ----------------------------------------------------------- */

.site-footer {
  background: var(--blue-900);
  color: rgba(255, 255, 255, .8);
  padding: 3rem 0 1.5rem;
  margin-top: 0;
  font-size: .95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2rem;
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.footer-head {
  color: #fff; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .85rem;
}
.footer-note { color: rgba(255, 255, 255, .7); margin-bottom: .5rem; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: .45rem; }
.site-footer a { color: rgba(255, 255, 255, .88); }
.site-footer a:hover { color: #fff; }

.footer-base {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: 1.25rem;
  font-size: .85rem;
  color: rgba(255, 255, 255, .6);
}
.footer-base p { margin: 0 0 .4rem; }
.footer-disclaimer { max-width: 70ch; }

/* -- Print ---------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .hero-actions, .nav-toggle, .skip-link { display: none; }
  body { color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}