/* Additions on top of orbicul-brand.css: language switcher, fallback
   notice, lead-sent confirmation. Kept in a separate file so the
   brand stylesheet can still be swapped/updated independently. */

.header-right{ display:flex; align-items:center; gap:1rem; }

.lang-switcher{ position:relative; }
.lang-switcher summary{
  list-style:none; cursor:pointer; font-size:.85rem; font-weight:700;
  color:var(--text); border:1px solid var(--border); border-radius:var(--radius);
  padding:.4rem .75rem; letter-spacing:.03em;
}
.lang-switcher summary::-webkit-details-marker{ display:none; }
.lang-switcher summary:hover{ border-color:var(--accent); }
.lang-switcher ul{
  list-style:none; margin:0; padding:.5rem; position:absolute; right:0; top:calc(100% + .5rem);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  min-width:180px; max-height:320px; overflow-y:auto; z-index:20;
  box-shadow:0 12px 32px rgba(0,0,0,.4);
}
.lang-switcher li{ margin:0; }
.lang-switcher a, .lang-switcher .lang-pending{
  display:block; padding:.45rem .6rem; border-radius:6px; font-size:.9rem; text-decoration:none;
}
.lang-switcher a{ color:var(--text); }
.lang-switcher a:hover{ background:var(--surface-raised); color:var(--accent); }
.lang-switcher a.is-current{ color:var(--accent); font-weight:700; }
.lang-switcher .lang-pending{ color:var(--muted); opacity:.55; cursor:default; }

/* On mobile the header wraps (see orbicul-brand.css's own
   `@media (max-width:640px) .site-header .wrap{flex-wrap:wrap}`), which
   moves .lang-switcher to the far left of its own row. The dropdown's
   desktop position (`right:0`, opening from the button's right edge
   towards the left) then puts most of the ~180px-wide menu off the left
   edge of a narrow viewport — there's nothing to its left for it to open
   into. Anchoring to the button's own left edge instead keeps it inside
   the viewport at this same breakpoint; the calc() max-width is a safety
   net for the rare case where the switcher itself isn't flush against
   the left edge (e.g. a translated CTA pushes it inward) so the menu
   still can't run past the right edge either. Desktop (>640px) keeps its
   existing right:0 behaviour untouched. */
@media (max-width:640px){
  .lang-switcher ul{
    left:0; right:auto;
    max-width:calc(100vw - 32px);
  }
}

.fallback-notice{
  background:var(--surface-raised); border:1px solid var(--border); border-left:3px solid var(--accent);
  padding:.75rem 1rem; border-radius:var(--radius); font-size:.9rem; color:var(--muted); margin-top:1.5rem;
}

.lead-sent{
  background:rgba(149,193,31,.12); border:1px solid var(--accent); color:var(--accent-strong);
  padding:.75rem 1rem; border-radius:var(--radius); font-size:.92rem; margin-bottom:1rem;
}

/* The FAQ question is now a real <h3> inside <summary> for semantic
   correctness (search engines / AI crawlers / screen readers read the
   heading outline, not just visible text) — reset it to look exactly
   like the plain-text label it replaced, not like a document heading. */
.faq-item summary h3{
  display:inline; font:inherit; margin:0; color:inherit; font-weight:600;
}

/* ---- Supporting ("one page, one question") pages ---- */
.hero-supporting .eyebrow a{ color:var(--accent); text-decoration:none; font-weight:600; }
.hero-supporting .eyebrow a:hover{ text-decoration:underline; }
.hero-supporting h1{ margin-bottom:0; }

.direct-answer{
  font-size:1.15rem; line-height:1.7; color:var(--text);
  border-left:3px solid var(--accent); padding-left:1.2rem; margin:0;
}

.cluster-card-pending{
  opacity:.55; cursor:default;
}
.cluster-card-pending .pending-label{
  font-size:.8rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
}

/* ---- Visible breadcrumbs (structured data alone isn't enough —
   spec explicitly wants both machine- and human-readable) ---- */
.breadcrumbs{ padding:.9rem 0; font-size:.85rem; }
.breadcrumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.breadcrumbs li{ margin:0; display:flex; align-items:center; gap:.4rem; color:var(--muted); }
.breadcrumbs a{ color:var(--muted); text-decoration:none; }
.breadcrumbs a:hover{ color:var(--accent); }
.breadcrumbs li[aria-current] { color:var(--text); font-weight:600; }

