/*
Theme Name: Cantando Child
Theme URI: https://cantando.org
Template: extendable
Version: 1.0.23
Description: Cantando Music Festivals child theme. Logo-locked palette (raspberry, cyan, green, purple, cream, gold), Kaushan Script wordmark font, watercolour headers and parchment backgrounds. Extensible: add new headers and templates via the Site Editor without touching code.
Author: Steve Moore
Author URI: https://cantando.org
Text Domain: cantando-child
Tags: music, festival, watercolour, parchment, full-site-editing
License: GPL-2.0-or-later
*/

/* Kaushan Script — Cantando wordmark font */
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');

/* ------------------------------------------------------------------
   Base font size — bumps body text site-wide.
   Adjust --cantando-base-font-size to taste (e.g. 17px, 18px, 19px).
   ------------------------------------------------------------------ */
:root {
    --cantando-base-font-size: 18px;
}
html,
body,
.wp-site-blocks,
.wp-block-post-content,
.entry-content,
.wp-block-post-content p,
.wp-block-post-content li,
.wp-block-post-content td,
.wp-block-post-content th {
    font-size: var(--cantando-base-font-size);
}

/* ------------------------------------------------------------------
   Wordmark styling
   ------------------------------------------------------------------ */
.cantando-wordmark,
.wp-block-site-title a,
.has-kaushan-script-font-family {
    font-family: 'Kaushan Script', cursive !important;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------
   Block Style: Cream Card
   A solid cream panel for content that sits on wallpaper backgrounds.
   Keeps form fields, tables, and body text legible.
   ------------------------------------------------------------------ */
.is-style-cream-card {
    background-color: var(--wp--preset--color--cantando-cream) !important;
    border: 1px solid var(--wp--preset--color--cantando-cream-shadow);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(40, 37, 29, 0.08);
}

/* ------------------------------------------------------------------
   Block Style: Fade Wallpaper (25% opacity)
   Toggle on any Cover or Group block with a background image to
   drop it to 25% strength — useful when the image is too visually
   loud behind body content.
   ------------------------------------------------------------------ */
.is-style-fade-wallpaper {
    position: relative;
}
.is-style-fade-wallpaper::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--wp--preset--color--cantando-cream);
    opacity: 0.75;
    pointer-events: none;
    z-index: 0;
}
.is-style-fade-wallpaper > * {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------------
   Utility: watercolour header container
   Ensures the header images sit on cream with proper spacing.
   ------------------------------------------------------------------ */
.cantando-header {
    background-color: var(--wp--preset--color--cantando-cream);
    padding: 1.5rem 0 0.5rem;
    text-align: center;
}
.cantando-header img {
    max-width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ------------------------------------------------------------------
   Kadence button preservation
   The user's #511097 Kadence buttons are intentional — do not override.
   ------------------------------------------------------------------ */
/* (intentionally left blank) */

/* ------------------------------------------------------------------
   Homepage hero image
   Full-viewport-width, natural aspect ratio. No crop, no letterbox.
   The navy strip at the bottom of the image serves as the divider.
   ------------------------------------------------------------------ */
.cantando-hero-image,
.cantando-hero-image img {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    display: block;
    height: auto;
}
.cantando-hero-image {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ============================================================
   Cantando Page Heroes v3 — Injected Fixed Layer
   The parent theme (Extendable) fights any body/site-blocks background
   we set. Instead we inject a <div id="cantando-hero-layer"> at wp_body_open
   with position:fixed, z-index:-1, and paint the wallpaper on THAT element.
   Since we own the element and control its rules, no cascade can fight us.
   ============================================================ */

/* Default: fit wallpaper to ~96% of viewport (leaving a ~2% cream frame),
   centered, aspect ratio preserved. No cropping, no tiling.
   v1.0.12: start the hero layer below the sticky header (100px) so the
   nav bar isn't overlapping the wallpaper. The header itself has its
   own cream background above this. */
#cantando-hero-layer {
    position: fixed;
    top: 100px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #F5EFE2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 96% auto;
}

/* When the WordPress admin bar is visible, push the hero layer down
   another 32px (46px on mobile) to clear both bars. */
body.admin-bar #cantando-hero-layer {
    top: 132px;
}
@media (max-width: 782px) {
    body.admin-bar #cantando-hero-layer {
        top: 146px;
    }
}

