/* ==========================================================================
   California Gaming Association — shared styles
   ==========================================================================
   Design language: institutional editorial. The reference points are a policy
   brief and a broadsheet op-ed page, not a product landing page — because the
   audience is legislative offices and the people who work in these rooms, and
   the site has to read as an association speaking plainly rather than as a
   campaign shouting.

   That means: hairline rules instead of drop shadows, a warm paper ground, and
   colour used sparingly so that when the CGA green does appear it means
   something. Type is a single sans (Inter) throughout, leaning on weight and
   tracking rather than a second face; set in mixed case, with the only
   uppercase being small, letterspaced, and structural.

   Palette is drawn from the logo (client/logos/cga-logo.png).
   ========================================================================== */

:root {
  --ink: #10243a;          /* body text and dark grounds — logo inner navy */
  --ink-soft: #3d5062;
  --ink-faint: #6d7f8f;
  --blue: #006098;         /* CGA rim blue — links, marks */
  --blue-deep: #004b78;
  --green: #88c038;        /* logo lime — accents only, never a field */
  --green-deep: #4e7a12;   /* lime darkened for text on paper */
  --red: #9c2b2b;
  --paper: #faf8f4;        /* warm newsprint ground */
  --paper-2: #f1ede5;
  --card: #ffffff;
  --rule: rgba(16, 36, 58, 0.16);
  --rule-soft: rgba(16, 36, 58, 0.09);

  /* One family throughout. Display sizes lean on weight and tight tracking
     rather than a second face. */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Height of the sticky masthead. The hero subtracts this to fill the rest of
     the window, so the two must never disagree — hence one variable rather than
     a number typed in two places. */
  --masthead-h: 92px;
}

@media (max-width: 640px) { :root { --masthead-h: 76px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.021em;
}

a { color: inherit; }
svg.ic { display: block; }

/* Gutter container. NOTE: anything that also carries this class must use
   padding-top / padding-bottom, never the `padding` shorthand — see
   scripts/checkLayout.js. */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px) { .wrap, .wrap-narrow { padding: 0 22px; } }

/* Small structural labels. The only uppercase on the site. */
.eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
/* Sticky, so the Take Action button is reachable from anywhere on the page
   rather than only from the top. Opaque background (not blurred) so body copy
   passing underneath stays legible.

   Fixed height rather than padding-driven: the hero sizes itself with
   calc(100svh - var(--masthead-h)), and a header whose height depended on its
   contents would silently break that sum. box-sizing is border-box globally, so
   the 2px green border is inside the declared height. */
.masthead {
  position: sticky; top: 0; z-index: 60;
  height: var(--masthead-h);
  display: flex; align-items: center;
  background: var(--paper);
  border-bottom: 2px solid var(--green);
}
/* Vertical padding only. This element is also a .wrap, and a `padding`
   shorthand here would reset .wrap's horizontal padding to zero, letting the
   header run to the screen edge on narrow viewports. */
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%;
}

/* In-page anchors must clear the sticky header, or the heading they point at
   lands underneath it. */
[id] { scroll-margin-top: calc(var(--masthead-h) + 16px); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.brand-logo { height: 56px; width: auto; display: block; flex: none; }
@media (max-width: 640px) { .brand-logo { height: 44px; } }
.brand-text { min-width: 0; }
.brand-text b {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: 19px; line-height: 1.2; color: var(--ink); letter-spacing: -0.017em;
}
.brand-text span {
  display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin-top: 3px;
}
/* On a phone the full association name plus tagline wraps to three lines and
   crowds out the action. Shorten the lockup instead of letting it wrap. */
@media (max-width: 640px) {
  .brand-text b { font-size: 15.5px; }
  .brand-text span { display: none; }
}
@media (max-width: 420px) { .brand-text { display: none; } }

.masthead-nav { display: flex; align-items: center; gap: 26px; flex: none; }
.masthead-nav a:not(.btn) {
  font-size: 14.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color .18s, color .18s;
}
.masthead-nav a:not(.btn):hover { color: var(--ink); border-bottom-color: var(--green); }
@media (max-width: 760px) { .masthead-nav a.hide-sm { display: none; } }

/* ── Buttons ────────────────────────────────────────────────────────────── */
/* Square, flat, no lift on hover. A button here should look like a filing
   action, not a call to adventure. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: 0.01em;
  padding: 13px 22px; border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none; transition: background .18s, color .18s, border-color .18s;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover:not(:disabled) { background: var(--blue-deep); }
.btn-accent { background: var(--green); color: var(--ink); }
.btn-accent:hover:not(:disabled) { background: #9ed44b; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.btn-lg { font-size: 17px; padding: 16px 30px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Text link that reads as editorial rather than as a control. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 700; font-size: 15px; color: var(--blue);
  border-bottom: 2px solid var(--green); padding-bottom: 2px;
}
.link-arrow:hover { color: var(--blue-deep); }

/* ── Photo slots ────────────────────────────────────────────────────────── */
/* Each slot renders its image once the file exists at the given path. Until
   then the onerror handler adds .empty and the labelled placeholder shows
   through, so the layout is final before the photography arrives. */
.photo { position: relative; background: var(--paper-2); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo .photo-ph {
  display: none; position: absolute; inset: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  text-align: center; padding: 20px;
  border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink-faint);
}
.photo.empty img { display: none; }
.photo.empty .photo-ph { display: flex; }
.photo .photo-ph .ph-ic { width: 26px; height: 26px; opacity: .45; }
.photo .photo-ph b { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.photo .photo-ph code { font-size: 11.5px; opacity: .75; font-family: ui-monospace, Menlo, Consolas, monospace; }
.photo-credit { font-size: 12.5px; color: var(--ink-faint); margin-top: 9px; font-style: italic; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer { background: var(--ink); color: #9fb0c0; padding: 56px 0 32px; font-size: 15px; }
footer h4 { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.012em; margin-bottom: 12px; }
.foot-grid { display: grid; grid-template-columns: 2.6fr 1fr 1fr; gap: 56px; }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: 1.8fr 1fr 1fr; gap: 36px; } }
/* The association boilerplate runs long; hold it to a readable measure rather
   than letting it fill the whole column. */
.foot-about { max-width: 58ch; font-size: 14.5px; line-height: 1.6; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } }
footer a { color: #9fb0c0; text-decoration: none; border-bottom: 1px solid transparent; }
footer a:hover { color: #fff; border-bottom-color: var(--green); }
.foot-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, .13); margin-top: 36px; padding-top: 20px;
  font-size: 13px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: #7d8fa0;
}