/*
Theme Name: Sailing Adventure
Theme URI: https://blockwpthemes.com/product/sailing-adventure/
Author: stacydolan
Author URI: https://blockwpthemes.com/
Description: Sailing Adventure is a calm, coastal block theme built for charter companies, sailing schools, boat rental fleets, harbour tour operators and anyone whose business starts at a dock. A full bleed hero over open water carries the navigation on a translucent pill, and below it the page runs on a tinted sand wash with rounded white cards and a deep navy footer, so photography of boats, crews and coastlines does the talking. Ready made patterns cover a fleet grid with photographs, chips, specifications and half day rates, an expandable list of the questions asked before every booking, and a logbook query loop, alongside styled banners for pages, posts, archives and search. Full site editing puts every colour, font size and spacing step in the editor, the palette runs from sand and sky to harbour navy, and the typography pairs Archivo headlines with Inter body text. The theme is fully responsive from wide desktop down to small phones, supports right to left languages, is translation ready and keeps markup accessible with visible focus outlines and reduced motion support.
Version: 1.0
Requires at least: 6.5
Requires PHP: 7.4
Tested up to: 7.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: sailing-adventure
Tags: portfolio, blog, one-column, news, two-columns, custom-colors, custom-logo, sticky-post, threaded-comments, right-sidebar, left-sidebar, grid-layout, custom-background, rtl-language-support, featured-images, wide-blocks, editor-style, full-site-editing, block-patterns, block-styles, template-editing, translation-ready
*/

:root {
    --sa-white: #FFFFFF;
    --sa-bg: #FBFBFA;
    --sa-panel: #EFEFEC;
    --sa-panel-2: #E7E7E2;
    --sa-navy: #12283D;
    --sa-navy-deep: #0D1E2E;
    --sa-harbour: #1B4A63;
    --sa-sky: #BCD8E9;
    --sa-ink: #18212A;
    --sa-muted: #727A81;
    --sa-line: #E2E2DD;
    --sa-line-light: rgba(255, 255, 255, .16);

    --sa-display: var(--wp--preset--font-family--archivo, Archivo, sans-serif);
    --sa-body: var(--wp--preset--font-family--inter, Inter, sans-serif);
    --sa-mono: var(--wp--preset--font-family--dm-mono, monospace);

    --sa-r-hero: 22px;
    --sa-r-lg: 18px;
    --sa-r-md: 12px;
    --sa-r-pill: 999px;

    /* the canvas is 1320px wide with a 24px gutter, which leaves the reference
       300px of clear space either side once the viewport reaches 1920px */
    --sa-gutter: 24px;
    --sa-sect: clamp(64px, 6.2vw, 116px);
    --sa-ease: cubic-bezier(.2, .7, .3, 1);

    --sa-arrow-r-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312283D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
    --sa-arrow-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312283D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15M6 13.5l6 6 6-6'/%3E%3C/svg%3E");
}

@media (max-width: 480px) {
    :root {
        --sa-gutter: 18px;
    }
}

/* ============================================================
   BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

html:focus-within {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    font-family: var(--sa-body);
    color: var(--sa-ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--sa-bg);
    background-image:
        radial-gradient(1150px 640px at 6% 0%, rgba(151, 196, 224, .42), transparent 62%),
        radial-gradient(980px 600px at 98% 18%, rgba(176, 214, 203, .34), transparent 60%),
        radial-gradient(1100px 760px at 46% 96%, rgba(163, 190, 214, .34), transparent 64%),
        linear-gradient(180deg, #FBFBFA 0%, #F1F5F7 48%, #F9FAF8 100%);
    background-attachment: fixed;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(select):focus-visible,
:where(textarea):focus-visible,
:where(summary):focus-visible {
    outline: 2px solid var(--sa-navy);
    outline-offset: 3px;
    border-radius: 4px;
}

.sa-skip-link:focus {
    background: var(--sa-navy);
    color: var(--sa-white);
}

/* ============================================================
   NUMBERED SECTION HEAD  ·  02 / OUR FLEET · heading · side note
   ============================================================ */
