/*

    Theme Name: Vertical Pursuit
    Theme URI: https://verticalpursuit.org
    Author: House Of Scribes
    Author URI: https://houseofscribes.co.nz
    Version: 1.0.1
    Description: A minimal WordPress child theme built for the House Of Scribes ecosystem.
    Template: houseofscribes


    Contents
    * 01. Base
    * 02. Global
    * 03. Layout
    * 04. Utilities
    * 05. Typography
    * 06. Buttons
    * 07. Header
    * 08. Footer
    * 09. Components
    * 10. Forms
    * 11. Blocks
    * 12. Shortcodes
    * 13. Accessibility
*/




/* 01. Base */
/* -------------------------------------------- */

/* Root */
:root {

    /* Variables */
    --header-height: 124.95px;
    --button-height: 48.39px;

    /* Widths */
    --max-width: 1200px;
    --fixed-width: 740px;

    /* Spacing */
    --spacer: 10px;
    --padding: 25px;
    --margin: 40px;
    --gutter: 60px;
    --gap: 80px;
    --row: 180px;
      
    /* Colour */
    --primary: #f27422;
    --secondary: #f27422;
    --tertiary: #f27422;

    --background: #0c0c0c;
    --text: #ececec;

    --overlay: 60%;
    --gradient: linear-gradient(180deg, rgb(15, 33, 38, 1) 70%, rgb(0, 64, 82, 0) 70%);
    --box-shadow: 0 0 20px 0px rgba(235, 227, 224, 0.05);

    /* Typography */
    --heading: "helvetica-neue-lt-pro-cond", sans-serif;
    --body: "Inter", sans-serif;

    --bold: 600;
    --regular: 400;
    --thin: 300;

    --letter-spacing-wide: 0.15em;
    --letter-spacing-regular: -0.03em;
    --letter-spacing-close: -0.04em;

    --line-height-heading: 0.9;
    --line-height-body: 1.4;

    /* Perfect Fifth */
    --h1: 9.301rem;
    --h2: 7.594rem;
    --h3: 5.063rem;
    --h4: 3.375rem;
    --h5: 2.25rem;
    --h6: 1.5rem;
    --p: 1rem;

    /* Buttons */
    --button-weight: var(--bold);
    --button-padding-vertical: 12px;
    --button-padding-horizontal: 36px;
    --button-border-width: 1px;
    --button-border-style: solid;
    --button-border-radius: 3px;
    --button-border-opacity: 50%;
}

/* Tablet: the parent theme's Perfect Fourth, so headings fit the narrower two-column rows */
@media screen and (max-width: 1200px) {

    :root {
        --h1: 5.61rem;
        --h2: 4.209rem;
        --h3: 3.157rem;
        --h4: 2.369rem;
    }

}

@media screen and (max-width: 768px) {

    :root {

    /* Variables */
    --header-height: 85px;
    --button-height: 50.63px;

    /* Major Third */
    --h1: 3.815rem;
    --h2: 3.052rem;
    --h3: 2.441rem;
    --h4: 1.953rem;
    --h5: 1rem;
    --h6: 1.25rem;
    --p: 1rem;

    /* Spacing */
    /* --spacer: 10px; */
    /* --padding: 25px; */
    --margin: 30px;
    --gutter: 30px;
    --gap: 30px;
    --row: 120px;

    }
    
}

@media screen and (max-width: 430px) {

    :root {
        --h1: 3.215rem;
    }

}



/* 02. Global */
/* -------------------------------------------- */

html {
    font-size: 100%;
}

@media screen and (max-width: 768px) {
    html {
        font-size: 110%;
    }
}

* {
    font-family: inherit;
}



/* 03. Layout */
/* -------------------------------------------- */

/* Layout */
.wp-block-column:not(.swiper-slide):not(header.header .wp-block-column) {
    flex: 1 1 50%;
}

.wp-block-column:first-child:not(:last-child):not(.swiper-slide):not(header.header .wp-block-column) { /* use last-child and first-child because last-of-type and first-of-type break when .cards are used with <a> tags */
    flex: 0 0 60%;
}

