/*  The signed-out side: the bar, the landing page and the footer.

    Every colour here is a theme variable. The signed-out shell wears the light
    half of the pair the office chose, and the moon in the bar swaps it for the
    dark half -- so this file must read on all eight themes, not on two. There
    is not a literal colour in it, for the same reason `elbe-look.css` no longer
    has one: a value written out is right on the theme it was written for and a
    coin toss on the others.

    Named `lp-` for the landing page and `pub-` for the shell around it, so
    nothing here can reach a signed-in screen by accident.  */

/* ===== 1. The bar ===========================================
   Sticky, because the two things a visitor came for -- signing in and writing
   to the school -- should stay reachable the whole way down. */
.pub-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--theme-card-bg);
    border-bottom: 1px solid var(--elbe-line);
    /*  The phone's own top strip (notch / Dynamic Island): the phone layout
        reaches under it with `viewport-fit=cover`, and in the iOS app nothing
        else covers that strip, so the bar pads itself past it. 0 everywhere
        else (2026-09-17). */
    padding-top: env(safe-area-inset-top, 0px);
}

.pub-bar-in {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/*  The brand is the school's wordmark alone (elbe-look.css .elbe-wordmark),
    32 high here, 26 on a phone. */
.pub-brand { display: block; height: 32px; min-width: 0; }

.pub-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pub-moon {
    background: transparent;
    border: 1px solid var(--elbe-line);
    border-radius: 9px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--theme-text-muted);
    cursor: pointer;
    transition: 0.16s;
}

    .pub-moon:hover { background: var(--theme-hover-bg); color: var(--theme-text); }

.pub-main-wide { display: block; }

/*  The shell is a column, so the footer sits at the foot of the window whenever
    a page is short of filling it -- and there is never a strip of nothing left
    under the footer, which is what a short page used to leave. */
body.elbe-public {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

    body.elbe-public > .pub-bar,
    body.elbe-public > .pub-foot { flex: 0 0 auto; }

    body.elbe-public > main { flex: 1 0 auto; }

/*  A sign-in screen fills exactly what the bar and the footer leave, so the
    picture beside the card reaches both of them and the whole screen is one
    window with nothing to scroll to. */
body.elbe-public > main:has(.auth) {
    display: flex;
    flex-direction: column;
}

    body.elbe-public > main > .auth { flex: 1 0 auto; }

/* ===== 2. The hero ==========================================
   The original's sign-in screen over a photograph, with the school's own
   strapline, pawn and two-line tagline. A wash of the theme's page colour sits
   over the picture so the lettering reads on every theme rather than only on
   the light one the photograph suits. */
.lp-hero {
    position: relative;
    padding: 74px 22px 64px;
    text-align: center;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--bs-body-bg) 82%, transparent),
            color-mix(in srgb, var(--bs-body-bg) 94%, transparent)),
        url('../img/auth-side.jpg') center 10% / cover no-repeat;
}

.lp-hero-in { max-width: 860px; margin: 0 auto; }

.lp-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--theme-text);
    margin-bottom: 14px;
}

.lp-rule {
    width: 32px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--theme-brass);
    display: block;
}

.lp-pawn { font-size: 21px; line-height: 1; color: var(--elbe-brass-text); margin-bottom: 8px; }

.lp-tagline {
    font-family: var(--elbe-serif);
    font-size: clamp(30px, 5.2vw, 46px);
    font-weight: 700;
    line-height: 1.12;
    margin: 0 0 18px;
}

.lp-tagline-top { display: block; color: var(--theme-text); }
.lp-tagline-foot { display: block; color: var(--elbe-brass-text); }

.lp-cta {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.lp-cta-main, .lp-cta-alt { min-height: 42px; padding: 10px 22px; font-size: 14.5px; }

/* ===== 3. The bands =========================================
   Alternating ground so the page reads as sections without a rule between
   every one of them. */
.lp-band { padding: 62px 22px; }

.lp-band-alt { background: var(--bs-tertiary-bg); }

.lp-in { max-width: 1080px; margin: 0 auto; }

.lp-eyebrow {
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--elbe-eyebrow);
    margin-bottom: 7px;
}