.sa-numhead {
    display: grid;
    /* the heading column is capped at 700px but allowed to shrink, and the side
       note keeps a 260px floor — a fixed 700px middle column starves it into a
       one-word-per-line ribbon between 900px and 1160px */
    grid-template-columns: minmax(0, 190px) minmax(0, 700px) minmax(260px, 1fr);
    gap: 34px;
    align-items: start;
    margin-bottom: clamp(34px, 3.4vw, 60px);
}

.sa-numlabel {
    margin: 0;
    padding-top: 12px;
    font-family: var(--sa-display);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--sa-muted);
    white-space: nowrap;
}

.sa-numhead-side {
    padding-top: 10px;
}

.sa-lede {
    color: var(--sa-muted);
    max-width: 54ch;
    margin-inline: 0 auto;
}

@media (max-width: 900px) {
    .sa-numhead {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sa-numlabel,
    .sa-numhead-side {
        padding-top: 0;
    }
}

/* ============================================================
   BUTTONS AND LINKS
   ============================================================ */
.wp-block-button__link {
    transition: background-color .25s var(--sa-ease), color .25s var(--sa-ease), border-color .25s var(--sa-ease), transform .25s var(--sa-ease);
}

.wp-block-button.is-style-sa-white .wp-block-button__link {
    background-color: var(--sa-white);
    color: var(--sa-ink);
    border-color: var(--sa-white);
}

.wp-block-button.is-style-sa-white .wp-block-button__link:hover {
    background-color: #F2F2EF;
    color: var(--sa-ink);
}

.wp-block-button.is-style-sa-outline .wp-block-button__link {
    background-color: transparent;
    color: inherit;
    border-color: var(--sa-line);
}

.wp-block-button.is-style-sa-outline .wp-block-button__link:hover {
    background-color: var(--sa-navy);
    border-color: var(--sa-navy);
    color: var(--sa-white);
}

.wp-block-button.is-style-sa-outline-light .wp-block-button__link {
    background-color: transparent;
    color: var(--sa-white);
    border-color: var(--sa-line-light);
}

.wp-block-button.is-style-sa-outline-light .wp-block-button__link:hover {
    background-color: var(--sa-white);
    border-color: var(--sa-white);
    color: var(--sa-navy);
}

/* the hairline text link with a nudging arrow */
.wp-block-button.is-style-sa-link .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: transparent;
    color: var(--sa-ink);
    padding: 0 0 4px;
    border: 0;
    border-bottom: 1px solid var(--sa-line);
    border-radius: 0;
    font-size: 14.5px;
    font-weight: 500;
    transition: gap .25s var(--sa-ease), border-color .25s var(--sa-ease);
}

.wp-block-button.is-style-sa-link .wp-block-button__link::after {
    content: "";
    width: 14px;
    height: 14px;
    flex: none;
    background: var(--sa-arrow-r-ink) center / contain no-repeat;
}

.wp-block-button.is-style-sa-link .wp-block-button__link:hover {
    gap: 14px;
    border-bottom-color: var(--sa-navy);
    background: transparent;
    color: var(--sa-ink);
}

.wp-block-button.is-style-sa-small .wp-block-button__link {
    padding: 9px 18px;
    font-size: 13.5px;
}

/* ============================================================
   HEADER
   ============================================================ */
.sa-header-wrap {
    background: var(--sa-navy);
    color: var(--sa-white);
}

/* on the front page the bar rides over the hero photograph, as in the
   reference; the block position support writes position and top inline, so the
   override has to win on importance rather than specificity */
.home .sa-header-wrap {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
}

.sa-navbar {
    row-gap: 12px;
}

/* logo left, menu centred in the space that is left, button right. Auto side
   margins are used rather than flex:1, because core stretches the navigation's
   responsive container to 100% and the pill would stretch with it */
.sa-navbar > .wp-block-navigation {
    margin-inline: auto;
}

.sa-logo {
    margin: 0;
}

