/*
 * Homepage 2026 — page-home-2026.php + header-home2026.php + footer-home2026.php
 *
 * Loaded on that template only (inc/home-2026.php). Everything is scoped under
 * body.h26 so it can't leak into the rest of the site, and resets the global
 * main.css rules (bulleted <li>, FoundersGrotesk <p>, PraterSansOT headings)
 * that would otherwise apply here.
 *
 * Figma: Zeus Street Greek | New Homepage 2026 (desktop 17:199, mobile 67:1404,
 * dropdowns 107:109 / 107:136, mobile menu 116:95 / 116:148).
 */

/* ---------- Fonts ----------
 * fonts/gill-sans-h26/ are copies of fonts/gill-sans/ with the vertical metrics
 * unified. The originals disagree: Windows uses OS/2 "win" (ascent 1960 /
 * descent 492 of 2048) but iOS, macOS and Android use "hhea" (1397 / 651), so
 * with line-height: 1 capitals sat ~3px high on phones (ORDER NOW in its pill)
 * while looking centred on Windows. ascent-override can't fix it everywhere —
 * Safari ignores it — so hhea and typo were set to the win values in the files.
 */

@font-face {
    font-family: "Gill Sans";
    src: url("../fonts/gill-sans-h26/GillSans.woff2") format("woff2"),
         url("../fonts/gill-sans-h26/GillSans.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gill Sans";
    src: url("../fonts/gill-sans-h26/GillSans-Bold.woff2") format("woff2"),
         url("../fonts/gill-sans-h26/GillSans-Bold.woff") format("woff");
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gill Sans Ultra Bold Condensed";
    src: url("../fonts/gill-sans-ultra-bold/GillSans-UltraBoldCondensed.woff2") format("woff2"),
         url("../fonts/gill-sans-ultra-bold/GillSans-UltraBoldCondensed.woff") format("woff");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- Tokens ---------- */

.h26 {
    --h26-blue: #0037ff;
    --h26-blue-dark: #002bcc;
    --h26-white: #fff;
    --h26-black: #000;
    --h26-grey-dark: #2b2b2b;
    --h26-grey-storm: #e6e6e6;
    --h26-sans: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    --h26-display: "Gill Sans Ultra Bold Condensed", "Gill Sans MT Std UltraBold Cond", Impact, sans-serif;
    --h26-header-top: 20px;

    background: var(--h26-white);
    font-family: var(--h26-sans);
}

.h26.admin-bar {
    --h26-header-top: 52px;
}

/* ---------- Resets for global main.css ---------- */

.h26 p,
.h26 h1,
.h26 h2,
.h26 h3 {
    margin: 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
}

.h26 ul {
    margin: 0;
    padding: 0;
}

.h26 ul li {
    padding: 0;
}

.h26 ul li:before {
    content: none;
}

.h26 a,
.h26 a:hover,
.h26 a:focus,
.h26 a:active {
    color: inherit;
}

.h26 button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* main.css styles every <footer> (margin, centring, black FoundersGrotesk links,
   transparent li colour, an !important orange hover and !important padding). */
.h26 footer.h26-footer {
    margin: 0;
    text-align: left;
    z-index: 0;
}

.h26 footer.h26-footer ul li {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.h26 footer.h26-footer a,
.h26 footer.h26-footer ul li a {
    color: var(--h26-white);
    font-family: var(--h26-sans);
}

.h26 footer.h26-footer a:hover,
.h26 footer.h26-footer a:focus,
.h26 footer.h26-footer a:active {
    color: var(--h26-white) !important;
}

.h26 a,
.h26 button {
    -webkit-tap-highlight-color: transparent;
}

.h26 :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.h26-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.h26-icon {
    display: block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* ---------- Buttons ---------- */

.h26 .h26-btn {
    /* Vertical padding as a variable so the text-box rule below can extend it.
       inline-block (not flex) so text-box trimming applies to the label. */
    --h26-btn-pad: 14px;
    display: inline-block;
    padding: var(--h26-btn-pad) 26px;
    text-align: center;
    border-radius: 999px;
    background: var(--h26-blue);
    color: var(--h26-white);
    font-family: var(--h26-sans);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.36px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.h26 .h26-btn:hover,
.h26 .h26-btn:focus-visible {
    background: var(--h26-blue-dark);
    color: var(--h26-white);
}

.h26 .h26-btn--white {
    background: var(--h26-white);
    color: var(--h26-blue);
}

.h26 .h26-btn--white:hover,
.h26 .h26-btn--white:focus-visible {
    background: var(--h26-grey-storm);
    color: var(--h26-blue);
}

.h26 .h26-btn--block {
    --h26-btn-pad: 17px; /* 18px label + 2 × 17px = 52px, as in Figma */
    width: 100%;
}

/* Where supported, trim the label to its capitals (as Figma does) so it is
   centred whatever the font metrics. Padding grows by the trimmed amount
   ((1 − cap height 0.682) / 2 ≈ 0.159em) so button heights don't change. */
@supports (text-box: trim-both cap alphabetic) {
    .h26 .h26-btn {
        text-box: trim-both cap alphabetic;
        padding-block: calc(var(--h26-btn-pad) + 0.159em);
    }
}

/* ---------- Header (desktop: floating pill over the hero) ---------- */

.h26-header {
    position: fixed;
    top: var(--h26-header-top);
    left: 50%;
    z-index: 1000;
    width: 760px;
    max-width: calc(100% - 32px);
    transform: translateX(-50%);
}

.h26-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 999px;
    background: var(--h26-white);
}

.h26-header__nav,
.h26-header__actions {
    display: flex;
    flex: 1 0 0;
    align-items: center;
    min-width: 0;
}

.h26-header__nav {
    gap: 4px;
}

.h26-header__actions {
    justify-content: flex-end;
    gap: 12px;
}

.h26 .h26-header__navlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px 10px 16px;
    border-radius: 999px;
    color: var(--h26-grey-dark);
    font-family: var(--h26-sans);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.36px;
    white-space: nowrap;
}

.h26 .h26-header__navlink:hover,
.h26 .h26-header__navlink[aria-expanded="true"] {
    color: var(--h26-blue);
}

.h26-header__navlink img {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.h26-header__navlink[aria-expanded="true"] img {
    transform: rotate(180deg);
}

.h26-header__navlink--app {
    padding: 10px 16px;
}

.h26-header__brand {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.h26-header__brand img {
    width: 34px;
    height: 57px;
}

.h26 .h26-header__burger {
    display: none;
    font-size: 28px;
    color: var(--h26-grey-dark);
}

/* ---------- Desktop dropdown panels ---------- */

.h26-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    gap: 32px;
    align-items: flex-start;
    padding: 32px;
    border-radius: 24px;
    background: var(--h26-blue);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    color: var(--h26-white);
}

.h26-panel:not([hidden]) {
    display: flex;
}

.h26-panel__col {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 196px;
}

.h26-panel__col--wide {
    width: 300px;
}

.h26 .h26-panel__heading {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.96px;
    text-transform: uppercase;
}

.h26-panel__promo {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.h26-panel__img {
    display: block;
    width: 100%;
    max-width: none;
    object-fit: cover;
}

.h26-panel__img--food {
    height: 240px;
}

.h26-panel__img--about {
    flex: 1 0 0;
    min-width: 0;
    height: 220px;
}

/* ---------- Link rows (dropdowns + mobile menu) ---------- */

.h26 .h26-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--h26-grey-storm);
    color: var(--h26-white);
    font-family: var(--h26-sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.28px;
}

/* Gill Sans has no arrow glyph; keep the fallback light like the Figma one. */
.h26-link__arrow {
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.h26 .h26-link:hover .h26-link__arrow,
.h26 .h26-link:focus-visible .h26-link__arrow {
    transform: translateX(4px);
}

.h26 .h26-link--promo {
    border-bottom: 0;
    font-size: 18px;
    letter-spacing: 0.36px;
}

/* ---------- Mobile menu ---------- */

.h26-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1001;
    overflow-y: auto;
    background: var(--h26-blue);
    color: var(--h26-white);
}

.h26-mobile-menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}

.h26-mobile-menu__top .h26-header__brand {
    width: 56px;
    height: 56px;
}

.h26-mobile-menu__top .h26-header__brand img {
    width: 26.4px;
    height: 44px;
}

.h26-mobile-menu__top .h26-header__actions {
    flex: 0 0 auto;
    gap: 8px;
}

.h26 .h26-mobile-menu__top .h26-header__burger {
    display: block;
    color: var(--h26-white);
}

.h26-mobile-menu__body {
    padding: 16px 16px 40px;
}

.h26-acc {
    border-bottom: 1px solid var(--h26-white);
}

.h26 .h26-acc__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 0;
    color: var(--h26-white);
    font-family: var(--h26-display);
    font-size: 38px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.57px;
    text-align: left;
    text-transform: uppercase;
}

.h26-acc__row .h26-icon {
    font-size: 32px;
    transition: transform 0.2s ease;
}

.h26-acc__row[aria-expanded="true"] .h26-icon {
    transform: rotate(180deg);
}

.h26 .h26-acc__row--link {
    border-bottom: 1px solid var(--h26-white);
}

.h26-acc__row--link .h26-icon {
    font-size: 28px;
}

.h26-acc__panel {
    padding-bottom: 24px;
}

.h26-acc__panel .h26-link {
    padding: 14px 0;
}

.h26 .h26-links--spaced {
    margin-top: 16px;
}

.h26-mobile-menu__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 8px 16px 32px;
}

.h26-mobile-menu__social {
    display: flex;
    gap: 24px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.12px;
    text-transform: uppercase;
}

.h26-menu-open {
    overflow: hidden;
}

/* ---------- Hero ---------- */

.h26-hero__img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1920 / 1080;
    object-fit: cover;
}

