/*
Theme Name: CMBC Sailing
Description: Child theme of Sailing Adventure for the Cambridge Motor Boat Club. Royal blue (#2E3192) on white: swaps the parent palette for a family of tints and shades of the club blue, uses the club serif/sans fonts, and replaces the demo header, banners and footer with club versions.
Author: Cambridge Motor Boat Club
Template: sailing-adventure
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: cmbc-sailing
*/

/*
 * Palette: royal blue #2E3192 on white. All colours come from the theme.json presets:
 *   navy = Royal Blue #2E3192 (primary)   navy-deep = Deep Blue #1F2266   harbour = Bright Blue #4B50B8
 *   sky = Blue Tint #C7C9EC               panel-deep = Soft Blue #DDDFF5   panel = Pale Blue #EEF0FA
 *   sand = Blue Mist #F7F7FD              ink = #1A1C2E   muted = #4A4D63   line = Line Grey #DCDDE3
 * The parent style.css hard-codes its palette in --sa-* variables; point them at the presets.
 */
:root {
    --sa-white: var(--wp--preset--color--white);
    --sa-bg: var(--wp--preset--color--white);
    --sa-panel: var(--wp--preset--color--panel);
    --sa-panel-2: var(--wp--preset--color--panel-deep);
    --sa-navy: var(--wp--preset--color--navy);
    --sa-navy-deep: var(--wp--preset--color--navy-deep);
    --sa-harbour: var(--wp--preset--color--harbour);
    --sa-sky: var(--wp--preset--color--sky);
    --sa-ink: var(--wp--preset--color--ink);
    --sa-muted: var(--wp--preset--color--muted);
    --sa-line: var(--wp--preset--color--line);
    --sa-line-light: var(--wp--preset--color--line-light);
    --sa-display: var(--wp--preset--font-family--club-serif);
    --sa-body: var(--wp--preset--font-family--club-serif);
    --cmbc-sans: var(--wp--preset--font-family--club-sans);
    --cmbc-on-blue: var(--wp--preset--color--white);
    --cmbc-on-blue-soft: var(--wp--preset--color--sky);
}

body {
    background: var(--wp--preset--color--white);
    background-image: none;
    color: var(--wp--preset--color--ink);
    line-height: 1.55;
}

a { color: var(--wp--preset--color--navy); }
a:hover { color: var(--wp--preset--color--navy-deep); }
.wp-block-post-content a:not(.wp-block-button__link) { text-decoration: underline; text-underline-offset: .15em; }
.wp-block-button__link { text-decoration: none !important; font-family: var(--cmbc-sans); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--wp--preset--color--harbour); outline-offset: 3px; }
.cmbc-header :where(a, button):focus-visible, .cmbc-footer a:focus-visible, .cmbc-hero a:focus-visible, .cmbc-banner a:focus-visible { outline-color: var(--cmbc-on-blue); }

/* Buttons: parent outline style hovers to a warm grey; use the pale blue instead */
.wp-block-button.is-style-sa-outline .wp-block-button__link { color: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); background: transparent; }
.wp-block-button.is-style-sa-outline .wp-block-button__link:hover { background: var(--wp--preset--color--panel); color: var(--wp--preset--color--navy-deep); border-color: var(--wp--preset--color--navy-deep); }

/* ---------- Header ---------- */
.cmbc-header { background: var(--wp--preset--color--navy); color: var(--cmbc-on-blue); }
.cmbc-brand { gap: 2px; }
.cmbc-wordmark, .cmbc-wordmark a {
    margin: 0; color: var(--cmbc-on-blue) !important; text-decoration: none;
    font-family: var(--wp--preset--font-family--club-serif);
    font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 600; letter-spacing: .01em; line-height: 1.2;
}
.cmbc-wordmark a:hover { text-decoration: underline; }
.cmbc-place-line {
    margin: 0 !important; color: var(--cmbc-on-blue-soft);
    font-family: var(--cmbc-sans); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
}
.sa-header-wrap .wp-block-navigation { font-family: var(--cmbc-sans); font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; }
/* Nav: one continuous pill, no per-item tiles */
.sa-header-wrap .wp-block-navigation .wp-block-navigation__container {
    background: rgba(255, 255, 255, .10) !important; border-color: var(--wp--preset--color--line-light);
}
.sa-header-wrap .wp-block-navigation .wp-block-navigation-item { background: transparent !important; }
.sa-header-wrap .wp-block-navigation .wp-block-navigation-item__content { padding: 8px 14px; color: var(--cmbc-on-blue); }
.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: var(--wp--preset--color--white); color: var(--wp--preset--color--navy);
}
.sa-header-wrap .is-menu-open .wp-block-navigation-item__content { color: var(--cmbc-on-blue); }
.sa-header-wrap .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--navy); }
.cmbc-loginout { margin: 0; font-family: var(--cmbc-sans); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.cmbc-loginout a {
    display: inline-block; padding: 9px 16px; border-radius: 999px; text-decoration: none;
    border: 1px solid var(--cmbc-on-blue); color: var(--cmbc-on-blue) !important;
}
.cmbc-loginout a:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy) !important; }
.home .sa-header-wrap { position: sticky !important; background: var(--wp--preset--color--navy) !important; }

/* Stripe under the banners (blue tints of the primary) */
.cmbc-waterline {
    display: block; height: .55rem; margin-top: 0 !important; margin-bottom: 0 !important;
    background:
        linear-gradient(var(--wp--preset--color--harbour), var(--wp--preset--color--harbour)) 0 0 / 100% 3px no-repeat,
        linear-gradient(var(--wp--preset--color--sky), var(--wp--preset--color--sky)) 0 3px / 100% 2px no-repeat;
    background-color: var(--wp--preset--color--panel);
}
.cmbc-front .wp-block-post-content > .cmbc-hero { margin-top: 0 !important; }
.cmbc-front .wp-block-post-content > .cmbc-waterline + * { margin-top: clamp(28px, 4vw, 48px) !important; }