/* Mobile: smaller header — shrink the top offset. */
@media (max-width: 782px) {
    #cantando-hero-layer {
        top: 70px;
    }
}

/* If the image is portrait-ish and would overflow vertically at 96% width,
   fall back to height-limited via contain. */
@supports (background-size: contain) {
    #cantando-hero-layer {
        background-size: min(96vw, calc(96vh * 3)) auto;
    }
}

/* Mobile: at narrow widths the 96%-width image becomes tiny — switch to
   cover so wallpaper still fills viewport. */
@media (max-width: 640px) {
    #cantando-hero-layer {
        background-size: cover !important;
        background-position: top center !important;
    }
}

/* Dashboard mode: wallpaper spans FULL viewport width, top-anchored, aspect
   ratio preserved. Height auto scales so button coordinates (as % of width)
   map to fixed spots on the art. Used for homepage + dashboard pages. */
body.cantando-hero-dashboard #cantando-hero-layer {
    background-size: 100% auto !important;
    background-position: top center !important;
}

@media (max-width: 640px) {
    body.cantando-hero-dashboard #cantando-hero-layer {
        background-size: 100% auto !important;
        background-position: top center !important;
    }
}

/* Tile mode: repeating pattern at native size. */
body.cantando-hero-tile #cantando-hero-layer {
    background-repeat: repeat;
    background-size: auto;
    background-position: top left;
}

/* ============================================================
   Kill parent theme's fills so our hero layer shows through.
   Extendable applies backgrounds at .wp-site-blocks and post/content
   wrappers; force them transparent site-wide on hero pages.
   ============================================================ */

