/* Design settings (app/design.py). Theme values arrive as CSS custom properties from partials/theme_head.html;
   section styles are fixed classes (bs-*) chosen from validated options. No user-written CSS ever reaches the page. */

/* ---- theme: fonts, corners, spacing, focus ---- */
h1,h2,h3,h4,.brand-name,.hero-title,.sec-title,.footer-name{font-family:var(--font-head,var(--font))}
.blk{padding-top:calc(1.6rem * var(--density,1));padding-bottom:calc(1.6rem * var(--density,1))}
:focus-visible{outline-color:var(--c-focus,var(--c-accent))}
.btn{border-radius:var(--btn-radius,999px)}

/* ---- header styles ---- */
html:has(meta[name="x-theme"][data-header="brand"]) .site-header,
html:has(meta[name="x-theme"][data-header="brand"]) .mx-head{background:var(--c-primary);color:var(--c-on-primary);border-bottom-color:transparent}
html:has(meta[name="x-theme"][data-header="brand"]) .site-header .brand,
html:has(meta[name="x-theme"][data-header="brand"]) .mx-head .brand,
html:has(meta[name="x-theme"][data-header="brand"]) .site-header .brand-tag,
html:has(meta[name="x-theme"][data-header="brand"]) .mx-head .brand-tag{color:var(--c-on-primary)}
html:has(meta[name="x-theme"][data-header="brand"]) .site-header .main-nav>ul>li>a,
html:has(meta[name="x-theme"][data-header="brand"]) .site-header .main-nav>ul>li>details>summary{color:var(--c-on-primary)}
html:has(meta[name="x-theme"][data-header="brand"]) .site-header .main-nav a:hover,
html:has(meta[name="x-theme"][data-header="brand"]) .site-header .main-nav summary:hover{background:rgba(127,127,127,.18)}
html:has(meta[name="x-theme"][data-header="brand"]) .site-header .sub-panel a{color:var(--c-text)}
html:has(meta[name="x-theme"][data-header="brand"]) .site-header .main-nav{border-top-color:rgba(127,127,127,.3)}
html:has(meta[name="x-theme"][data-header="brand"]) .mx-menu-btn{background:#fff;color:var(--c-link)}
html:has(meta[name="x-theme"][data-header="brand"]) .mx-quick a{color:var(--c-on-primary)}
html:has(meta[name="x-theme"][data-header="brand"]) .brand img{background:#fff;border-radius:8px;padding:2px}
html:has(meta[name="x-theme"][data-header="minimal"]) .utility,
html:has(meta[name="x-theme"][data-header="minimal"]) .mx-utility{background:#fff;color:var(--c-text);border-bottom:1px solid var(--c-line)}
html:has(meta[name="x-theme"][data-header="minimal"]) .utility a,
html:has(meta[name="x-theme"][data-header="minimal"]) .utility summary{color:var(--c-link)}
html:has(meta[name="x-theme"][data-header="minimal"]) .site-header,
html:has(meta[name="x-theme"][data-header="minimal"]) .mx-head{border-bottom:3px solid var(--c-primary)}

/* ---- footer styles + footer text ---- */
.site-footer{background:var(--c-footer-bg,#111827);color:var(--c-footer-fg,#e5e7eb)}
html:has(meta[name="x-theme"][data-footer="brand"]) .site-footer a,
html:has(meta[name="x-theme"][data-footer="light"]) .site-footer a{color:inherit;text-decoration:underline}
html:has(meta[name="x-theme"][data-footer="brand"]) .footer-bottom,
html:has(meta[name="x-theme"][data-footer="light"]) .footer-bottom{color:var(--c-footer-fg);border-top-color:rgba(127,127,127,.35)}
.footer-note{padding-bottom:1.2rem}
.footer-note p{margin:0;max-width:75ch;font-size:.95rem}

/* ---- section backgrounds ---- */
.blk[class*="bs-bg-"]{isolation:isolate}
.bs-bg-light{background:var(--c-light-bg)}
.bs-bg-light .prose a,.bs-bg-light .link-list a,.bs-bg-light .more{color:var(--c-link-on-light)}
.bs-bg-brand{background:var(--c-primary);color:var(--c-on-primary)}
.bs-bg-dark{background:#111827;color:#f9fafb}
.bs-bg-image{color:#fff;overflow:hidden}
.bs-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.bs-bg-image::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.62);z-index:-1}
:is(.bs-bg-brand,.bs-bg-dark,.bs-bg-image) :is(.muted,.more,.prose a,.link-list a,.link-list p,.sec-head a,figcaption,.callout-link){color:inherit}
:is(.bs-bg-brand,.bs-bg-dark,.bs-bg-image) .sec-title::after{background:currentColor}
:is(.bs-bg-brand,.bs-bg-dark,.bs-bg-image) .link-list li{border-bottom-color:rgba(255,255,255,.35)}
:is(.bs-bg-brand,.bs-bg-dark,.bs-bg-image) :is(.card,.news-card,.person,.event-item,.accordion,.ann,.callout,.contact-grid address){color:var(--c-text);background:#fff}
:is(.bs-bg-brand,.bs-bg-dark,.bs-bg-image) :is(.card,.news-card) a{color:var(--c-text)}
:is(.bs-bg-brand,.bs-bg-dark,.bs-bg-image) .person a,:is(.bs-bg-brand,.bs-bg-dark,.bs-bg-image) .accordion a{color:var(--c-link)}
.contact-grid address{border-radius:var(--radius)}
/* inside a column (standard page layout) colored sections get rounded corners and inner padding */
.page-body .blk[class*="bs-bg-"]:not(.bs-bg-none){border-radius:var(--radius);padding-left:1.2rem;padding-right:1.2rem;margin:.8rem 0}

/* ---- width ---- */
.bs-w-wide>.wrap,.bs-w-wide>figure.wrap,.bs-w-wide .hero-inner.wrap{max-width:1440px}
.bs-w-full>.wrap,.bs-w-full>figure.wrap,.bs-w-full .hero-inner.wrap{max-width:none}
.layout-no_sidebar .blk.bs-w-full,.layout-no_sidebar .blk.bs-w-wide{width:100vw;margin-left:calc(50% - 50vw);border-radius:0}
.layout-no_sidebar .blk.bs-w-full>.wrap,.layout-no_sidebar .blk.bs-w-wide>.wrap{padding-left:1.1rem;padding-right:1.1rem;max-width:none}
.layout-no_sidebar .blk.bs-w-wide>.wrap{max-width:1440px;margin:0 auto}

/* ---- spacing ---- */
.blk.bs-sp-compact{padding-top:calc(.6rem * var(--density,1));padding-bottom:calc(.6rem * var(--density,1))}
.blk.bs-sp-spacious{padding-top:calc(3.6rem * var(--density,1));padding-bottom:calc(3.6rem * var(--density,1))}

/* ---- alignment ---- */
.bs-al-center{text-align:center}
.bs-al-center .prose,.bs-al-center .hero-title,.bs-al-center .hero-sub{margin-left:auto;margin-right:auto}
.bs-al-center .sec-title::after{left:50%;transform:translateX(-50%)}
.bs-al-center .sec-head,.bs-al-center .link-buttons{justify-content:center}
.bs-al-center .prose ul,.bs-al-center .prose ol,.bs-al-center .link-list,.bs-al-center .people,.bs-al-center .ann-list,.bs-al-center .accordion{text-align:left}
.bs-al-center figure img{margin:0 auto}

/* ---- columns ---- */
@media(min-width:760px){
 .bs-cols-1 :is(.cards,.news-grid,.people,.events-list){grid-template-columns:1fr}
 .bs-cols-2 :is(.cards,.news-grid,.people,.events-list,.link-list){grid-template-columns:repeat(2,minmax(0,1fr))}
 .bs-cols-2 .link-list,.bs-cols-3 .link-list,.bs-cols-4 .link-list{column-gap:1.5rem}
}
@media(min-width:960px){
 .bs-cols-3 :is(.cards,.news-grid,.people,.events-list,.link-list){grid-template-columns:repeat(3,minmax(0,1fr))}
 .bs-cols-4 :is(.cards,.news-grid,.people,.events-list,.link-list){grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---- picture position ---- */
@media(min-width:760px){
 .blk-hero:is(.bs-img-left,.bs-img-right) .hero.has-img{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:0}
 .blk-hero:is(.bs-img-left,.bs-img-right) .hero-img{position:relative;inset:auto;height:100%;min-height:320px}
 .blk-hero.bs-img-right .hero-img{order:2}
 .blk-hero:is(.bs-img-left,.bs-img-right) .hero.has-img::after{display:none}
 .blk-hero:is(.bs-img-left,.bs-img-right) .hero.has-img .hero-inner{color:var(--c-on-primary)}
 .blk-image.bs-img-left figure{max-width:min(560px,50%);margin-left:0;padding-left:0}
 .blk-image.bs-img-right figure{max-width:min(560px,50%);margin-right:0;margin-left:auto;padding-right:0}
 .blk-card_grid:is(.bs-img-left,.bs-img-right) .card{flex-direction:row}
 .blk-card_grid.bs-img-right .card img{order:2}
 .blk-card_grid:is(.bs-img-left,.bs-img-right) .card img{width:40%;aspect-ratio:auto;object-fit:cover}
}

/* ---- banner (hero) overlay + height ---- */
.blk-hero.bs-ov-light .hero.has-img::after{background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.55))}
.blk-hero.bs-ov-strong .hero.has-img::after{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.82))}
.blk-hero.bs-ov-none .hero.has-img::after{background:none}
.blk-hero.bs-ov-none .hero.has-img .hero-inner{text-shadow:0 1px 3px rgba(0,0,0,.8)}
.blk-hero.bs-hh-short .hero{min-height:0}.blk-hero.bs-hh-short .hero-inner{padding-top:1.8rem;padding-bottom:1.8rem}
.blk-hero.bs-hh-short .hero.has-img{min-height:240px}
.blk-hero.bs-hh-tall .hero{min-height:min(80vh,720px)}
.blk-hero.bs-hh-full .hero{min-height:calc(100svh - 120px)}
.blk-hero:is(.bs-hh-tall,.bs-hh-full) .hero:not(.has-img){display:flex;align-items:center}

/* ---- page layouts ---- */
.layout-full_width .page-main,.layout-landing .page-main{max-width:none}
.layout-landing .blocks>.blk:first-child.blk-hero{padding-top:0}