/* Tablet: a row's columns sit side by side only while each has room for half a reading width (--fixed-width / 2); narrower, they stack, as on phones (two columns of 200px read badly). Rows from the editor and a posts section's heading + button row; not cards, sliders or the product's gallery | details */
@media screen and (min-width: 769px) and (max-width: 1200px) {
    main .wp-block-group:not(.posts):not(.product) > .wp-block-columns,
    main .posts > .wp-block-columns:first-child {
        flex-wrap: wrap;
    }

    main .wp-block-group:not(.posts):not(.product) > .wp-block-columns > .wp-block-column:not(.swiper-slide):not(.card),
    main .posts > .wp-block-columns:first-child > .wp-block-column:not(.swiper-slide):not(.card) {
        flex: 1 1 calc(var(--fixed-width) / 2);
    }

    /* "Reverse on mobile" rows stack in reverse here too: wrapping in reverse puts the second column on top once they stack (side by side, the order is unchanged) */
    main .wp-block-group:not(.posts):not(.product) > .wp-block-columns.is-reversed {
        flex-wrap: wrap-reverse;
    }
}



/* 04. Utilities */
/* -------------------------------------------- */

/* Width — everywhere but the shop (.woocommerce-page: shop, product, cart, checkout, account): headings and text in a single column are narrower and centred, for reading */
body:not(.woocommerce-page) .wp-block-column:only-child .is-fixed-width h1,
body:not(.woocommerce-page) .wp-block-column:only-child h2,
body:not(.woocommerce-page) .wp-block-column:only-child h3 {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
body:not(.woocommerce-page) .wp-block-column:only-child p,
body:not(.woocommerce-page) .wp-block-column:only-child ol,
body:not(.woocommerce-page) .wp-block-column:only-child ul {
    max-width: var(--fixed-width);
    margin-left: auto;
    margin-right: auto;
}

/* Background */
.has-background:not(header.header .wp-block-group):not(footer.footer .wp-block-group) {
    border-radius: 0;
}

/* Overlay */
header .wp-block-group::after {
    border-radius: 0 !important;
}



/* 05. Typography */
/* -------------------------------------------- */

/* Headings */
h1,
h2,
h3,
h4 {
    font-weight: 900;
    text-transform: uppercase;
}

/* A word too long for its line breaks at a syllable, with a hyphen, not at any letter (phones and narrow columns) */
h1,
h2,
h3,
h4,
h5,
h6 {
    hyphens: auto;
}

h5 {
    font-family: var(--body);
    font-size: var(--p);
    font-weight: var(--thin);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);


    padding-bottom: var(--spacer);

    color: var(--text);
    border-bottom: var(--button-border-width) var(--button-border-style) color-mix(in srgb, var(--primary) var(--button-border-opacity), transparent);
}

.wp-block-column:not(header.header .wp-block-column) > h5 {
    margin-bottom: var(--padding) !important;
}

/* Underline */
strong {
    /* font-weight: var(--regular); */
    background: linear-gradient(to top, rgba(242, 116, 34, 65%) 40%, transparent 0%);
    padding: 0px 2px 1px 2px;
}

.has-background.is-inverted strong {
    background: linear-gradient(to top, rgba(242, 116, 34, 80%) 40%, transparent 0%);
}


/* 06. Buttons */
/* -------------------------------------------- */

@media screen and (max-width: 768px) {
    .wp-element-button {
        width: 100%;
    }
}

/* Each button keeps its label on one line; when a row of 1 or 2 buttons hasn't room for them all, a button moves to the next line instead of squeezing its label (only a label wider than the line itself wraps). On phones each one fills its line. Rows of 3 or more are left to the parent, which makes them one line you swipe */
main .wp-block-buttons:not(:has(> .wp-block-button:nth-of-type(3))) {
    flex-wrap: wrap;
}

main .wp-block-buttons:not(:has(> .wp-block-button:nth-of-type(3))) > .wp-block-button {
    flex: 0 1 max-content;
}

@media screen and (max-width: 768px) {
    main .wp-block-buttons:not(:has(> .wp-block-button:nth-of-type(3))) > .wp-block-button {
        flex-grow: 1;
    }
}

/* Focus: which part of a cropped photo stays in view, when the subject isn't in the middle (a class on the Image block, on the figure in a slider, or on a Group with a background photo; !important only to beat the background's inline centre) */
.is-focus-top img {
    object-position: center top;
}

.has-background.is-focus-top {
    background-position: center top !important;
}

.is-focus-bottom img {
    object-position: center bottom;
}

