/*
 * Authoritative public layout layer.
 * Loaded last so old theme rules cannot reintroduce overflow or overlap.
 */

:root {
    --public-gutter: clamp(1rem, 4vw, 4rem);
    --public-content: 1180px;
    --touch-target: 44px;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    scroll-padding-top: 5rem;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

[hidden] {
    display: none !important;
}

img,
svg,
video,
canvas,
iframe,
embed,
object {
    max-width: 100%;
}

img,
video,
canvas {
    height: auto;
}

iframe,
embed,
object {
    border: 0;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

button,
.btn,
.content-button,
input[type="button"],
input[type="submit"] {
    min-height: var(--touch-target);
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
    touch-action: manipulation;
}

:is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--sky-dark) 35%, transparent);
    outline-offset: 3px;
}

:is(h1, h2, h3, h4, h5, h6, p, li, dd, dt, label, a, button, th, td) {
    overflow-wrap: anywhere;
}

:is(h1, h2, h3, h4, h5, h6) {
    max-width: 100%;
    text-wrap: balance;
}

:is(p, li, dd) {
    text-wrap: pretty;
}

.section {
    width: 100%;
    padding-inline: var(--public-gutter);
    scroll-margin-top: 5rem;
}

.section > * {
    width: min(100%, var(--public-content));
}

:is(
    main,
    section,
    article,
    aside,
    form,
    fieldset,
    .site-header,
    .header-actions,
    .home-intro-grid,
    .hero-copy,
    .featured-magazine,
    .home-feature-grid,
    .cards-grid,
    .content-card,
    .form-card,
    .contact-layout,
    .contact-panel,
    .profile-grid,
    .builder-block,
    .public-content-block,
    .page-blocks,
    .content-blocks,
    .calendar-list,
    .filter-bar,
    .form-grid,
    .quote-builder,
    .reader-dialog,
    .flipbook-lite,
    .reader-stage,
    .reader-page-wrap,
    .reader-page,
    .reader-video,
    .reader-video-content,
    .reader-extended,
    .reader-extended-content
) {
    min-width: 0;
}

.cards-grid,
.calendar-list,
.profile-grid,
.home-feature-grid,
.contact-layout,
.form-grid,
.filter-bar {
    width: 100%;
}

.content-card,
.form-card,
.contact-panel,
.month-card,
.builder-block,
.public-content-block,
.news-paper-card,
.magazine-card,
.provider-card,
.profile-card {
    max-width: 100%;
    overflow: hidden;
}

.content-card > *,
.form-card > *,
.builder-block > *,
.public-content-block > *,
.news-paper-card > *,
.magazine-card > *,
.provider-card > * {
    min-width: 0;
    max-width: 100%;
}

.builder-body,
.news-body,
.magazine-rich-content,
.reader-extended-content {
    overflow-wrap: anywhere;
}

.builder-body iframe,
.public-content-block iframe,
.news-body iframe,
.magazine-rich-content iframe {
    display: block;
    width: 100% !important;
    aspect-ratio: 16 / 9;
    min-height: 0;
}

.content-table-wrap,
.editor-table-wrap,
.quote-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.quote-table,
.public-content-block table,
.editor-table-wrap table {
    margin: 0;
}

.cover-shell,
.magazine-card,
.magazine-product-media,
.magazine-cover-button {
    min-width: 0;
    max-width: 100%;
}

.magazine-cover-button {
    display: block;
    width: 100%;
    overflow: hidden;
}

.magazine-cover-button img,
.cover-shell .cover-click img {
    display: block;
    width: 100%;
    height: auto;
}

.magazine-product-actions,
.hero-actions,
.form-actions {
    max-width: 100%;
}

/* Reader: page, media and description are explicit grid rows/columns. */
.reader-modal {
    align-items: start;
    overflow: auto;
    overscroll-behavior: contain;
}

.reader-dialog {
    width: min(1040px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
}

.flipbook-lite,
.reader-stage,
.reader-page-wrap,
.reader-video,
.reader-extended {
    width: 100%;
}

.reader-stage {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 310px);
    align-items: start;
}

.reader-page-wrap {
    position: relative;
    align-self: start;
}

.reader-page {
    width: 100%;
    max-width: 100%;
    contain: inline-size;
}

.reader-page :is(img, canvas, iframe, object) {
    max-width: 100% !important;
}

.reader-video,
.reader-extended {
    position: static;
    isolation: isolate;
    overflow: hidden;
    transform: none;
}

.reader-video-content,
.reader-embed-host {
    display: grid;
    width: 100%;
    justify-items: center;
    overflow: hidden;
}

