/* Mobile and tablet sizing/layout isolation (<= 1120px). */
html {
    font-size: 16px;
}

body {
    line-height: 1.56;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

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

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: rgba(47, 81, 106, 0.18);
}

.site-shell {
    width: calc(100% - 0.56rem);
    margin: 0.24rem auto 1rem;
    border-radius: 16px;
    box-shadow: 0 11px 28px rgba(22, 34, 47, 0.13);
}

.container {
    width: calc(100% - 0.86rem);
    min-width: 0;
}

.site-main {
    padding: 0.84rem 0 calc(4.2rem + env(safe-area-inset-bottom));
}

.navbar {
    padding: 1.25rem 0;
}

.nav-wrapper,
.nav-wrapper-home {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.52rem;
    min-height: 84px;
    align-items: center;
    min-width: 0;
}

.logo {
    min-width: 0;
    gap: 0.8rem;
}

.logo-image {
    width: clamp(185px, 56vw, 300px);
    max-height: 88px;
}

.logo-mark {
    width: 2.9rem;
    height: 2.9rem;
    font-size: 1.2rem;
}

.logo-name {
    font-size: 1.45rem;
}

.logo-tag {
    font-size: 0.8rem;
    letter-spacing: 0.09em;
}

.hamburger {
    display: inline-flex;
    min-width: 58px;
    min-height: 58px;
    justify-content: center;
    border-radius: 16px;
}

.nav-tools {
    justify-self: end;
    gap: 0.62rem;
}

.theme-toggle {
    width: 2.85rem;
    height: 2.85rem;
    font-size: 1rem;
    border-radius: 16px;
}

.language-switcher select {
    min-height: 2.85rem;
    font-size: 1rem;
    border-radius: 16px;
    padding: 0 0.62rem;
}

.nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.78rem);
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    z-index: 230;
    margin: 0;
    width: auto;
    max-height: min(78vh, calc((var(--app-vh, 1vh) * 100) - 154px - env(safe-area-inset-bottom)));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.74rem;
    border: 1px solid var(--tm-line-strong);
    border-radius: 20px;
    background: color-mix(in srgb, #ffffff 94%, var(--tm-shell) 6%);
    box-shadow: 0 16px 34px rgba(16, 27, 39, 0.22);
}

.nav-menu.active {
    display: flex;
}

.nav-menu li {
    width: 100%;
}

.nav-menu a,
.dropbtn {
    width: 100%;
    min-height: 60px;
    padding: 0.72rem 0.86rem;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.24;
    text-transform: none;
    white-space: normal;
    justify-content: flex-start;
}

.nav-menu .nav-icon {
    display: inline-flex;
    width: 1.1rem;
    font-size: 0.96rem;
    color: var(--tm-text-soft);
}

.dropdown-content {
    position: static;
    width: 100%;
    margin-top: 0.28rem;
    border-radius: 10px;
    max-height: min(42vh, 320px);
    overflow-y: auto;
    box-shadow: none;
}

.dropdown-content a {
    font-size: 0.94rem;
    line-height: 1.3;
    padding: 0.7rem 0.74rem;
}

body.menu-open .site-header::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 35, 0.24);
    backdrop-filter: blur(2px);
    z-index: 225;
    pointer-events: none;
}

.search-form {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin: 0;
}

.search-form input,
.search-form button {
    width: 100%;
    height: 2.9rem;
}

p,
li,
label,
input,
select,
textarea,
.text-muted {
    font-size: 1rem;
}

.page-subtitle,
.archive-date-subtitle,
.newsletter-note,
.social-note,
.pdf-mobile-hint,
.advertise-note,
.live-widgets-meta {
    font-size: 0.98rem;
    line-height: 1.5;
}

.page-header h1,
.admin-header h1,
.archive-header h1,
.category-header h1,
.search-header h1,
.pdf-library-header h1,
.contact-section h1,
.achievements-page .page-header h1,
.advertise-page .page-header h1,
.about-page .page-header h1 {
    font-size: clamp(1.65rem, 6.2vw, 2.25rem);
    line-height: 1.08;
}

.content-wrapper,
.content-wrapper.home-layout,
.archive-wrapper,
.stats-grid,
.achievements-grid,
.advertise-grid,
.admin-action-grid,
.live-widgets-grid,
.about-page .values-grid {
    grid-template-columns: 1fr;
    gap: 0.76rem;
    min-width: 0;
}

