/* CMS additions — loaded after the approved site.css. Keeps the approved stylesheet untouched. */

/* ---- one-H1 mechanism: hero/banner title can be a styled <span> with identical looks ---- */
span.hero-title{display:block;font-family:var(--serif);font-size:clamp(2.8rem,6.5vw,5.8rem);font-weight:400;line-height:1.02;letter-spacing:-.01em;max-width:14ch;opacity:0;animation:fadeUp 1s .5s forwards}
span.hero-title em{font-style:italic;color:#f3c969;font-weight:300}
.page-hero-content span.ph-title{display:block;font-family:var(--serif);font-size:clamp(2.4rem,5vw,4.4rem);font-weight:400;line-height:1.04;letter-spacing:-.01em;max-width:18ch}
@media (max-width:640px){span.hero-title{font-size:3rem}}

/* ---- owner-facing section options (Advanced box in the section editor) ---- */
.sec-pad-sm{padding-top:2.5rem!important;padding-bottom:2.5rem!important}
.sec-pad-lg{padding-top:8rem!important;padding-bottom:8rem!important}
.sec-pad-top0{padding-top:0!important}
.sec-pad-bottom0{padding-bottom:0!important}
.sec-pad-none{padding-top:0!important;padding-bottom:0!important}
.sec-bg-paper{background:var(--paper)!important}
.sec-bg-warm{background:var(--paper-warm)!important}
.sec-bg-white{background:#fff!important}
.sec-bg-dark{background:var(--ink)!important;color:var(--paper)}
.sec-bg-dark h2,.sec-bg-dark h3,.sec-bg-dark p{color:var(--paper)}
@media (max-width:760px){.sec-hide-m{display:none!important}
  .sec-pad-lg{padding-top:5rem!important;padding-bottom:5rem!important}}

/* ---- rich-text editor output inside articles ---- */
.article img.img-left{float:left;width:46%;aspect-ratio:auto;margin:.4rem 1.6rem 1rem 0}
.article img.img-right{float:right;width:46%;aspect-ratio:auto;margin:.4rem 0 1rem 1.6rem}
.article img.img-center{width:70%;aspect-ratio:auto;margin-left:auto;margin-right:auto;display:block}
.article h2,.article h3,.article h4,.article table,.article blockquote,.article hr{clear:both}
.article blockquote{margin:1.8rem 0;padding:1rem 1.4rem;border-left:3px solid var(--saffron);background:var(--paper-warm);font-family:var(--serif);font-size:1.25rem;font-style:italic;color:var(--ink)}
.article blockquote p:last-child{margin-bottom:0}
.article table{width:100%;border-collapse:collapse;margin:1.6rem 0 2rem;font-size:.95rem;line-height:1.5;display:block;overflow-x:auto}
.article table th,.article table td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left;vertical-align:top}
.article table th{background:var(--paper-warm);color:var(--ink);font-weight:600}
.article hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
.article iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:4px;margin:1.4rem 0}
.article u{text-underline-offset:3px}
.article::after{content:"";display:table;clear:both}
.intro-text ul,.intro-text ol{margin:0 0 1.2rem 1.2rem}
@media (max-width:640px){.article img.img-left,.article img.img-right,.article img.img-center{float:none;width:100%;margin:1.4rem 0}}

/* ---- H1–H6 selector: a heading whose tag was changed keeps its designed look.
   site.css targets `.hx-h2` etc. alongside the real tag; these zero-specificity rules only
   stand in for the browser's default size/weight of the designed tag. ---- */
:where(.hx-h1){font-size:2em;font-weight:700}
:where(.hx-h2){font-size:1.5em;font-weight:700}
:where(.hx-h3){font-size:1.17em;font-weight:700}
:where(.hx-h4){font-size:1em;font-weight:700}
:where(.hx-h5){font-size:.83em;font-weight:700}
:where(.hx-h6){font-size:.67em;font-weight:700}
:where(div.hx){display:block}

/* ---- FAQ accordion (sections/faq.php) ---- */
.faq-wrap{padding:6rem 2rem}
.faq-inner{max-width:920px;margin:0 auto}
.faq-list{margin-top:2.6rem;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.35rem 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--saffron);outline-offset:4px}
.faq-q{font-family:var(--serif);font-size:1.35rem;font-weight:600;line-height:1.3;color:var(--ink);margin:0;transition:color .2s}
.faq-item summary:hover .faq-q,.faq-item[open] .faq-q{color:var(--saffron)}
.faq-ic{position:relative;flex:0 0 26px;height:26px;border:1px solid var(--line);border-radius:50%;transition:transform .25s,border-color .2s}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--saffron);transform:translate(-50%,-50%)}
.faq-ic::after{transform:translate(-50%,-50%) rotate(90deg);transition:opacity .2s}
.faq-item[open] .faq-ic{transform:rotate(180deg);border-color:var(--saffron)}
.faq-item[open] .faq-ic::after{opacity:0}
.faq-a{padding:0 3.2rem 1.6rem 0;color:var(--ink-soft);line-height:1.8;font-size:1.02rem}
.faq-a p{margin:0 0 .9rem}.faq-a p:last-child{margin-bottom:0}
.faq-a ul,.faq-a ol{margin:0 0 .9rem 1.2rem}
.faq-a a{color:var(--saffron);border-bottom:1px solid rgba(194,65,12,.3)}
@media (max-width:640px){.faq-wrap{padding:4rem 1.3rem}.faq-q{font-size:1.15rem}.faq-a{padding-right:0}}