.reader-video-content > *,
.reader-embed-host > *,
.phone-video-frame,
.phone-video-frame > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.reader-video-content :is(iframe, blockquote, .instagram-media, .tiktok-embed),
.reader-embed-host :is(iframe, blockquote, .instagram-media, .tiktok-embed),
.phone-video-frame :is(iframe, blockquote, .instagram-media, .tiktok-embed) {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: auto !important;
}

.reader-extended {
    grid-column: 1 / -1;
}

.reader-extended-content {
    width: 100%;
    max-width: none;
}

/* The description toggle uses real balanced text columns, even for one long paragraph. */
body.reader-text-two-columns .reader-extended-content,
.reader-extended-content[data-columns="2"] {
    display: block;
    max-height: none !important;
    overflow: visible !important;
    column-width: auto !important;
    column-count: 2 !important;
    columns: auto 2 !important;
    column-fill: balance;
    column-gap: clamp(.9rem, 3vw, 2.25rem);
    column-rule: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}

body.reader-text-two-columns .reader-extended-content :is(p, li),
.reader-extended-content[data-columns="2"] :is(p, li) {
    break-inside: auto;
}

body.reader-text-two-columns .reader-extended-content :is(h1, h2, h3, h4, h5, h6, figure, blockquote),
.reader-extended-content[data-columns="2"] :is(h1, h2, h3, h4, h5, h6, figure, blockquote) {
    break-inside: avoid;
    break-after: avoid;
}

/* Overlays always stay inside the viewport. */
.search-sheet,
.mobile-menu-sheet,
.subscribe-modal,
.share-sheet,
.news-article-sheet,
.install-guide-app {
    width: min(100%, 760px);
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    overflow: auto;
    overscroll-behavior: contain;
}

@media (max-width: 980px) {
    .home-intro-grid,
    .home-feature-grid,
    .contact-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .cards-grid,
    .calendar-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reader-stage,
    .reader-expanded .reader-stage,
    .reader-modal:fullscreen .reader-stage {
        grid-template-columns: minmax(0, 1fr);
    }

    .reader-video,
    .reader-extended {
        grid-column: 1;
    }
}