.main-content,
.sidebar,
.archive-main,
.archive-sidebar,
.page-content,
.contact-section,
.about-page,
.advertise-page,
.admin-section {
    padding: 0.82rem;
    min-width: 0;
}

.article-card,
.widget,
.archive-section,
.search-result,
.pdf-card,
.stat-box,
.stat-card,
.archive-pdf-item,
.archive-article-item,
.contact-form,
.article-form,
.category-form,
.admin-form,
.date-picker-box,
.newspaper-card,
.about-section,
.values-grid .value-item {
    padding: 0.78rem;
}

.widget h3,
.live-widget-card h3,
.admin-action-card h3,
.stat-card h3,
.stat-box h4,
.archive-section h3,
.about-page .about-section h2 {
    font-size: 1.16rem;
    line-height: 1.24;
}

.article-content h3,
.archive-article-content h4,
.result-title {
    font-size: 1.2rem;
    line-height: 1.25;
}

.article-meta,
.archive-article-meta,
.result-meta {
    gap: 0.28rem;
}

.article-meta span,
.archive-article-meta span,
.result-meta span,
.pdf-stats,
.download-count,
.upload-date,
.stat-label,
.newspaper-share-label {
    font-size: 0.95rem;
    padding: 0.16rem 0.42rem;
}

.date-input-group {
    grid-template-columns: 1fr;
}

.archive-search-box form,
.archive-search-box div {
    display: grid !important;
    gap: 0.5rem !important;
}

.archive-article-item {
    grid-template-columns: 1fr;
}

.hero-banner {
    grid-template-columns: 1fr;
    gap: 0.78rem;
    padding: 0.92rem;
}

.hero-content h2 {
    font-size: clamp(1.95rem, 9.8vw, 3rem);
    line-height: 0.95;
}

.hero-lead {
    max-width: none;
    font-size: 1rem;
    margin-bottom: 0.72rem;
}

.hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.48rem;
}

.hero-actions .btn-primary,
.hero-actions .btn-secondary {
    width: 100%;
    text-align: center;
}

.hero-chip {
    font-size: 0.88rem;
}

.home-gallery {
    gap: 0.58rem;
    grid-auto-rows: 172px;
}

.home-gallery-overlay {
    font-size: 0.94rem;
    line-height: 1.28;
    padding: 0.7rem 0.64rem;
}

.todays-newspaper-section {
    padding: 0.82rem;
}

.flip-book-container {
    padding: 0.22rem;
}

.home-paper-flipper {
    max-width: 100%;
}

.paper-flip-inner {
    min-height: 360px;
}

.paper-face-front,
.paper-face-back {
    padding: 0.78rem;
}

.paper-preview-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.36rem;
}

.paper-preview-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.paper-preview-shell {
    min-height: 260px;
}

.paper-preview-frame {
    min-height: 250px;
}

.newspaper-actions,
.pdf-footer,
.share-buttons,
.admin-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
}

.newspaper-actions a,
.pdf-footer a,
.share-btn,
.admin-actions a,
.btn,
.btn-primary,
.btn-secondary,
.btn-edit,
.btn-delete,
.btn-danger,
.btn-download,
.btn-view,
.btn-small {
    width: 100%;
    min-height: 3rem;
    font-size: 1rem;
}

.pdf-viewer-wrapper {
    min-height: 60vh;
}

.newspaper-pdf-frame-compact,
.newspaper-pdf-frame-full {
    width: 100%;
    min-height: 430px;
    height: min(calc(var(--app-vh, 1vh) * 74), 660px);
}

.about-content {
    gap: 0.68rem;
}

.about-page .page-header {
    padding: 0.8rem;
    margin-bottom: 0.72rem;
}

.about-page .about-section p,
.contact-form label {
    font-size: 1rem;
    line-height: 1.6;
}

.achievements-grid .achievement-image img {
    height: clamp(220px, 56vw, 300px);
}

.live-widget-card {
    min-height: 0;
}

.admin-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.admin-table th,
.admin-table td {
    font-size: 0.92rem;
    padding: 0.62rem 0.68rem;
}

.form-row {
    grid-template-columns: 1fr;
}

