/* ==========================================================================
   NOOBS WITH KEYBOARDS - MAIN STYLESHEET
   ==========================================================================
   Structure of this file:
     1.  Design tokens (colours, fonts, spacing) - change things here
     2.  Reset & base elements
     3.  Layout helpers
     4.  Navigation
     5.  Buttons & links
     6.  Hero
     7.  Panels, cards & sections
     8.  Tables
     9.  Calendar
     10. Footer
     11. Responsive adjustments
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   --------------------------------------------------------------------------
   These are CSS "custom properties" - named values used throughout the file.
   Change a colour here and it updates everywhere at once.
   ========================================================================== */
:root {
  /* Backgrounds - near black, layered slightly lighter as things sit
     "closer" to the viewer */
  --bg:            #0a0a0a;
  --bg-raised:     #121212;
  --bg-card:       #171717;

  /* Deep blood-red / maroon accent */
  --maroon:        #5c1a1a;
  --maroon-bright: #7a2020;

  /* Aged gold / bronze - headings and borders */
  --gold:          #c9a86a;
  --gold-dim:      #8f7648;

  /* Deep forest green - used sparingly, for "success" and small accents */
  --green:         #2f4a34;
  --green-bright:  #4a6b50;

  /* Text */
  --text:          #ded9d0;  /* body copy - warm off-white */
  --text-dim:      #a09a90;  /* secondary/help text */
  --text-bright:   #f5f1e8;  /* emphasis */

  /* Lines and separators */
  --border:        #2a2520;
  --border-gold:   rgba(201, 168, 106, 0.28);

  /* Fonts */
  --font-heading: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, Arial, sans-serif;

  /* Spacing scale - keeps gaps consistent instead of random pixel values */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  /* Shared values */
  --radius: 4px;
  --max-width: 1140px;
  --nav-height: 68px;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

/* border-box makes padding count INSIDE an element's stated width, which
   makes layouts behave the way you'd expect. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;

  /* A very subtle warmth in the corners so the page isn't a flat black
     rectangle. Fixed so it doesn't slide around while scrolling. */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%,
      rgba(92, 26, 26, 0.20), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 110%,
      rgba(47, 74, 52, 0.10), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--gold);
  line-height: 1.25;
  margin: 0 0 var(--space-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.4rem); }

p { margin: 0 0 var(--space-sm); }

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

img {
  /* Never let an image overflow its container on a small screen. */
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY: keyboard focus
   --------------------------------------------------------------------------
   :focus-visible highlights an element when it's reached by keyboard (Tab)
   but not when clicked with a mouse. Anyone navigating without a mouse can
   always see where they are. Never remove this without a replacement.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Screen-reader-only: hidden visually, still read aloud by screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Skip to content" link - hidden until a keyboard user tabs to it, so they
   can jump past the nav instead of tabbing through every link. */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  z-index: 200;
  background: var(--gold);
  color: #0a0a0a;
  padding: var(--space-xs) var(--space-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: var(--space-xs);
}


/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */

/* Centres content and stops it stretching too wide on big monitors. */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

.section {
  padding: var(--space-xl) 0;
}

.section--tight {
  padding: var(--space-lg) 0;
}

.section-title {
  text-align: center;
  margin-bottom: var(--space-md);
}

/* A short gold rule under a centred heading. */
.section-title::after {
  content: '';
  display: block;
  width: 90px;
  height: 2px;
  margin: var(--space-sm) auto 0;
  background: linear-gradient(90deg,
    transparent, var(--gold), transparent);
}

.text-center { text-align: center; }

.lede {
  font-size: 1.08rem;
  color: var(--text-dim);
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
   4. NAVIGATION
   ========================================================================== */

.site-nav {
  position: sticky;   /* stays pinned to the top as the page scrolls */
  top: 0;
  z-index: 100;       /* sits above the page content */
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-gold);
}

.site-nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-sm);
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Clan logo + name, on the left */
.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.5rem 0;
}

.site-nav__logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  flex-shrink: 0;   /* never let the logo squash on small screens */
}

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

.site-nav__links a {
  display: block;
  padding: 0.5rem 0.85rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* Restrained hover - just a colour shift and a hairline underline. */
.site-nav__links a:hover {
  color: var(--gold);
  border-bottom-color: var(--border-gold);
}

/* Marks the page you're currently on. aria-current="page" is also read out
   by screen readers, so this styling and the announcement stay in sync. */
.site-nav__links a[aria-current='page'] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border-radius: var(--radius);
  border: 1px solid var(--border-gold);
  background: transparent;
  color: var(--gold);
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease;
}

.btn:hover {
  background: rgba(201, 168, 106, 0.10);
  border-color: var(--gold);
}

