/* =============================================================================
   Чернівецький ліцей — site stylesheet
   Clean, standards-based styles that replace the builder-exported public.css.
   Styles the builder's class hooks (container/wrapper/inner, style1..8,
   button/buttons/label, image, columns, gallery) with a sane, consistent,
   left-aligned, responsive layout. No fixed background, no gray stripe.
   ========================================================================== */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
    --brand:        #1f2d5a;   /* deep navy */
    --brand-dark:   #16213f;
    --accent:       #ffd34d;   /* warm highlight */
    --link:         #1f5fbf;
    --link-hover:   #16213f;

    --text:         #1f2430;
    --text-muted:   #5b6270;
    --bg:           #ffffff;
    --bg-soft:      #f4f6fb;
    --border:       #e2e6ef;

    --container:    72rem;     /* main content max width */
    --gutter:       clamp(1rem, 4vw, 2.5rem);
    --radius:       10px;
    --shadow:       0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);

    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Fluid, consistent type scale (single source of truth for sizes). */
    --fs-900: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);  /* page / hero title  */
    --fs-700: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);    /* section heading h2  */
    --fs-500: clamp(1.2rem, 1.05rem + .6vw, 1.4rem);   /* subheading h3       */
    --fs-400: 1.0625rem;                               /* body                */
    --fs-300: .9375rem;                                /* small / meta        */

    --lh-tight: 1.2;
    --lh-body:  1.65;
}

/* ── Modern reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 100%;               /* respect user zoom; no pt sizing */
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;      /* for sticky nav + in-page anchors */
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);         /* flat white — removes the gray stripe */
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs-400);
    font-weight: 400;
    line-height: var(--lh-body);
    word-wrap: break-word;
    text-align: left;              /* content is left-aligned, not centered */
}

img, svg, video, iframe, picture { max-width: 100%; }
img, video { height: auto; display: block; }

a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .2s ease;
}
a:hover { color: var(--link-hover); }

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

/* ── Typography (single consistent scale) ───────────────────────────────── */
h1, h2, h3, h4 {
    margin: 0 0 .6em;
    color: var(--brand);
    font-weight: 600;
    line-height: var(--lh-tight);
    text-wrap: balance;
}
h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-500); }
h4 { font-size: var(--fs-400); text-transform: uppercase; letter-spacing: .03em; }

p  { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
li { margin: .25rem 0; }
strong, b { font-weight: 600; }
em, i { font-style: italic; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

/* Builder text-style classes mapped to the shared scale (no per-element sizes) */
.style1 { font-size: var(--fs-400); }
h1.style1, h2.style1 { font-size: var(--fs-900); }
.style2 { font-size: inherit; }
h1.style2 { font-size: var(--fs-900); }
h2.style2 { font-size: var(--fs-700); }
h3.style2 { font-size: var(--fs-500); }
.style4, .style8 { font-size: inherit; }

/* ── Site header + navigation ───────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow);
}
.site-header__bar {
    max-width: var(--container);
    margin-inline: auto;
    padding: .55rem var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.brand {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-400);
    line-height: 1.2;
    white-space: nowrap;
}
.nav-toggle {
    display: none;
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: .2rem .5rem;
}
#site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem 1.1rem;
}
#site-nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: var(--fs-300);
    padding: .35rem .15rem;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
#site-nav a:hover,
#site-nav a[aria-current="page"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ── Main layout container ──────────────────────────────────────────────── */
#wrapper { flex: 1 0 auto; display: block; }
#main { display: block; }

#main > .inner,
#content {
    max-width: var(--container);
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem) var(--gutter);
}

/* Builder nesting wrappers collapse to simple left-aligned blocks. */
.container { margin: 0; }
.container > .wrapper { margin: 0; }
.container > .wrapper > .inner { margin: 0; }

/* Rhythm between top-level content sections. */
#content > .container { padding-block: clamp(1.25rem, 3vw, 2rem); }
#content > .container + .container { border-top: 1px solid var(--border); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.buttons {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.buttons li { margin: 0; }

.button,
a.button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    background: var(--brand);
    color: #fff;
    font-weight: 500;
    font-size: var(--fs-300);
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    transition: background .2s ease, transform .05s ease;
}
.button:hover { background: var(--brand-dark); color: #fff; }
.button:active { transform: translateY(1px); }
.button svg { width: 1em; height: 1em; fill: currentColor; flex: none; }
.button .label { white-space: normal; }

/* ── Images & figures ───────────────────────────────────────────────────── */
.image { display: block; margin: 1.25rem 0; }
.image img { border-radius: var(--radius); }
.image .frame { display: block; width: 100%; }

/* ── Columns ────────────────────────────────────────────────────────────── */
.columns {
    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.columns > .wrapper,
.columns > .wrapper > .inner { display: contents; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: var(--fs-300);
}
th, td {
    border: 1px solid var(--border);
    padding: .55rem .7rem;
    text-align: left;
    vertical-align: top;
}
thead th { background: var(--bg-soft); }
tbody tr:nth-child(even) { background: var(--bg-soft); }

/* ── Gallery (static grid) ──────────────────────────────────────────────── */
.gallery-link {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: .75rem;
    margin-top: 1.5rem;
    list-style: none;
    padding: 0;
}
.gallery-link a { display: block; overflow: hidden; border-radius: var(--radius); }
.gallery-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 3 / 2;
    transition: transform .25s ease;
}
.gallery-link a:hover img { transform: scale(1.04); }

/* ── Site footer ────────────────────────────────────────────────────────── */
.site-footer {
    flex-shrink: 0;
    background: var(--brand-dark);
    color: #cfd6e8;
    font-size: var(--fs-300);
}
.site-footer__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: 2rem var(--gutter);
    display: grid;
    gap: 1.25rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    text-align: left;
}
.site-footer h2 { color: #fff; font-size: var(--fs-500); margin-bottom: .5rem; }
.site-footer a { color: #fff; }
.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    text-align: center;
    padding: 1rem var(--gutter);
    color: #aab3cc;
    font-size: var(--fs-300);
}

/* ── htmx: subtle fade on content swap ──────────────────────────────────── */
#content.htmx-swapping { opacity: .3; transition: opacity .12s ease-out; }

/* ── Responsive: mobile nav ─────────────────────────────────────────────── */
@media (max-width: 820px) {
    .nav-toggle { display: inline-flex; }
    #site-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        order: 3;
        padding-top: .5rem;
    }
    #site-nav.open { display: flex; }
    #site-nav a {
        padding: .85rem .25rem;
        border-top: 1px solid rgba(255, 255, 255, .12);
        border-bottom: 0;
        font-size: var(--fs-400);
        white-space: normal;
    }
    .site-header__bar { flex-wrap: wrap; }
}

/* Reduced-motion users: disable non-essential transitions/animation. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
    }
}