/* themes/cobalt/assets/theme.css — layout and structure shared by Cobalt and Liquid (themes/liquid has
   "base": "cobalt"). The look — fonts, colors, corner shapes, decorations — is in look.css, which each look
   provides. Values a look tunes are custom properties: */
.theme-modern {
  --m-font-heading: Georgia, serif;
  --m-font-body: system-ui, sans-serif;
  --m-ink: #1d2433;            /* headings */
  --m-text: #4a5160;           /* body text */
  --m-radius: 1rem;            /* cards, panels, photos */
  --m-shadow: 0 .5rem 1.5rem rgba(29,36,51,.08);
  --m-shadow-hover: 0 1rem 2rem rgba(29,36,51,.14);
  --m-section-pad: clamp(3.5rem, 6vw, 6rem);
  --m-input-bg: #fff;
  --m-input-radius: .5rem;
  --band-dark-bg: #1d2433;
}
body.theme-modern { font-family: var(--m-font-body); color: var(--m-text); }
/* :where keeps these at the weight of one class, so section and footer rules below override them */
.theme-modern :where(h1, h2, h3, h4, h5, .h5, .h6) { font-family: var(--m-font-heading); color: var(--m-ink); }
.theme-modern .modern-pill { border-radius: 999px; }
.theme-modern .modern-measure { max-width: 52rem; margin-left: auto; margin-right: auto; }

