/*
Theme Name: Clarion
Description: Custom classic-PHP theme.
Author:
Version: 1.0.0
Text Domain: clarion
*/

:root {
  --clarion-primary:     #036162;
  --clarion-primary-ink: #ffffff;
  --clarion-accent:      #884237;
  --clarion-ink:         #1b1c1a;
  --clarion-bg:          #fbf9f5;
  --clarion-line:        rgba(111, 121, 121, 0.20);
  --clarion-soft:        #f5f3f0;
  --clarion-font-head:   'Be Vietnam Pro', sans-serif;
  --clarion-font-body:   'Geist', sans-serif;
}

html { background: var(--clarion-bg); overflow-x: hidden; }

body {
  background: var(--clarion-bg);
  color: var(--clarion-ink);
  font-family: var(--clarion-font-body);
}

a { text-decoration: none; color: inherit; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5 { color: var(--clarion-ink); font-family: var(--clarion-font-head); }

img { max-width: 100%; height: auto; display: block; }

/* =============================================
   BASE LAYOUT — monatheme
   ============================================= */

.main {
  position: relative;
  z-index: 1;
  min-height: 94vh;
}

.container {
    width: 100%;
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 15px;
}

iframe {
  vertical-align: middle;
}

/* =============================================
   ROW / COL SYSTEM — 12 columns
   ============================================= */

.row {
  --cg: 24px;
  --rg: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 calc(var(--cg) * -0.5) calc(var(--rg) * -1);
}

.row.small {
  --cg: 16px;
  --rg: 16px;
}

@media screen and (max-width: 1200px) {
  .row {
    --cg: 12px;
    --rg: 12px;
  }
}

.rows {
  --cg: 24px;
  --rg: 24px;
  margin: 0 calc(var(--cg) * -0.5);
}

@media screen and (max-width: 1200px) {
  .rows {
    --cg: 12px;
    --rg: 12px;
  }
}

.rows .col {
  margin-bottom: 0;
}

.col {
  width: 100%;
  padding: 0 calc(var(--cg) / 2);
  margin-bottom: var(--rg);
}

.col-11 { width: 91.6666666667%; }
.col-10 { width: 83.3333333333%; }
.col-9  { width: 75%; }
.col-8  { width: 66.6666666667%; }
.col-7  { width: 58.3333333333%; }
.col-6  { width: 50%; }
.col-5  { width: 41.6666666667%; }
.col-4  { width: 33.3333333333%; }
.col-3  { width: 25%; }
.col-2  { width: 16.6666666667%; }
.col-1  { width: 8.3333333333%; }
.col-5i { width: 20%; }
.col-4i { width: 25%; }

/* =============================================
   MONA CONTENT — rich text / wysiwyg
   ============================================= */

.clarion-content strong,
.clarion-content b { font-weight: bold; }

.clarion-content em,
.clarion-content i { font-style: italic; }

.clarion-content h1,
.clarion-content h2,
.clarion-content h3,
.clarion-content h4,
.clarion-content h5,
.clarion-content h6 {
  line-height: 1.3;
  margin-bottom: 0.5em;
  margin-top: 0.6em;
  font-weight: 700;
}

.clarion-content h1 { font-size: 1.7em; }
.clarion-content h2 { font-size: 1.6em; }
.clarion-content h3 { font-size: 1.25em; }
.clarion-content h4 { font-size: 1.125em; }
.clarion-content h5 { font-size: 1em; }
.clarion-content h6 { font-size: 0.85em; }

.clarion-content p { margin-top: 0.4em; }

.clarion-content ul,
.clarion-content ol {
  margin: 1em 0;
  list-style-position: inside;
}

.clarion-content ul ul,
.clarion-content ul ol,
.clarion-content ol ul,
.clarion-content ol ol { margin-left: 1em; }

.clarion-content ul { list-style-type: disc; }
.clarion-content ol { list-style-type: decimal; }
.clarion-content ul ul,
.clarion-content ol ul { list-style-type: circle; }
.clarion-content ol ol,
.clarion-content ul ol { list-style-type: lower-latin; }

.clarion-content img,
.clarion-content iframe {
  max-width: 100% !important;
  height: auto;
}

.clarion-content blockquote {
  background: var(--clarion-soft);
  border-left: 10px solid var(--clarion-primary);
  margin: 1em 0;
  padding: 1em;
  quotes: "\201C" "\201D" "\2018" "\2019";
}

.clarion-content blockquote::before {
  color: var(--clarion-primary);
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

.clarion-content blockquote p { display: inline; }

.clarion-content table {
  border-collapse: collapse;
  max-width: 100%;
  margin: 1em 0;
  border: 1px solid var(--clarion-line);
}

.clarion-content table th,
.clarion-content table td {
  border-right: 1px solid var(--clarion-line);
  border-bottom: 1px solid var(--clarion-line);
  padding: 5px 10px;
  vertical-align: middle;
}

.clarion-content .clarion-youtube-wrap {
  position: relative;
  height: 0;
  padding-top: 56.25%;
}

.clarion-content .clarion-youtube-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.clarion-content .clarion-table-wrap {
  overflow: auto;
}

/* =============================================
   Stitch nav — no underline on hover
   ============================================= */
/* Matches the class on the <a> itself AND on any ancestor — both spellings are
   used across templates, and a descendant-only rule silently no-ops on the former. */
a.stitch-nav, a.stitch-nav:hover,
.stitch-nav a, .stitch-nav a:hover { text-decoration: none !important; }

/* =============================================
   Mobile Drawer
   ============================================= */
.hd-nav {
  position: fixed;
  top: 0; right: 0;
  z-index: 200;
  width: 280px;
  height: 100%;
  background: var(--clarion-bg);
  box-shadow: -4px 0 32px rgba(0,0,0,0.15);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.hd-nav.is-open { transform: translateX(0); }

.hd-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.hd-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

.no-scroll { overflow: hidden; touch-action: none; overscroll-behavior: none; }

.hd-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--clarion-line);
  flex-shrink: 0;
}
.hd-nav__brand {
  font-family: var(--clarion-font-head);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--clarion-primary);
}
.hd-nav__brand:hover { text-decoration: none; }
.hd-nav__close {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent; border: none; cursor: pointer;
  color: var(--clarion-ink); border-radius: 6px;
  transition: background 0.15s; padding: 0;
}
.hd-nav__close:hover { background: var(--clarion-soft); }

