/*
Theme Name: The Warp
Theme URI: https://thewarp.org/
Author: The Warp
Description: An independent, minimal block theme for artist-led exhibitions and changing landing pages.
Version: 1.0.1
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: the-warp
*/

/* ======================================
   GLOBAL
====================================== */

:root {
    --warp-gutter: clamp(20px, 4vw, 70px);
    --warp-background: #f5f4ef;
    --warp-text: #171717;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--warp-background);
    color: var(--warp-text);
}

a {
    text-underline-offset: .2em;
}

/* ======================================
   GLOBAL HEADER
====================================== */

.warp-site-header {
    position: relative;
    z-index: 20;
    width: 100%;
    min-height: 0;
    height: auto;

    background: var(--warp-background);
    color: var(--warp-text);

    padding: 8px 32px !important;
    margin: 0 !important;

    box-sizing: border-box;
}

/* Logo */

.warp-site-header .wp-block-site-logo img {
    width: 280px !important;
    max-width: 100%;
    height: auto;
    filter: none !important;
}

/* Subtitle */

.warp-site-header p {
    color: var(--warp-text) !important;
    font-size: 14px;
    margin: 0;
}

/* Navigation */

.warp-site-header .wp-block-navigation {
    font-size: .9rem;
}

.warp-site-header a,
.warp-site-header .wp-block-navigation-item__content,
.warp-site-header .wp-block-site-title {
    color: var(--warp-text) !important;
}

/* Hamburger menu */

.warp-site-header
.wp-block-navigation__responsive-container-open {
    color: var(--warp-text) !important;
}

/* Expanded menu */

.warp-site-header
.wp-block-navigation__responsive-container.is-menu-open {
    background: var(--warp-background);
    color: var(--warp-text);
}

.warp-site-header
.wp-block-navigation__responsive-container.is-menu-open a,
.warp-site-header
.wp-block-navigation__responsive-container-close {
    color: var(--warp-text) !important;
}

/* ======================================
   HOMEPAGE LAYOUT
====================================== */

/* Remove default gap between header and main */

body.home .wp-site-blocks {
    --wp--style--block-gap: 0px;
}

body.home .wp-site-blocks > main {
    margin-block-start: 0 !important;
    padding-block-start: 0 !important;
}

body.home .warp-home-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Keep homepage header in normal flow */

body.home .warp-site-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    padding: 8px 32px !important;
}

/* ======================================
   FULLSCREEN HERO
====================================== */

.warp-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    margin-top: 0 !important;
}

.warp-hero.wp-block-cover {
    padding: var(--warp-gutter);
    align-items: flex-end;
}

.warp-hero .wp-block-cover__inner-container {
    width: 100%;
}

.warp-hero h1 {
    font-size: clamp(3.5rem, 8vw, 9rem);
    letter-spacing: -.055em;
    line-height: .95;
    margin: 0 0 .3em;
}

.warp-hero p {
    margin: .25em 0;
}

/* ======================================
   CONTENT SECTIONS
====================================== */

.warp-section {
    padding-block: clamp(40px, 6vw, 90px);
    padding-inline: var(--warp-gutter);
}

/* Smaller gap after hero */

body.home .warp-hero + .wp-block-group {
    padding-top: 40px !important;
    margin-top: 0 !important;
}

/* ======================================
   PROGRAMME
====================================== */

.warp-programme-row {
    border-top: 1px solid currentColor;
    padding-block: 1rem;
}

.warp-programme-row:last-child {
    border-bottom: 1px solid currentColor;
}

/* ======================================
   FOOTER
====================================== */

.warp-site-footer {
    padding: 30px var(--warp-gutter);
}

/* ======================================
   MOBILE
====================================== */

@media (max-width: 781px) {

    .warp-site-header,
    body.home .warp-site-header {
        padding: 8px 20px !important;
    }

    .warp-site-header .wp-block-site-logo img {
        width: 160px !important;
    }

    .warp-site-header p {
        display: none;
    }

    .warp-hero h1 {
        font-size: clamp(3rem, 13vw, 5rem);
    }

    .warp-programme-row {
        gap: .5rem !important;
    }

    .warp-section {
        padding-block: 32px;
    }
}