/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Mercury.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values. Copy this
 * file to your web root, so it sits next to index.php, and clear Drupal's
 * cache. Then, any changes you make in this file should be reflected right away.
 */

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.142 0.027 235.75);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.142 0.027 235.75);
  --primary: oklch(0.430 0.101 241.76);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.965 0.007 248.08);
  --secondary-foreground: oklch(0.142 0.027 235.75);
  --muted: oklch(0.965 0.007 248.08);
  --muted-foreground: oklch(0.550 0.010 240.00);
  --accent: oklch(0.802 0.162 75.20);
  --accent-foreground: oklch(0.142 0.027 235.75);
  --destructive: oklch(0.572 0.191 25.93);
  --destructive-foreground: oklch(1 0 0);
  --border: #999DA1;
  --border-light: #ccced0;
  --input: oklch(0.842 0.000 0);
  --font-sans: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: "Lora", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
  --surface-light: #e5eef3;
  --surface-dark: var(--primary);
  --color-white: #ffffff;
  --color-info: #014468;
  --color-success: #00A91C;
  --foreground-heading: oklch(0.2385 0.0517 236.53);
  --foreground-body: oklch(0.3511 0.015 240.35);
  --interaction-hover: #01354E;
  --interaction-focus: #99bbcd;
  --interaction-text: var(--primary);
  --interaction-text-invert: oklch(1 0 0);

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

.dark {
  --background: oklch(0.142 0.027 235.75);
  --foreground: oklch(1 0 0);
  --card: oklch(0.20 0.030 240);
  --card-foreground: var(--foreground);
  --primary: oklch(0.430 0.101 241.76);
  --primary-foreground: var(--foreground);
  --secondary: oklch(0.30 0.035 240);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.25 0.030 240);
  --muted-foreground: oklch(0.965 0.007 248.08);
  --accent: oklch(0.802 0.162 75.20);
  --accent-foreground: oklch(0.142 0.027 235.75);
  --destructive: oklch(0.572 0.191 25.93);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.25 0.025 240);
  --input: oklch(0.25 0.025 240);
  --font-sans: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: "Lora", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
  --color-info: #015582;
  --color-success: #70E17B;
  --foreground-heading: #ffffff;
  --foreground-body: #F5F5F5;
  --interaction-hover: #EAEAEA;
  --interaction-text: #ffffff;
  --interaction-text-invert: #01334E;
}

/* Opt out of ambient dark-theme tokens for explicit light surfaces. This
  covers white cards and the split component's light-blue variant when they
  are placed inside a dark section wrapper. */
.dark .is-card,
.dark .bcsao-bg-surface-light,
.dark article.bg-white {
  --background: oklch(1 0 0);
  --foreground: oklch(0.142 0.027 235.75);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.142 0.027 235.75);
  --primary: oklch(0.430 0.101 241.76);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.965 0.007 248.08);
  --secondary-foreground: oklch(0.142 0.027 235.75);
  --muted: oklch(0.965 0.007 248.08);
  --muted-foreground: oklch(0.550 0.010 240.00);
  --accent: oklch(0.802 0.162 75.20);
  --accent-foreground: oklch(0.142 0.027 235.75);
  --destructive: oklch(0.572 0.191 25.93);
  --destructive-foreground: oklch(1 0 0);
  --border: #999DA1;
  --input: oklch(0.842 0.000 0);
  --color-info: #014468;
  --color-success: #00A91C;
  --foreground-heading: oklch(0.2385 0.0517 236.53);
  --foreground-body: oklch(0.3511 0.015 240.35);
  --interaction-hover: #01354E;
  --interaction-text: var(--primary);
  --interaction-text-invert: oklch(1 0 0);
}

.bcsao-bg-surface-light {
  background-color: var(--surface-light);
}

.bcsao-bg-surface-dark {
  background-color: var(--surface-dark);
}

.bcsao-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  display: inline-block;
  padding-block: 3px;
  padding-inline: 6px;
}

