/* ==========================================================================
   ConferenceRooms.org — Unified Design System (v1)
   Source of truth for site-wide visual language.
   Loaded AFTER page inline styles so these rules win at equal specificity.
   Built on Bootstrap 6. No new framework. No decorative excess.
   ========================================================================== */

/* ---- 1. Design tokens ---------------------------------------------------- */
.cr{
  --cr-navy:#102a56;
  --cr-blue:#1c4570;
  --cr-red:#b91f3b;
  --cr-red-dark:#9c1830;
  --cr-red-deep:#861428;
  --cr-gold:#f0c450;
  --cr-gold-soft:#f6c85f;
  --cr-green:#1f7a4d;
  --cr-ink:#1d2733;
  --cr-body:#4a5468;
  --cr-muted:#5b6779;
  --cr-faint:#7a8492;
  --cr-surface:#ffffff;
  --cr-surface-soft:#f5f8fc;
  --cr-surface-tint:#eef3f9;
  --cr-border:#dde3ec;
  --cr-border-soft:#e6ebf2;
  --cr-shadow-sm:0 1px 2px rgba(16,42,86,.06);
  --cr-shadow-md:0 10px 28px rgba(16,42,86,.08);
  --cr-radius-btn:12px;
  --cr-radius-card:18px;
  --cr-radius-panel:20px;
  --cr-container:1120px;
  --cr-section-pad:clamp(56px,7.5vw,104px);
  --cr-focus:0 0 0 3px rgba(185,31,59,.35);
}