/* ---------- Menu teaser ---------- */

.h26-teaser {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 80px 24px 60px;
    background: var(--h26-grey-storm);
}

.h26 .h26-teaser__intro {
    max-width: 1013px;
    color: var(--h26-blue);
    font-family: var(--h26-display);
    font-size: clamp(40px, 4.45vw, 64px);
    line-height: 1;
    letter-spacing: -0.96px;
    text-align: center;
    text-transform: uppercase;
}

.h26-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 397px));
    justify-content: center;
    gap: 24px;
    width: 100%;
    max-width: 1248px;
}

.h26-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--h26-white);
}

.h26-card__img {
    display: block;
    width: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.h26-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px;
    text-align: center;
}

.h26 .h26-card__title {
    color: var(--h26-blue);
    font-family: var(--h26-display);
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.6px;
    text-transform: uppercase;
}

.h26 .h26-card__text {
    max-width: 341px;
    color: var(--h26-black);
    font-size: 16px;
    line-height: 1.5;
}

/* ---------- Footer ---------- */

.h26-footer {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 56px;
    overflow: hidden;
    /* !important: main.css forces footer padding with !important at ≤992px. */
    padding: 88px max(100px, calc((100% - 1240px) / 2)) 40px !important;
    background: var(--h26-blue);
    color: var(--h26-white);
}

