/**
 * @file
 * Corporate (Olivero) — an update-safe corporate skin for Drupal's Olivero.
 *
 * Olivero builds its whole colour system from three HSL variables
 * (--color--primary-hue / -saturation / -lightness). The theme-settings form
 * (see corporate_olivero.theme) rewrites those three values from an admin-chosen
 * colour, so everything below that references them recolours automatically.
 * The default values here keep the theme correct even before any settings are
 * saved (or if the generated settings CSS fails to load).
 */

/* ==========================================================================
   1. DESIGN TOKENS — override Olivero core variables + add corporate tokens
   ========================================================================== */
:root {
  /* Brand colour (overridden at runtime by the theme-settings form). */
  --color--primary-hue: 214;
  --color--primary-saturation: 62%;
  --color--primary-lightness: 32;

  /* Focus outline colour for this theme's own :focus-visible rules. Keep at
     least 3:1 contrast against white (WCAG 2.2 SC 1.4.11). Olivero's native
     focus outlines derive from the brand colour and recolour automatically.
     Do NOT override --color--gold: in Olivero 11.x it colours the
     warning-message icon, not focus rings. */
  --corp-focus: #b45309;

  /* Typography — privacy-safe system stack by default. The optional local
     Inter library changes these variables without using third-party URLs. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: var(--font-sans);

  --border-radius: 0.375rem;

  /* ---- Corporate palette. Brand tokens DERIVE from the Olivero vars above,
          so the admin colour picker cascades into every rule below. ---- */
  --corp-ink: #1f2733;
  --corp-muted: #5b6675;
  --corp-surface: #ffffff;
  --corp-page-bg: #f6f8fb;
  --corp-border: #6b7280;
  --corp-primary: var(--color--primary-50);
  --corp-primary-bright: var(--color--primary-60);
  --corp-tint: hsl(var(--color--primary-hue), var(--color--primary-saturation), 96%);
  --corp-ring: hsla(var(--color--primary-hue), var(--color--primary-saturation), 40%, 0.18);
  --corp-card-hover-border: hsl(var(--color--primary-hue), 40%, 84%);
  --corp-footer-bg: #16273a;   /* overridden at runtime by settings */
  --corp-footer-ink: #e7edf4;
  --corp-footer-muted: #9db9d8;
  --corp-footer-heading: #ffffff; /* flipped to a dark set at runtime on light footers */
  --corp-shadow-sm: 0 1px 2px rgba(16, 33, 58, 0.06), 0 1px 3px rgba(16, 33, 58, 0.08);
  --corp-shadow-md: 0 6px 16px rgba(16, 33, 58, 0.08), 0 2px 6px rgba(16, 33, 58, 0.06);
  --corp-shadow-lg: 0 18px 40px rgba(16, 33, 58, 0.12);
}

/* ==========================================================================
   2. BASE — page canvas + typography
   ========================================================================== */
