/* =============================================================================
   ARCA CONTINENTAL | COCA-COLA SOUTHWEST BEVERAGES
   Annual Service Awards GALA 2026 - brand layer (LIGHT / white canvas)
   -----------------------------------------------------------------------------
   Source artwork : WhatsApp Image 2026-09-21 at 4.44.34 PM.jpeg (525x681)
   Sampled        : 2026-09-21 - every hue below was read from poster pixels
   -----------------------------------------------------------------------------
   Treatment: WHITE page, dark readable type, red kept as the accent,
              and the HERO rendered as the poster field itself (red).

     canvas          #FFFFFF  white
     cards / wells   #FFFBF6  warm white   #FDF2E7  warm blush
     body text       #4A1218  deep maroon (15.2:1 on white - never black)
     secondary text  #6B1C22
     muted text      #7A5C22  dark gold   (6.2:1)
     headings/links  #A3121F  deep red    (8.0:1)
     red accent      #E11838  poster red  (buttons, fills)
     gold            #D4B268  ornaments and rules
     hero field      #C61724  red, with cream type and gold ornaments

   NO BLACK. The poster contains no black: its darkest tone is a deep red and its
   brightest is a warm white. Text uses a deep maroon rather than a neutral, and
   gold used AS TYPE is darkened to #7A5C22 because poster gold (#D4B268) only
   reaches 2.0:1 on a white page - fine as a rule, unreadable as a word.

   Typography: Cinzel (display, echoes the GALA wordmark)
               Montserrat (body, echoes the tracked small caps)
   ============================================================================= */

:root {
  /* ---- brand palette (sampled from the poster) ------------------------ */
  --ccswb-red:        #E11838;
  --ccswb-red-deep:   #A3121F;
  --ccswb-gold:       #D4B268;
  --ccswb-gold-light: #E8C97A;
  --ccswb-gold-ink:   #7A5C22;  /* gold dark enough to be read on white */
  --ccswb-cream:      #FFFBF6;
  --ccswb-ink:        #4A1218;
  --ccswb-white:      #FFFFFF;

  /* ---- theme token mirror (authoritative file: assets/css/tokens.css) -- */
  --c-paper:       #FFFFFF;
  --c-surface:     #FFFBF6;
  --c-surface-2:   #FDF2E7;
  --c-ink:         #4A1218;
  --c-ink-2:       #6B1C22;
  --c-muted:       #7A5C22;
  --c-on-gold:     #8C1220;
  --c-gold:        #D4B268;
  --c-gold-bright: #E8C97A;
  --c-gold-text:   #7A5C22;
  --c-gold-dark:   #8A6A2F;
  --c-gold-tint:   rgba(212, 178, 104, .14);
  --c-gold-line:   rgba(212, 178, 104, .55);
  --c-red:         #E11838;
  --c-red-dark:    #A3121F;
  --c-red-tint:    rgba(225, 24, 56, .08);
  --c-red-glow:    rgba(225, 24, 56, .12);
  --c-line:        rgba(212, 178, 104, .45);
  --c-line-strong: #B08A32;
  --c-photo:       #FFFFFF;
  --c-success:     #17703F;
  --c-error:       #C0172B;
  --c-warning:     #A06A00;

  /* ---- typography ----------------------------------------------------- */
  --ccswb-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', Georgia, serif;
  --ccswb-body: 'Montserrat', 'Gotham', 'Futura', 'Helvetica Neue', Arial, sans-serif;
  --font: 'Montserrat', 'Gotham', 'Futura', 'Helvetica Neue', Arial, sans-serif;

  /* ---- geometry ------------------------------------------------------- */
  --ccswb-track: .14em;
  --ccswb-radius: 3px;
}

/* ---------------------------------------------------------------------------
   1. Canvas - clean white with one faint warm wash at the top, so the page
      still carries a trace of the poster glow without tinting the white.
   --------------------------------------------------------------------------- */
body,
.wp-site-blocks {
  background-color: #FFFFFF;
  color: var(--c-ink);
  font-family: var(--ccswb-body);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -18%, rgba(225, 24, 56, .055) 0%, transparent 62%),
    radial-gradient(80% 60% at 88% 108%, rgba(212, 178, 104, .10) 0%, transparent 60%);
}

/* ---------------------------------------------------------------------------
   2. Type - red is the headline colour, maroon is the reading colour.
   --------------------------------------------------------------------------- */
h1, h2,
.hero__title,
.stage__title,
.wp-block-heading h1,
.wp-block-heading h2 {
  font-family: var(--ccswb-display);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--c-red-dark);
}

/* h3/h4 mirror the poster's tracked small caps. */
h3, h4, h5, h6,
.wp-block-heading h3 {
  font-family: var(--ccswb-body);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ccswb-gold-ink);
}

/* Links carry the red. */
a { color: var(--c-red-dark); }
a:hover,
a:focus { color: var(--c-red); }