.h26-footer__bolt {
    position: absolute;
    top: 0;
    right: -223px;
    width: 458px;
    height: 762px;
    max-width: none;
    pointer-events: none;
}

.h26-footer > :not(.h26-footer__bolt) {
    position: relative;
}

.h26-footer__brandline {
    display: block;
    width: 100%;
    max-width: 1240px;
    height: auto;
}

.h26-footer__brandline--mobile {
    display: none;
}

/* Link columns on the left, logo on the right (client request; Figma had the
   logo first). DOM order stays logo → columns so mobile stacks logo on top. */
.h26-footer__top {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    /* The bolt is pinned to the viewport edge but content is centred, so up to
       ~1620px wide the logo would run into it: nudge it in (90px at ≤1440px,
       0 by ~1620px, where it lines up with the brandline). */
    padding-right: clamp(0px, calc(810px - 50vw), 90px);
}

.h26-footer__logo img {
    display: block;
    width: 160px;
    height: 84.8px;
}

.h26-footer__columns {
    display: flex;
    gap: 80px;
}

.h26-footer__column ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.h26 .h26-footer__heading {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.12px;
    text-transform: uppercase;
}

.h26-footer__column a {
    font-size: 18px;
    line-height: 1.5;
    white-space: nowrap;
}

.h26-footer__column a:hover,
.h26-footer__legal a:hover {
    text-decoration: underline;
}