/* ---------- Banners ---------- */
.cmbc-banner, .cmbc-hero { color: var(--cmbc-on-blue); }
.cmbc-banner h1, .cmbc-hero h1 { color: var(--cmbc-on-blue) !important; }
.cmbc-banner .cmbc-marker {
    margin: 0; color: var(--cmbc-on-blue-soft); font-family: var(--cmbc-sans);
    font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
.cmbc-hero .cmbc-kicker {
    margin: 0 0 .45rem; font-family: var(--cmbc-sans); font-size: .8rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--cmbc-on-blue-soft);
}
.cmbc-hero .cmbc-motto { margin: .15rem 0 1rem; font-size: clamp(1.4rem, 3.2vw, 1.95rem); font-weight: 600; line-height: 1.25; color: var(--cmbc-on-blue); }
.cmbc-hero .cmbc-lede { font-size: 1.2rem; color: var(--wp--preset--color--panel); }

/* ---------- Content ---------- */
.wp-block-post-content h2 { color: var(--wp--preset--color--navy); }
.cmbc-lede { font-size: 1.15rem; }
.cmbc-crosslinks, .cmbc-note { margin-top: 1.6rem !important; padding-top: .85rem; border-top: 1px solid var(--wp--preset--color--line); }
.cmbc-note { color: var(--wp--preset--color--muted); font-size: .95rem; }
.cmbc-availability { padding: .7rem .95rem; background: var(--wp--preset--color--panel); border-left: 4px solid var(--wp--preset--color--navy); }
.cmbc-emails, .cmbc-facts { list-style: none; padding-left: 0; }
.cmbc-emails li { margin: .35rem 0; }
.cmbc-card {
    background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-top: 4px solid var(--wp--preset--color--navy);
    border-radius: 12px; padding: 1.1rem 1.25rem;
}
.cmbc-card h2, .cmbc-card h3 { margin-top: 0; }
.cmbc-fact h2 { margin: 0 0 .25rem; }
.cmbc-address { font-style: normal; }
.cmbc-members-note { background: var(--wp--preset--color--panel); border-left: 4px solid var(--wp--preset--color--harbour); padding: .7rem .95rem; }

/* ---------- Footer ---------- */
.cmbc-footer { background: var(--wp--preset--color--navy-deep); color: var(--cmbc-on-blue); font-family: var(--cmbc-sans); font-size: .92rem; border-top: 4px solid var(--wp--preset--color--harbour); }
.cmbc-footer p { margin: .2rem 0; color: var(--cmbc-on-blue); }
.cmbc-footer a { color: var(--cmbc-on-blue); text-decoration: underline; text-underline-offset: .15em; }
.cmbc-footer a:hover { color: var(--wp--preset--color--sky); }
.cmbc-footer .cmbc-footer-name { font-family: var(--wp--preset--font-family--club-serif); font-size: 1.2rem; font-weight: 600; color: var(--cmbc-on-blue); }

/* Front page: side gutter for the text column on narrow screens */
@media (max-width: 800px) {
    .cmbc-front .wp-block-post-content > *:not(.alignfull) {
        margin-left: var(--sa-gutter) !important;
        margin-right: var(--sa-gutter) !important;
    }
}

/* ---------- Home: photo banner with the intro text below it in the white area ---------- */
.cmbc-front .wp-block-post-content > .cmbc-hero-photo { margin-top: 0 !important; margin-bottom: 0 !important; }
.cmbc-front .wp-block-post-content > .cmbc-hero-photo img {
    display: block; width: 100%; max-width: 100%; height: clamp(240px, 40vw, 560px) !important;
    object-fit: cover; object-position: center 62%;
}
@media (max-width: 600px) {
    .cmbc-front .wp-block-post-content > .cmbc-hero-photo img { height: clamp(220px, 62vw, 320px) !important; object-position: 30% 70%; }
}
.cmbc-intro .cmbc-kicker {
    margin: 0 0 .45rem; font-family: var(--cmbc-sans); font-size: .8rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--navy);
}
.cmbc-intro h1 { margin: 0 0 .2rem; color: var(--wp--preset--color--navy-deep); }
.cmbc-intro .cmbc-motto { margin: .15rem 0 1rem; font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 600; line-height: 1.25; color: var(--wp--preset--color--navy); }
.cmbc-intro .cmbc-lede { font-size: 1.2rem; color: var(--wp--preset--color--ink); }

/* ---------- Home: white club logo over the top-left of the photo banner (no badge, soft shadow) ---------- */
.cmbc-front .wp-block-post-content { position: relative; }
.cmbc-front .wp-block-post-content > .cmbc-banner-logo {
    position: absolute; z-index: 2;
    top: clamp(14px, 2.4vw, 32px);
    left: max(var(--sa-gutter), calc((100% - 1320px) / 2 + var(--sa-gutter)));
    width: clamp(72px, 9vw, 130px); max-width: none;
    margin: 0 !important;
    filter: drop-shadow(0 2px 5px rgba(15, 17, 51, .55)) drop-shadow(0 0 1px rgba(15, 17, 51, .45));
    pointer-events: none;
}
.cmbc-front .wp-block-post-content > .cmbc-banner-logo img { display: block; width: 100%; height: auto; }
.cmbc-front .wp-block-post-content > .cmbc-banner-logo + .cmbc-hero-photo { margin-top: 0 !important; }