.bcsao-eyebrow--dark {
  color: #ffffff;
  border-color: #ffffff;
}

/* Rich Text component eyebrow should invert on dark section backgrounds. */
.dark .bcsao-rich-text .bcsao-eyebrow {
  color: var(--foreground-heading);
  border-color: var(--foreground-heading);
}

/* BCSAO-273: unlike bcsao-card/bcsao-step (always-white "cards" that opt out
   of ambient context via is-card), bcsao-icon-item has no background of its
   own and follows the section it's placed in. Its icon circle needs to
   invert relative to the ambient background so it stays visible: dark navy
   circle + white glyph on white/light-blue, flipping to a white circle +
   dark navy glyph on dark-cerulean/dark-navy sections. */
.dark .bcsao-icon-item__icon {
  background-color: var(--primary-foreground);
  color: var(--primary);
}

/* ── Node card / teaser / full shared layout ──────────────────────────────── */

/* Hero band image: absolute-fill behind the dark overlay in event + press-release full templates */
.bcsao-node--hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Suppress Drupal field wrapper margins inside the hero image slot */
.bcsao-node--hero-image .field {
  margin: 0;
  line-height: 0;
}

/* ── Card view mode ─────────────────────────────────────────────────────────── */

/* Card thumbnail — constrained aspect ratio, covers the area */
.node--view-mode-card .bcsao-node__image,
.node--view-mode-card .field--type-image,
.node--view-mode-card .field--type-entity-reference {
  overflow: hidden;
}

.node--view-mode-card .bcsao-node__image img,
.node--view-mode-card .field--type-image img,
.node--view-mode-card .field--type-entity-reference img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Summary / trimmed text on cards */
.node--view-mode-card .field--type-text-long,
.node--view-mode-card .bcsao-node__summary {
  font-size: 0.875rem;
  color: var(--color-foreground, inherit);
  opacity: 0.8;
}

