/**
 * TB1 public website display scale.
 * Reduces the public-facing school website by roughly 10% without using
 * transform scaling, so sticky headers, modals, and mobile widths stay stable.
 */

html.tb1-display-compact {
    font-size: 90%;
}

html.tb1-display-compact.tb1-font-small {
    font-size: 81%;
}

html.tb1-display-compact.tb1-font-normal {
    font-size: 90%;
}

html.tb1-display-compact.tb1-font-large {
    font-size: 101.25%;
}

html.tb1-display-compact body {
    color: #243449;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}

html.tb1-display-compact :where(p, li, dd, td, th, label, input, textarea, select) {
    letter-spacing: 0;
}

html.tb1-display-compact :where(.text-gray-900, .text-gray-800, .text-slate-900, .text-slate-800) {
    color: #0f172a !important;
}

html.tb1-display-compact :where(.text-gray-700, .text-slate-700) {
    color: #243449 !important;
}

html.tb1-display-compact :where(.text-gray-600, .text-gray-500, .text-slate-600, .text-slate-500) {
    color: #475569 !important;
}

:is(body.dark-mode, html.dark-mode body, html.dark body) {
    color: #e2e8f0;
}

:is(body.dark-mode, html.dark-mode body, html.dark body) :where(.text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900, .text-slate-800, .text-slate-700) {
    color: #f8fafc !important;
    -webkit-text-fill-color: currentColor;
}

:is(body.dark-mode, html.dark-mode body, html.dark body) :where(.text-gray-600, .text-gray-500, .text-gray-400, .text-slate-600, .text-slate-500, .text-slate-400) {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: currentColor;
}

:is(body.dark-mode, html.dark-mode body, html.dark body) :where(.bg-white, .bg-gray-50, .bg-slate-50, .bg-pastel-cream, .bg-pastel-frost) {
    background-color: rgba(15, 23, 42, 0.94) !important;
    color: #e2e8f0 !important;
}

:is(body.dark-mode, html.dark-mode body, html.dark body) :where(a:not(.tb1-logo):not(.tb1-nav-link):not(.tb1-dropdown-link)) {
    color: #93c5fd;
}

:is(body.dark-mode, html.dark-mode body, html.dark body) :where(input, textarea, select) {
    background-color: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.42);
    color: #f8fafc;
}

:is(body.dark-mode, html.dark-mode body, html.dark body) :where(input::placeholder, textarea::placeholder) {
    color: #94a3b8;
    opacity: 1;
}

html.tb1-contrast-high body {
    background: #000000 !important;
    color: #ffffff !important;
}