/* Mosaic: one large photo beside two stacked (a Columns block with the is-mosaic class, three image columns). The two small photos keep one shape and set the height; the large one fills both rows, so the sides always line up */
main .wp-block-columns.is-mosaic {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--margin);
}

main .wp-block-columns.is-mosaic > .wp-block-column:first-child {
    position: relative;
    grid-row: span 2;
}

main .wp-block-columns.is-mosaic .wp-block-image {
    margin: 0;
}

main .wp-block-columns.is-mosaic > .wp-block-column:first-child .wp-block-image {
    position: absolute;
    inset: 0;
}

main .wp-block-columns.is-mosaic > .wp-block-column:not(:first-child) img {
    height: auto;
    aspect-ratio: 3 / 2;
}

/* Mosaic on phones: same shape, with the small gap so the photos stay as big as they can */
@media screen and (max-width: 768px) {
    main .wp-block-columns.is-mosaic {
        gap: var(--spacer);
    }
}



/* 07. Header */
/* -------------------------------------------- */

/* Header  */
header.header .wp-block-group {
    border-radius: 0;
}

header.header .wp-block-group.navigation .wp-block-columns .wp-block-column {
    flex: unset;
}

header.header .wp-block-group.navigation.has-background .wp-block-columns {
    padding-top: var(--spacer);
    padding-bottom: var(--spacer);
}

/* Logo */
header.header .wp-block-group.navigation .wp-block-site-logo a svg {
    width: 80px;
}

header.header .wp-block-group.navigation .wp-block-site-logo a svg path {
    fill: var(--primary);
}

@media screen and (max-width: 768px) {
    header.header .wp-block-group.navigation .wp-block-site-logo a svg {
        width: auto;
        height: var(--button-height)
    }
}


/* Buttons and the menu button: the same gap as buttons in one buttons block */
header.header .wp-block-group.navigation .wp-block-columns .wp-block-column:last-of-type {
    gap: var(--spacer);
}

/* Cart: the cart icon and the number of items side by side (base.css centres a lone icon over its button) */
header.header .wp-block-group.navigation .header-cart {
    display: inline-flex;
    align-items: center;
    gap: var(--spacer);
}

header.header .wp-block-group.navigation .header-cart i {
    position: static;
    transform: none;
    line-height: inherit;
}

/* Phones and tablets (the theme's 992px): the two text buttons hide, so the cart and menu buttons fit on one line (with them, the buttons wrap onto two lines below about 905px) */
@media screen and (max-width: 992px) {
    header.header .wp-block-group.navigation .wp-block-columns .wp-block-column:last-of-type .wp-block-buttons:nth-of-type(-n+2) {
        display: none;
    }
}

/* "Start your pursuit" (the header's second button) hidden for now — remove this to bring it back */
header.header .wp-block-group.navigation .wp-block-columns .wp-block-column:last-of-type .wp-block-buttons:nth-of-type(2) {
    display: none;
}

/* Toggle */
header.header .wp-block-group.navigation .wp-block-button .toggle {
    gap: 12px;
    
    border: var(--button-border-width) var(--button-border-style) color-mix(in srgb, var(--text) var(--button-border-opacity), transparent);
}

header.header .wp-block-group.navigation .wp-block-button .toggle.active .line:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 5px);
}

header.header .wp-block-group.navigation .wp-block-button .toggle.active .line:nth-child(2) {
    transform: rotate(45deg) translate(-4px, -4px);
}

/* Flyout */
header.header .wp-block-group.flyout {
    width: 60vw;
}

@media screen and (max-width: 1300px) {
    header.header .wp-block-group.flyout {
        width: 80vw;
    }
}

@media screen and (max-width: 768px) {
    header.header .wp-block-group.flyout {
        width: 100vw;
    }
}

/* Menus */
header.header .wp-block-group.flyout .wp-block-columns .wp-block-column:first-of-type {
    height: auto;
}

header.header .wp-block-group.flyout .wp-block-columns .wp-block-column > nav > ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

header.header .wp-block-group.flyout .wp-block-columns .wp-block-column ul li a,
header.header .wp-block-group.flyout .wp-block-columns .wp-block-column:first-of-type ul li a {
    font-family: var(--heading);
    font-size: var(--h2);
    font-weight: 900;
    text-transform: uppercase;
}

