/* Shared public-site rhythm. Keep these rules out of the admin and exam layouts. */
:root {
    --site-content-width: 1140px;
    --site-heading-size: clamp(1.65rem, 2.8vw, 2.4rem);
    --site-header-offset: 100px;
    --site-intro-space: clamp(1rem, 2vw, 1.5rem);
}

html {
    /* Clip on body only: clipping the root breaks homepage stickiness in Chrome. */
    overflow-x: visible;
    scroll-padding-top: var(--site-header-offset);
}

body { overflow-x: clip; }

/* A visible focus ring must survive the legacy theme's outline resets. */
body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #b76b12 !important;
    outline-offset: 3px;
}

/* Match the Bootstrap header grid at every breakpoint, including tablet widths. */
.donate-page > .container.page-shell,
.brick-contribution-page > .container.page-shell,
.course-detail-page > .container.course-page-shell {
    max-width: 540px;
}

.material-shell,
.bhakti-blog-shell,
.sadhana-access-shell,
.quiz-catalog-page .quiz-shell {
    width: calc(100% - 30px);
    max-width: 510px;
}

/* One heading scale across discovery pages and their detail pages. */
.material-hero h1,
.material-detail h1,
.bhakti-blog-hero h1,
.bhakti-article-hero h1,
.about-hero h1,
.contact-hero h1,
.gallery-intro h1,
.sadhana-access-card h1,
.brick-contribution-page .hero-title,
.course-detail-hero .course-hero-copy h1 {
    font-size: var(--site-heading-size);
    line-height: 1.15;
    letter-spacing: -.02em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.brick-contribution-page .hero-title {
    max-width: 26ch;
}

.donate-page .hero-card h1 {
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    line-height: 1.2;
    text-wrap: balance;
}

.about-story-card h2,
.about-founder-copy h2,
.about-lineage-head h2,
.contact-form-card h2,
.contact-info-card h2,
.section-shell .section-title {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1.25;
    text-wrap: balance;
}

.material-detail,
.sadhana-access-page {
    padding: clamp(1.5rem, 3vw, 2.75rem) 0;
}

.material-detail-head {
    padding: 1.15rem 0;
}

.material-summary,
.bhakti-blog-hero p,
.about-hero-copy p,
.contact-hero-copy > p,
.course-detail-hero .course-hero-copy > p {
    font-size: .95rem !important;
    line-height: 1.65;
}

.about-hero,
.contact-hero {
    padding: var(--site-intro-space) 0 1.25rem;
}

.about-hero-copy,
.contact-hero-copy {
    padding: clamp(1.4rem, 3vw, 2.25rem);
}

.about-hero-card,
.contact-hero-card,
.course-detail-hero {
    border-radius: 24px;
    box-shadow: 0 16px 38px rgba(91, 25, 25, .14);
}

.about-hero-image { height: clamp(300px, 32vw, 420px); min-height: 0; }
.contact-hero-mark { min-height: 270px; }
.bhakti-post-title { font-size: 1.3rem; line-height: 1.3; }

/* Account links stay reachable on small screens and at browser zoom. */
.member-account-dropdown-menu {
    max-height: min(640px, calc(100dvh - 110px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Calm, compact notices share the same visual rhythm as the festival strip. */
.site-notification-inner {
    width: calc(100% - 30px);
    max-width: calc(var(--site-content-width) - 30px);
    min-height: 48px;
    padding: 7px 0;
    gap: 10px;
}

.site-notification-icon { width: 30px; height: 30px; flex-basis: 30px; }
.site-notification-icon svg { width: 18px; height: 18px; }
.site-notification-inner p { font-size: .8rem; line-height: 1.4; }
.site-notification-inner a { min-height: 34px; padding: 6px 11px; font-size: .72rem; }
.site-notification-banner::before,
.site-notification-icon::after,
.site-notification-icon svg,
.site-notification-spark,
.site-notification-inner a { animation: none; }

/* Leave room for the sticky navigation above anchored sections and form errors. */
:is(.donate-page, .brick-contribution-page, .material-page, .contact-page) :is(input, select, textarea, [id]) {
    scroll-margin-top: 12px;
}

/* Keep navigation and page introductions short enough to expose real content. */
.header-area .main-header-area,
.header-area.is-scrolled .main-header-area { padding-bottom: 6px; }
.header-area .main-nav-shell { padding: 6px 14px; border-radius: 20px; }
.header-area .header-brand img { width: 44px !important; }
.header-area.is-scrolled .header-brand img { width: 40px !important; }

.gallery-intro { padding: .85rem 0; }
.gallery-intro h1 { font-size: clamp(1.35rem, 2vw, 1.65rem); }
.gallery-intro .breadcrumb { margin-bottom: .35rem; font-size: .78rem; line-height: 1.4; }
.gallery-intro p { margin-top: .35rem; font-size: .86rem; line-height: 1.45; }
.gallery-content { padding: 1.25rem 0 3rem; }
.gallery-toolbar { margin-bottom: 1rem; }

.courses-page,
.course-detail-page { padding-top: var(--site-intro-space); }
.courses-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .3rem 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(107, 15, 26, .12);
}
.courses-hero::after { display: none; }
.courses-hero h1 {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    line-height: 1.25;
}
.courses-kicker {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: .25rem .6rem;
    font-size: .62rem;
    white-space: nowrap;
}
.courses-hero p {
    grid-column: 1 / -1;
    max-width: none;
    font-size: .86rem;
    line-height: 1.45;
}
.material-page,
.material-detail,
.sadhana-access-page { padding-top: var(--site-intro-space); }
.material-detail-head { padding: .75rem 0; }
.quiz-catalog-page { padding-top: 24px; }
.bhakti-blog-hero { padding: 1rem 1rem .85rem; }
.bhakti-blog-hero h1,
.material-hero h1,
.quiz-catalog-page .quiz-catalog-head h1 {
    margin-top: .25rem;
    margin-bottom: .35rem;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    line-height: 1.2;
}
.material-hero p { margin-bottom: .65rem; font-size: .86rem; line-height: 1.5; }
.material-filter { margin-top: .85rem; margin-bottom: 1.1rem; }
.bhakti-blog-hero p { font-size: .86rem !important; line-height: 1.5; }
.donate-page > .page-shell,
.brick-contribution-page > .page-shell { padding-top: 1.25rem !important; }

@media (min-width: 768px) {
    .gallery-intro .container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 1rem;
    }
    .gallery-intro nav { grid-column: 2; grid-row: 1; }
    .gallery-intro h1 { grid-column: 1; grid-row: 1; }
    .gallery-intro p { grid-column: 1 / -1; grid-row: 2; }
    .gallery-intro .breadcrumb { margin: 0; }
    .donate-page > .container.page-shell,
    .brick-contribution-page > .container.page-shell,
    .course-detail-page > .container.course-page-shell { max-width: 720px; }
    .material-shell,
    .bhakti-blog-shell,
    .sadhana-access-shell,
    .quiz-catalog-page .quiz-shell { max-width: 690px; }
}

@media (min-width: 992px) {
    .donate-page > .container.page-shell,
    .brick-contribution-page > .container.page-shell,
    .course-detail-page > .container.course-page-shell { max-width: 960px; }
    .material-shell,
    .bhakti-blog-shell,
    .sadhana-access-shell,
    .quiz-catalog-page .quiz-shell { max-width: 930px; }
}

@media (min-width: 1200px) {
    .donate-page > .container.page-shell,
    .brick-contribution-page > .container.page-shell,
    .course-detail-page > .container.course-page-shell { max-width: var(--site-content-width); }
    .material-shell,
    .bhakti-blog-shell,
    .sadhana-access-shell,
    .quiz-catalog-page .quiz-shell { max-width: calc(var(--site-content-width) - 30px); }
}

@media (max-width: 991.98px) {
    .about-hero-image { height: 300px; }
}

@media (max-width: 1199.98px) {
    .header-area .member-account-dropdown-menu { max-height: none; overflow: visible; }
    .header-area .main-nav-shell { padding: 6px 10px; }
    .header-area .header-brand img { width: 40px !important; }
}

@media (max-width: 767.98px) {
    :root { --site-heading-size: clamp(1.5rem, 6vw, 1.95rem); }
    .showcase-hero .hero-title { font-size: clamp(1.4rem, 6.5vw, 1.75rem) !important; }
    .header-area.is-scrolled .header-brand img { width: 40px !important; }
    .about-hero-image { height: 260px; }
    .contact-hero-mark { min-height: 180px; }
    .bhakti-blog-hero { padding: .9rem .8rem .8rem; }
    .courses-hero { grid-template-columns: minmax(0, 1fr); padding: .9rem 1rem; gap: .35rem; }
    .courses-kicker { grid-column: 1; grid-row: 1; justify-self: start; }
    .courses-hero h1 { grid-column: 1; grid-row: 2; }
    .courses-hero p { grid-row: 3; }
    .site-notification-inner { flex-wrap: wrap; }
    .site-notification-inner p { flex-basis: calc(100% - 40px); font-size: .78rem; }
    .site-notification-inner a { margin-left: 40px; white-space: normal; }
    .donation-nav .donation-nav-label { font-size: .7rem; }
    .donation-nav .donation-nav-actions { gap: .15rem .7rem; }
    .donation-nav .donation-nav-link { min-height: 36px; font-size: .78rem; }
    .donate-page .content-grid { margin-right: 0; margin-left: 0; }
    .donate-page .content-grid > [class*="col-"] { padding-right: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .header-area,
    .header-area .main-header-area,
    .header-area .main-nav-shell,
    .header-area .header-brand img,
    .bhakti-post-card,
    .bhakti-post-image img { transition: none; }
    .bhakti-post-card:hover,
    .bhakti-post-card:hover .bhakti-post-image img { transform: none; }
}