body.has-cantando-hero,
body.has-cantando-hero .wp-site-blocks,
body.has-cantando-hero main,
body.has-cantando-hero .wp-block-post,
body.has-cantando-hero .wp-block-post-content,
body.has-cantando-hero .entry-content {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Content container: on non-home pages, a 75% cream translucent panel around
   the post-content so text stays readable over the wallpaper. */
body.has-cantando-hero:not(.is-cantando-home) .wp-block-post-content {
    background-color: rgba(245, 239, 226, 0.75) !important;
    padding: 2rem !important;
    border-radius: 4px;
}

/* Homepage: fully transparent, no panel — the composite art speaks alone. */
body.is-cantando-home .wp-block-post-content {
    background-color: transparent !important;
    padding: 0 !important;
}

/* Post-title styling (dark ink, centered, script font). Homepage hides it. */
body.has-cantando-hero .wp-block-post-title,
body.has-cantando-hero .cantando-page-title {
    color: #28251D !important;
    font-family: 'Kaushan Script', cursive;
    font-weight: 400;
    text-align: center;
    margin-top: 0;
    margin-bottom: 2rem;
}

/* v1.0.13 — Hide all page titles site-wide. User confirmed most pages
   have title duplicates in shortcodes; the rest they'll add manually.
   Applies to .wp-block-post-title (block theme) and .cantando-page-title
   (custom). Body class is-cantando-home already hid its own; broaden. */
.wp-block-post-title,
.cantando-page-title,
.entry-title {
    display: none !important;
}

/* Text readability on non-home hero pages. */
body.has-cantando-hero:not(.is-cantando-home) .wp-block-post-content h1,
body.has-cantando-hero:not(.is-cantando-home) .wp-block-post-content h2,
body.has-cantando-hero:not(.is-cantando-home) .wp-block-post-content h3,
body.has-cantando-hero:not(.is-cantando-home) .wp-block-post-content h4,
body.has-cantando-hero:not(.is-cantando-home) .wp-block-post-content h5,
body.has-cantando-hero:not(.is-cantando-home) .wp-block-post-content h6,
body.has-cantando-hero:not(.is-cantando-home) .wp-block-post-content p,
body.has-cantando-hero:not(.is-cantando-home) .wp-block-post-content li {
    color: #28251D !important;
}

/* ==================================================================
   Desktop-only widening
   Widen main content column on desktop viewports (>=1024px). Tablets
   and phones keep the parent theme's narrower defaults for readability.
   ================================================================== */
@media (min-width: 1024px) {
    :root {
        --wp--style--global--content-size: 1760px;
        --wp--style--global--wide-size: 1760px;
    }
    /* v1.0.10: cap the POST CONTENT wrapper only. v1.0.9 was too greedy
       (targeted main + all is-layout-constrained) which broke the nav
       block inside the header. Now we only touch elements that actually
       hold post content. */
    .wp-block-post-content.is-layout-constrained,
    .wp-block-post-content,
    .entry-content,
    .wp-block-post-content .alignwide {
        max-width: 1760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Header capped at same 1760px, centered. */
    header.wp-block-template-part .wp-block-group,
    header.wp-block-template-part .alignfull > .wp-block-group,
    header.wp-block-template-part > .wp-block-group {
        max-width: 1760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==================================================================
   v1.0.9 — Sticky header + hero top spacing
   ------------------------------------------------------------------
   User feedback:
   - "Please freeze the header bar. It is strange that it scrolls away."
   - "Can the images not go to the top of the screen so that the headers
      don't interfere?"

   Solution: pin the site header to the top with position:sticky, give
   it a solid cream background so scrolled content passes under it
   cleanly, and push the hero/main content down so it clears the header.
   ================================================================== */
header.wp-block-template-part {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    /* v1.0.10: no forced background-color — v1.0.9 hid the nav links
       because the color painted over the nav's own styling. Let the
       header's own template-part styling define the background. */
}

/* WordPress admin bar (32px on desktop) sits above sticky headers by
   default; nudge our header below it while logged-in users are browsing. */
body.admin-bar header.wp-block-template-part {
    top: 32px !important;
}
@media (max-width: 782px) {
    body.admin-bar header.wp-block-template-part {
        top: 46px !important;
    }
}

/* Give the main content a small top gutter so the hero art and page
   titles don't butt against the header edge ("images going to top"
   feedback). Target the post-content directly, NOT main, so we don't
   affect nav or other header/footer template parts. */
.wp-block-post-content {
    padding-top: 12px;
}

/* ==================================================================
   v1.0.9 — Button graphic sharpness
   ------------------------------------------------------------------
   User feedback: "Why are the graphics on the buttons grainy? They
   aren't grainy in the editing window."

   Cause: LiteSpeed serves auto-generated WebP variants of PNG uploads.
   When the source is a flat watercolour with sharp corners, WebP's
   chroma subsampling adds visible grain at the edges of the button
   art. Force GPU compositing + crisp edges rendering to fight it.
   If LiteSpeed's WebP conversion is still the culprit, exclude the
   /cantando-hover/ folder in LiteSpeed Cache → Image Optimization →
   Excludes.
   ================================================================== */
#hero-cover .wp-block-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

/* ==================================================================
   Hero button overlay — Image-block edition
   ------------------------------------------------------------------
   The four homepage buttons are Image blocks placed inside the
   #hero-cover Cover block. Each Image block has an HTML anchor of
   hero-btn-1 through hero-btn-4 (Register, Login, Edmonton, Whistler)
   and is linked to the corresponding destination page.

   Coordinates below place the row in the empty watercolour band
   between the "Cantando brings..." tagline and the "Outstanding
   Performances / Inspiring Clinics / Unforgettable Experiences /
   Beautiful Destinations" info strip baked into the hero image.

   Hover swap: each button's <img> src is the default (dark) state.
   On hover we swap to a CSS background image showing the hover
   (light/cream) state. Both files must be uploaded to the media
   library so the URLs below resolve.
   ================================================================== */
#hero-cover {
    position: relative;
}
#hero-cover .wp-block-cover__inner-container {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
}

/* v1.0.8: uniform button boxes, bottoms aligned on ONE horizontal line
   positioned just above the “Outstanding Performances” info strip that
   is baked into the hero image at roughly the 90% mark. */
#hero-cover .wp-block-image {
    position: absolute;
    margin: 0 !important;
    z-index: 2;
}

/* Coordinates — all bottoms flush at bottom:22% (above the info strip).
   Register/Login: width 21%, aspect 2.58:1 (short pill).
   Edmonton/Whistler: width 25%, aspect 4:3 (taller card — tops stick up).
   v1.0.11: reverted to v1.0.8 baseline. Only Whistler gets a
   background-position nudge so its location text doesn't get cropped. */
/* v1.0.17: equalize gaps between all four buttons.
   Widths: 21+21+25+25 = 92%. Four buttons → 3 inter-button gaps + 2 side
   margins. Set 2% gap between buttons, 1% side margin → total 8%. ✓ */
#hero-cover #hero-btn-1 { bottom: 22%; left:  1%; width: 21%; aspect-ratio: 2.58 / 1; }  /* Register  */
#hero-cover #hero-btn-2 { bottom: 22%; left: 24%; width: 21%; aspect-ratio: 2.58 / 1; }  /* Login     */
#hero-cover #hero-btn-3 { bottom: 22%; left: 47%; width: 25%; aspect-ratio: 4 / 3;    }  /* Edmonton  */
#hero-cover #hero-btn-4 { bottom: 22%; left: 74%; width: 25%; aspect-ratio: 4 / 3;    background-position: center bottom; }  /* Whistler */

/* --- v1.0.8: CSS paints defaults + hovers, cover mode, rounded corners.
   Files live in BOTH:
     /wp-content/uploads/cantando-hover/{name}.png    (FileZilla copies)
     /wp-content/uploads/2026/07/{name}.png           (Media Library copies)
   We reference cantando-hover/ because it’s the canonical location.

   Convention (do not invert):
     Register/Login: *-button.png = DARK purple (default), *-hover.png = LAVENDER.
     Edmonton/Whistler: *-button.png = CREAM (default),   *-hover.png = RASPBERRY/BLUE.
*/

/* Suppress the block’s inline <img> — CSS backgrounds do the drawing. */
#hero-cover .wp-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    opacity: 0;
}

