/*
Theme Name: GERLAM
Theme URI: https://github.com/jaqkar/gerlam-theme
Author: Splide Systems
Author URI: https://splide.com
Description: Block theme for GERLAM Professional Compliance & Administration - Injury on Duty (IOD) and COIDA administration for South African employers. Implements the approved GERLAM typographic identity: Cormorant Garamond wordmark over a gold hairline rule, Cormorant Garamond / Jost / JetBrains Mono type system, gold-and-navy palette on a warm editorial ground.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.1.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gerlam
Tags: block-theme, full-site-editing, business, professional, one-column, custom-colors, custom-logo, custom-menu, editor-style, block-patterns
*/

/* ==========================================================================
   GERLAM design tokens.
   theme.json exposes the curated subset to the block editor. The full ramps
   below exist for CSS that the editor never authors - the wordmark lock-up,
   the service rows, the claim-lifecycle status palette.
   Source: design_handoff_gerlam_identity/design-system/tokens/
   ========================================================================== */
:root {
  /* Gold */
  --gl-gold-050:#FBF6E7; --gl-gold-100:#F7EDD0; --gl-gold-400:#EBD489;
  --gl-gold-500:#E3C25C; --gl-gold-600:#D4AF37; --gl-gold-700:#B0902A; --gl-gold-800:#7C651D;
  /* Navy */
  --gl-navy-050:#EEF1F5; --gl-navy-100:#DCE1E9; --gl-navy-200:#BFC6D4; --gl-navy-300:#8A93A6;
  --gl-navy-400:#55607A; --gl-navy-500:#3C4759; --gl-navy-600:#2D3748; --gl-navy-700:#232B39;
  --gl-navy-800:#1A202C; --gl-navy-900:#12181F;
  /* Warm editorial ground */
  --gl-paper:#F6F4F0; --gl-paper-deep:#EFEBE4;
  --gl-line:#DCD7CE; --gl-line-soft:#E7E3DB;
  --gl-ink:#12181F; --gl-text-body:#3E4650; --gl-text-subtle:#6E6A62;
  --gl-text-descriptor:#55607A; --gl-text-descriptor-on-dark:#9AA3AE;
  --gl-hairline-gold:rgba(212,175,55,.35);
  /* Claim-lifecycle status palette. Not in the editor palette on purpose -
     these are product/portal states, not marketing-page colours. */
  --gl-status-compliant-fg:#1D6A4F; --gl-status-compliant-bg:#DCEDE5;
  --gl-status-progress-fg:#232B39;  --gl-status-progress-bg:#DCE1E9;
  --gl-status-action-fg:#8A5A12;    --gl-status-action-bg:#F6E8CD;
  --gl-status-overdue-fg:#8E2C22;   --gl-status-overdue-bg:#F6DDD9;
  --gl-status-closed-fg:#555555;    --gl-status-closed-bg:#EDEFF2;
  /* Wordmark - never re-space these */
  --gl-wordmark-tracking:0.3em; --gl-wordmark-weight:500; --gl-descriptor-tracking:0.3em;
  /* Motion */
  --gl-ease:cubic-bezier(.2,.6,.25,1);
  --gl-dur-fast:120ms; --gl-dur-base:180ms;
  --gl-focus-ring:0 0 0 3px rgba(212,175,55,.35);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body { -webkit-font-smoothing:antialiased; text-wrap:pretty; }
:focus-visible { outline:2px solid var(--gl-gold-700); outline-offset:2px; }
.wp-element-button:active, .wp-block-button__link:active { transform:translateY(1px); }
.wp-element-button, .wp-block-button__link {
  transition: background-color var(--gl-dur-fast) var(--gl-ease),
              color var(--gl-dur-fast) var(--gl-ease),
              box-shadow var(--gl-dur-fast) var(--gl-ease);
}
:where(input, textarea, select):focus-visible { box-shadow: var(--gl-focus-ring); }

/* Eyebrow: wide-tracked Jost caps. Gold-label, not gold-600 - gold-600 fails
   contrast on light grounds below ~14px. */
.gl-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: 10.5px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gl-gold-800); margin: 0;
}
.gl-dark .gl-eyebrow, .has-navy-background-color .gl-eyebrow,
.has-ink-background-color .gl-eyebrow { color: var(--gl-gold-600); }