.form-inline {
    flex-direction: column;
    align-items: stretch;
}

.footer-content {
    grid-template-columns: 1fr;
    gap: 0.68rem;
}

.admin-fab {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
}

body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
}

/* Contrast reinforcement for light theme (mobile/tablet). */
body:not(.dark-mode) .footer-section,
body:not(.dark-mode) .footer-bottom,
body:not(.dark-mode) .live-widgets-section,
body:not(.dark-mode) .live-widget-card {
    color: #1f2f42;
}

body:not(.dark-mode) .footer-section p,
body:not(.dark-mode) .footer-section li,
body:not(.dark-mode) .footer-bottom p,
body:not(.dark-mode) .footer-section a,
body:not(.dark-mode) .text-muted,
body:not(.dark-mode) .muted-inline,
body:not(.dark-mode) .newsletter-note,
body:not(.dark-mode) .social-note,
body:not(.dark-mode) .live-widgets-meta,
body:not(.dark-mode) .live-widget-loading,
body:not(.dark-mode) .live-widget-empty,
body:not(.dark-mode) .live-widget-error,
body:not(.dark-mode) .live-weather-condition,
body:not(.dark-mode) .live-weather-meta,
body:not(.dark-mode) .live-quote-name {
    color: #3a4c62;
}

body:not(.dark-mode) .footer-section h3,
body:not(.dark-mode) .live-widgets-head h2,
body:not(.dark-mode) .live-widget-card h3,
body:not(.dark-mode) .live-weather-location,
body:not(.dark-mode) .live-weather-temp,
body:not(.dark-mode) .live-quote-symbol,
body:not(.dark-mode) .live-quote-price {
    color: #1f2f42;
}

@media (max-width: 720px) {
    .language-switcher {
        display: inline-flex;
    }

    .language-switcher select {
        min-width: 4.6rem;
        min-height: 2.5rem;
        font-size: 0.84rem;
        padding: 0 0.48rem;
    }

    .logo-image {
        width: clamp(170px, 58vw, 250px);
        max-height: 78px;
    }

    .site-main {
        padding-top: 0.76rem;
    }

    .page-header h1,
    .admin-header h1,
    .archive-header h1,
    .category-header h1,
    .search-header h1,
    .pdf-library-header h1,
    .contact-section h1,
    .achievements-page .page-header h1,
    .advertise-page .page-header h1,
    .about-page .page-header h1 {
        font-size: clamp(1.5rem, 8.4vw, 1.95rem);
    }
}

@media (max-width: 560px) {
    html {
        font-size: 16px;
    }

    .site-shell {
        width: calc(100% - 0.4rem);
        margin-top: 0.18rem;
        border-radius: 14px;
    }

    .container {
        width: calc(100% - 0.68rem);
    }

    .nav-wrapper,
    .nav-wrapper-home {
        gap: 0.42rem;
        min-height: 72px;
    }

    .theme-toggle {
        width: 2.6rem;
        height: 2.6rem;
        font-size: 0.92rem;
    }

    .hamburger {
        min-width: 52px;
        min-height: 52px;
    }

    .logo-image {
        width: clamp(155px, 62vw, 230px);
        max-height: 72px;
    }

    .nav-menu a,
    .dropbtn {
        min-height: 56px;
        font-size: 0.98rem;
        padding: 0.64rem 0.74rem;
    }

    .article-card,
    .widget,
    .archive-section,
    .search-result,
    .pdf-card,
    .stat-box,
    .stat-card,
    .archive-pdf-item,
    .archive-article-item,
    .contact-form,
    .article-form,
    .category-form,
    .admin-form,
    .date-picker-box,
    .newspaper-card,
    .about-section,
    .values-grid .value-item {
        padding: 0.72rem;
    }

    .hero-content h2 {
        font-size: clamp(1.72rem, 10.5vw, 2.45rem);
    }

    .hero-lead {
        font-size: 0.98rem;
    }

    .home-gallery {
        grid-auto-rows: 156px;
    }

    .paper-flip-inner {
        min-height: 330px;
    }

    .paper-preview-actions {
        grid-template-columns: 1fr;
    }

    .newspaper-pdf-frame-compact,
    .newspaper-pdf-frame-full {
        min-height: 380px;
    }
}