/* Background: cover (v1.0.8 baseline — what the user liked). Whistler
   gets its own background-position above so its bottom (location) text
   is what stays in view. All other buttons stay center-cropped. */
#hero-cover .wp-block-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
}

/* Link overlay covers full box so clicks work anywhere. */
#hero-cover .wp-block-image a {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* Defaults. */
#hero-cover #hero-btn-1 {
    background-image: url('/wp-content/uploads/cantando-hover/register-button.png');
}
#hero-cover #hero-btn-2 {
    background-image: url('/wp-content/uploads/cantando-hover/login-button.png');
}
#hero-cover #hero-btn-3 {
    background-image: url('/wp-content/uploads/cantando-hover/edmonton-button.png');
}
#hero-cover #hero-btn-4 {
    background-image: url('/wp-content/uploads/cantando-hover/whistler-button.png');
}

/* Hovers. */
#hero-cover #hero-btn-1:hover {
    background-image: url('/wp-content/uploads/cantando-hover/register-hover.png');
}
#hero-cover #hero-btn-2:hover {
    background-image: url('/wp-content/uploads/cantando-hover/login-hover.png');
}
#hero-cover #hero-btn-3:hover {
    background-image: url('/wp-content/uploads/cantando-hover/edmonton-hover.png');
}
#hero-cover #hero-btn-4:hover {
    background-image: url('/wp-content/uploads/cantando-hover/whistler-hover.png');
}

/* v1.0.21 — Preload hover PNGs so the first hover is instant.
   Root cause of the visible delay: the browser only fetched the
   *-hover.png file the first time the cursor entered the button.
   By listing every hover URL in a zero-size ::after we force the
   browser to download and cache them on page load, so the :hover
   background swap above is instant every time.

   The pseudo-element is 0×0 and pushed off-screen; `content:` with
   multiple url() references is the widely-supported way to trigger
   image preloading purely from CSS (no HTML or JS change needed).
*/
#hero-cover::after {
    content:
        url('/wp-content/uploads/cantando-hover/register-hover.png')
        url('/wp-content/uploads/cantando-hover/login-hover.png')
        url('/wp-content/uploads/cantando-hover/edmonton-hover.png')
        url('/wp-content/uploads/cantando-hover/whistler-hover.png');
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}

/* ============================================================
   v1.0.23 — Festival banner labels: force WHITE text.

   Background: v1.0.22 tried `.cantando-festival-title.cantando-festival-title`
   with !important, but DevTools showed the color rule was still
   being struck through by the cascade. The winning rule was almost
   certainly `global-styles-inline-css` (theme.json) applying
   `color: var(--wp--preset--color--font-secondary)` to `h1..h6`,
   which was loaded AFTER cantando-child style.css.

   Fix: use even higher specificity (element type + doubled class +
   :where(:not(#\ ))) so the rule outranks any theme.json h3 rule
   regardless of load order. Also target the flex row above the
   schedule table (`.cantando-festival-actions`) in case the label
   is followed by a Kaushan-styled fragment. Placed at the very
   end of the stylesheet so it also wins any equal-specificity
   fight by cascade order.

   Backgrounds re-declared here so all three properties stay together.
*/
h3.cantando-festival-title.cantando-festival-title,
h3.cantando-festival-title.cantando-festival-title * {
    color: #FFFFFF !important;
}
h3.cantando-festival-title.cantando-festival-title--edmonton {
    background: #8B1538 !important;
}
h3.cantando-festival-title.cantando-festival-title--whistler {
    background: #1F3E7A !important;
}