/* Date meta on cards */
.node--view-mode-card .field--type-datetime,
.node--view-mode-card .field--type-daterange {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

/* ── Teaser view mode ───────────────────────────────────────────────────────── */

.node--view-mode-teaser .bcsao-node__summary {
  font-size: 0.875rem;
  opacity: 0.8;
}

/* ── Full / default view mode ──────────────────────────────────────────────── */

/* Hero image full-width */
.node--view-mode-full .field--type-image img,
.bcsao-node--full .field--type-image img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

/* Staff profile portrait — constrain within sidebar column */
.node--type-staff-profile.bcsao-node--full .field--type-image img {
  width: 100%;
  max-height: none;
  border-radius: var(--radius);
}


/* Body copy */
.node--view-mode-full .field--type-text-long,
.node--view-mode-full .field--type-string-long {
  font-size: 1rem;
  line-height: 1.75;
}

/* Date on full page */
.node--view-mode-full .field--type-datetime,
.node--view-mode-full .field--type-daterange {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Careers listing — give the view wrapper enough bottom padding so the card
   drop-shadows aren't clipped by the Canvas block's ancestor height boundary. */
.view-job-postings-listing {
  padding-bottom: 0.5rem;
}

/* Empty field regions — don't add layout space if all fields are empty */
.bcsao-node__image:empty,
.bcsao-node__meta:empty,
.bcsao-node__summary:empty,
.bcsao-node__type-meta:empty,
.bcsao-node__supplementary:empty {
  display: none;
}

/* Default link color/focus for content anchors outside .prose (card titles,
   listing links, callouts, etc). Tailwind preflight resets `a { color: inherit }`,
   so without this, any link not explicitly styled by its component is invisible
   as a link. Scoped to <main> only — header/nav/footer set their own text color
   at the container level (e.g. footer's `text-background`) and rely on plain
   `color: inherit` cascading down to their unstyled links; a global `a` rule
   would clobber that inheritance (confirmed regression: footer logo/social/
   contact links went blue-on-navy instead of inheriting the footer's white).

   Wrapped in `@layer base` — Tailwind's compiled CSS (main.min.css, loaded
   before this file) establishes the cascade layer order
   properties < theme < base < components < utilities. Per the CSS Cascade
   Layers spec, ANY unlayered rule beats EVERY layered rule regardless of
   specificity — so a plain `main a { color: ... }` here was silently
   overriding every Tailwind text-color utility on every link/button inside
   <main> sitewide (confirmed regression: buttons using `text-primary` /
   `text-primary-foreground` rendered white-on-white / blue-on-blue instead
   of their intended contrasting color). Declaring this in `base` lets any
   `utilities`-layer Tailwind class win, same as Tailwind's own preflight. */
@layer base {
  main a {
    color: var(--interaction-text);
  }

  main a:hover {
    color: var(--interaction-hover);
  }

  /* Focus outline is additive (doesn't override existing color/inheritance),
     so unlike the color rule above it's safe to apply everywhere, including
     header/nav/footer links that currently have no visible keyboard focus
     state. */
  a:focus-visible {
    outline: 2px solid var(--interaction-focus);
    outline-offset: 2px;
    border-radius: 2px;
  }
}

/* Global prose styles use theme tokens, so WYSIWYG rich text adapts to the
   local surface context (light, dark, or light cards nested inside dark).
   This keeps body/link colors consistent wherever text_long fields render. */
.prose,
.prose-invert {
  --tw-prose-body: var(--foreground-body);
  --tw-prose-headings: var(--foreground-heading);
  --tw-prose-bold: var(--foreground-heading);
  --tw-prose-links: var(--interaction-text);
  --tw-prose-bullets: color-mix(in srgb, var(--foreground-body) 50%, transparent);
  --tw-prose-counters: var(--foreground-body);

  a,
  a:visited {
    color: var(--interaction-text);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
  }

  a:hover {
    background-color: var(--interaction-hover);
    color: var(--interaction-text-invert);
  }

  a:focus-visible,
  a:focus-visible {
    outline: 2px solid var(--interaction-focus);
    outline-offset: 2px;
    border-radius: 2px;
  }
}

/* .prose-invert may be used outside a global .dark wrapper (e.g. footer
   custom text blocks). Provide a local dark-surface token context so nested
   .prose fields render with dark-mode body/link colors consistently. */
.prose-invert {
  --foreground-body: #f5f5f5;
  --foreground-heading: #ffffff;
  --interaction-text: #ffffff;
  --interaction-hover: #eaeaea;
  --interaction-text-invert: #01334e;
}

/* ── BCSAO branded footer ───────────────────────────────────────────────────── */
.site-branding{
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;

  img {
    width: 100px;
    height: 100px;
  }

  .site-branding__name {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    color: var(--color-white);
    width: 223px;
  }
}

.region-footer-first {
  display: flex;
  flex-direction: column;
  gap: 2rem;

  .social-menu {
    svg {
      fill:  var(--color-white);
    }
  }
}

/* Context-aware secondary button: border/text follow the local interaction
   token, while hover adds a low-opacity tint instead of turning into the
   same solid fill as the primary button. This keeps outlined secondary CTAs
   visually distinct on both light and dark surfaces. */
.bcsao-btn-secondary,
.bcsao-btn-secondary-contextual {
  border-color: var(--interaction-text);
  color: var(--interaction-text);

  &:hover {
    background-color: color-mix(in srgb, var(--interaction-text) 10%, transparent);
    color: var(--interaction-text);
  }

  &:focus-visible {
    outline: 2px solid var(--interaction-focus);
    outline-offset: 2px;
  }
}

.region-footer {
  a, a:visited {
    color: inherit;
    font-size: 1rem;
    font-weight: 600;
  }

  a:hover {
    color: #ffffff;
  }
}

/* Block titles in footer regions — Lora, not uppercase, white. */
footer .block-title,
.region-footer-first h2,
.region-footer-second h2 {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
  color: #ffffff;
  margin-bottom: 1rem;
}

/* Contact block links (phone/email) need underline to look like links. */
.region-footer-second a {
  text-decoration: underline;
}