/* CGRC wireframe — shared design tokens + component styles on top of Bootstrap 5 */

:root {
  --green: oklch(32% 0.09 152);
  --green-2: oklch(42% 0.1 152);
  --accent: oklch(68% 0.19 45);
  --ink: oklch(18% 0.01 260);
  --muted: oklch(50% 0.01 260);
  --line: oklch(90% 0.005 100);
  --bg: oklch(99% 0.003 100);
  --amberbg: oklch(96% 0.05 70);
}

body {
  font-family: 'Barlow', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

.display {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  letter-spacing: 0.03em;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--accent); }
/* A policy named on the declaration, linked to its document (John, 12 Oct):
   a darker shade of the club orange, underlined, so it reads as a link. */
.policy-link { color: oklch(52% 0.16 45); text-decoration: underline; text-underline-offset: 2px; }
.policy-link:hover { color: var(--green); }

/* Buttons */
.btn-cgrc-primary { background: var(--accent); color: var(--ink); font-weight: 700; border: none; letter-spacing: 0.02em; }
.btn-cgrc-primary:hover { background: var(--accent); color: var(--ink); opacity: 0.88; }
.btn-cgrc-outline { border: 1.5px solid var(--green); color: var(--green); font-weight: 700; background: transparent; }
.btn-cgrc-outline:hover { background: var(--green); color: #fff; }

/* Public nav */
.navbar-cgrc { background: var(--ink); border-bottom: 3px solid var(--accent); position: sticky; top: 0; z-index: 1030; }
.navbar-cgrc .nav-link { white-space: nowrap; color: #fff; font-weight: 600; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.03em; }
.navbar-cgrc .nav-link.active,
.navbar-cgrc .nav-link:hover { color: var(--accent) !important; }

/* Member nav */
.navbar-member { background: var(--green); border-bottom: 3px solid var(--accent); position: sticky; top: 0; z-index: 1030; }
.navbar-member .nav-link { color: #fff; font-weight: 600; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.03em; }
.navbar-member .nav-link.active,
.navbar-member .nav-link:hover { color: var(--accent) !important; }
.role-badge { background: rgba(255,255,255,0.15); color: var(--accent); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 1rem; letter-spacing: 0.03em; }

.brand-mark { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* The public banner's logo, twice the size (John, 14 Oct 2026). */
.brand-mark-lg { width: 88px; height: 88px; }
/* In the menu bar the bigger logo hangs below it, so the bar keeps its usual
   height (John, 14 Oct). Below 1200px, where the menu folds into the menu
   button and opens below the bar, it stays the usual size so it doesn't cover
   the menu. The menu's labels never wrap. */
.navbar-cgrc .brand-mark-lg, .navbar-member .brand-mark-lg { width: 44px; height: 44px; }
@media (min-width: 1200px) {
  /* Its top level with the top of "CATERHAM GRADUATES" (John, 14 Oct): the
     image is wider than tall, so it's drawn from the top of its box, and the
     box starts a few pixels down, where the text's capitals start. */
  .navbar-cgrc .brand-mark-lg, .navbar-member .brand-mark-lg { width: 88px; height: 88px; align-self: flex-start;
    margin-top: 2px; margin-bottom: -46px; position: relative; z-index: 2; }
  .navbar-cgrc .brand-mark-lg img, .navbar-member .brand-mark-lg img { object-position: center top; }
  /* The member area's banner too (John, 14 Oct), level with "MEMBER AREA". */
  .navbar-member .brand-mark-lg { margin-top: var(--member-logo-top, 12px); margin-bottom: calc(-44px - var(--member-logo-top, 12px)); }
  /* Clicks pass through the logo (John, 14 Oct: "About" kept going home): the
     part hanging below the bar reaches the page under it, e.g. the Club
     sub-menu's first tab, and within the bar the brand link still takes the
     click, so the logo still goes home there. */
  .navbar-cgrc .brand-mark-lg, .navbar-member .brand-mark-lg { pointer-events: none; }
}

/* Hero */
.hero-cgrc { position: relative; background: linear-gradient(120deg, oklch(22% 0.06 152) 0%, oklch(30% 0.09 152) 55%, oklch(20% 0.05 160) 100%); color: #fff; }
.hero-stripes { position: absolute; inset: 0; opacity: 0.5; background: repeating-linear-gradient(115deg, transparent 0 60px, rgba(255,255,255,0.04) 60px 62px); pointer-events: none; }
/* Every public page opens with the home page's green (John, 14 Oct 2026): the
   same gradient and stripes, with its title, eyebrow and intro in white. */
.page-hero { --muted: rgba(255,255,255,0.75); }
.page-hero > *:not(.hero-stripes) { position: relative; }
.page-hero h1, .page-hero .display { color: #fff; }
.page-hero a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.page-hero a:not(.btn):hover { color: var(--accent); }
/* The Club pages' sub-menu inside the green (John, 14 Oct): white tabs, no rule under them. */
.page-hero .nav-tabs-cgrc { border-bottom: none; }
.page-hero .nav-tabs-cgrc .nav-link { color: rgba(255,255,255,0.75); text-decoration: none; }
.page-hero .nav-tabs-cgrc .nav-link.active, .page-hero .nav-tabs-cgrc .nav-link:hover { color: #fff; }

.eyebrow { color: var(--accent); font-weight: 700; letter-spacing: 0.1em; font-size: 0.8rem; text-transform: uppercase; }

/* Cards */
.card-cgrc { background: #fff; border: 1px solid var(--line); border-radius: 0.5rem; }
.card-cgrc-dark { background: var(--ink); border-radius: 0.5rem; color: #fff; }
.card-cgrc-amber { background: var(--amberbg); border: 1px solid oklch(80% 0.1 70); border-radius: 0.5rem; }
.card-cgrc-green { background: linear-gradient(90deg, var(--green), var(--green-2)); border-radius: 0.5rem; color: #fff; }

.photo-placeholder { background: var(--line); color: var(--muted); display: flex; align-items: center; justify-content: center; border-radius: 0.25rem; font-size: 0.8rem; text-align: center; }

/* Footer */
.footer-cgrc { background: var(--ink); border-top: 3px solid var(--accent); color: rgba(255,255,255,0.7); }
.footer-cgrc a { color: rgba(255,255,255,0.8); }
.footer-cgrc a:hover { color: var(--accent); }

/* Pills / tabs */
.pill { padding: 0.3rem 0.8rem; border-radius: 1rem; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; white-space: nowrap; }
.pill.active { background: var(--green); border-color: var(--green); color: #fff; }

.nav-tabs-cgrc { border-bottom: 1px solid var(--line); flex-wrap: nowrap; overflow-x: auto; }
.nav-tabs-cgrc .nav-link { border: none; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 700; font-size: 0.85rem; white-space: nowrap; cursor: pointer; }
.nav-tabs-cgrc .nav-link.active { color: var(--ink); border-color: var(--accent); }
.nav-tabs-cgrc .nav-link.locked { color: #ccc; pointer-events: none; }

/* Tables */
table.table-cgrc th { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; color: var(--muted); border-bottom: 2px solid var(--ink); font-weight: 700; }
table.table-cgrc td { font-size: 0.88rem; vertical-align: middle; border-color: var(--line); }
.pos-number { font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; font-size: 1.1rem; }

/* CMS-authored tables (content_blocks rendered |safe) — bleach strips class
   attributes from every allowed tag (content/admin.py's ALLOWED_ATTRS), so a
   ContentBlock's <table> can never carry table-cgrc itself. Scoped to the
   wrapper div templates put around {{ block.content|safe }} instead, same
   visual language as table.table-cgrc above. */
.table-cgrc-cms table { width: 100%; border-collapse: collapse; }
.table-cgrc-cms th, .table-cgrc-cms td { padding: 0.65rem 0.75rem; text-align: center; border-bottom: 1px solid var(--line); }
.table-cgrc-cms th:first-child, .table-cgrc-cms td:first-child { text-align: left; }
.table-cgrc-cms thead th { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; color: var(--muted); border-bottom: 2px solid var(--ink); font-weight: 700; }
.table-cgrc-cms tbody td { font-size: 0.88rem; vertical-align: middle; }

/* Forms */
.field-label { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; display: block; margin-bottom: 0.35rem; }
.field-value { width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: 0.25rem; font-size: 0.9rem; color: var(--ink); background: var(--bg); }

/* Admin approve/reject */
.btn-approve { background: oklch(45% 0.13 145); color: #fff; font-weight: 700; border: none; }
.btn-reject { background: #fff; border: 1px solid var(--line); color: var(--muted); font-weight: 700; }

/* Auth (login/register) */
.auth-tab { flex: 1; text-align: center; padding: 0.9rem; font-weight: 700; font-size: 0.9rem; color: var(--muted); border-bottom: 3px solid var(--line); cursor: pointer; background: none; }
.auth-tab.active { color: var(--ink); border-color: var(--accent); }
.auth-panel-wrap { width: 100%; }

@media (max-width: 991.98px) {
  .auth-form-panel { border-radius: 1rem 1rem 0 0; }
}

/* CMS content (8 Oct 2026, docs/adr/0022): every content block on the public
   pages sits in a .cms-content wrapper, and the admin's editor puts the same
   class on its writing area (js/cms-editor.js), so what's edited looks like
   what's published. Headings are the club's Bebas Neue at fixed sizes. */
.cms-content h2, .cms-content h3, .cms-content h4 {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; font-weight: 400; letter-spacing: 0.02em;
  color: var(--ink); line-height: 1.1; margin: 1.25rem 0 0.6rem;
}
.cms-content h2 { font-size: 2rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--accent); }  /* underlined, John 9 Oct */
.cms-content h3 { font-size: 1.6rem; }
.cms-content h4 { font-size: 1.25rem; }
.cms-content > :first-child { margin-top: 0; }
.cms-content blockquote { border-left: 3px solid var(--accent); padding: 0.25rem 0 0.25rem 1rem; color: var(--muted); margin: 1rem 0; }
.cms-content hr { margin: 1.5rem 0; opacity: 0.2; clear: both; }
.cms-content a { color: var(--green-2); }
.cms-content img { max-width: 100%; height: auto; }
/* Pictures, as the editor places them: on their own line (centred), or
   beside the text on the left or right. On a phone they go full width. */
.cms-content figure { margin: 1rem 0; }
.cms-content figure.image { display: table; clear: both; margin: 1rem auto; text-align: center; }
.cms-content figure.image img { display: block; margin: 0 auto; max-width: 100%; min-width: 100%; height: auto; }
.cms-content figure.image figcaption { display: table-caption; caption-side: bottom; text-align: left; font-size: 0.85rem; color: var(--muted); padding-top: 0.35rem; }
.cms-content .image_resized { max-width: 100%; display: block; box-sizing: border-box; }
.cms-content .image_resized img { width: 100%; }
.cms-content .image-style-align-left, .cms-content figure.image.image-style-align-left { float: left; margin: 0.3rem 1.5rem 1rem 0; }
.cms-content .image-style-align-right, .cms-content figure.image.image-style-align-right { float: right; margin: 0.3rem 0 1rem 1.5rem; }
.cms-content .image-style-align-left:not(.image_resized), .cms-content .image-style-align-right:not(.image_resized) { max-width: 50%; }
.cms-content .image-style-align-center { margin-left: auto; margin-right: auto; }
@media (max-width: 767.98px) {
  .cms-content .image-style-align-left, .cms-content .image-style-align-right,
  .cms-content figure.image.image-style-align-left, .cms-content figure.image.image-style-align-right {
    float: none; width: 100% !important; max-width: 100%; margin: 1rem 0;
  }
}
/* Tables made in the editor (it wraps each in figure.table). A border or
   colour chosen in the editor is written on the cell itself and wins. */
.cms-content figure.table { display: table; margin: 1rem 0; }
.cms-content figure.table table { border-collapse: collapse; width: 100%; height: 100%; }
.cms-content figure.table table.ck-table-resized { table-layout: fixed; }
.cms-content:not(.table-cgrc-cms) figure.table td, .cms-content:not(.table-cgrc-cms) figure.table th { border: 1px solid var(--line); padding: 0.35rem 0.6rem; vertical-align: top; }
.cms-content:not(.table-cgrc-cms) figure.table th { font-weight: 700; background: rgba(0, 0, 0, 0.03); }
/* The Membership pricing table keeps its own look (.table-cgrc-cms, above)
   once the editor has wrapped it in a figure. */
.table-cgrc-cms figure.table { display: block; margin: 0; }
.cms-content figure.table figcaption, .cms-content figure.table caption { font-size: 0.85rem; color: var(--muted); caption-side: top; padding-bottom: 0.35rem; }