.lp-h2 {
    font-family: var(--elbe-serif);
    font-size: clamp(23px, 3.4vw, 31px);
    font-weight: 700;
    color: var(--theme-text);
    margin: 0 0 10px;
}

.lp-sub {
    font-size: 15px;
    line-height: 1.6;
    color: var(--theme-text-muted);
    max-width: 640px;
    margin: 0 0 26px;
}

.lp-note {
    font-size: 13px;
    color: var(--theme-text-muted);
    margin-top: 18px;
    font-style: italic;
}

/* ===== 4. How it works ====================================== */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 22px;
    margin-top: 26px;
}

.lp-step { display: flex; gap: 13px; align-items: flex-start; }

.lp-step-n {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--theme-accent-grad);
    color: var(--theme-on-brass);
    display: grid;
    place-items: center;
    font-family: var(--elbe-serif);
    font-weight: 700;
    font-size: 15px;
}

.lp-step-t { font-size: 15px; font-weight: 700; color: var(--theme-text); margin: 4px 0 5px; }
.lp-step-b { font-size: 13.5px; line-height: 1.55; color: var(--theme-text-muted); margin: 0; }

/* ===== 5. The tools ========================================= */
.lp-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: 14px;
}

.lp-tool {
    background: var(--theme-card-grad);
    border: 1px solid var(--elbe-line);
    border-radius: var(--elbe-r);
    padding: 19px;
    box-shadow: var(--elbe-shadow);
    transition: transform 0.16s, box-shadow 0.16s;
}

    .lp-tool:hover { transform: translateY(-2px); }

.lp-tool-ico { display: block; font-size: 24px; line-height: 1; }
.lp-tool-t { font-size: 15px; font-weight: 700; color: var(--theme-text); margin: 9px 0 6px; }
.lp-tool-b { font-size: 13px; line-height: 1.55; color: var(--theme-text-muted); margin: 0; }

/* ===== 7. Programmes ======================================== */
.lp-pkgs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.lp-pkg {
    background: var(--theme-card-grad);
    border: 1px solid var(--elbe-line);
    border-inline-start: 4px solid var(--theme-brass);
    border-radius: var(--elbe-r);
    padding: 19px;
    box-shadow: var(--elbe-shadow);
}

.lp-pkg-t { font-size: 15px; font-weight: 700; color: var(--theme-text); margin: 0 0 6px; }
.lp-pkg-b { font-size: 13px; line-height: 1.55; color: var(--theme-text-muted); margin: 0; }

/* ===== 8. The close ========================================= */
.lp-close { text-align: center; }
.lp-close-in .lp-sub { margin-inline: auto; }

.lp-close-line {
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 22px;
    font-size: 13.5px;
    color: var(--theme-text-muted);
}

/* ===== 9. The footer ======================================== */
.pub-foot {
    background: var(--theme-card-bg);
    border-top: 1px solid var(--elbe-line);
    padding: 16px 22px 0;
}

.pub-foot-in {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 20px;
}

.pub-foot-name {
    font-family: var(--elbe-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--theme-text);
}

.pub-foot-tag { font-size: 13px; color: var(--elbe-brass-text); margin-top: 3px; }
.pub-foot-since { font-size: 12px; color: var(--theme-text-muted); margin-top: 5px; }

.pub-foot-line {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 13px;
    color: var(--theme-text-muted);
    margin-bottom: 4px;
    text-decoration: none;
}

    .pub-foot-line a { color: var(--theme-text-muted); text-decoration: none; }
    .pub-foot-line a:hover, a.pub-foot-line:hover { color: var(--elbe-brass-text); }
    .pub-foot-line i { color: var(--elbe-brass-text); }

.pub-foot-social { display: flex; gap: 9px; margin-bottom: 11px; }

    .pub-foot-social a {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        border: 1px solid var(--elbe-line);
        display: grid;
        place-items: center;
        color: var(--theme-text-muted);
        text-decoration: none;
        transition: 0.16s;
    }

        .pub-foot-social a:hover {
            background: var(--theme-hover-bg);
            color: var(--elbe-brass-text);
            border-color: var(--theme-brass);
        }