/* Solid maroon - for the single most important action on a page. */
.btn--primary {
  background: var(--maroon-bright);
  border-color: var(--maroon-bright);
  color: var(--text-bright);
}
.btn--primary:hover {
  background: #8f2727;
  border-color: var(--gold);
}

.btn--block {
  display: block;
  width: 100%;
}

/* A row of buttons that wraps neatly on narrow screens. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}


/* ==========================================================================
   6. HERO
   ========================================================================== */

.hero {
  text-align: center;
  padding: var(--space-lg) 0 var(--space-xl);
}

.hero__image {
  width: min(340px, 72vw);
  margin: 0 auto var(--space-md);
  border-radius: 50%;
  border: 2px solid var(--border-gold);
  /* A soft red glow, echoing the artwork. */
  box-shadow: 0 0 60px rgba(92, 26, 26, 0.55);
}

.hero__title {
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero__subtitle {
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-md);
}


/* ==========================================================================
   7. PANELS, CARDS & SECTIONS
   ========================================================================== */

/* Standard bordered box used for most content blocks. */
.panel {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border-gold);
  border-radius: var(--radius);
  padding: var(--space-md);
}

/* The deep maroon "Stay Connected" panel from the home page. */
.panel--maroon {
  background: linear-gradient(160deg, var(--maroon), #3d1111);
  border: 1px solid rgba(201, 168, 106, 0.35);
  text-align: center;
}
.panel--maroon h2 { color: var(--gold); }
.panel--maroon p  { color: #eddfd8; }

/* Prose blocks - the "Who Are We?" copy. */
.prose {
  max-width: 68ch;
  margin: 0 auto;
}
.prose p:last-child { margin-bottom: 0; }

/* An emphasised line inside prose, e.g. "Grab your keyboard!" */
.prose .callout {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--gold);
  text-align: center;
  padding: var(--space-sm) 0;
}

/* --------------------------------------------------------------------------
   Card grid - auto-fit means the browser decides how many columns fit,
   so it goes from 3 across on a desktop to 1 on a phone with no extra code.
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-sm);
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--maroon-bright);
  border-radius: var(--radius);
  padding: var(--space-md);
  transition: border-left-color 0.15s ease, background-color 0.15s ease;
}
.card:hover {
  border-left-color: var(--gold);
  background: #1c1c1c;
}
.card h3 { margin-bottom: var(--space-xs); }
.card p:last-child { margin-bottom: 0; }

/* A definition-style list for things like rank explanations. */
.rank-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rank-list li {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border);
}
.rank-list li:last-child { border-bottom: none; }
.rank-list strong {
  color: var(--gold);
  font-family: var(--font-heading);
  display: block;
}

/* A banner image framed rather than blended, since these have their own
   background artwork. */
.banner-frame {
  max-width: 420px;
  margin: 0 auto var(--space-md);
  border: 2px solid var(--border-gold);
  border-radius: var(--radius);
  overflow: hidden;   /* clips the image to the rounded corners */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
}

/* Two columns that stack on mobile - used on join.html. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: start;
}
@media (min-width: 800px) {
  .split { grid-template-columns: 1.4fr 1fr; }
}

/* --------------------------------------------------------------------------
   STAFF TIERS
   --------------------------------------------------------------------------
   The staff page groups people under their rank, highest rank first. Built
   from the same tokens as .card above so it reads as part of the same set.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   The two team rosters, side by side on a wide screen.
   --------------------------------------------------------------------------
   Same shape as .split and .calendar-layout above: one column by default,
   two once there is room. Writing it "mobile first" like this means the
   narrow layout needs no media query at all - it is just the default.

   align-items: start is doing real work here. Grid items stretch to match
   the tallest row by default, which would drag the shorter RS3 column down
   to OSRS's height and leave a long empty gap under its last card.
   -------------------------------------------------------------------------- */
.team-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: start;
}
@media (min-width: 800px) {
  /* RS3 on the left, OSRS on the right. Equal widths - 1fr each. */
  .team-columns { grid-template-columns: 1fr 1fr; }
}

/* One tier card per row, so each team's list reads straight down in its own
   column. (This used to fit as many cards per row as would go, which was
   right back when a roster had the whole page width to itself. In a
   half-width column it would put two cards side by side, which reads as a
   grid rather than a ranking.) */
.tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.tier-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.tier-group__heading {
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border);
}

.tier-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tier-group__person {
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(42, 37, 32, 0.6);
}
.tier-group__person:last-child { border-bottom: none; }

.tier-group__name {
  display: block;
  color: var(--text-bright);
  font-weight: 600;
}

