/* ============================================================
   OA Components — brand utilities, design-system components,
   media slot, masthead and shared section primitives.
   (Split out of the oa2026 theme's base.css, order unchanged.)
   ============================================================ */

/* ---- Brand utilities (tokens/base.css) ---- */
.oa-eyebrow { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: var(--text-xs); color: var(--brand-primary); }
.oa-headline-light { font-family: var(--font-slab); font-weight: 300; letter-spacing: var(--tracking-head); }
.oa-subhead { font-family: var(--font-sans); font-weight: 700; letter-spacing: var(--tracking-head); }
.oa-indicator { font-family: var(--font-sans); font-weight: 300; font-style: italic; letter-spacing: var(--tracking-body); color: var(--text-secondary); }
.oa-lead { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-secondary); }

/* Decorative arrowhead */
.oa-mark { display: block; flex: none; object-fit: contain; }
.oa-mark--missing { display: none; }

/* ============================================================
   Design-system components (from _ds_bundle.js)
   ============================================================ */

/* Button */
.oa-btn {
  --_bg: var(--brand-primary);
  --_fg: var(--text-inverse);
  --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-sans); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1; white-space: nowrap;
  border: var(--border-base) solid var(--_bd); background: var(--_bg); color: var(--_fg);
  border-radius: var(--radius-md); cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.oa-btn:hover { background: var(--_bgh, var(--brand-primary-hover)); color: var(--_fgh, var(--_fg)); text-decoration: none; }