.pub-foot-rule {
    max-width: 1080px;
    margin: 12px auto 0;
    padding: 9px 0;
    border-top: 1px solid var(--elbe-line);
    text-align: center;
    font-size: 12px;
    color: var(--theme-text-muted);
}

/* ===== 10. On a phone ======================================= */
@media (max-width: 760px) {
    .lp-hero { padding: 48px 18px 42px; }
    .lp-band { padding: 44px 18px; }
    .pub-bar-in { padding: 9px 15px; }
    .pub-brand { height: 26px; }
    .lp-cta-main, .lp-cta-alt { flex: 1 1 100%; }
}

/* ===== 11. What is in the bar ===============================
   A bar carrying nothing but two sign-in buttons tells a visitor nothing about
   the school. These are the sections the landing page is actually made of, so
   somebody who arrives halfway down it -- or on the contact page -- can still
   see the whole of what is on offer and reach any part of it. */
.pub-nav { display: flex; align-items: center; gap: 2px; }

.pub-nav-a {
    position: relative;
    padding: 7px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--theme-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: 0.16s;
}

    .pub-nav-a:hover { background: var(--theme-hover-bg); color: var(--theme-text); }

    /* The page being read, marked with the school's own brass. */
    .pub-nav-a.is-on { color: var(--elbe-brass-text); }

        .pub-nav-a.is-on::after {
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 1px;
            height: 2px;
            border-radius: 2px;
            background: var(--theme-brass);
        }

/* The language, folded into one.

   Five buttons in a row took a third of the bar and left no room for anything
   to be said in it -- which is why the bar had nothing in it to say. One
   globe, the way the signed-in shell has always had it. */
.pub-lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--elbe-line);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--theme-text-muted);
    cursor: pointer;
    transition: 0.16s;
}

    .pub-lang-btn:hover,
    .pub-lang-btn[aria-expanded="true"] {
        background: var(--theme-hover-bg);
        color: var(--theme-text);
    }

/* Bootstrap's own dropdown is white with near-black lettering whatever the
   page is wearing, so on six of the eight themes it would arrive as a white
   slab. Stated here in the theme's own colours instead. */
.pub-lang-menu {
    min-width: 168px;
    padding: 6px;
    background: var(--theme-card-bg);
    border: 1px solid var(--elbe-line);
    border-radius: 11px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.pub-lang-opt {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 13.5px;
    color: var(--theme-text);
    text-align: start;
    cursor: pointer;
    transition: 0.14s;
}

    .pub-lang-opt:hover { background: var(--theme-hover-bg); }

    .pub-lang-opt.is-on { color: var(--elbe-brass-text); font-weight: 700; }

        .pub-lang-opt.is-on i { color: var(--elbe-brass-text); }

/* The narrow-window menu. Written into the page rather than moved there by
   script, so the bar is right before anything runs. */
.pub-burger {
    display: none;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--elbe-line);
    border-radius: 9px;
    place-items: center;
    font-size: 17px;
    color: var(--theme-text-muted);
    cursor: pointer;
    transition: 0.16s;
}

    .pub-burger:hover { background: var(--theme-hover-bg); color: var(--theme-text); }

.pub-drawer {
    border-top: 1px solid var(--elbe-line);
    padding: 8px 18px 14px;
}

.pub-drawer-a {
    display: block;
    padding: 10px 4px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--theme-text);
    text-decoration: none;
    border-bottom: 1px solid var(--elbe-line);
}

    .pub-drawer-a:hover,
    .pub-drawer-a.is-on { color: var(--elbe-brass-text); }

.pub-drawer-btns { display: flex; gap: 8px; margin-top: 12px; }

    .pub-drawer-btns .btn { flex: 1; }

@media (max-width: 1040px) {
    .pub-nav { display: none; }
    .pub-burger { display: grid; }
}

/* Below this the two buttons crowd the brand off its own bar, so they move
   into the menu with everything else. */