.sa-logo img {
    height: 37px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* the nav links sit inside a translucent pill */
.sa-header-wrap .wp-block-navigation .wp-block-navigation__container {
    align-items: center;
    gap: 2px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: var(--sa-r-pill);
    background: rgba(188, 216, 233, .34);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* core paints every item with `background-color: inherit`, which would repeat
   the translucent pill tint once per link and show seams between them */
.sa-header-wrap .wp-block-navigation .wp-block-navigation-item {
    background-color: transparent;
}

.sa-header-wrap .wp-block-navigation .wp-block-navigation-item__content {
    padding: 9px 17px;
    border-radius: var(--sa-r-pill);
    color: var(--sa-white);
    white-space: nowrap;
    transition: background-color .22s var(--sa-ease), color .22s var(--sa-ease);
}

.sa-header-wrap .wp-block-navigation .wp-block-navigation-item__content:hover,
.sa-header-wrap .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
    background: rgba(255, 255, 255, .9);
    color: var(--sa-navy);
}

/* Core flips the navigation out of overlay mode at 600px. The reference keeps
   the overlay until the pill no longer fits, so between 600px and 1024px the
   inline menu is hidden again and the hamburger is put back. */
@media (min-width: 600px) and (max-width: 1024px) {
    .sa-header-wrap .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }

    .sa-header-wrap .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: grid;
    }
}

/* white round hamburger */
@media (max-width: 1024px) {
    .sa-header-wrap .wp-block-navigation__responsive-container-open {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--sa-white);
        color: var(--sa-navy);
        display: grid;
        place-items: center;
    }

    .sa-header-wrap .wp-block-navigation__responsive-container-open svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }
}

.sa-header-wrap .wp-block-navigation__responsive-container-close {
    color: var(--sa-white);
}

.sa-header-wrap .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--sa-navy);
    padding: 26px var(--sa-gutter) 40px;
}

/* The bar justifies its menu to the right, and that justification is inherited
   by the overlay through core's --navigation-layout-* variables. Inside the
   overlay the links have to run full width from the leading edge instead. */
.sa-header-wrap .is-menu-open .wp-block-navigation__responsive-container-content {
    width: 100%;
    align-items: stretch;
    padding-top: 14px;
}

.sa-header-wrap .is-menu-open .wp-block-navigation__container {
    --navigation-layout-direction: column;
    --navigation-layout-justify: flex-start;
    --navigation-layout-align: stretch;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.sa-header-wrap .is-menu-open .wp-block-navigation-item,
.sa-header-wrap .is-menu-open .wp-block-page-list {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
}

.sa-header-wrap .is-menu-open .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    padding: 13px 4px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    font-family: var(--sa-display);
    font-size: 21px;
    white-space: normal;
}

.sa-header-wrap .wp-block-navigation__responsive-container-close {
    width: 42px;
    height: 42px;
}

.sa-header-wrap .is-menu-open .wp-block-navigation-item__content:hover {
    background: transparent;
    color: var(--sa-sky);
}

.sa-header-wrap .wp-block-navigation__submenu-container {
    background: var(--sa-white);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-r-md);
    padding: 6px;
    box-shadow: 0 26px 50px -34px rgba(18, 40, 61, .5);
}

.sa-header-wrap .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--sa-ink);
    padding: 8px 14px;
    border-radius: 8px;
    white-space: normal;
}

.sa-header-wrap .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: var(--sa-panel);
    color: var(--sa-navy);
}

.sa-header-cta .wp-block-button__link {
    background: var(--sa-navy);
    color: var(--sa-white);
}

.sa-header-cta .wp-block-button__link:hover {
    background: #1B3C58;
    color: var(--sa-white);
}

@media (max-width: 1024px) {
    /* the block library sets display:flex on .wp-block-buttons, so hiding the
       call to action needs more than one class */
    .sa-navbar .sa-header-cta {
        display: none;
    }

    /* the menu is a single hamburger now, so it sits on the trailing edge
       rather than floating in the middle of the bar */
    .sa-navbar > .wp-block-navigation {
        margin-inline: 0;
    }
}

/* ============================================================
   HERO
   ============================================================ */
.sa-hero .wp-block-cover {
    min-height: min(94vh, 860px);
    align-items: flex-end;
}

/* the reference fades the still from a light top to a dark foot, so the
   headline keeps contrast without dimming the whole photograph */
.sa-hero .wp-block-cover__background {
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(10, 28, 44, .38) 0%, rgba(10, 28, 44, .04) 30%, rgba(10, 28, 44, .1) 52%, rgba(10, 28, 44, .72) 100%);
}

