/*
 * ICWH-03.3 — Homepage readability and first-screen layout tuning.
 * Loaded AFTER style.css as an additive, non-destructive override.
 * No changes to CMS data, admin layout, uploaded hero photos, or EN/ID content.
 */
:root { --icwh-header-height: 75px; }

/* Readable typography: a restrained 1–2 px increase in supporting text. */
body { font-size: 16px; }
.brand-label strong { font-size: 16px; }
.brand-label small { font-size: 9px; }
.navigation { font-size: 13px; gap: clamp(12px, 1.25vw, 19px); }
.language-switch a { font-size: 12px; min-width: 34px; }
.btn { font-size: 14px; }
.btn-small { font-size: 12px; }

/* The hero owns the initial viewport below the sticky header.
   If the content is taller than the screen, hero may grow naturally;
   no fixed heights, clipping, scroll-jacking or artificial whitespace. */
.hero {
    min-height: calc(100vh - var(--icwh-header-height));
    min-height: calc(100svh - var(--icwh-header-height));
    display: grid;
    align-items: center;
}
.hero-inner {
    width: 100%;
    padding-top: clamp(52px, 7vh, 94px);
    padding-bottom: clamp(52px, 7vh, 94px);
}
.event-status { font-size: 11px; }
.hero-kicker { font-size: 11px; }
/* Main conference headline already has the correct visual hierarchy. */
.hero-theme { font-size: 14px; line-height: 1.75; }
.hero-subtheme { font-size: 13px; }
.hero-meta { font-size: 12px; }
.hero-proof { font-size: 11px; }

.section-kicker { font-size: 11px; }
.section-title h2 { font-size: clamp(28px, 2.45vw, 32px); }
.section-title p { font-size: 13px; }
.topic-num { font-size: 10px; }
.topic-card h3 { font-size: 15px; }
.topic-card p { font-size: 12px; }
.country { font-size: 10px; }
.speaker-card h3 { font-size: 14px; }
.speaker-affiliation { font-size: 11px; }
.speaker-topic { font-size: 10.5px; }
.photo-note { font-size: 11px; }
.official-type { font-size: 10px; }
.official-card h3 { font-size: 15px; }
.official-card p { font-size: 11.5px; }
.section-footnote { font-size: 12px; }
.left-heading h2 { font-size: 23px; }
.pub-item strong { font-size: 12px; }
.pub-item small { font-size: 11px; }
.pub-note { font-size: 10px; }
.date-event strong { font-size: 13px; }
.date-event p { font-size: 11.5px; }
.resource-actions .btn { font-size: 12px; }
.fee-kind { font-size: 11px; }
.fee-card h3 { font-size: 14px; }
.fee-desc { font-size: 11px; }
.fee-caption { font-size: 10px; }
.fee-card > p:not(.fee-desc) { font-size: 11px; }
.featured-tag { font-size: 9px; }
.payment-panel h3 { font-size: 15px; }
.payment-panel > p { font-size: 11.5px; }
.bank-card small { font-size: 11px; }
.bank-card span { font-size: 10px; }
.payment-panel .bank-warning { font-size: 10px; }
.faq-list summary { font-size: 13px; }
.faq-list details p { font-size: 12px; }
.help-panel strong { font-size: 14px; }
.help-panel p { font-size: 11.5px; }
.help-buttons a { font-size: 11px; }
.footer-top p { font-size: 12px; }
.footer-top h4 { font-size: 13px; }
.footer-bottom { font-size: 10px; }

/* Keep navigation legible instead of squeezing links in the 801–960px range. */
@media (max-width: 960px) {
    :root { --icwh-header-height: 70px; }
    .header { height: var(--icwh-header-height); }
    .nav-shell { justify-content: space-between; gap: 12px; }
    .brand { min-width: 0; margin-right: auto; }
    .nav-right { margin-left: auto; }
    .menu-toggle {
        display: flex; flex-direction: column; gap: 4px; order: 3;
        border: 1px solid #e5e7ec; background: white; border-radius: 9px;
        padding: 9px; width: 38px; height: 38px; justify-content: center;
    }
    .menu-toggle span { background: #20293a; width: 100%; height: 2px; border-radius: 4px; }
    .navigation {
        display: none; position: absolute; top: calc(var(--icwh-header-height) - 1px);
        left: 0; right: 0; padding: 17px 24px;
        background: white; border-bottom: 1px solid #e5e7ec;
        box-shadow: 0 15px 25px #0001;
        flex-direction: column; align-items: flex-start; gap: 15px;
        font-size: 14px; max-height: calc(100svh - var(--icwh-header-height));
        overflow-y: auto;
    }
    .navigation.is-open { display: flex; }
    .navigation a { display: block; width: 100%; padding: 3px 0; }
}

@media (max-width: 800px) {
    :root { --icwh-header-height: 67px; }
    .header { height: var(--icwh-header-height); }
    .nav-shell { gap: 9px; }
    .hero-inner { padding-top: 58px; padding-bottom: 58px; }
}

@media (max-width: 600px) {
    body { font-size: 15px; }
    .brand-label strong { font-size: 14px; }
    .brand-label small { font-size: 8px; }
    .language-switch a { font-size: 11px; min-width: 26px; }
    .nav-right .btn { font-size: 10px; }
    .hero-inner { padding-top: 52px; padding-bottom: 52px; }
    .event-status { font-size: 10px; }
    .hero-kicker { font-size: 10px; }
    .hero-theme { font-size: 13px; }
    .hero-subtheme { font-size: 12.5px; }
    .hero-meta { font-size: 11.5px; }
    .hero-proof { font-size: 10.5px; }
    .section-title h2 { font-size: 27px; }
    .section-title p { font-size: 12.5px; }
    .topic-card { min-height: 0; }
    .topic-card h3 { font-size: 13px; }
    .topic-card p { font-size: 11px; }
    .speaker-card { min-height: 0; }
    .speaker-card h3 { font-size: 13px; }
    .speaker-affiliation { font-size: 10px; }
    .speaker-topic { font-size: 10px; }
    .fee-card { min-height: 0; }
    .fee-card h3 { font-size: 13px; }
    .footer-bottom { font-size: 10px; }
}

/* Anchors stop underneath the sticky header, not behind it. */
html { scroll-padding-top: calc(var(--icwh-header-height) + 14px); }

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