@media (max-width: 620px) {
    .pub-signin { display: none; }
}

@media (min-width: 1041px) {
    /* The menu can never be left hanging open by a window that grew. */
    .pub-drawer { display: none !important; }
}

/* The bar is sticky, so a jump to a section would otherwise land its heading
   underneath it. */
body.elbe-public { scroll-behavior: smooth; }

.lp-band[id] { scroll-margin-top: 68px; }

/* ===== 12. Writing to the school ============================
   The form was six labelled boxes stacked down the middle of an empty page,
   under a bare envelope, with an unstyled button at the foot -- none of the
   classes it was written against existed any more. And a contact page showing
   only a form asks a visitor to write a letter when a telephone number would
   have done.

   So: the school's own details on one side, the form on the other, both in the
   same chrome as the landing page they were reached from. */
.ct-wrap { padding: 14px 22px 14px; }

.ct-in { max-width: 1040px; margin: 0 auto; }

.ct-head { text-align: center; max-width: 640px; margin: 0 auto 10px; }

    .ct-head .lp-h2 { margin-bottom: 4px; }

    .ct-head .lp-sub { font-size: 13.5px; margin-bottom: 0; }

.ct-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: start;
}

/* The ways to reach the school, from Site Ayarları. Anything the office has
   not filled in simply does not appear. */
.ct-side {
    background: var(--theme-card-grad);
    border: 1px solid var(--elbe-line);
    border-radius: var(--elbe-r);
    box-shadow: var(--elbe-shadow);
    padding: 16px 18px;
}

.ct-side-h {
    font-family: var(--elbe-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--theme-text);
    margin: 0 0 8px;
}

.ct-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 6px 0;
    border-bottom: 1px solid var(--elbe-line);
}

    .ct-item:last-of-type { border-bottom: 0; }

.ct-ico {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--theme-wash-10);
    color: var(--elbe-brass-text);
    display: grid;
    place-items: center;
    font-size: 15px;
}

.ct-k {
    font-size: 10.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--theme-text-muted);
    margin-bottom: 2px;
}

.ct-v {
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--theme-text);
    word-break: break-word;
}

    .ct-v a { color: var(--theme-text); text-decoration: none; }
    .ct-v a:hover { color: var(--elbe-brass-text); }

.ct-social-h {
    font-size: 10.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--theme-text-muted);
    margin: 10px 0 7px;
}

.ct-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--elbe-line);
    font-size: 12px;
    line-height: 1.5;
    color: var(--theme-text-muted);
}

    .ct-note i { color: var(--elbe-brass-text); }

/* The form itself. */
.ct-card {
    background: var(--theme-card-grad);
    border: 1px solid var(--elbe-line);
    border-top: 3px solid var(--theme-brass);
    border-radius: var(--elbe-r);
    box-shadow: var(--elbe-shadow);
    padding: 16px 20px 14px;
}

.ct-card-h {
    font-family: var(--elbe-serif);
    font-size: 19px;
    font-weight: 700;
    color: var(--theme-text);
    margin: 0 0 8px;
}

.ct-card .form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-text-muted);
    margin-bottom: 1px;
}

.ct-card .form-control {
    min-height: 36px;
    font-size: 14px;
}

.ct-card textarea.form-control { min-height: 72px; }

.ct-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--elbe-line);
}

.ct-captcha { display: flex; align-items: center; gap: 10px; }

    .ct-captcha .form-control { max-width: 110px; }

.ct-send { min-height: 40px; padding: 8px 26px; font-size: 14px; font-weight: 600; }

@media (max-width: 880px) {
    .ct-grid { grid-template-columns: 1fr; }
    .ct-wrap { padding: 32px 16px 46px; }
    .ct-card { padding: 20px; }
    .ct-send { flex: 1; }
}

/*  Same shape as the moon beside it, but an anchor: no underline, and the
    colour said again so the browser's link colour does not win. */
a.pub-moon { text-decoration: none; color: var(--theme-text-muted); }
a.pub-moon:hover { color: var(--theme-text); }