.sa-hero-title {
    max-width: 19ch;
    /* constrained layout centres any child narrower than the content width;
       the headline has to stay on the leading edge instead */
    margin-inline: 0 auto !important;
    color: var(--sa-white);
    text-transform: uppercase;
    line-height: 1.02;
    letter-spacing: -.026em;
    font-weight: 700;
}

.sa-hero-title em {
    font-style: normal;
    font-weight: 300;
    color: rgba(255, 255, 255, .52);
}

.sa-hero-bottom {
    align-items: flex-end;
    row-gap: 22px;
}

.sa-hero-note {
    max-width: 58ch;
    font-size: 13.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .9);
}

.sa-explore .wp-block-button__link {
    width: 104px;
    height: 104px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    text-align: center;
    border-radius: 50%;
    background: var(--sa-white);
    color: var(--sa-navy);
    font-family: var(--sa-display);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: transform .35s cubic-bezier(.34, 1.3, .5, 1);
}

.sa-explore .wp-block-button__link::before {
    content: "";
    width: 22px;
    height: 22px;
    background: var(--sa-arrow-d) center / contain no-repeat;
}

.sa-explore .wp-block-button__link:hover {
    background: var(--sa-white);
    color: var(--sa-navy);
    transform: scale(1.06);
}

/* ============================================================
   FLEET CARDS
   ============================================================ */
.sa-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-r-lg);
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: box-shadow .35s var(--sa-ease), transform .35s var(--sa-ease);
}

.sa-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 46px -32px rgba(18, 40, 61, .42);
}

.sa-card-media-wrap {
    position: relative;
}

.sa-card-media {
    margin: 0;
    overflow: hidden;
}

.sa-card-media img {
    width: 100%;
    transition: transform .7s var(--sa-ease);
}

.sa-card:hover .sa-card-media img {
    transform: scale(1.05);
}

.sa-chip {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    margin: 0;
    padding: 6px 13px;
    border-radius: var(--sa-r-pill);
    background: rgba(255, 255, 255, .94);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--sa-ink);
}

.sa-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.sa-card-body p {
    color: var(--sa-muted);
}

.sa-specs {
    gap: 7px !important;
}

.sa-spec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 11px;
    border-radius: var(--sa-r-pill);
    background: var(--sa-panel);
    font-size: 12px;
    color: #4B555E;
}

.sa-spec::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: none;
    background: var(--sa-spec-icon) center / contain no-repeat;
}

.sa-spec--length {
    --sa-spec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B555E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.4' y='8.4' width='19.2' height='7.2' rx='1.6'/%3E%3Cpath d='M7 8.4v3M11 8.4v4.4M15 8.4v3M19 8.4v4.4'/%3E%3C/svg%3E");
}

.sa-spec--guests {
    --sa-spec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B555E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.4' cy='8.4' r='3.6'/%3E%3Cpath d='M2.8 20.2a6.6 6.6 0 0 1 13.2 0M16.2 5.2a3.6 3.6 0 0 1 0 6.6M17.6 14.6a6.6 6.6 0 0 1 3.6 5.6'/%3E%3C/svg%3E");
}

.sa-spec--sail {
    --sa-spec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B555E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6v14M12 3.4C8.6 6.6 6.2 11 5.2 16.6H12M12 5.4c2.4 2.6 4.2 6.6 4.9 11.2H12M2.6 19.6h18.8l-2.4 2.2H5z'/%3E%3C/svg%3E");
}

.sa-spec--wind {
    --sa-spec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B555E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5h10.2a2.8 2.8 0 1 0-2.8-2.8M3 13h14a3 3 0 1 1-3 3M3 17.5h6.4a2.4 2.4 0 1 1-2.4 2.4'/%3E%3C/svg%3E");
}

.sa-spec--moon {
    --sa-spec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B555E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.4A8.6 8.6 0 0 1 9.6 4 8.8 8.8 0 1 0 20 14.4z'/%3E%3C/svg%3E");
}

.sa-spec--knot {
    --sa-spec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B555E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.4 15.6a4.4 4.4 0 1 1 0-7.2c3 2.1 4.2 2.1 7.2 0a4.4 4.4 0 1 1 0 7.2c-3-2.1-4.2-2.1-7.2 0z'/%3E%3C/svg%3E");
}