html.tb1-contrast-high :where(.home-page-shell, main, section, article, aside, footer, .bg-white, .bg-gray-50, .bg-slate-50, .bg-pastel-cream, .bg-pastel-frost, [class*="bg-white"], [class*="bg-gray-"], [class*="bg-slate-"], [class*="bg-pastel-"]) {
    background: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html.tb1-contrast-high :where(h1, h2, h3, h4, h5, h6, p, li, td, th, span, small, strong, em, b, label, div, i, svg) {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

html.tb1-contrast-high :where(a, a *) {
    color: #facc15 !important;
    -webkit-text-fill-color: currentColor !important;
}

html.tb1-contrast-high :where(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]) {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #facc15 !important;
    box-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
}

html.tb1-contrast-high :where(button:hover, button:focus-visible, button[aria-pressed="true"], .tb1-a11y-button.is-active, [role="button"].is-active) {
    background: #facc15 !important;
    color: #000000 !important;
    -webkit-text-fill-color: currentColor !important;
}

html.tb1-contrast-high :where(button:hover, button:focus-visible, button[aria-pressed="true"], .tb1-a11y-button.is-active, [role="button"].is-active) * {
    color: #000000 !important;
    -webkit-text-fill-color: currentColor !important;
}

html.tb1-contrast-high :where(input, textarea, select) {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #facc15 !important;
}

html.tb1-contrast-high :where(input::placeholder, textarea::placeholder) {
    color: #fef08a !important;
    opacity: 1 !important;
}

html.tb1-display-compact .home-page-shell {
    width: min(100%, var(--tb1-page-max-width, 1440px));
}

html.tb1-display-compact .home-page-shell > section,
html.tb1-display-compact .home-page-divider {
    max-width: var(--tb1-page-max-width, 1440px);
}

html.tb1-display-compact .home-page-shell [class*="max-w-7xl"] {
    max-width: min(calc(100vw - (var(--tb1-page-gutter, 24px) * 2)), var(--tb1-page-max-width, 1440px)) !important;
}

html.tb1-display-compact .home-page-shell [class*="max-w-6xl"] {
    max-width: min(92vw, 1320px) !important;
}

html.tb1-display-compact .home-page-shell [class*="max-w-5xl"] {
    max-width: min(90vw, 1180px) !important;
}

html.tb1-display-compact .home-page-shell section > [class*="max-w-"] {
    padding-left: var(--tb1-page-wide-gutter, clamp(14px, 2vw, 32px)) !important;
    padding-right: var(--tb1-page-wide-gutter, clamp(14px, 2vw, 32px)) !important;
}

html.tb1-display-compact .home-page-shell section[aria-label="ข่าวสาร"] {
    padding-top: clamp(3.5rem, 6vw, 6rem) !important;
    padding-bottom: clamp(3.5rem, 6vw, 6rem) !important;
}

html.tb1-display-compact .home-page-shell section[aria-label="ข่าวสาร"] .grid.lg\:grid-cols-2 > div:last-child {
    padding: clamp(1.8rem, 3vw, 3.4rem) !important;
}

html.tb1-display-compact .home-page-shell section[aria-label="ข่าวสาร"] .grid.sm\:grid-cols-2 {
    gap: clamp(1.25rem, 2vw, 2rem) !important;
}

html.tb1-display-compact .home-page-shell section[aria-label="ข่าวสาร"] .grid.sm\:grid-cols-2 a > div:last-child {
    padding: clamp(1.35rem, 2vw, 2rem) !important;
}

html.tb1-display-compact .tb1-topbar {
    padding-block: 7px;
}

html.tb1-display-compact .tb1-topbar-container,
html.tb1-display-compact .tb1-navbar-container {
    padding-inline: 18px;
}

html.tb1-display-compact .tb1-topbar-contact a,
html.tb1-display-compact .tb1-topbar-contact a i {
    font-size: 10.8px;
}

html.tb1-display-compact .tb1-royal-badge {
    padding: 4.5px 12.5px;
    font-size: 9.9px;
}

html.tb1-display-compact .tb1-social-links a,
html.tb1-display-compact .tb1-theme-toggle {
    width: 25px;
    height: 25px;
    font-size: 10.8px;
}

html.tb1-display-compact .tb1-a11y-button {
    width: 25px;
    height: 25px;
}

html.tb1-display-compact .tb1-a11y-font-small {
    font-size: 10px;
}

html.tb1-display-compact .tb1-a11y-font-normal {
    font-size: 11.7px;
}

html.tb1-display-compact .tb1-a11y-font-large {
    font-size: 13.5px;
}

html.tb1-display-compact .tb1-navbar-container {
    min-height: 54px;
}

html.tb1-display-compact .tb1-logo {
    gap: 9px;
}

html.tb1-display-compact .tb1-logo-img {
    width: 40.5px;
    height: 40.5px;
}

html.tb1-display-compact .tb1-nav-link {
    padding: 9px 10.8px;
    font-size: 11.7px;
}

html.tb1-display-compact .tb1-dropdown {
    min-width: 216px;
    padding: 5.5px;
}

html.tb1-display-compact .tb1-dropdown-link {
    padding: 9px 10.8px;
    font-size: 10.8px;
}

html.tb1-display-compact .tb1-dropdown-link:hover {
    padding-left: 14.4px;
}

@media (max-width: 768px) {
    html.tb1-display-compact {
        font-size: 90%;
    }

    html.tb1-display-compact .tb1-topbar-container,
    html.tb1-display-compact .tb1-navbar-container {
        padding-inline: 14px;
    }

    html.tb1-display-compact .tb1-navbar-container {
        min-height: 52px;
    }

    html.tb1-display-compact .tb1-logo-img {
        width: 38px;
        height: 38px;
    }

    html.tb1-display-compact .home-page-shell {
        width: 100%;
    }

    html.tb1-display-compact .home-page-shell [class*="max-w-7xl"],
    html.tb1-display-compact .home-page-shell [class*="max-w-6xl"],
    html.tb1-display-compact .home-page-shell [class*="max-w-5xl"] {
        max-width: 100% !important;
    }

    html.tb1-display-compact .home-page-shell section > [class*="max-w-"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}