/* ==========================================================================
   SEKOLAH-PLATFORM - public site stylesheet
   --------------------------------------------------------------------------
   Hand-written, no build step (ADR-006). Consumes ONLY var(--brand-*) from
   tokens.css, so one stylesheet serves every school and the differences arrive
   as a :root{} delta from BrandService.

   MOBILE-FIRST, and this is enforced rather than documented. Base rules
   describe the 360px screen; wider screens are added with min-width only.
   MobileFirstTest fails the build on a max-width BREAKPOINT - the max-width
   PROPERTY below is fine and is used deliberately to cap measures.

   `main-website/AGENTS.md` states twice that max-width queries are forbidden
   and that "a script fails the build on them". That script never existed and
   the rule is broken twice in its own stylesheet. Here the script exists.
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--brand-surface);
    color: var(--brand-body);
    font-family: var(--brand-font-body);
    font-size: 1rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Skip link: the first focusable thing in the document.
   Moved offscreen by POSITION, never display:none or visibility:hidden, both
   of which also remove it from the tab order and so remove the only reason it
   exists. The browser harness knows this shape (visuallyHidden()) and will not
   report it as a 1px touch-target failure.
   -------------------------------------------------------------------------- */
.lewati-konten {
    position: absolute;
    top: -100vh;
    left: 1rem;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    min-height: var(--brand-touch);
    padding: 0 1rem;
    border-radius: var(--brand-radius-sm);
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    text-decoration: none;
}

.lewati-konten:focus {
    top: 1rem;
}

:focus-visible {
    outline: 3px solid var(--brand-secondary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Measure and rhythm
   -------------------------------------------------------------------------- */
.wadah {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    /* 16px side gutter at phone width, per ~/.ai/AGENTS.md section 8. */
    padding-inline: 1rem;
}

h1,
h2,
h3 {
    margin: 0 0 0.5em;
    color: var(--brand-ink);
    font-family: var(--brand-font-heading);
    line-height: 1.25;
    /* Long Indonesian school names ("Sekolah Menengah Kejuruan ...") must wrap
       rather than widen the page. */
    overflow-wrap: break-word;
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.375rem;
}

h3 {
    font-size: 1.125rem;
}

p {
    margin: 0 0 1rem;
    overflow-wrap: break-word;
}

a {
    color: var(--brand-primary-text);
}

img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */
.kepala-situs {
    background: var(--brand-surface-card);
    border-bottom: 1px solid var(--brand-border);
}

.kepala-situs__isi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding-block: 0.75rem;
}

.merek {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: var(--brand-touch);
    color: var(--brand-ink);
    text-decoration: none;
}

.merek__logo {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}

.merek__nama {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
}

.navigasi-utama ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigasi-utama a {
    display: inline-flex;
    align-items: center;
    /* The height is what makes the target 44px, not the margin around it. */
    min-height: var(--brand-touch);
    padding-inline: 0.75rem;
    border-radius: var(--brand-radius-sm);
    color: var(--brand-primary-text);
    text-decoration: none;
}

.navigasi-utama a:hover {
    background: var(--brand-primary-50);
}

/* --------------------------------------------------------------------------
   Hero and sections
   -------------------------------------------------------------------------- */
main {
    display: block;
}

.sorotan {
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    padding-block: 2.5rem;
}

.sorotan h1 {
    color: var(--brand-on-primary);
}

.sorotan__ringkas {
    max-width: 44rem;
    margin: 0;
    font-size: 1.0625rem;
}

.bagian {
    padding-block: 2rem;
}

.kartu-daftar {
    display: grid;
    /* One column on a phone, widened by min-width below. Never a fixed pixel
       width: a long name or a price must wrap, not push the layout open. */
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kartu {
    background: var(--brand-surface-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow-sm);
    padding: 1rem;
}

.kartu dt {
    color: var(--brand-muted);
    font-size: 0.875rem;
}

.kartu dd {
    margin: 0 0 0.75rem;
    overflow-wrap: break-word;
}

.kartu dd:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.kaki-situs {
    margin-top: 2rem;
    background: var(--brand-primary-dark);
    color: var(--brand-on-primary-dark);
    padding-block: 2rem 1.5rem;
}

.kaki-situs h2,
.kaki-situs h3 {
    color: var(--brand-on-primary-dark);
}

.kaki-situs a {
    color: var(--brand-on-primary-dark);
}

.kaki-situs__kolom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.daftar-kontak {
    margin: 0;
    padding: 0;
    list-style: none;
}

.daftar-kontak li + li {
    margin-top: 0.5rem;
}

.daftar-kontak a {
    display: inline-flex;
    align-items: center;
    min-height: var(--brand-touch);
}

.kaki-situs__hakcipta {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--brand-primary-light);
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Wider screens, added on top. min-width ONLY.
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.625rem;
    }

    .kepala-situs__isi {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .merek__nama {
        font-size: 1.125rem;
    }

    .sorotan {
        padding-block: 4rem;
    }

    .bagian {
        padding-block: 3rem;
    }

    .kartu-daftar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kaki-situs__kolom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .kartu-daftar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .kaki-situs__kolom {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}