::selection {
  background: rgba(225, 24, 56, .16);
  color: var(--c-ink);
}

/* Visible focus ring in brand red (kept off mouse clicks). */
:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   3. Buttons - primary is the red accent, secondary is a gold outline.
   --------------------------------------------------------------------------- */
.button--primary,
.button--gold,
.gala-access__button,
.button.is-primary,
input[type="submit"],
.wp-block-button__link:not(.is-style-outline) {
  background: var(--c-red) !important;
  border-color: var(--c-red) !important;
  color: #FFFFFF !important;
  font-family: var(--ccswb-body);
  text-transform: uppercase;
  letter-spacing: var(--ccswb-track);
  font-weight: 600;
  border-radius: var(--ccswb-radius);
}

.button--primary:hover,
.button--gold:hover,
.gala-access__button:hover,
.button.is-primary:hover,
input[type="submit"]:hover,
.wp-block-button__link:not(.is-style-outline):hover {
  background: var(--c-red-dark) !important;
  border-color: var(--c-red-dark) !important;
  color: #FFFFFF !important;
}

/* Secondary stays gold-on-white: a gold rule with dark gold type. */
.button--secondary,
.button--outline-white {
  border-color: var(--c-gold) !important;
  color: var(--ccswb-gold-ink) !important;
  background: transparent !important;
  text-transform: uppercase;
  letter-spacing: var(--ccswb-track);
  font-weight: 600;
  border-radius: var(--ccswb-radius);
}

.button--secondary:hover,
.button--outline-white:hover {
  background: var(--c-gold) !important;
  border-color: var(--c-gold) !important;
  color: var(--c-on-gold) !important;
}

/* Unused by the theme today, but keep it sane on a white page. */
.button--on-red {
  border-color: var(--c-red) !important;
  color: var(--c-red-dark) !important;
  background: transparent !important;
}

.button--on-red:hover {
  background: var(--c-red) !important;
  border-color: var(--c-red) !important;
  color: #FFFFFF !important;
}

.button,
button,
a.button,
.wp-block-button__link {
  font-family: var(--ccswb-body);
  text-transform: uppercase;
  letter-spacing: var(--ccswb-track);
  font-weight: 600;
  border-radius: var(--ccswb-radius);
}

/* ---------------------------------------------------------------------------
   4. Header - white with a gold rule; red is reserved for the wordmark
      and the nav hover so it stays an accent.
   --------------------------------------------------------------------------- */
.site-header {
  background: #FFFFFF;
  border-bottom: 2px solid var(--c-gold) !important;
}

.site-header a:hover,
.site-header .current-menu-item > a {
  color: var(--c-red-dark);
}

/* ---------------------------------------------------------------------------
   5. Footer - the one large red element, echoing the poster field.
      (The theme already renders the WHITE logo variant here, so it reads.)
   --------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-red-deep) !important;
  border-top: 3px solid var(--c-gold) !important;
}

.site-footer__label { color: #FFFBF6 !important; }

.site-footer__list a { color: rgba(255, 251, 246, .88) !important; }

.site-footer__list a:hover { color: var(--c-gold-light) !important; }

.site-footer__help { color: rgba(255, 251, 246, .78) !important; }

/* The gold sign-off bar keeps its red label. */
.site-footer__bar { color: var(--c-on-gold); }

/* ---------------------------------------------------------------------------
   5b. Hero - the poster field itself: brand red, gold ornaments, warm type.
       The hero block is entirely token-driven (every colour inside it reads a
       --c-* variable), so re-declaring those tokens HERE re-lights the whole
       section at once - eyebrow, year, title, copy, invitation frame, star dust,
       ornament and glow - with no per-element patching. Scope is safe: `.hero`
       exists only in front-page.php.
   --------------------------------------------------------------------------- */
.hero {
  /* The deeper brand red, not the flat #E11838: gold small-caps only reach
     ~3.5:1 on the brighter red, while warm cream reaches 5.0:1 on this one. */
  --c-paper:       #C61724;
  --c-surface:     #A3121F;
  --c-surface-2:   #8C1220;
  --c-ink:         #FFFEF3;                   /* title + star-dust specks */
  --c-ink-2:       #FBE9C6;
  --c-muted:       rgba(255, 254, 243, .88);  /* hero copy */
  --c-gold:        #D4B268;
  --c-gold-bright: #FFD39D;                   /* gold specks + button hover */
  --c-gold-text:   #FBE9C6;                   /* eyebrow + year, 5.0:1 */
  --c-gold-line:   rgba(255, 211, 157, .45);  /* the invitation frame */
  --c-line:        rgba(255, 211, 157, .30);
  --c-red-glow:    rgba(255, 211, 157, .22);  /* warm wisp behind the frame */
  --c-on-gold:     #8C1220;

  background: #C61724;
  color: var(--c-ink);
}

/* Base type rules colour h1/h2 with --c-red-dark, which would be red-on-red here. */
.hero .hero__title,
.hero .hero__text {
  color: var(--c-ink);
}