/* core writes `.is-layout-flex > :is(*, div){margin:0}` for every flex
   container, so pushing the footer down needs a heavier selector */
.sa-card .sa-card-body > .sa-card-foot {
    margin-top: auto;
}

.sa-card-foot {
    padding-top: 15px;
    border-top: 1px solid var(--sa-line);
    align-items: center;
}

.sa-price {
    margin: 0;
    font-family: var(--sa-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--sa-ink);
}

.sa-price em {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: var(--sa-muted);
}

/* ============================================================
   FAQ
   ============================================================ */
.sa-faq-row {
    align-items: flex-start;
}

.sa-faq-side img {
    border-radius: var(--sa-r-lg);
}

.sa-faq .wp-block-details {
    border-bottom: 1px solid var(--sa-line);
    padding: 0;
}

.sa-faq .wp-block-details summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 20px 54px 20px 0;
    font-family: var(--sa-display);
    font-size: clamp(16.5px, 1.3vw, 20px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--sa-ink);
}

.sa-faq .wp-block-details summary::-webkit-details-marker {
    display: none;
}

.sa-faq .wp-block-details summary::marker {
    content: "";
}

.sa-faq .wp-block-details summary::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--sa-line);
    background-color: transparent;
    background-image:
        linear-gradient(var(--sa-navy), var(--sa-navy)),
        linear-gradient(var(--sa-navy), var(--sa-navy));
    background-size: 13px 1.5px, 1.5px 13px;
    background-position: center, center;
    background-repeat: no-repeat;
    transition: transform .3s var(--sa-ease), background-color .3s var(--sa-ease), border-color .3s var(--sa-ease);
}

.sa-faq .wp-block-details[open] summary::after {
    transform: rotate(45deg);
    background-color: var(--sa-navy);
    border-color: var(--sa-navy);
    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(#fff, #fff);
}

.sa-faq .wp-block-details p {
    margin: 0 0 22px;
    padding-right: 54px;
    max-width: 70ch;
    font-size: 14.5px;
    color: var(--sa-muted);
}

@media (max-width: 640px) {
    .sa-faq .wp-block-details p {
        padding-right: 0;
    }
}

/* ============================================================
   LOGBOOK / QUERY LOOPS
   ============================================================ */
/* a fixed columnCount grid gets no media queries from core, so the loop is
   stepped down by hand — auto-fill was leaving a fourth empty track whenever
   the query returned fewer posts than the canvas had room for */
@media (max-width: 1024px) {
    .sa-posts .wp-block-post-template.is-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .sa-posts .wp-block-post-template.is-layout-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sa-posts .wp-block-post {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--sa-r-lg);
    transition: box-shadow .35s var(--sa-ease), transform .35s var(--sa-ease);
}

.sa-posts .wp-block-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 46px -32px rgba(18, 40, 61, .42);
}

.sa-post-thumb {
    margin: 0;
    overflow: hidden;
    border-radius: var(--sa-r-lg) var(--sa-r-lg) 0 0;
}

.sa-post-thumb img {
    width: 100%;
    border-radius: var(--sa-r-lg) var(--sa-r-lg) 0 0;
    transition: transform .7s var(--sa-ease);
}

.sa-posts .wp-block-post:hover .sa-post-thumb img {
    transform: scale(1.05);
}

.sa-post-card {
    /* the card takes the height the featured image leaves, rather than 100% of
       the whole grid item, which would push its foot past the clipped edge */
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 22px;
    margin-top: 0 !important;
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-r-lg);
    background: rgba(255, 255, 255, .86);
}

/* posts without a featured image keep a full rounded card of their own */
.sa-post-thumb + .sa-post-card {
    border-top: 0;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

.sa-post-meta {
    font-size: 12px;
    color: var(--sa-muted);
}

/* grid rows stretch every card to the tallest in the row, so the excerpt takes
   the slack and the read link is pushed onto the card's baseline. The `>` and
   the extra class beat core's `.is-layout-flex > :is(*, div){margin:0}`. */
.sa-posts .sa-post-card > .wp-block-post-excerpt {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.sa-post-card .wp-block-post-excerpt__excerpt {
    font-size: 14px;
    color: var(--sa-muted);
}

.sa-readmore .wp-block-post-excerpt__more-text {
    margin-top: auto;
    padding-top: 4px;
}

.sa-readmore .wp-block-post-excerpt__more-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--sa-line);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--sa-ink);
    transition: gap .25s var(--sa-ease), border-color .25s var(--sa-ease);
}