/* Mono ordinals and statutory form codes */
.gl-ordinal {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px; font-weight: 400; color: var(--gl-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Wordmark lock-up
   GERLAM in Cormorant Garamond 500, tracking .3em, over a SHORT centred gold
   rule. The rule is not the width of the word. padding-left compensates for
   the trailing tracking gap so the glyph run centres optically.
   Shipped as SVG in the header (assets/wordmark.svg) - this CSS is the
   fallback path for contexts where live type is acceptable.
   -------------------------------------------------------------------------- */
.gl-wordmark { display:inline-block; text-decoration:none; line-height:0; }
.gl-wordmark img { display:block; width:116px; height:auto; }
.gl-footer img[alt="GERLAM"] { width:116px; height:auto; }
.gl-wordmark__descriptor-block {
  margin:14px 0 0; font-family:var(--wp--preset--font-family--body);
  font-size:9.5px; font-weight:400; letter-spacing:var(--gl-descriptor-tracking);
  color:var(--gl-text-descriptor-on-dark); line-height:1.7;
}
.gl-wordmark__lock { width:fit-content; }
.gl-wordmark__word {
  display:block;
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--gl-wordmark-weight);
  letter-spacing: var(--gl-wordmark-tracking);
  padding-left: var(--gl-wordmark-tracking);
  text-transform: none; /* source is literal capitals */
  color: var(--gl-ink);
  font-size: 21px; line-height: 1;
}
.gl-wordmark__rule {
  display:block; height:1px; width:44px; margin:7px 0 0;
  background: var(--gl-gold-600); border:0;
}
.gl-wordmark__descriptor {
  display:block; margin-top:7px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 9.5px; font-weight:400;
  letter-spacing: var(--gl-descriptor-tracking);
  color: var(--gl-text-descriptor);
}
/* Large lock-up (46px word, 72px rule) */
.gl-wordmark--lg .gl-wordmark__word { font-size:46px; }
.gl-wordmark--lg .gl-wordmark__rule { width:72px; margin-top:12px; }
/* Below 24px the tracking tightens */
.gl-wordmark__word { letter-spacing:.26em; padding-left:.26em; }
.gl-wordmark--lg .gl-wordmark__word { letter-spacing:.3em; padding-left:.3em; }
/* Reversed on navy */
.gl-wordmark--reversed .gl-wordmark__word { color:#FFFFFF; }
.gl-wordmark--reversed .gl-wordmark__rule { background:var(--gl-gold-600); }
.gl-wordmark--reversed .gl-wordmark__descriptor { color:var(--gl-text-descriptor-on-dark); }
/* Centred variant */
.gl-wordmark--center { text-align:center; }
.gl-wordmark--center .gl-wordmark__lock { margin-inline:auto; }

/* --------------------------------------------------------------------------
   Header - sticky, translucent warm paper
   -------------------------------------------------------------------------- */
.gl-header {
  position:sticky; top:0; z-index:30;
  background: rgba(246,244,240,.93);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom:1px solid var(--gl-line);
}
.gl-header .wp-block-navigation a {
  font-family: var(--wp--preset--font-family--body);
  font-size:14.5px; color:var(--gl-text-body); text-decoration:none;
}
.gl-header .wp-block-navigation a:hover { color:var(--gl-ink); text-decoration:underline; }

/* --------------------------------------------------------------------------
   Hero stat list
   -------------------------------------------------------------------------- */
.gl-stats { border-left:1px solid var(--gl-line); padding-left:32px; margin:0; }
.gl-stats dt {
  font-family: var(--wp--preset--font-family--body);
  font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gl-gold-800); margin:0 0 6px;
}
.gl-stats dd { margin:0 0 22px; font-size:15px; color:var(--gl-ink); }
.gl-stats dd:last-child { margin-bottom:0; }
.gl-stats dd span { display:block; font-size:13px; color:var(--gl-text-body); margin-top:2px; }

/* --------------------------------------------------------------------------
   Statutory band figures
   -------------------------------------------------------------------------- */
.gl-figure__value {
  font-family: var(--wp--preset--font-family--display);
  font-weight:600; font-size:clamp(38px,5vw,54px); line-height:1.05;
  color:#FFFFFF; margin:0 0 10px;
}
.gl-figure__caption { font-size:14px; color:var(--gl-navy-200); max-width:230px; margin:0; }

/* --------------------------------------------------------------------------
   Services - numbered editorial rows. Deliberately no icons.
   -------------------------------------------------------------------------- */
.gl-services { border-top:1px solid var(--gl-line); }
.gl-service-row {
  display:grid; grid-template-columns:52px 4.2fr 5.8fr; gap:32px;
  padding:26px 0; border-bottom:1px solid var(--gl-line-soft); align-items:start;
}
.gl-service-row__icon {
  display:flex; align-items:flex-start; justify-content:flex-start;
  padding-top:4px; color:var(--gl-navy-800);
}
.gl-service-row__icon .gl-icon { width:26px; height:26px; }
.gl-service-row:hover .gl-service-row__icon { color:var(--gl-gold-700); }
.gl-service-row .gl-ordinal { padding-top:7px; }
.gl-service-row h3 {
  font-family: var(--wp--preset--font-family--display);
  font-weight:600; font-size:26px; line-height:1.3; margin:0;
  color:var(--gl-ink); transition:color var(--gl-dur-fast) var(--gl-ease);
}
.gl-service-row:hover h3 { color:var(--gl-gold-700); }
.gl-service-row p { margin:0; font-size:15.5px; line-height:1.7; color:var(--gl-text-body); }
@media (max-width:781px) {
  .gl-service-row { grid-template-columns:40px 1fr; gap:16px; }
  .gl-service-row p { grid-column:2; }
}

/* --------------------------------------------------------------------------
   Process band - five ruled columns
   -------------------------------------------------------------------------- */
.gl-step { border-top:1px solid rgba(255,255,255,.16); padding-top:18px; }
.gl-step .gl-ordinal { color:var(--gl-gold-600); }
.gl-step h4 {
  font-family: var(--wp--preset--font-family--display);
  font-weight:600; font-size:21px; line-height:1.35; color:#FFFFFF; margin:10px 0 8px;
}
.gl-step p { font-size:14px; line-height:1.65; color:var(--gl-text-descriptor-on-dark); margin:0; }

/* --------------------------------------------------------------------------
   Tagline + gold rule
   -------------------------------------------------------------------------- */
.gl-rule-gold { border:0; border-top:1px solid var(--gl-gold-600); width:80px; margin:28px 0; }
.gl-tagline {
  font-family: var(--wp--preset--font-family--display);
  font-size:25px; font-weight:400; color:var(--gl-ink); margin:0;
}

/* --------------------------------------------------------------------------
   Enquiry form (Contact Form 7 markup lives inside a CF7 shortcode block)
   -------------------------------------------------------------------------- */
.gl-form { padding-left:44px; border-left:1px solid var(--gl-line); }
.gl-form label { display:block; font-size:12.5px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gl-text-subtle); margin-bottom:6px; }
.gl-form input[type=text], .gl-form input[type=email], .gl-form input[type=tel], .gl-form textarea {
  width:100%; font-family:var(--wp--preset--font-family--body); font-size:15px;
  color:var(--gl-ink); background:#FFFFFF; border:1px solid var(--gl-line);
  border-radius:5px; padding:12px 14px; min-height:48px;
}
.gl-form textarea { min-height:132px; resize:vertical; }
.gl-form .wpcf7-submit {
  background:var(--gl-gold-600); color:var(--gl-ink); border:0; border-radius:5px;
  height:54px; padding:0 30px; font-family:var(--wp--preset--font-family--body);
  font-size:15px; font-weight:500; letter-spacing:.01em; cursor:pointer;
}
.gl-form .wpcf7-submit:hover { background:var(--gl-gold-500); }
@media (max-width:781px) { .gl-form { padding-left:0; border-left:0; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.gl-footer a { color:var(--gl-navy-200); text-decoration:none; }
.gl-footer a:hover { color:var(--gl-gold-600); text-decoration:underline; }
.gl-footer__legal { border-top:1px solid rgba(255,255,255,.12); padding-top:20px; margin-top:28px;
  font-size:12.5px; color:var(--gl-navy-300);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; }

/* --------------------------------------------------------------------------
   Claim-lifecycle status badges
   -------------------------------------------------------------------------- */
.gl-status { display:inline-block; border-radius:999px; padding:4px 12px;
  font-family:var(--wp--preset--font-family--body); font-size:12.5px; font-weight:500; }
.gl-status--compliant { color:var(--gl-status-compliant-fg); background:var(--gl-status-compliant-bg); }
.gl-status--progress  { color:var(--gl-status-progress-fg);  background:var(--gl-status-progress-bg); }
.gl-status--action    { color:var(--gl-status-action-fg);    background:var(--gl-status-action-bg); }
.gl-status--overdue   { color:var(--gl-status-overdue-fg);   background:var(--gl-status-overdue-bg); }
.gl-status--closed    { color:var(--gl-status-closed-fg);    background:var(--gl-status-closed-bg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* --------------------------------------------------------------------------
   Division of labour - what GERLAM takes, what stays with the employer
   -------------------------------------------------------------------------- */
.gl-duty { list-style:none; margin:0; padding:0; }
.gl-duty li {
  display:grid; grid-template-columns:40px 1fr; gap:16px; align-items:start;
  padding:15px 0; border-bottom:1px solid var(--gl-line-soft);
}
.gl-duty li:first-child { border-top:1px solid var(--gl-line); }
.gl-duty li p { margin:0; font-size:15.5px; line-height:1.65; color:var(--gl-text-body); }
.gl-duty .gl-ordinal { padding-top:3px; }
.gl-duty .gl-ordinal { color:var(--gl-gold-700); }
.gl-duty--yours .gl-ordinal { color:var(--gl-navy-300); }
.gl-duty__note {
  margin:22px 0 0; font-size:14.5px; line-height:1.7; color:var(--gl-text-subtle);
}

/* Statutory form codes and section references. This is what the mono face is for. */
.gl-duty code, .gl-step code, .gl-service-row code {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .88em; letter-spacing:.01em;
  background: rgba(212,175,55,.14); border-radius:3px; padding:1px 5px;
  color: inherit;
}
.gl-step code { background: rgba(212,175,55,.18); color:var(--gl-gold-400); }

/* Figures in the statutory band */
.gl-figure__value + .gl-figure__caption { margin-top:0; }

@media (max-width:781px) {
  .gl-duty li { grid-template-columns:32px 1fr; gap:12px; }
}

/* --------------------------------------------------------------------------
   Icons - bundled Lucide glyphs, tinted with currentColor.
   24px grid, 2px stroke. 16px in controls and table cells, 18px default,
   20px in navigation, never above 32px. Always beside a text label, and
   always aria-hidden - see gerlam_icon() in functions.php.
   -------------------------------------------------------------------------- */
.gl-icon { display:inline-block; vertical-align:-0.18em; flex:none; stroke-width:2; }
.gl-icon-label { display:inline-flex; align-items:center; gap:7px; }
.gl-eyebrow.gl-icon-label .gl-icon { color:var(--gl-gold-800); }
.gl-dark .gl-eyebrow.gl-icon-label .gl-icon { color:var(--gl-gold-600); }
/* Navy on paper, gold on navy - the two grounds the system defines. */
.gl-icon { color: var(--gl-navy-800); }
.gl-dark .gl-icon,
.has-navy-background-color .gl-icon,
.has-ink-background-color .gl-icon { color: var(--gl-gold-600); }

/* --------------------------------------------------------------------------
   Kadence Blocks enquiry form
   The form is carried over verbatim from the old Contact page so its delivery
   is not disturbed, which means it arrives with Kadence's own styling - navy
   fields on a light ground, a full-width submit bar, and the radio group
   wearing text-input chrome. These rules bring it onto the GERLAM input spec
   without touching the block's configuration.
   -------------------------------------------------------------------------- */
.gl-form .kb-form .kb-field,.gl-form .kb-form input[type=text],.gl-form .kb-form input[type=email],.gl-form .kb-form input[type=tel],.gl-form .kb-form textarea {
  background:#FFFFFF !important;
  color:#12181F !important;
  border:1px solid #DCD7CE !important;
  border-radius:5px !important;
  min-height:48px;
  font-family:var(--wp--preset--font-family--body) !important;
  font-size:15px !important;
  padding:12px 14px !important;
  box-shadow:none !important}
.gl-form .kb-form textarea {
  min-height:132px !important}
.gl-form .kb-form .kb-field:focus,.gl-form .kb-form textarea:focus {
  border-color:#B0902A !important;
  outline:2px solid #B0902A;
  outline-offset:1px}
.gl-form .kb-form input::placeholder,.gl-form .kb-form textarea::placeholder {
  color:#8A93A6 !important}
.gl-form .kb-form label,.gl-form .kb-form .kb-form-label {
  color:#6E6A62 !important;
  font-family:var(--wp--preset--font-family--body) !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  letter-spacing:.08em;
  text-transform:uppercase}
.gl-form .kb-form .kb-radio-item label,.gl-form .kb-form .kb-radio-style-wrap label {
  text-transform:none;
  letter-spacing:0;
  font-size:15px !important;
  color:#3E4650 !important}
.gl-form .kb-form .kb-forms-submit,.gl-form .kb-form button[type=submit],.gl-form .kb-form .kb-forms-submit-button {
  background:#D4AF37 !important;
  color:#12181F !important;
  border:0 !important;
  border-radius:5px !important;
  font-family:var(--wp--preset--font-family--body) !important;
  font-size:15px !important;
  font-weight:500 !important;
  letter-spacing:.01em;
  min-height:54px;
  padding:0 30px !important}
.gl-form .kb-form .kb-forms-submit:hover,.gl-form .kb-form button[type=submit]:hover {
  background:#E3C25C !important}
.gl-form .kb-form .kb-form-field-wrap,.gl-form .kb-form .kadence-blocks-form-field {
  margin-bottom:18px}
.gl-form .kb-form .kb-forms-submit,.gl-form .kb-form button[type=submit] {
  width:auto !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  max-width:max-content}
.gl-form .kb-form .kb-form-field-wrap:has(.kb-forms-submit),.gl-form .kb-form .kadence-blocks-form-field:has(.kb-forms-submit) {
  display:flex;
  justify-content:flex-start}
.gl-form .kb-form .kb-radio-style-wrap,.gl-form .kb-form fieldset {
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  min-height:0 !important}
.gl-form .kb-form .kb-radio-item {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-right:22px}
.gl-form .kb-form .kb-field.kb-radio-style-field,.gl-form .kb-form .kb-field.kb-radio-field {
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  min-height:0 !important;
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  align-items:center;
  padding-top:12px !important}
.gl-form .kb-form .kb-radio-item {
  margin:0}
.gl-form .kb-form .kb-radio-item input[type=radio] {
  accent-color:#D4AF37;
  margin-right:7px}

/* Prose pages (page.html - privacy policy and any plain text page).
   theme.json contentSize is 1240px for the marketing sections, which gives
   ~150-character lines on running text. Cap prose at 720px and align it with
   the left edge of the 1240px column the title sits in, not centred. The !important only
   answers core's own `margin-left:auto !important` on constrained children. */
.wp-block-post-content.gl-prose {
  max-width: 720px;
  margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
}

/* Short gold rule (block style registered in functions.php). Same hairline as
   the wordmark lock-up: 1px gold, short, left-aligned under the heading. */
.wp-block-separator.is-style-gerlam-gold-rule {
  width: 72px; max-width: 72px; height: 0; border: 0;
  border-top: 1px solid var(--gl-gold-600); opacity: 1;
  margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
  margin-right: auto !important;
  margin-top: 20px; margin-bottom: 40px;
}