.hero .hero__text {
  color: rgba(255, 254, 243, .88);
}

/* The wordmark is gold artwork: at full strength on red, so drop the white-canvas
   brightening/darkening filter entirely. */
.hero__wordmark {
  filter: none;
}

/* Buttons invert on a red field: the gold fill is the one with contrast, and the
   red primary button would disappear into the background. */
.hero__actions .button--gold,
.hero__actions .button--primary,
.hero__actions .gala-access__button {
  background: var(--c-gold) !important;
  border-color: var(--c-gold) !important;
  color: #8C1220 !important;
}

.hero__actions .button--gold:hover,
.hero__actions .button--primary:hover,
.hero__actions .gala-access__button:hover {
  background: var(--c-gold-bright) !important;
  border-color: var(--c-gold-bright) !important;
  color: #8C1220 !important;
}

.hero__actions .button--secondary,
.hero__actions .button--outline-white {
  background: transparent !important;
  border-color: rgba(255, 211, 157, .78) !important;
  color: #FFFEF3 !important;
}

.hero__actions .button--secondary:hover,
.hero__actions .button--outline-white:hover {
  background: #FFFEF3 !important;
  border-color: #FFFEF3 !important;
  color: #A3121F !important;
}

/* ---------------------------------------------------------------------------
   6. Poster flourishes (utilities, safe to use anywhere)
   --------------------------------------------------------------------------- */

/* Kicker line, echo of "ANNUAL SERVICE AWARDS". */
.gala-eyebrow {
  display: block;
  margin: 0 0 .6em;
  font-family: var(--ccswb-body);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .42em;
  color: var(--ccswb-gold-ink);
}

/* Oversized display line, echo of the GALA wordmark. Red holds the page. */
.gala-title {
  font-family: var(--ccswb-display);
  font-size: clamp(2.75rem, 9vw, 6.5rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-red-dark);
}

.gala-title--red  { color: var(--c-red); }
.gala-title--gold { color: #B08A32; }   /* darkened so large text still clears 3:1 */

/* Thin gold rule with a diamond flourish. */
.gala-rule {
  position: relative;
  display: block;
  width: min(22rem, 60%);
  height: 10px;
  margin: 1.25rem auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.gala-rule::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--c-gold) 15%,
    var(--c-gold) 85%,
    transparent 100%);
}

.gala-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--c-gold);
  transform: rotate(45deg);
}

/* Double gold hairline frame, echo of the poster border. */
.gala-frame {
  position: relative;
  background-color: #FFFFFF;
  border: 1px solid var(--c-gold);
  border-radius: var(--ccswb-radius);
  padding: clamp(1.25rem, 4vw, 3rem);
}

.gala-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--c-gold-light);
  opacity: .75;
  pointer-events: none;
}

/* Gold sparkle dust, echo of the poster's corner glow (no images needed). */
.gala-sparkle {
  position: relative;
  isolation: isolate;
}

.gala-sparkle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--c-gold) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(225, 24, 56, .55) 0 1px, transparent 1.6px),
    radial-gradient(circle, var(--c-gold-light) 0 1px, transparent 1.6px);
  background-size: 120px 120px, 84px 84px, 56px 56px;
  background-position: 0 0, 32px 24px, 12px 40px;
  opacity: .65;
}

.gala-sparkle > * {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
   7. Safety nets for the places the theme hard-coded a near-black.
      (tokens.css/main.css are already fixed - these keep the brand even if the
      theme is ever reinstalled from the original zip.)
   --------------------------------------------------------------------------- */
.gala-modal__overlay {
  background: rgba(74, 18, 24, .55) !important;
}

.gala-modal__dialog {
  background: #FFFFFF !important;
  border: 1px solid var(--c-gold) !important;
  box-shadow: 0 24px 64px rgba(122, 6, 20, .18) !important;
}

/* ---------------------------------------------------------------------------
   8. WordPress core preset palette
   Core publishes its default palette (including a `black` swatch) in the
   block-editor inline styles. Remap that entry so black can never be picked.
   --------------------------------------------------------------------------- */
:root {
  --wp--preset--color--black: #A3121F;
  --wp--preset--color--vivid-red: #E11838;
  --wp--preset--shadow--natural: 6px 6px 9px rgba(122, 6, 20, .12);
  --wp--preset--shadow--deep: 12px 12px 50px rgba(122, 6, 20, .18);
  --wp--preset--shadow--sharp: 6px 6px 0 rgba(122, 6, 20, .12);
  --wp--preset--shadow--outlined: 6px 6px 0 -3px #FFFFFF, 6px 6px rgba(122, 6, 20, .85);
  --wp--preset--shadow--crisp: 6px 6px 0 rgba(122, 6, 20, .85);
}

/* ---------------------------------------------------------------------------
   9. Small screens
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .gala-title   { letter-spacing: .06em; }
  .gala-eyebrow { letter-spacing: .3em; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
}