/* ---- Visually-hidden labels: present for screen readers and form
   semantics, invisible on screen where the placeholder already
   communicates the field's purpose visually. Placeholder text alone
   is not an accessible label. ---- */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---- Comparative/categorical content tables (maturity models,
   level definitions, scoring scales) — semantic <table>, not prose,
   per the audit's explicit "tables not paragraphs" recommendation. ---- */
.table-wrap{ overflow-x:auto; margin:1.6rem 0; border:1px solid var(--border); border-radius:var(--radius); }
.orgx-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.orgx-table caption{
  text-align:left; padding:.9rem 1.1rem .4rem; font-weight:700; color:var(--text);
  font-family:'Raleway',sans-serif; font-size:1rem;
}
.orgx-table th, .orgx-table td{
  padding:.75rem 1.1rem; text-align:left; border-bottom:1px solid var(--border);
  vertical-align:top; color:var(--text);
}
.orgx-table thead th{
  background:var(--surface); font-weight:700; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.03em; color:var(--muted);
  border-bottom:1px solid var(--border);
}
.orgx-table tbody th[scope="row"]{
  font-weight:600; background:var(--surface); white-space:nowrap;
}
.orgx-table tbody tr:last-child td, .orgx-table tbody tr:last-child th{ border-bottom:none; }

/* ---- Editorial cross-domain links — deliberately understated, one
   per page maximum, attached to the specific paragraph that earned
   it. Never styled as a prominent CTA; this is a footnote-weight
   "you might also want this" for a genuinely interested reader. ---- */
.cross-link{
  margin-top:.6rem; padding-top:.6rem; border-top:1px dashed var(--border);
  font-size:.88rem;
}
.cross-link-eyebrow{ color:var(--muted); margin-right:.3rem; }
.cross-link a{ color:var(--accent); text-decoration:underline; }

/* ---- Dedicated booking page template ---- */
.orgx-booking-page{ padding-top:4.5rem; padding-bottom:4.5rem; }

/* ---- Scheduler modal ----
   Same modal pattern used across the ORGX family (Digital Services runs
   the identical chrome under its own domain-accent colours). The widget
   inside needs no variable bridge — the shared booking plugin's CSS
   already falls back to --bg/--surface/--border/--text/--muted/--accent/
   --accent-strong/--accent-ink/--radius, the exact same token names this
   theme already defines, so it inherits them natively. */
body.scheduler-body-lock{ overflow:hidden; }

.scheduler-backdrop{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  background:rgba(6,10,15,.72);
  visibility:hidden; opacity:0;
  transition:opacity .2s ease, visibility .2s ease;
}
.scheduler-backdrop.is-open{ visibility:visible; }
.scheduler-backdrop.is-visible{ opacity:1; }

.scheduler-modal{
  position:relative;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 32px 96px rgba(0,0,0,.5);
  width:100%; max-width:840px; max-height:92vh; overflow-y:auto;
  padding:clamp(1.5rem,4vw,3rem);
  display:flex; flex-direction:column; gap:1.5rem;
  transform:translateY(16px);
  transition:transform .2s ease;
}
.scheduler-backdrop.is-visible .scheduler-modal{ transform:translateY(0); }

.scheduler-modal__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.scheduler-modal__heading{ flex:1; min-width:0; }
.scheduler-modal__title{ margin-bottom:.4rem; }
.scheduler-modal__subtitle{ color:var(--muted); margin:0; }
.scheduler-modal__close{
  flex-shrink:0; width:32px; height:32px; border-radius:var(--radius);
  border:1px solid var(--border); background:transparent; color:var(--muted);
  font-size:1.1rem; line-height:1; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.scheduler-modal__close:hover{ border-color:var(--accent); color:var(--accent); }
.scheduler-modal__close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.scheduler-cb-wrap .orgx-cb-widget{ max-width:none; }

.scheduler-cb-fallback{ color:var(--muted); }
.scheduler-cb-fallback a{ color:var(--accent); }

/* Weekly grid layout for the shared widget's day list (.orgx-cb-weekgrid*)
   is now centralised in orgx-consultant-booking/assets/css/booking.css —
   was 4 near-identical per-theme copies, moved to one place 2026-09-30.
   Only remove this comment if you're looking for it and not finding it. */

@media (max-width:640px){
  .scheduler-modal{ padding:1.25rem 1rem; max-height:96vh; }
  .scheduler-modal__subtitle{ display:none; }
}