.h26-footer__legal {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 14px;
    line-height: normal;
}

/* ---------- Motion ----------
 * Scroll reveals use the site-wide WOW.js + animate.css (`wow fadeInUp` classes
 * in the templates, initialised in js/custom.js). Dropdowns and the mobile menu
 * fade up like the existing header's .order-dropdown.
 */

@keyframes h26-drop-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes h26-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.h26-panel:not([hidden]) {
    animation: h26-drop-in 0.3s ease both;
}

.h26-mobile-menu:not([hidden]) {
    animation: h26-fade-in 0.25s ease both;
}

.h26-acc__panel:not([hidden]) {
    animation: h26-drop-in 0.25s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .h26 .animated,
    .h26-panel:not([hidden]),
    .h26-mobile-menu:not([hidden]),
    .h26-acc__panel:not([hidden]) {
        animation: none !important;
    }
}

/* ---------- Tablet ---------- */

@media (max-width: 1199px) {
    .h26-footer__top {
        padding-right: 0;
        gap: 40px;
    }

    .h26-footer__columns {
        gap: 40px;
    }

    .h26-footer__bolt {
        display: none;
    }
}

/* ---------- Mobile (< 900px): sticky bar, burger menu, stacked content ---------- */

@media (max-width: 899px) {
    .h26 {
        --h26-header-top: 0px;
    }

    .h26.admin-bar {
        --h26-header-top: 32px;
    }

    .h26-header {
        position: sticky;
        left: auto;
        width: 100%;
        max-width: none;
        transform: none;
    }

    .h26-header__bar {
        padding: 12px 16px;
        transition: margin 0.25s ease, box-shadow 0.25s ease;
    }

    /* Once scrolled, float the bar off the screen edges like the desktop pill. */
    .h26-header.is-scrolled {
        top: calc(var(--h26-header-top) + 12px);
    }

    .h26-header.is-scrolled .h26-header__bar {
        margin: 0 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    .h26-header__nav,
    .h26-header__navlink--app,
    .h26-panel {
        display: none !important;
    }

    .h26-header__brand {
        width: 56px;
        height: 56px;
    }

    .h26-header__brand img {
        width: 26.4px;
        height: 44px;
    }

    .h26-header__actions {
        flex: 0 0 auto;
        gap: 8px;
    }

    .h26 .h26-header__burger {
        display: block;
    }

    .h26-teaser {
        padding: 48px 16px;
    }

    .h26 .h26-teaser__intro {
        font-size: 40px;
        line-height: 1.1;
        letter-spacing: 0;
    }

    .h26-cards {
        grid-template-columns: minmax(0, 560px);
    }

    .h26 .h26-card__title {
        font-size: 28px;
        letter-spacing: -0.42px;
    }

    .h26 .h26-btn--cta {
        --h26-btn-pad: 17px;
        width: 100%;
        max-width: 560px;
    }

    .h26-footer {
        gap: 32px;
        padding: 48px 16px 32px !important;
    }

    .h26-footer__brandline--desktop {
        display: none;
    }

    .h26-footer__brandline--mobile {
        display: block;
        max-width: 358px;
    }

    .h26-footer__top {
        flex-direction: column;
        gap: 32px;
    }

    .h26-footer__columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 179px));
        gap: 28px 0;
    }

    .h26-footer__legal {
        flex-direction: column;
        line-height: 1.5;
    }
}

/* WP admin bar is 46px tall at ≤782px, and stops being fixed at ≤600px. */
@media (max-width: 782px) {
    .h26.admin-bar {
        --h26-header-top: 46px;
    }
}

@media (max-width: 600px) {
    .h26.admin-bar {
        --h26-header-top: 0px;
    }
}