.oa-btn:active { background: var(--_bga, var(--brand-primary-press)); transform: translateY(1px); }
.oa-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.oa-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.oa-btn--sm { font-size: var(--text-2xs); padding: .5rem .85rem; }
.oa-btn--md { font-size: var(--text-xs); padding: .7rem 1.15rem; }
.oa-btn--lg { font-size: var(--text-sm); padding: .9rem 1.5rem; }
.oa-btn--secondary { --_bg: transparent; --_fg: var(--brand-dark); --_bd: var(--color-border-strong); --_bgh: var(--color-surface-sunken); --_bga: var(--color-surface-mist); }
.oa-btn--ghost { --_bg: transparent; --_fg: var(--brand-primary); --_bd: transparent; --_bgh: var(--oa-red-50); --_bga: var(--oa-red-100); }
.oa-btn--danger { --_bg: var(--color-danger); --_bgh: var(--oa-red-700); --_bga: var(--oa-red-800); }
.oa-btn--dark { --_bg: var(--brand-dark); --_bgh: var(--oa-slate-700); --_bga: var(--oa-slate-800); }
/* Outline-red (Lodge Support "Full changelog") */
.oa-btn--outline { --_bg: transparent; --_fg: var(--brand-primary); --_bd: var(--brand-primary); --_bgh: var(--brand-primary); --_fgh: #fff; --_bga: var(--brand-primary-hover); }
/* Wide-tracked CTA used in the page bands (14px tracking, 2xs) */
.oa-btn--wide { letter-spacing: .14em; font-size: var(--text-2xs); padding: 13px 22px; }
.oa-btn--full { width: 100%; }
.oa-btn .oa-icon { flex: none; }
/* Secondary buttons on dark grounds */
.oa-on-dark .oa-btn--secondary { --_fg: #fff; --_bd: rgba(255,255,255,.4); --_bgh: rgba(255,255,255,.08); --_bga: rgba(255,255,255,.14); }

/* Icon button */
.oa-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-base) solid var(--color-border-strong);
  background: var(--color-surface); color: var(--brand-dark);
  border-radius: var(--radius-md); cursor: pointer; padding: 0;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.oa-iconbtn:hover { background: var(--color-surface-sunken); }
.oa-iconbtn:active { background: var(--color-surface-mist); }
.oa-iconbtn--sm { width: 34px; height: 34px; }
.oa-iconbtn--md { width: 40px; height: 40px; }
.oa-iconbtn--lg { width: 48px; height: 48px; }
.oa-iconbtn--ghost { border-color: transparent; background: transparent; }

/* Badge */
.oa-badge { display: inline-flex; align-items: center; gap: .35em; font-family: var(--font-sans); font-weight: 700; font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; padding: .3em .6em; border-radius: var(--radius-sm); line-height: 1; white-space: nowrap; }
.oa-badge--red { background: var(--oa-red-50); color: var(--brand-primary-press); }
.oa-badge--slate { background: var(--color-surface-mist); color: var(--brand-dark); }
.oa-badge--blue { background: var(--oa-blue-100); color: var(--oa-blue-700); }
.oa-badge--success { background: #E2F2EA; color: var(--color-success); }
.oa-badge--warning { background: #FBF1DA; color: #8A6410; }
.oa-badge--solid { background: var(--brand-primary); color: var(--text-inverse); }

/* Tag (filter chip) */
.oa-tag { display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs); letter-spacing: .01em; color: var(--brand-dark); background: var(--color-surface); border: var(--border-thin) solid var(--color-border-strong); padding: .35em .7em; border-radius: var(--radius-pill); line-height: 1.2; cursor: pointer; }
button.oa-tag { appearance: none; }
.oa-tag:hover { border-color: var(--oa-slate-400); }
.oa-tag--active, .oa-tag[aria-pressed="true"] { background: var(--oa-red-50); border-color: var(--oa-red-200); color: var(--brand-primary-press); }
.oa-tag__x { display: inline-flex; cursor: pointer; border: 0; background: none; padding: 0; margin-left: .1em; color: inherit; opacity: .6; line-height: 0; }
.oa-tag__x:hover { opacity: 1; }

/* Checkbox */
.oa-check { position: relative; display: inline-flex; align-items: flex-start; gap: .6rem; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary); cursor: pointer; line-height: 1.4; }
.oa-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.oa-check__box { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: var(--radius-sm); border: var(--border-base) solid var(--color-border-strong); background: var(--color-surface); display: inline-flex; align-items: center; justify-content: center; color: var(--text-inverse); transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.oa-check__box svg { width: 13px; height: 13px; opacity: 0; transform: scale(.6); transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.oa-check input:checked + .oa-check__box { background: var(--brand-primary); border-color: var(--brand-primary); }
.oa-check input:checked + .oa-check__box svg { opacity: 1; transform: scale(1); }
.oa-check input:focus-visible + .oa-check__box { box-shadow: var(--shadow-focus); }

/* Input / field */
.oa-field { display: flex; flex-direction: column; gap: .4rem; font-family: var(--font-sans); }
.oa-field__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.oa-input { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-sm); color: var(--text-primary); background: var(--color-surface); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-md); padding: .65rem .8rem; width: 100%; line-height: 1.3; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
.oa-input::placeholder { color: var(--text-muted); }
.oa-input:hover { border-color: var(--oa-slate-400); }
.oa-input:focus { outline: none; border-color: var(--focus-ring); box-shadow: var(--shadow-focus); }
.oa-field__hint { font-size: var(--text-2xs); color: var(--text-muted); }

/* Search box with leading icon (sidebars, toolbars) */
.oa-searchbox { position: relative; }
.oa-searchbox .oa-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.oa-searchbox input { width: 100%; font-family: var(--font-sans); font-size: var(--text-sm); padding: 10px 12px 10px 34px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); color: var(--text-primary); outline: none; background: #fff; }
.oa-searchbox input:focus { border-color: var(--brand-primary); }
.oa-searchbox input::placeholder { color: var(--oa-slate-400); }

/* ============================================================
   Media slot + photo credit (image-slot.js)
   ============================================================ */
.oa-media { position: relative; overflow: hidden; background: var(--oa-slate-100); }
.oa-media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.oa-media--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--oa-slate-600); }
.oa-media--empty .oa-media__mark { width: 46px; opacity: .45; }
.oa-media__hint { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.oa-credit { position: absolute; left: 8px; bottom: 8px; z-index: 2; max-width: calc(100% - 16px); font-size: 10px; line-height: 1.3; letter-spacing: .02em; color: rgba(255,255,255,.92); background: rgba(3,0,6,.5); padding: 3px 7px; border-radius: var(--radius-xs); pointer-events: none; }

/* ============================================================
   Masthead (Masthead.dc.html) — cover / standard / editorial
   ============================================================ */
.oa-mast { position: relative; background: var(--brand-dark); color: #fff; overflow: hidden; }
.oa-mast__ribbon { position: absolute; top: 0; left: max(var(--space-6), calc((100vw - var(--container-xl)) / 2 + var(--space-6))); z-index: 3; width: 54px; background: var(--brand-primary); padding: 17px 0 28px; display: flex; flex-direction: column; align-items: center; gap: 17px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 17px), 0 100%); box-shadow: 0 14px 30px rgba(3,0,6,.36); }
.oa-mast__ribbon .oa-mark { width: 23px; height: auto; }
.oa-mast__section { writing-mode: vertical-rl; font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: #fff; line-height: 1; }
.oa-mast__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: var(--space-5); }
.oa-mast__crumbs a { color: inherit; text-decoration: none; }
.oa-mast__crumbs a:hover { color: #fff; }
.oa-mast__crumb--current { color: #fff; }
.oa-mast__title { font-family: var(--font-slab); font-weight: 700; color: #fff; margin: 0; text-transform: uppercase; }
.oa-mast__divider { height: 1px; background: rgba(255,255,255,.3); margin: var(--space-6) 0 var(--space-5); }
.oa-mast__lead { font-size: var(--text-md); margin: 0; text-wrap: pretty; }

.oa-mast--cover .oa-mast__grid { position: relative; display: grid; grid-template-columns: 1fr 44%; min-height: clamp(480px, 58vh, 570px); }
.oa-mast--cover .oa-mast__body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-9) var(--space-7) var(--space-8) calc(max(var(--space-6), (100vw - var(--container-xl)) / 2 + var(--space-6)) + 96px); }
.oa-mast--cover .oa-mast__title { font-size: clamp(2.4rem, 4.6vw, 3.6rem); letter-spacing: .055em; line-height: .98; }
.oa-mast--cover .oa-mast__lead { line-height: 1.6; color: rgba(255,255,255,.88); max-width: 44ch; margin-bottom: var(--space-6); }
.oa-mast--cover .oa-mast__stats { display: flex; gap: var(--space-7); flex-wrap: wrap; }
.oa-mast--cover .oa-mast__stat-k { font-weight: 700; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 5px; }
.oa-mast--cover .oa-mast__stat-v { font-family: var(--font-slab); font-weight: 700; font-size: var(--text-xl); letter-spacing: .03em; color: #fff; }
.oa-mast__photo { position: relative; min-height: 260px; }
.oa-mast__photo .oa-media { position: absolute; inset: 0; }
.oa-mast__photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--brand-dark) 0%, rgba(20,28,33,.72) 26%, rgba(20,28,33,.12) 72%, rgba(20,28,33,0) 100%); }
.oa-mast__photo .oa-credit { left: auto; right: 8px; }