/* ---- 2. Base ------------------------------------------------------------- */
.cr{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--cr-ink);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.cr ::selection{background:#f6cdd5;color:var(--cr-navy)}
.cr :focus-visible{outline:none;box-shadow:var(--cr-focus);border-radius:6px}
.cr img{max-width:100%;height:auto}

/* ---- 3. Links: underline rhythm only. Color stays with the page,
   so links on dark bands keep their intended treatment. ------------- */
.cr main a:not(.btn){text-decoration-thickness:1px;text-underline-offset:3px}

/* ---- 4. Buttons: one system, clear roles --------------------------------- */
/* Base metrics shared by every button on every page. */
.cr .btn{
  --bs-btn-border-radius:var(--cr-radius-btn);
  min-height:52px;
  padding:13px 28px;
  font-size:1rem;
  font-weight:650;
  letter-spacing:.01em;
  line-height:1.25;
  border-radius:var(--cr-radius-btn);
  border-width:1px;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.cr .btn:active{transform:translateY(1px)}
/* Primary: the single red action. */
.cr .btn-solid.theme-cta,
.cr .btn-solid.theme-cta:link,
.cr .btn-solid.theme-cta:visited{
  background:var(--cr-red);
  border-color:var(--cr-red);
  color:#fff;
}
.cr .btn-solid.theme-cta:hover,
.cr .btn-solid.theme-cta:focus-visible{background:var(--cr-red-dark);border-color:var(--cr-red-dark);color:#fff}
.cr .btn-solid.theme-cta:active{background:var(--cr-red-deep);border-color:var(--cr-red-deep);color:#fff}
/* On-band: white button for dark/colored bands. */
.cr .btn-solid.theme-onband,
.cr .btn-solid.theme-onband:link,
.cr .btn-solid.theme-onband:visited{
  background:#fff;
  border-color:#fff;
  color:var(--cr-navy);
}
.cr .btn-solid.theme-onband:hover,
.cr .btn-solid.theme-onband:focus-visible{background:var(--cr-surface-tint);border-color:var(--cr-surface-tint);color:var(--cr-navy)}
.cr .btn-solid.theme-onband:active{background:#dfe8f2;border-color:#dfe8f2;color:var(--cr-navy)}
/* Tertiary: one underline treatment everywhere. Color stays with the page. */
.cr .ed-ghost,.cr .sg-ghost{
  font-weight:650;
  text-decoration:none;
  border-bottom:2px solid currentColor;
  padding-bottom:2px;
  line-height:1.4;
}
/* Disabled is a first-class role: muted, non-interactive, same metrics. */
.cr .btn.ed-sendoff{min-height:52px;border-radius:var(--cr-radius-btn)}
/* Action rows: consistent rhythm. */
.cr .ed-actions,.cr .sg-actions{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.cr .ed-actions.c,.cr .sg-actions.hc-actions-center{justify-content:center}
.cr .ed-actions .ed-ghost,.cr .sg-actions .sg-ghost{align-self:center}

/* ---- 5. Sections: one rhythm --------------------------------------------- */
.cr .ed-sec,.cr .sg-s{padding-top:var(--cr-section-pad);padding-bottom:var(--cr-section-pad)}
.cr .ed-sec .container,
.cr .sg-s .container,
.cr .ed-hero .container{
  max-width:var(--cr-container);
  margin-left:auto;
  margin-right:auto;
  padding-left:max(24px,env(safe-area-inset-left));
  padding-right:max(24px,env(safe-area-inset-right));
}
/* Section surfaces stay intentional per page; no automatic striping. */

/* ---- 6. Headings: one hierarchy ------------------------------------------
   Type scale, spacing and balance only. Color stays with the page, so
   headings on dark bands keep their light treatment. ---------------- */
.cr .ed-sec h2,.cr .sg-s h2,.cr .ed-hero h1{
  letter-spacing:-.04em;
  line-height:1.06;
  text-wrap:balance;
}
.cr .ed-head{max-width:720px;margin:0 auto 44px;text-align:center}
.cr .ed-head p,.cr .sg-s .lead{font-size:1.1rem;line-height:1.6}
.cr .ed-sec h3,.cr .sg-s h3{letter-spacing:-.01em;line-height:1.3}
/* Kickers: small-caps type treatment only; color stays with the page. */
.cr .sg-kick,.cr .sg-kick.on-dark{
  display:inline-block;
  margin-bottom:10px;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---- 7. Cards: one surface ----------------------------------------------- */
.cr .ed-sctile,
.cr .sg2-card,
.cr .hc-tile,
.cr .hc-room,
.cr .wg-card,
.cr .crd-card{
  border:1px solid var(--cr-border);
  border-radius:var(--cr-radius-card);
  background:var(--cr-surface);
  box-shadow:var(--cr-shadow-sm);
}
.cr .ed-sctiles,.cr .sg2-grid.cols3,.cr .hc-tiles{gap:18px}

/* ---- 8. Check lists ------------------------------------------------------- */
.cr .sg-ticks,.cr .hc-ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.cr .sg-ticks li,.cr .hc-ticks li{position:relative;padding-left:30px;font-size:.98rem;line-height:1.5}
.cr .sg-ticks li svg{position:absolute;left:0;top:2px;width:20px;height:20px;color:var(--cr-green)}
.cr .hc-ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--cr-green);font-weight:800}

/* ---- 9. Forms: one control treatment -------------------------------------- */
.cr .form-control,.cr .form-select{
  min-height:52px;
  border:1px solid var(--cr-border);
  border-radius:var(--cr-radius-btn);
  font-size:1rem;
  color:var(--cr-ink);
}
.cr .form-control:focus,.cr .form-select:focus{border-color:var(--cr-blue);box-shadow:var(--cr-focus)}
.cr label.form-label{font-weight:650;color:var(--cr-navy);margin-bottom:6px}

/* ---- 10. Tables ------------------------------------------------------------ */
.cr .sg2-tbl{border:1px solid var(--cr-border);border-radius:var(--cr-radius-card);background:#fff;overflow-x:auto}
.cr .sg2-tbl th{color:var(--cr-navy)}
.cr table caption{color:var(--cr-muted)}

/* ---- 11. Navigation + footer rhythm ---------------------------------------- */
.cr .cr-foot{padding:56px 0 32px;border-top:1px solid var(--cr-border-soft)}
.cr .cr-foot h3{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cr-muted);margin:0 0 12px}
.cr .cr-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cr .cr-foot a{color:var(--cr-body);text-decoration:none}
.cr .cr-foot a:hover{color:var(--cr-navy);text-decoration:underline;text-underline-offset:3px}
.cr .cr-fbase{margin-top:32px;padding-top:20px;border-top:1px solid var(--cr-border-soft);color:var(--cr-faint);font-size:.85rem}
/* Footer flags: one small, even row on every page. Height-led sizing keeps
   the different native aspect ratios visually concurrent. */
.cr .cx-flags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.cr .cx-flags img{width:auto;height:16px;border-radius:3px;box-shadow:0 0 0 1px rgba(16,42,86,.12)}

/* ---- 12. Motion: restrained ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .cr *,.cr *::before,.cr *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---- 13b. Linked cards: one quiet hover ------------------------------------
   A subtle lift shared by every clickable card on every page. */
.cr a.eg-t,.cr a.hc-room,.cr a.lv-card,.cr a.sg2-lk{transition:transform .15s ease,box-shadow .15s ease}
.cr a.eg-t:hover,.cr a.hc-room:hover,.cr a.lv-card:hover,.cr a.sg2-lk:hover{transform:translateY(-2px);box-shadow:var(--cr-shadow-md)}

/* ---- 13c. Heroes: one measure ------------------------------------------------
   Centered hero leads read best near 60 characters. */
.cr .cr-hero .cr-sub{max-width:62ch;margin-left:auto;margin-right:auto}

/* ---- 13. Small screens: deliberate stacking --------------------------------- */
@media (max-width:700px){
  .cr .btn{width:100%;justify-content:center}
  .cr .btn.cr-sm{width:auto}
  .cr .ed-head{margin-bottom:32px}
  .cr .cr-foot{padding:44px 0 28px}
}
/* ---- Mobile header: mail + help live in the hamburger menu, so the header
   keeps only brand + CTA and the logo fits. One place for all pages. */
@media (max-width:1099px){.cr-right .cr-help{display:none}}
@media (max-width:600px){.cr-brand img{width:clamp(28px,10vw,40px);height:auto;aspect-ratio:1}.cr-brand{font-size:clamp(.86rem,4.8vw,1.12rem)}.cr-brand span{overflow:visible;text-overflow:clip;white-space:nowrap}}