.hd-nav__body { display: flex; flex-direction: column; flex: 1; }

.hd-mobile-item {
  display: block;
  padding: 13px 20px;
  font-family: var(--clarion-font-head);
  font-size: 0.92rem; font-weight: 600;
  color: var(--clarion-ink);
  border-bottom: 1px solid var(--clarion-line);
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.hd-mobile-item:hover { color: var(--clarion-primary); background: var(--clarion-soft); text-decoration: none; }
.hd-mobile-item--active { color: var(--clarion-primary); border-left: 3px solid var(--clarion-primary); padding-left: 17px; }

/* =============================================
   Home — misc helpers
   ============================================= */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* =============================================
   Pagination — Stitch numbered square buttons.
   Square, not pill: "Clinical Radiance" keeps radius
   minimal everywhere except genuine pills/avatars.
   ============================================= */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0;
  border: 1px solid var(--clarion-line);
  color: var(--clarion-ink);
  font-weight: 700;
  text-decoration: none;
  margin: 0 4px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.page-numbers:hover { background: var(--clarion-soft); border-color: var(--clarion-primary); color: var(--clarion-primary); text-decoration: none; }
.page-numbers.current { background: var(--clarion-primary); color: #fff; border-color: var(--clarion-primary); }
.page-numbers.dots { border: none; width: auto; background: none; }
.nav-links { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; width: 100%; }

/* =============================================
   In-article anchors — the header is sticky and
   ~80px tall, so a bare #anchor jump parks the
   heading underneath it. Applies to single.php's
   generated table-of-contents targets.
   ============================================= */
.clarion-content h2,
.clarion-content h3 { scroll-margin-top: 120px; }

/* =============================================
   Site-wide override: .p-6 renders 1rem, not
   Tailwind's default 1.5rem. !important because
   the Tailwind CDN <style> is injected after
   this stylesheet and would otherwise win.
   ============================================= */
.p-6 { padding: 1rem !important; }

/* Mobile (< md 768px): .p-8 tightens to 1.4rem site-wide,
   same !important rationale as the .p-6 rule above. */
@media (max-width: 767.98px) {
  .p-8 { padding: 1.4rem !important; }
}

/* Mobile (< md 768px): display-lg-mobile headings drop 32px -> 20px.
   Token itself stays 32px because unpaired usages render it on desktop too. */
@media (max-width: 767.98px) {
  .text-display-lg-mobile { font-size: 20px !important; }
}

/* The old `body.page-id-9 .text-headline-md { 32px }` override is gone: it existed
   because the previous global token was 20px, and the About page was rebuilt on
   "Clinical Radiance" where headline-md is already 24px. Left in place it would
   have inflated every card heading on that one page. */