/* Menu: it sits in the flyout's first column, which the parent keeps narrow to leave room for the close button. Here the list starts below the close button instead, so every item has the full width and stays on one line */
header.header .wp-block-group.flyout .wp-block-columns .wp-block-column:first-of-type {
    padding-right: 0;
}

header.header .wp-block-group.flyout .wp-block-columns .wp-block-column:first-of-type nav {
    margin-top: calc(var(--button-height) + var(--spacer));
}

/* The bottom menu (the email): looks like an h6 (base.css's headings), not uppercase */
header.header .wp-block-group.flyout .wp-block-columns .wp-block-column:last-of-type ul li a {
    font-family: var(--heading);
    font-size: var(--h6);
    font-weight: var(--regular);
    letter-spacing: var(--letter-spacing-close);
    line-height: var(--line-height-heading);
    text-transform: none;
}

/* Submenu */
header.header .wp-block-group.flyout .wp-block-columns .wp-block-column ul li.menu-item-has-children > a {
    display: flex;
    align-items: center;
}

header.header .wp-block-group.flyout .wp-block-columns .wp-block-column ul li.menu-item-has-children > a::after {
    margin-top: -22px;
    padding-left: 10px;
}

@media screen and (max-width: 768px) {
    header.header .wp-block-group.flyout .wp-block-columns .wp-block-column ul li.menu-item-has-children > a::after {
        margin-top: -8px;
    }
}

header.header .wp-block-group.flyout .wp-block-columns .wp-block-column ul li ul.sub-menu li a {
    font-size: var(--h4);
}

/* Action */
header.header .wp-block-group.action {
    position: fixed;
    top: 0;
    right: 0;
    width: calc(100vw - (var(--gutter) * 2));
    height: calc(100vh - (var(--gutter) * 2));
    height: calc(100svh - (var(--gutter) * 2));

    /* padding: var(--gutter); */

    transition: var(--menu);

    z-index: 99999;

    pointer-events: none;
    transform: translateX(calc(var(--gutter) * -1)) translateY(100vh);

    gap: 0;
}

header.header .wp-block-group.action.active {
    pointer-events: auto;
    transform: translateX(calc(var(--gutter) * -1)) translateY(var(--gutter));
}

@media screen and (max-width: 768px) {
    header.header .wp-block-group.action {
        width: 100vw;
        height: 100vh;
        height: 100svh;

        transform: translateX(0) translateY(100vh);
    }

    header.header .wp-block-group.action.active {
        transform: translateX(0) translateY(0);
    }
}

header.header .wp-block-group.action .wp-block-columns {
    display: block;

    min-width: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;

    overflow-y: scroll !important;
}

header.header .wp-block-group.action .wp-block-columns .wp-block-column {
    min-width: 100%; 
    min-height: 100%;
    padding: var(--margin);
}

header.header .wp-block-group.action .wp-block-columns .wp-block-column.card:hover {
    scale: 1;
}

header.header .wp-block-group.action .wp-block-columns .wp-block-column > *:not(:last-child) {
    margin-bottom: var(--spacer);
}

header.header .wp-block-group.action .wp-block-columns .wp-block-column .wp-block-buttons {
    margin-bottom: var(--padding);
}

header.header .wp-block-group.action .wp-block-columns .wp-block-column .wpcf7 {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;

    margin-top: var(--padding);
}



/* 08. Footer */
/* -------------------------------------------- */

footer.footer .wp-block-group {
    background: transparent;
    background-image: url("/wp-content/uploads/branding/footer.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;

    padding-top: calc(var(--row) * 1.5); /* For the footer img */
    padding-bottom: var(--margin);
}

footer.footer .wp-block-column:first-child {
    flex: 5 !important;
}

/* Tablet (769–1200px): a footer row of three or more columns doesn't fit side by side, so the first (the sign-up) takes the whole row and the rest share the row below */
@media screen and (min-width: 769px) and (max-width: 1200px) {
    footer.footer .wp-block-group .wp-block-columns:has(> .wp-block-column:nth-child(3)) {
        flex-wrap: wrap;
        row-gap: var(--margin);
    }

    /* The full-width sign-up gets a line underneath, the same line and distance as the one above it */
    footer.footer .wp-block-group .wp-block-columns:has(> .wp-block-column:nth-child(3)) > .wp-block-column:first-child {
        flex: 0 0 100% !important;
        padding-bottom: var(--margin);
        border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--text) var(--border-opacity), transparent);
    }
}