.sa-readmore .wp-block-post-excerpt__more-link::after {
    content: "";
    width: 14px;
    height: 14px;
    flex: none;
    background: var(--sa-arrow-r-ink) center / contain no-repeat;
}

.sa-readmore .wp-block-post-excerpt__more-link:hover {
    gap: 14px;
    border-bottom-color: var(--sa-navy);
    color: var(--sa-ink);
}

/* pagination */
.sa-pagination {
    border-top: 1px solid var(--sa-line);
    padding-top: 26px;
    font-size: 14px;
}

.sa-pagination .wp-block-query-pagination-numbers a,
.sa-pagination .wp-block-query-pagination-numbers .current,
.sa-pagination .wp-block-query-pagination-previous,
.sa-pagination .wp-block-query-pagination-next {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-r-pill);
    background: rgba(255, 255, 255, .8);
    color: var(--sa-ink);
    transition: background-color .25s var(--sa-ease), color .25s var(--sa-ease), border-color .25s var(--sa-ease);
}

.sa-pagination .wp-block-query-pagination-numbers .current,
.sa-pagination a:hover {
    background: var(--sa-navy);
    border-color: var(--sa-navy);
    color: var(--sa-white);
}

/* ============================================================
   PAGE BANNERS
   ============================================================ */
.sa-page-banner.wp-block-cover {
    min-height: clamp(280px, 34vw, 420px);
    align-items: flex-end;
}

.sa-page-banner .wp-block-cover__background {
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(10, 28, 44, .68) 0%, rgba(10, 28, 44, .52) 44%, rgba(10, 28, 44, .86) 100%);
}

.sa-markerline {
    align-items: baseline;
    gap: 10px !important;
}

.sa-marker {
    margin: 0;
    font-family: var(--sa-mono);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sa-sky);
}