@media (max-width: 760px) {
    :root {
        --public-gutter: clamp(.85rem, 4vw, 1.15rem);
    }

    html {
        scroll-padding-top: 4.5rem;
    }

    body {
        min-width: 0;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    .site-header {
        width: 100%;
        min-width: 0;
        padding-inline: var(--public-gutter);
    }

    .site-header .brand,
    .site-header .brand-mark,
    .site-header .brand-logo-img {
        min-width: 0;
        max-width: 100%;
    }

    .header-actions {
        flex: 0 0 auto;
    }

    .section {
        min-height: 0;
        padding: clamp(2.25rem, 8vw, 3.5rem) var(--public-gutter);
        scroll-margin-top: 4.5rem;
    }

    .home-section,
    .hero-section {
        padding-top: clamp(1.5rem, 6vw, 2.5rem);
    }

    .home-intro-grid,
    .hero-section,
    .home-feature-grid,
    .contact-layout,
    .profile-grid,
    .builder-banner,
    .builder-featured-embed,
    .content-image-left,
    .content-image-right {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .content-image-right figure {
        order: initial;
    }

    .cards-grid,
    .calendar-list,
    .form-grid,
    .filter-bar {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .content-card,
    .form-card,
    .contact-panel,
    .month-card,
    .builder-block,
    .public-content-block,
    .profile-card {
        width: 100%;
        padding: clamp(.85rem, 3.5vw, 1.1rem);
    }

    .inline-form,
    .hero-actions,
    .form-actions,
    .magazine-product-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        align-items: stretch;
    }

    .inline-form > *,
    .hero-actions > *,
    .form-actions > *,
    .magazine-product-actions > * {
        width: 100%;
        min-width: 0;
        margin-inline: 0;
    }

    .banner-slide {
        grid-template-columns: minmax(0, 1fr);
    }

    .banner-slide img {
        width: min(190px, 68vw);
        margin-inline: auto;
    }

    .app-bottom-bar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .app-bottom-bar button {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }

    /* Mobile reader is a single scrolling document: magazine, video, text. */
    .reader-modal,
    .reader-modal:fullscreen {
        display: block;
        width: 100%;
        height: 100dvh;
        padding: 0 !important;
        overflow-x: hidden;
        overflow-y: auto;
        background: #09091c;
        -webkit-overflow-scrolling: touch;
    }

    .reader-modal[hidden] {
        display: none !important;
    }

    .reader-dialog,
    .reader-expanded .reader-dialog,
    .reader-modal:fullscreen .reader-dialog,
    body.reader-expanded.reader-landscape .reader-dialog {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none;
        margin: 0;
        padding: max(.8rem, env(safe-area-inset-top)) .8rem calc(1.25rem + env(safe-area-inset-bottom));
        overflow: visible;
        border-radius: 0;
    }

    .reader-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .65rem;
        min-width: 0;
        padding-right: 3.5rem;
    }

    .reader-toolbar > * {
        min-width: 0;
    }

    .flipbook-lite {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .8rem;
        height: auto;
        min-height: 0;
    }

    body.reader-expanded.reader-landscape .flipbook-lite {
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .reader-tools,
    body.reader-expanded .reader-tools,
    body.reader-expanded.reader-landscape .reader-tools {
        position: sticky;
        top: max(.35rem, env(safe-area-inset-top));
        left: auto;
        z-index: 15;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100%;
        transform: none;
        gap: .45rem !important;
        padding: .45rem;
        border-radius: 12px;
        background: rgba(247, 245, 243, .94);
        backdrop-filter: blur(16px);
    }

    .reader-tools button,
    body.reader-expanded.reader-landscape .reader-tools button {
        display: inline-flex;
        width: 100%;
        height: auto;
        min-width: 0;
        min-height: var(--touch-target);
        padding: .55rem .4rem;
        border-radius: 8px;
        font-size: .76rem;
    }

    body.reader-expanded.reader-landscape .reader-tools button::before {
        content: none !important;
    }

    .reader-stage,
    .reader-expanded .reader-stage,
    .reader-modal:fullscreen .reader-stage,
    body.reader-expanded.reader-landscape .reader-stage,
    body.reader-expanded.reader-landscape .reader-modal:fullscreen .reader-stage {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        height: auto;
        min-height: 0;
        gap: .9rem;
        overflow: visible;
    }

    .reader-page-wrap,
    body.reader-expanded.reader-landscape .reader-page-wrap {
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .reader-page,
    .reader-expanded .reader-page,
    .reader-modal:fullscreen .reader-page,
    body.reader-expanded.reader-landscape .reader-page,
    body.reader-expanded.reader-landscape .reader-modal:fullscreen .reader-page {
        width: 100%;
        height: auto;
        min-height: clamp(300px, 72svh, 620px);
        max-height: none;
        padding: .55rem;
        overflow: auto;
        border-radius: 10px;
        touch-action: pan-x pan-y pinch-zoom;
    }

    .reader-page :is(img, canvas),
    .reader-expanded .reader-page :is(img, canvas),
    .reader-modal:fullscreen .reader-page :is(img, canvas),
    body.reader-expanded.reader-landscape .reader-page :is(img, canvas) {
        width: auto;
        max-width: 100% !important;
        height: auto;
        max-height: min(68svh, 720px) !important;
        object-fit: contain;
    }

    .reader-video:not([hidden]),
    .reader-extended:not([hidden]),
    body.reader-expanded.reader-landscape .reader-video:not([hidden]),
    body.reader-expanded.reader-landscape .reader-extended:not([hidden]) {
        display: grid !important;
        grid-column: 1;
        width: 100%;
        height: auto;
        max-height: none;
        padding: .8rem;
        overflow: hidden;
    }

    .reader-video-content,
    .reader-extended-content {
        width: 100%;
        max-width: 100%;
        max-height: none;
        overflow: visible;
    }

    .reader-video-content .phone-video-frame {
        width: min(100%, 360px) !important;
    }

    .reader-video-content iframe {
        max-height: none;
    }

    .reader-page-arrow {
        z-index: 6;
        width: 40px;
        height: 64px;
        min-height: 64px;
    }

    .reader-close,
    body.reader-expanded.reader-landscape .reader-close {
        position: fixed;
        top: max(.55rem, env(safe-area-inset-top));
        right: max(.55rem, env(safe-area-inset-right));
        z-index: 30;
        width: var(--touch-target);
        height: var(--touch-target);
    }

    .search-sheet,
    .mobile-menu-sheet,
    .subscribe-modal,
    .share-sheet,
    .news-article-sheet,
    .install-guide-app {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
        margin: .5rem;
    }
}

@media (max-width: 420px) {
    .section {
        padding-inline: .8rem;
    }

    .content-card,
    .form-card,
    .contact-panel,
    .month-card,
    .builder-block,
    .public-content-block,
    .profile-card {
        padding: .8rem;
    }

    .reader-dialog,
    .reader-expanded .reader-dialog,
    .reader-modal:fullscreen .reader-dialog,
    body.reader-expanded.reader-landscape .reader-dialog {
        padding-inline: .55rem;
    }

    .reader-tools,
    body.reader-expanded .reader-tools {
        gap: .35rem !important;
        padding: .35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}