body {
  background-color: var(--corp-page-bg);
  color: var(--corp-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { color: var(--corp-ink); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
p, li { color: var(--corp-ink); }
a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

blockquote {
  border-inline-start: 4px solid var(--corp-primary);
  background: var(--corp-tint);
  padding: var(--sp1, 1.5rem);
  border-start-end-radius: var(--border-radius);
  border-end-end-radius: var(--border-radius);
  color: var(--corp-ink);
}

/* ==========================================================================
   3. HEADER — clean, elevated
   ========================================================================== */
.site-header__inner { background-color: var(--corp-surface); border-bottom: 1px solid var(--corp-border); }
.site-header__fixable.is-fixed .site-header__inner {
  box-shadow: 0 4px 20px rgba(16, 33, 58, 0.10);
  border-bottom-color: transparent;
}
.site-branding__name a { font-weight: 800; letter-spacing: -0.02em; }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.button,
.button--primary {
  border-radius: var(--border-radius);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-shadow: var(--corp-shadow-sm);
}
.button:hover, .button--primary:hover,
.button:focus, .button--primary:focus {
  transform: translateY(-1px);
  box-shadow: var(--corp-shadow-md);
}
.button:active, .button--primary:active { transform: translateY(0); box-shadow: var(--corp-shadow-sm); }
.button:focus-visible, .button--primary:focus-visible, a:focus-visible {
  outline: 3px solid var(--corp-focus);
  outline-offset: 2px;
}

.site-branding a:focus-visible,
.site-footer a:focus-visible {
  outline-color: currentColor;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   5. CONTENT CARDS — teasers, sidebar & footer-top blocks
   ========================================================================== */
.node--view-mode-teaser,
.region--sidebar .block:not(.block-menu):not(.block-search),
.region--footer-top .block {
  background: var(--corp-surface);
  border: 1px solid var(--corp-border);
  border-radius: var(--border-radius);
  padding: var(--sp1-5, 2rem);
  box-shadow: var(--corp-shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.node--view-mode-teaser:hover,
.region--sidebar .block:not(.block-menu):not(.block-search):hover {
  box-shadow: var(--corp-shadow-md);
  border-color: var(--corp-card-hover-border);
  transform: translateY(-2px);
}
.node--view-mode-teaser .node__title { margin-block-start: 0; }

/* ==========================================================================
   6. FORMS
   ========================================================================== */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="password"], input[type="number"], input[type="date"],
textarea, select {
  border: 1px solid var(--corp-border);
  border-radius: var(--border-radius);
  background-color: var(--corp-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="tel"]:focus-visible,
input[type="url"]:focus-visible, input[type="search"]:focus-visible, input[type="password"]:focus-visible,
input[type="number"]:focus-visible, input[type="date"]:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--corp-primary);
  box-shadow: none;
  outline: 3px solid var(--corp-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   7. TABLES
   ========================================================================== */
table { border: 1px solid var(--corp-border); border-radius: var(--border-radius); overflow: hidden; border-collapse: separate; border-spacing: 0; }
thead th { background: var(--corp-tint); color: var(--corp-ink); font-weight: 700; }
tbody tr:nth-child(even) { background: hsl(var(--color--primary-hue), 30%, 98.5%); }

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.site-footer { background-color: var(--corp-footer-bg); color: var(--corp-footer-ink); }
.site-footer :is(h2, h3, h4, .site-footer__top-heading) { color: var(--corp-footer-heading); }
.site-footer a { color: var(--corp-footer-muted); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover, .site-footer a:focus { color: var(--corp-footer-heading); text-decoration-thickness: 2px; }
.site-footer p, .site-footer li { color: var(--corp-footer-ink); }

/* ==========================================================================
   9. PAGE TITLE / HERO / MISC
   ========================================================================== */
.page-title { letter-spacing: -0.02em; }
.region--hero { border-radius: var(--border-radius); }
.breadcrumb a { color: var(--corp-muted); }
.breadcrumb a:hover { color: var(--corp-primary); }

/* ==========================================================================
   10. REDUCED MOTION — neutralise this theme's own motion effects
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .button,
  .button--primary,
  .node--view-mode-teaser,
  .region--sidebar .block:not(.block-menu):not(.block-search),
  .region--footer-top .block,
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="search"], input[type="password"], input[type="number"], input[type="date"],
  textarea, select {
    transition: none;
  }

  .button:hover, .button--primary:hover,
  .button:focus, .button--primary:focus,
  .button:active, .button--primary:active,
  .node--view-mode-teaser:hover,
  .region--sidebar .block:not(.block-menu):not(.block-search):hover {
    transform: none;
  }
}

/* ==========================================================================
   11. LAYOUT OPTIONS  (theme settings: header height + content width)
   Body classes are added by corporate_olivero_preprocess_html().
   ========================================================================== */

/* --- Header height (desktop, ≥75rem) ---
   Olivero reserves --site-header-height-wide for the header but sizes the
   branding/nav content to the smaller --header-height-wide-when-fixed, then
   bottom-aligns it — so the difference shows as an empty white band above
   .site-header__inner__container (while the blue .site-header__initial, which
   is align-self:stretch, fills to the top). Setting the two variables EQUAL
   makes the header hug its content, so there is no band. "standard" is the
   smallest/baseline (Olivero's own docked height); medium and tall step up.
   The logo scales with the height. Trade-off: the header no longer shrinks on
   scroll (it is already tight). */
body.corp-header--standard {
  --site-header-height-wide: var(--sp6);          /* ~108px (baseline) */
  --header-height-wide-when-fixed: var(--sp6);
}
body.corp-header--medium {
  --site-header-height-wide: var(--sp7);          /* ~126px */
  --header-height-wide-when-fixed: var(--sp7);
}
body.corp-header--tall {
  --site-header-height-wide: var(--sp8);          /* ~144px */
  --header-height-wide-when-fixed: var(--sp8);
}

/* The desktop primary-nav sets its own padding (--sp2 each side); with its
   line-height this makes the nav content ~108px — exactly Standard. So Standard
   needs no nav change, but Medium/Tall must resize the nav too, or the nav
   floors the header shorter than the branding and the gap returns. Match the
   nav content height to each reserved height. (Higher specificity than
   Olivero's own rule, loaded after it.)
   nav content height = line-height(--sp2 = 36px) + 2 × padding-block. */
@media (min-width: 75rem) {
  body.corp-header--medium:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
    padding-block: var(--sp2-5);   /* → ~126px, matches Medium */
  }
  body.corp-header--tall:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
    padding-block: var(--sp3);     /* → ~144px, matches Tall */
  }
}

/* --- Content width ---
   Olivero places content-medium regions' children in grid columns 3/13 on wide
   screens, leaving two empty columns each side. These rules widen that span so
   the empty gutters shrink. Scoped to the content-bearing regions only, at a
   higher specificity than Olivero's rule, and loaded after it. */
@media (min-width: 62.5rem) {
  body.corp-content--wide .region--content-above.layout--pass--content-medium > *,
  body.corp-content--wide .region--content.layout--pass--content-medium > *,
  body.corp-content--wide .region--content-below.layout--pass--content-medium > * {
    grid-column: 2 / 14;   /* ~one column gutter each side */
  }
}
body.corp-content--full .region--content-above.layout--pass--content-medium > *,
body.corp-content--full .region--content.layout--pass--content-medium > *,
body.corp-content--full .region--content-below.layout--pass--content-medium > * {
  grid-column: 1 / -1;     /* span the whole grid — no empty side columns */
}

/* ==========================================================================
   12. COLOUR & STYLE OPTIONS  (theme settings)
   Page background, corner radius and heading font are applied via CSS
   variables loaded from generated local settings CSS (see corporate_olivero.theme):
   --corp-page-bg, --border-radius, --corp-heading-font. The branding
   background uses body classes from corporate_olivero_preprocess_html().
   ========================================================================== */

/* Heading font (defaults to the body sans stack). */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--corp-heading-font, var(--font-sans));
}

/* Header site branding background. "brand" (gradient) = default, no class.
   Higher specificity than Olivero's own .site-branding rule, loaded after it. */
body.corp-branding--solid .site-branding {
  background: var(--color--primary-50);
}
body.corp-branding--light .site-branding {
  background: #e9edf3;
}
body.corp-branding--white .site-branding {
  background: #ffffff;
}
body.corp-branding--custom .site-branding {
  background: var(--corp-branding-bg, var(--color--primary-50));
}

/* Branding text contrast on light backgrounds (Olivero sets it white; the
   site name link inherits this colour). */
body.corp-branding--light .site-branding__text,
body.corp-branding--white .site-branding__text {
  color: var(--corp-ink);
}
body.corp-branding--custom .site-branding__text {
  color: var(--corp-branding-ink, #ffffff);
}