/* Mobile fallback: below 782px, stack image buttons in normal flow
   below the hero (percent coordinates squeeze them together on
   narrow screens). */
@media (max-width: 782px) {
    #hero-cover .wp-block-image {
        position: static;
        display: block;
        width: 80% !important;
        margin: 0.75rem auto !important;
        top: auto !important;
        left: auto !important;
    }
    #hero-cover .wp-block-cover__inner-container {
        padding-bottom: 1rem;
    }
}

/* ============================================================
   v1.0.14 — Header logo + FSE Navigation ref 2603, footer stack
   Two size vars so the logos are easily adjustable later.
   Header: logo on the left, nav on the right, sticky at top.
   Footer: logo (bigger, centered) + Kaushan wordmark + social + copyright.
   ============================================================ */
:root {
    --cantando-header-logo-height: 110px;
    --cantando-footer-logo-height: 200px;
}

/* HEADER: full-width cream bar, content centered inside */
.cantando-header {
    background-color: var(--wp--preset--color--cantando-cream);
    padding: 0.75rem clamp(1rem, 3vw, 3rem) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box;
}
/* v1.0.17: kill the white strip above the header (parent-theme body
   margin/padding) and paint anything above the header cream so the
   header appears to reach the very top of the viewport. */
html, body {
    background-color: var(--wp--preset--color--cantando-cream) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.wp-site-blocks {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.wp-site-blocks > header:first-child,
.wp-site-blocks > .cantando-header:first-child {
    margin-top: 0 !important;
}
.cantando-header-logo,
.cantando-header-logo a,
.cantando-header-logo img {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
}
.cantando-header-logo img {
    height: var(--cantando-header-logo-height) !important;
    width: auto !important;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    display: block;
}
.cantando-header-logo a {
    display: block;
    line-height: 0;
}

/* Nav on the right side of the header */
.cantando-header-nav .wp-block-navigation__container {
    gap: 1.25rem;
}
.cantando-header-nav a.wp-block-navigation-item__content {
    color: #28251D;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 1.15rem;
}
.cantando-header-nav a.wp-block-navigation-item__content:hover {
    color: #511097;
}

/* v1.0.17: reserve full wallpaper height on hero pages so the footer
   always sits at (or below) the wallpaper's natural end — even when
   schedule bars are empty and content is short. Wallpapers are all
   the same size, so a single min-height works everywhere. */
.cantando-hero-page {
    min-height: 780px;
}
@media (max-width: 782px) {
    .cantando-hero-page {
        min-height: 620px;
    }
}

/* FOOTER: full-width cream bar, centered stack, compact */
.cantando-footer {
    background-color: var(--wp--preset--color--cantando-cream);
    padding: 1.25rem 1.5rem 1rem !important;
    text-align: center;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box;
}
.cantando-footer-logo img {
    height: var(--cantando-footer-logo-height);
    width: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    display: inline-block;
    margin: 0 auto;
}
.cantando-footer-wordmark {
    font-family: 'Kaushan Script', cursive !important;
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: #28251D;
    margin: 0.25rem 0 0.75rem;
}
.cantando-footer-social {
    margin-bottom: 0.5rem;
}
.cantando-footer-copyright {
    color: #6a5f52;
    font-size: 0.85rem;
    margin: 0;
}

/* v1.0.22 (superseded by v1.0.23 rules at end of file) */

/* v1.0.20: Plugin 38 "Bring a Friend" intro box.
   The plugin renders a purple gradient header with inline color:#fff on
   the outer <div>, but the <p> inside inherits ink color from the parent
   theme's .wp-block-post-content p rule (higher specificity than inline
   color on a parent). Force white directly on the <p>. */
.cantando-baf-wrap > div:first-child,
.cantando-baf-wrap > div:first-child p,
.cantando-baf-wrap > div:first-child * {
    color: #ffffff !important;
}

/* Mobile: stack header, shrink both logos */
@media (max-width: 782px) {
    :root {
        --cantando-header-logo-height: 70px;
        --cantando-footer-logo-height: 140px;
    }
    .cantando-header {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}