/* Top contact bar and menu */
.modern-topbar { background: var(--band-dark-bg); color: rgba(255,255,255,.85); }
.modern-topbar a { color: #fff; text-decoration: none; }
.modern-social { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; transition: background .2s; }
.modern-social:hover { background: var(--brand-secondary); color: #fff; }
.modern-nav { background: #fff; position: sticky; top: 0; z-index: 1020; box-shadow: 0 .25rem 1rem rgba(0,0,0,.06);
  border-bottom: 0; }
.modern-nav .site-logo { max-height: 64px; }
.modern-wordmark { font-family: var(--m-font-heading); font-weight: 700; font-size: 1.5rem; color: var(--m-ink); }
.modern-nav .nav-link { font-weight: 600; color: var(--m-ink); padding-left: 1rem !important; padding-right: 1rem !important; }
.modern-nav .nav-link.active, .modern-nav .nav-link:hover { color: var(--brand-primary); }

/* Sections: generous spacing; headings centered with an accent rule (look.css styles the rule) */
.theme-modern .sec { padding: var(--m-section-pad) 0; }
.theme-modern .sec > .container.py-4, .theme-modern .sec > .container.py-5 { padding-top: 0 !important; padding-bottom: 0 !important; }
.theme-modern .sec-heading { text-align: center; font-size: calc(1.6rem + 1.2vw); margin-bottom: 2.5rem; line-height: 1.15; }
.theme-modern .sec-heading.text-start, .theme-modern .sec-heading.text-lg-start { margin-bottom: 1.5rem; }
.theme-modern .sec-body > :last-child { margin-bottom: 0; }

/* Photo header and slideshow */
.modern-hero { min-height: min(78vh, 720px); display: flex; align-items: center; color: #fff; padding: 7rem 0 !important;
  background: var(--brand-primary); background-size: cover; background-position: center; }
.modern-hero :is(h1, .modern-display) { color: #fff; }
.modern-hero .sec-body { max-width: 44rem; margin: 0 auto; color: rgba(255,255,255,.92); }
.modern-display { font-size: calc(2.3rem + 3vw); line-height: 1.08; }
.modern-eyebrow { text-transform: uppercase; letter-spacing: .3em; font-weight: 600; font-size: .95rem; }
.modern-eyebrow-sm { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .9rem;
  color: var(--brand-secondary); margin-bottom: .5rem; }
.theme-modern .modern-carousel { padding: 0 !important; }
.modern-slide { min-height: clamp(320px, 42vw, 640px); display: flex; align-items: center; background-size: cover;
  background-position: center; color: #fff; }
.modern-slide.has-caption { background-color: #222; box-shadow: inset 0 0 0 2000px rgba(10,14,25,.45); }
.modern-slide :is(h2, .modern-display) { color: #fff; font-size: calc(1.9rem + 2.4vw); }
.modern-slide .sec-body { max-width: 44rem; margin: 1rem auto 0; }

/* Cards (feature cards, services, testimonials, team, panels) */
.modern-card { background: #fff; border: 0; border-radius: var(--m-radius); box-shadow: var(--m-shadow);
  transition: transform .25s, box-shadow .25s; color: var(--m-text); }
.modern-card:hover { transform: translateY(-4px); box-shadow: var(--m-shadow-hover); }
.modern-card .card-img-top { border-radius: var(--m-radius) var(--m-radius) 0 0; aspect-ratio: 4 / 3; object-fit: cover; }
.modern-icon { display: inline-flex; align-items: center; justify-content: center; width: 5.5rem; height: 5.5rem;
  border-radius: 50%; background: color-mix(in srgb, var(--brand-primary) 9%, #fff); }
.modern-icon .feature-icon { font-size: 2.6rem; color: var(--brand-primary); }
.modern-check { color: var(--brand-secondary); }
.modern-service-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem 1.5rem;
  max-width: 60rem; margin: 0 auto; }
.modern-service-list li { display: flex; gap: .75rem; align-items: center; padding: .75rem 0;
  border-bottom: 1px solid rgba(0,0,0,.08); font-weight: 600; color: var(--m-ink); }
.sec.band-brand .modern-service-list li, .sec.band-dark .modern-service-list li { color: #fff; border-color: rgba(255,255,255,.2); }
.sec.band-brand .modern-check, .sec.band-dark .modern-check { color: #fff; }
.modern-quote { padding: 2rem; position: relative; }
.modern-quote-mark { font-size: 3.5rem; line-height: 1; color: var(--brand-secondary); display: block; margin: -.5rem 0 .25rem -.5rem; }
.modern-quote blockquote p { font-size: 1.05rem; font-style: italic; }
.modern-quote figcaption strong { color: var(--m-ink); }
.modern-member { padding: 2rem 1.5rem; }
.modern-avatar { width: 9rem; height: 9rem; border-radius: 50%; object-fit: cover; border: 6px solid #fff;
  box-shadow: var(--m-shadow); display: inline-flex; align-items: center; justify-content: center; }
.modern-initials { background: var(--brand-primary); color: #fff; font-size: 2.4rem; font-weight: 700;
  font-family: var(--m-font-heading); }
.modern-role { color: var(--brand-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
.modern-gallery-item { overflow: hidden; border-radius: var(--m-radius); aspect-ratio: 1; }
.modern-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.modern-gallery-item:hover img { transform: scale(1.06); }

/* Photo beside text: rounded photo over an offset accent block */
.modern-photo { position: relative; padding: 0 1.5rem 1.5rem 0; }
.modern-photo::before { content: ""; position: absolute; inset: 1.5rem 0 0 1.5rem; border-radius: var(--m-radius);
  background: color-mix(in srgb, var(--brand-secondary) 22%, #fff); }
.modern-photo.accent-left { padding: 0 0 1.5rem 1.5rem; }
.modern-photo.accent-left::before { inset: 1.5rem 1.5rem 0 0; }
.modern-photo img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--m-radius); box-shadow: var(--m-shadow); }

/* About us (_core sections/about.ejs) */
.theme-modern .sec-about:not(.band) { background: #fff; }
.theme-modern .sec-about .about-photo-main { border-radius: var(--m-radius); box-shadow: var(--m-shadow); }
.theme-modern .sec-about .about-eyebrow { color: var(--brand-secondary); }

/* Contact band */
.modern-tile { display: flex; gap: 1rem; align-items: flex-start; height: 100%; padding: 1.25rem 1.5rem;
  border-radius: var(--m-radius); background: rgba(255,255,255,.1); }
.sec.band-white .modern-tile, .sec.band-light .modern-tile, .sec:not(.band) .modern-tile { background: #fff; box-shadow: var(--m-shadow); }
.modern-tile > .bi { font-size: 1.6rem; line-height: 1; display: inline-flex; width: 3rem; height: 3rem; flex: none;
  align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-secondary); color: #fff; }
.modern-hours { padding: 1.75rem; }
.theme-modern .modern-hours h3 { color: var(--m-ink); }
.modern-hours .hours-table { --bs-table-bg: transparent; --bs-table-color: var(--m-text) !important; }
.modern-hours .is-closed { opacity: .55; }
.modern-map { min-height: 320px; border-radius: var(--m-radius); overflow: hidden; box-shadow: var(--m-shadow); }
.modern-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* Call to action banner */
.theme-modern .sec-cta-banner { background: none; color: inherit; }
.modern-cta { padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; border-radius: calc(var(--m-radius) * 1.5); color: #fff;
  background: linear-gradient(120deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 55%, var(--brand-secondary)));
  background-size: cover; background-position: center; box-shadow: var(--m-shadow); }
.modern-cta.has-image { background-size: cover; }
.modern-cta .modern-cta-title { color: #fff; font-size: calc(1.6rem + 1.4vw); margin-bottom: 1rem; }
.modern-cta .sec-body { color: rgba(255,255,255,.92); }

/* Refills and forms: a tinted panel around the shared form components */
.modern-panel { background: color-mix(in srgb, var(--brand-secondary) 14%, #fff); border-radius: var(--m-radius);
  padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: var(--m-shadow); color: var(--m-text); }
.modern-panel-title { font-size: 1.6rem; margin-bottom: 1.25rem; }
.modern-alt { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: var(--m-radius);
  background: #fff; box-shadow: var(--m-shadow); }
.modern-alt > .bi { font-size: 1.4rem; color: var(--brand-primary); }
.theme-modern .sec-form > .container { background: color-mix(in srgb, var(--brand-secondary) 14%, #fff);
  border-radius: var(--m-radius); padding: clamp(1.25rem, 3vw, 2.5rem) !important; box-shadow: var(--m-shadow); }
.theme-modern :is(.sec-refills, .sec-form, .sec-appointments) :is(.form-control, .form-select) {
  background-color: var(--m-input-bg); border-color: color-mix(in srgb, var(--brand-primary) 35%, #fff);
  border-radius: var(--m-input-radius); min-height: 3rem; }
.theme-modern :is(.sec-refills, .sec-form) textarea.form-control { min-height: 6rem; }
.theme-modern .sec-form .btn-brand, .theme-modern .sec-refills .btn-primary { border-radius: 999px; padding: .65rem 2rem; }

/* Appointments, wellness links, legal */
.theme-modern .sec-appointments { padding-top: 0 !important; }
.theme-modern .sec-appointments-banner { padding: 5rem 0 !important; }
.theme-modern .sec-appointments-banner h1 { color: #fff; font-size: calc(1.9rem + 2vw); }
.theme-modern .wellness-list a { display: block; padding: .9rem 1.1rem; background: #fff; border-radius: var(--m-radius);
  box-shadow: var(--m-shadow); text-decoration: none; font-weight: 600; transition: transform .2s; }
.theme-modern .wellness-list a:hover { transform: translateX(4px); }
.theme-modern .sec-legal { padding-top: 3rem; }

/* Footer */
.modern-footer { background: var(--band-dark-bg); color: rgba(255,255,255,.75); margin-top: 0 !important; }
.modern-footer h5, .modern-footer .footer-name { font-family: var(--m-font-heading); color: #fff; margin-bottom: 1rem; }
.modern-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.modern-footer a:hover { color: #fff; text-decoration: underline; }
.modern-footer .footer-logo { max-height: 64px; background: #fff; padding: .4rem .6rem; border-radius: .5rem; }
.modern-footer .footer-links li { margin-bottom: .45rem; }
.modern-footer .footer-hours { --bs-table-bg: transparent; --bs-table-color: rgba(255,255,255,.75); }
.modern-footer .footer-contact li { display: flex; gap: .75rem; margin-bottom: .6rem; }
.modern-footer .footer-contact .bi { color: var(--brand-secondary); }
.modern-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }

/* Shared refill/appointment components use Bootstrap's btn-primary; give it the brand color */
.theme-modern .btn-primary { --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-secondary); --bs-btn-hover-border-color: var(--brand-secondary);
  --bs-btn-active-bg: var(--brand-secondary); --bs-btn-active-border-color: var(--brand-secondary); }

/* White cards and panels keep dark text and brand links inside brand/dark bands */
.theme-modern .sec.band :is(.modern-card, .modern-panel, .modern-alt, .modern-tile.on-white) :is(h3, h5, h6, .h5, .h6) { color: var(--m-ink); }
.theme-modern .sec.band :is(.modern-card, .modern-panel, .modern-alt) a:not(.btn) { color: var(--brand-primary); }
.theme-modern .sec.band :is(.modern-card, .modern-panel, .modern-alt) { color: var(--m-text); }