.tier-group__date {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* Shown when a rank exists but nobody holds it yet. Deliberately quiet -
   it should read as "vacant", not as an error. */
.tier-group__empty {
  margin: 0;
  padding: 0.45rem 0;
  color: #6b6660;
  font-size: 0.85rem;
  font-style: italic;
}

/* Small status line shown while data loads or if it fails. */
.status {
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  padding: var(--space-sm);
}
.status--error {
  color: #e8a0a0;
  font-style: normal;
}


/* ==========================================================================
   8. TABLES
   ========================================================================== */

/* Lets a wide table scroll sideways on a phone instead of breaking the
   page layout. tabindex="0" in the HTML makes it keyboard-scrollable too. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

caption {
  text-align: left;
  padding: var(--space-sm);
  color: var(--text-dim);
  font-size: 0.9rem;
}

th {
  background: var(--maroon);
  color: var(--text-bright);
  font-family: var(--font-heading);
  font-weight: 600;
  text-align: left;
  padding: 0.8rem var(--space-sm);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

td {
  padding: 0.75rem var(--space-sm);
  border-bottom: 1px solid var(--border);
}

/* Alternating row colours (zebra striping) for easier reading across. */
tbody tr:nth-child(odd)  { background: var(--bg-raised); }
tbody tr:nth-child(even) { background: #161616; }
tbody tr:hover           { background: #1f1a1a; }

/* Small coloured label for OSRS / RS3 */
.tag {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
}
.tag--osrs {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: rgba(201, 168, 106, 0.10);
}
.tag--rs3 {
  color: #9dc0a5;
  border-color: var(--green-bright);
  background: rgba(47, 74, 52, 0.25);
}


/* ==========================================================================
   9. CALENDAR
   ========================================================================== */

.calendar-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: start;
}
@media (min-width: 900px) {
  /* Calendar on the left, focus sidebar on the right. */
  .calendar-layout { grid-template-columns: 1fr 320px; }
}

.calendar-month {
  text-align: center;
  margin-bottom: var(--space-sm);
}

/* table-layout: fixed forces all 7 columns to equal width regardless of how
   much text is in a cell - otherwise a long event title would make one day
   much wider than the rest. */
.calendar {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.calendar th {
  background: var(--maroon);
  font-size: 0.78rem;
  padding: 0.6rem 0.25rem;
  text-align: center;
  letter-spacing: 0.08em;
}

.calendar td {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  vertical-align: top;
  height: 108px;
  padding: 0.35rem;
  width: 14.28%;   /* 100 / 7 */
}

/* Empty leading/trailing cells that pad the grid to full weeks. */
.calendar td.is-empty {
  background: #0d0d0d;
}

.calendar__daynum {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--text-dim);
  display: block;
  margin-bottom: 0.2rem;
}

/* The day that has one or more events. */
.calendar td.has-event {
  background: #1a1414;
  border-color: var(--gold-dim);
}
.calendar td.has-event .calendar__daynum {
  color: var(--gold);
  font-weight: 700;
}

.calendar__event {
  display: block;
  font-size: 0.74rem;
  line-height: 1.35;
  background: var(--maroon-bright);
  color: var(--text-bright);
  border-radius: 3px;
  padding: 0.2rem 0.35rem;
  margin-bottom: 0.2rem;
  /* Long titles wrap rather than overflowing the cell. */
  overflow-wrap: anywhere;
}

/* Sidebar showing Boss / Skill / Other info. */
.focus-item {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
}
.focus-item:last-child { border-bottom: none; }

.focus-item__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.2rem;
}

.focus-item__value {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--gold);
  margin: 0;
}

.focus-item__value--small {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.6;
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--border-gold);
  background: #070707;
  padding: var(--space-lg) 0 var(--space-md);
  margin-top: var(--space-xl);
  text-align: center;
}

.site-footer__badge {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  margin: 0 auto var(--space-sm);
  border: 1px solid var(--border-gold);
}

.site-footer__name {
  font-family: var(--font-heading);
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}

.site-footer__links {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.site-footer__meta {
  border-top: 1px solid var(--border);
  padding-top: var(--space-sm);
  font-size: 0.82rem;
  color: #6b6660;
}

/* The deliberately understated staff login link. */
.staff-link {
  color: #5f5a54;
  font-size: 0.8rem;
  text-decoration: none;
}
.staff-link:hover {
  color: var(--gold-dim);
  text-decoration: underline;
}


/* ==========================================================================
   11. RESPONSIVE & MOTION
   ========================================================================== */

@media (max-width: 640px) {
  :root {
    --space-xl: 3rem;
    --space-lg: 2rem;
  }

  /* Stack the nav: brand on top, links centred underneath. */
  .site-nav__inner {
    flex-direction: column;
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
  }
  .site-nav__links { justify-content: center; }

  /* Give calendar cells room to breathe on a narrow screen. */
  .calendar td { height: 78px; font-size: 0.8rem; }
  .calendar th { font-size: 0.65rem; }
}

/* Respect the operating system's "reduce motion" accessibility setting -
   important for people who get motion sickness from animation. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}