.sa-marker-sub {
    margin: 0;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.sa-page-banner h1,
.sa-page-banner .wp-block-query-title,
.sa-page-banner .wp-block-post-title {
    color: var(--sa-white);
}

.sa-crumbs,
.sa-crumbs a {
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
}

.sa-crumbs a:hover {
    color: var(--sa-white);
}

.sa-page-banner .wp-block-post-terms,
.sa-page-banner .wp-block-post-date,
.sa-page-banner .wp-block-post-author-name {
    color: rgba(255, 255, 255, .72);
}

.sa-page-banner .wp-block-search__input {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: var(--sa-white);
}

.sa-page-banner .wp-block-search__input::placeholder {
    color: rgba(255, 255, 255, .5);
}

/* ============================================================
   ARTICLE / PAGE CONTENT
   ============================================================ */
.sa-article .wp-block-post-content > * {
    margin-block: 0 26px;
}

.sa-article-hero img {
    border-radius: var(--sa-r-hero);
    width: 100%;
}

.sa-article h2,
.sa-article h3,
.sa-article h4 {
    margin-top: 40px;
}

.sa-article a:not(.wp-block-button__link),
.sa-page a:not(.wp-block-button__link) {
    color: var(--sa-harbour);
    border-bottom: 1px solid rgba(27, 74, 99, .3);
}

.sa-article a:not(.wp-block-button__link):hover,
.sa-page a:not(.wp-block-button__link):hover {
    border-bottom-color: var(--sa-harbour);
}

.sa-post-nav a {
    font-weight: 500;
    color: var(--sa-ink);
}

.sa-post-nav a:hover {
    color: var(--sa-harbour);
}

/* comments */
.sa-comments {
    border-top: 1px solid var(--sa-line);
    padding-top: clamp(34px, 3.4vw, 60px);
}

.sa-comments .wp-block-comment-author-name a {
    color: var(--sa-ink);
}

.sa-comments .wp-block-comment-content p {
    color: var(--sa-muted);
}

.sa-comments .wp-block-comment-date,
.sa-comments .wp-block-comment-edit-link,
.sa-comments .wp-block-comment-reply-link {
    color: var(--sa-muted);
}

.sa-comments .wp-block-avatar img {
    border-radius: 50%;
}

/* forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    padding: 12px 16px;
    background: var(--sa-white);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-r-md);
    color: var(--sa-ink);
    font-family: var(--sa-body);
    font-size: 15px;
}

textarea {
    min-height: 160px;
}

.comment-form label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sa-ink);
}

.comment-form p {
    margin-bottom: 18px;
}

.comment-form .form-submit input[type="submit"],
.wp-block-search__button,
.wp-block-post-comments-form .submit {
    width: auto;
    padding: 13px 26px;
    background: var(--sa-navy);
    border: 1px solid var(--sa-navy);
    border-radius: var(--sa-r-pill);
    color: var(--sa-white);
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .25s var(--sa-ease), border-color .25s var(--sa-ease);
}

.comment-form .form-submit input[type="submit"]:hover,
.wp-block-search__button:hover {
    background: var(--sa-harbour);
    border-color: var(--sa-harbour);
}

.wp-block-search__input {
    border-radius: var(--sa-r-pill);
}

.wp-block-search .wp-block-search__button {
    margin-left: 8px;
}

/* ============================================================
   404 AND NO RESULTS
   ============================================================ */
.sa-err-code {
    font-family: var(--sa-display);
    font-weight: 700;
    line-height: .86;
    letter-spacing: -.05em;
    color: var(--sa-navy);
    opacity: .14;
}

.sa-err-code em {
    font-style: normal;
    color: var(--sa-harbour);
    opacity: .8;
}

.sa-noresults {
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-r-lg);
    padding: clamp(28px, 3vw, 48px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.sa-footer {
    background: linear-gradient(180deg, #0E2233 0%, #0A1622 100%);
    color: rgba(255, 255, 255, .7);
}

.sa-footer p,
.sa-footer li,
.sa-footer a {
    color: rgba(255, 255, 255, .7);
}

.sa-footer a:hover {
    color: var(--sa-white);
}

.sa-footer h2,
.sa-footer h3 {
    color: var(--sa-white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.4;
}

.sa-footer-logo {
    margin: 0;
}

.sa-footer-logo img {
    height: 37px;
    width: auto;
    object-fit: contain;
}

.sa-footer-about {
    max-width: 34ch;
    margin-inline: 0 auto;
    font-size: 14.5px;
}

/* the link stacks: 10px between rows and nothing else */
.sa-footer-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    font-size: 14.5px;
}

.sa-footer-list li {
    margin: 0;
}

.sa-footer-contact p,
.sa-footer-contact a,
.sa-footer-hours p {
    font-size: 14.5px;
    margin: 0;
}

.sa-contact-item {
    align-items: flex-start;
    gap: 11px !important;
    flex-wrap: nowrap !important;
}

.sa-contact-item .wp-block-image {
    margin: 0;
    line-height: 0;
    flex: none;
}

.sa-contact-item img {
    width: 16px;
    height: 16px;
    margin-top: 5px;
    opacity: .6;
}

.sa-footer-bar {
    border-top: 1px solid rgba(255, 255, 255, .13);
    font-size: 12.5px;
}

.sa-footer-bar p {
    margin: 0;
    font-size: 12.5px;
}

.sa-footer .wp-block-social-links .wp-social-link {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    transition: background-color .25s var(--sa-ease);
}

.sa-footer .wp-block-social-links .wp-social-link a {
    color: rgba(255, 255, 255, .8);
}

.sa-footer .wp-block-social-links .wp-social-link:hover {
    background: var(--sa-white);
}

.sa-footer .wp-block-social-links .wp-social-link:hover a {
    color: var(--sa-navy);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 781px) {
    .sa-hero .wp-block-cover {
        min-height: min(84vh, 640px);
    }

    .sa-hero-title {
        max-width: none;
    }

    .sa-explore .wp-block-button__link {
        width: 88px;
        height: 88px;
    }

    .sa-card {
        height: auto;
    }

    .sa-footer-about {
        max-width: none;
    }
}

@media (max-width: 600px) {
    .sa-card-foot {
        row-gap: 10px;
    }

    .sa-footer-bar {
        justify-content: center;
        text-align: center;
    }
}

/* ============================================================
   MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}