@media screen and (max-width: 768px) {
    footer.footer .wp-block-group {
        gap: calc(var(--row) / 2) !important;
        text-align: center;
    }
    footer.footer .wp-block-group .wp-block-columns {
        gap: calc(var(--row) / 2) !important;
    }
    footer.footer .wp-block-group .wp-block-columns:last-of-type {
        gap: var(--spacer) !important;
    }
    footer.footer .wp-block-group .wp-block-columns .wp-block-column {
        justify-content: center;
    }
}

footer.footer .wp-block-group .wp-block-columns:first-child .wp-block-column {
    justify-content: center;
}

/* Logo */
footer.footer .wp-block-group .wp-block-site-logo a img {
    width: 420px;
    max-width: 100%;
}


/* 09. Components */
/* -------------------------------------------- */

/* Shop rules start with .woocommerce-page: the parent's woocommerce.css loads after this file, so an equally specific rule there would win */

/* Store grid on phones and small tablets: as many cards per row as fit at a third of a reading width each (one on a phone) */
@media screen and (max-width: 768px) {
    .woocommerce-page .products.is-layout-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--fixed-width) / 3)), 1fr));
    }
}

/* Cart on tablets: no Price column (Subtotal covers it, as on phones), so the product's name has room */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .woocommerce-page .shop_table.cart .product-price {
        display: none;
    }
}

/* Cart on phones: the image and remove on the first line, the product's name on its own full-width line, quantity and subtotal under it */
@media screen and (max-width: 768px) {
    .woocommerce-page .shop_table.cart .product-thumbnail { grid-area: 1 / 1; }
    .woocommerce-page .shop_table.cart .product-remove    { grid-area: 1 / 3; align-self: start; }
    .woocommerce-page .shop_table.cart .product-name      { grid-area: 2 / 1 / 3 / 4; }
    .woocommerce-page .shop_table.cart .product-quantity  { grid-area: 3 / 1 / 4 / 3; }
    .woocommerce-page .shop_table.cart .product-subtotal  { grid-area: 3 / 3; }
}




/* 10. Forms */
/* -------------------------------------------- */




/* 11. Blocks */
/* -------------------------------------------- */

.wp-block-column:not(header.header .wp-block-column) > h5 {
    margin-bottom: var(--spacer);
}



/* 12. Elements */
/* -------------------------------------------- */

/* Home */
.home header.hero .wp-block-group {
    background: linear-gradient(0deg, var(--background) 0%, var(--background) 15%, rgba(0, 0, 0, 0) 100%), url(/wp-content/uploads/branding/home.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
}

.home .podcast .embed {
    aspect-ratio: 1 / 1;
    padding-top: 100% !important;
}


/* Single */


/* Product: photos take the narrower column, details the wider one */
@media screen and (min-width: 769px) {
    .single-product header.hero .wp-block-group.product > .wp-block-columns > .wp-block-column:first-child:not(:last-child) {
        flex: 1 1 50%;
    }

    .single-product header.hero .wp-block-group.product > .wp-block-columns > .wp-block-column.summary {
        flex: 0 0 60%;
    }
}


/* Books */
.book-template-default header.hero .wp-block-group {
    background-position: center 90% !important;
}


/* Hero */


/* Featured */

/* Gallery */
.gallery-swiper figure {
    aspect-ratio: 1 / 1;
}

/* Cards */
main .card:hover {
    border-color: var(--primary);
}

main .card:hover h1,
main .card:hover h2,
main .card:hover h3,
main .card:hover h4,
main .card:hover h5,
main .card:hover p {
    transition: color var(--hover);
    color: var(--primary);
}

.wireframe {
  background-repeat: no-repeat;
  background-size: 350%; 
}

.wireframe .card {
    background: transparent;
}

@media screen and (max-width: 768px) {
    .wireframe {
        background-size: cover;
    }
}

/* Posts */


/* Inverted */
body.post-type-archive-podcast,
body.page-id-224,
body.page-id-232 {
   --background: #FFFFFF;
   --text: #000000;
   --border-opacity: 50%;
}




/* 13. Accessibility */
/* -------------------------------------------- */