.oa-mast--flat .oa-mast__inner { position: relative; max-width: var(--container-xl); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-8) calc(var(--space-6) + 96px); }
.oa-mast--flat .oa-mast__row { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: flex-end; justify-content: space-between; }
.oa-mast--flat .oa-mast__main { flex: 1 1 480px; min-width: 0; }
.oa-mast--flat .oa-mast__title { font-size: clamp(2.1rem, 4.2vw, 3.1rem); letter-spacing: .05em; line-height: 1.02; }
.oa-mast--flat .oa-mast__lead { line-height: 1.65; color: var(--oa-slate-200); max-width: 56ch; }
.oa-mast__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-5); }
.oa-mast__tag { background: rgba(255,255,255,.14); color: #fff; font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-sm); }
.oa-mast__meta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-6); font-size: var(--text-sm); color: var(--oa-slate-200); }
.oa-mast__author { display: inline-flex; align-items: center; gap: 9px; }
.oa-mast__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; letter-spacing: .06em; color: #fff; overflow: hidden; }
.oa-mast__avatar img { width: 100%; height: 100%; object-fit: cover; }
.oa-mast__sep { opacity: .4; }
.oa-mast__statbox { flex: 0 1 auto; display: flex; gap: 1px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16); flex-wrap: wrap; }
.oa-mast__statcell { flex: 1; min-width: 112px; background: var(--brand-dark); padding: var(--space-5); }
.oa-mast__statbox .oa-mast__stat-v { font-family: var(--font-slab); font-weight: 700; font-size: var(--text-2xl); letter-spacing: .03em; color: #fff; line-height: 1; }
.oa-mast__statbox .oa-mast__stat-k { font-weight: 700; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 8px; }

@media (max-width: 900px) {
  .oa-mast--cover .oa-mast__grid { grid-template-columns: 1fr; }
  .oa-mast--cover .oa-mast__body { padding-left: var(--space-6); padding-right: var(--space-6); order: 2; }
  .oa-mast__photo { order: 1; min-height: 240px; }
  .oa-mast__ribbon { left: var(--space-6); }
}
@media (max-width: 600px) {
  .oa-mast--flat .oa-mast__inner { padding-left: calc(var(--space-5) + 70px); padding-right: var(--space-5); }
  .oa-mast__ribbon { left: var(--space-5); }
}

/* ============================================================
   Section primitives shared by the OA widgets
   ============================================================ */
.oa-band { background: #fff; }
.oa-band--sunken { background: var(--color-surface-sunken); }
.oa-band--dark { background: var(--brand-dark); color: #fff; }
.oa-band--tint { background: var(--oa-red-50); }
.oa-band--rule { border-bottom: 1px solid var(--color-border); }
.oa-band--tint.oa-band--rule { border-bottom-color: var(--oa-red-100); }
.oa-band--ruletop { border-top: 1px solid var(--color-border); }
.oa-wrap { max-width: var(--container-xl); margin: 0 auto; padding: var(--space-9) var(--space-6); }
.oa-wrap--md { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.oa-wrap--sm { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.oa-block { margin-bottom: var(--space-9); }
.oa-block--md { margin-bottom: var(--space-8); }
.oa-block--sm { margin-bottom: var(--space-6); }
.oa-block--none { margin-bottom: 0; }
@media (max-width: 600px) {
  .oa-wrap { padding-left: var(--space-5); padding-right: var(--space-5); padding-top: var(--space-8); padding-bottom: var(--space-8); }
}

/* Red 72px bar above display headings */
.oa-bar { width: 72px; height: 4px; background: var(--brand-primary); margin-bottom: var(--space-5); }
/* Hairline with 56px red segment */
.oa-rule { position: relative; height: 1px; background: var(--color-border); margin-bottom: var(--space-5); }
.oa-rule::before { content: ""; position: absolute; left: 0; top: -1.5px; width: 56px; height: 4px; background: var(--brand-primary); }

.oa-h-display { font-family: var(--font-slab); font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.6rem); letter-spacing: .03em; line-height: 1.12; color: var(--text-primary); margin: 0; text-wrap: pretty; }
.oa-h-display--sm { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.oa-h-upper { font-family: var(--font-slab); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: .04em; line-height: 1.1; color: #fff; margin: 0; text-transform: uppercase; }
.oa-h-upper--lg { font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: .045em; line-height: 1.08; }
.oa-h-section { font-family: var(--font-slab); font-weight: 700; font-size: var(--text-2xl); letter-spacing: .02em; line-height: 1.15; color: var(--text-primary); margin: 0; }
.oa-h-card { font-family: var(--font-slab); font-weight: 700; font-size: var(--text-xl); letter-spacing: .02em; line-height: 1.15; color: var(--text-primary); margin: 0; }

.oa-kicker { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-2xs); letter-spacing: .18em; text-transform: uppercase; color: var(--brand-primary); }
.oa-kicker--wide { letter-spacing: .26em; }
.oa-band--dark .oa-kicker, .oa-on-dark .oa-kicker { color: var(--oa-red-300); }
.oa-micro { font-weight: 700; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.oa-flag { font-weight: 700; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; background: var(--oa-red-50); color: var(--brand-primary); padding: 3px 8px; border: 1px solid var(--oa-red-100); white-space: nowrap; }

/* Section header row: heading left, aside right */
.oa-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-7); }
.oa-sechead--tight { margin-bottom: var(--space-6); }
.oa-sechead__aside { font-size: var(--text-sm); line-height: 1.65; color: var(--text-secondary); max-width: 44ch; margin: 0; }
.oa-sechead__aside--muted { color: var(--text-muted); max-width: none; line-height: 1.4; }
.oa-band--dark .oa-sechead__aside, .oa-on-dark .oa-sechead__aside { color: var(--oa-slate-300); max-width: 42ch; }
.oa-sechead__mark { display: flex; align-items: center; gap: 14px; }
.oa-sechead__mark > .oa-mark { width: 26px; height: auto; }
.oa-sechead__mark .oa-kicker { margin-bottom: 6px; }

/* Notched red label ("Latest Stories", "By the Numbers") */
.oa-ribbonhead { display: flex; align-items: center; margin-bottom: var(--space-4); }
.oa-ribbonhead__label { display: inline-flex; align-items: center; gap: 8px; flex: none; background: var(--brand-primary); color: #fff; padding: 6px 21px 6px 11px; clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%); font-family: var(--font-sans); font-weight: 700; font-size: var(--text-2xs); letter-spacing: .18em; text-transform: uppercase; line-height: 1.4; }
.oa-ribbonhead__label .oa-mark { width: 12px; height: auto; }
.oa-ribbonhead__line { flex: 1; height: 1px; background: var(--color-border); }

/* Numbered square marker */
.oa-num { flex: none; width: 22px; height: 22px; background: var(--brand-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; }
.oa-num--lg { width: 26px; height: 26px; font-size: 12px; }

/* Red-topped panel */
.oa-panel { border: 1px solid var(--color-border); background: #fff; }
.oa-panel--sunken { background: var(--color-surface-sunken); }
.oa-panel__top { height: 4px; background: var(--brand-primary); }

/* Hairline grids: 1px rules between cells. Each cell draws its own outline so an
   incomplete last row leaves no grey block (the design's background technique did). */
.oa-hairgrid { display: grid; gap: 1px; padding: 1px; }
.oa-hairgrid > * { outline: 1px solid var(--color-border); }
.oa-band--dark .oa-hairgrid > *, .oa-hairgrid--dark > * { outline-color: #56646D; }

/* Elementor: our widgets own their spacing */
.oa-elementor-page .elementor-widget:not(:last-child) { margin-bottom: 0; }
.elementor-widget-container > .oa-band, .elementor-widget-container > .oa-mast { width: 100%; }