/*
Theme Name: The Sculpts Child
Theme URI: https://www.thesculpts.com
Description: Child theme for The Sculpts bespoke theme by Northern Contrast Ltd.
Author: Northern Contrast Ltd
Author URI: https://www.northerncontrast.com
Template: sculpts
Version: 1.0

-------------------------------------------------------------- */

/* Add custom style overrides below this line */

/* ------------------------------------------------------------------
   Image Cards Band — Text Background option
   ------------------------------------------------------------------ */

/* Shared base: per-line background strips via box-decoration-break */
.image-card-title-sticky h3[class*="text-bg-"] .title-bg-wrap,
.band-split-image .content-area-sticky h2[class*="text-bg-"] .title-bg-wrap {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0.2em 0.4em;
    line-height: 1.6;
}

/* White */
.image-card-title-sticky h3.text-bg-white .title-bg-wrap,
.band-split-image .content-area-sticky h2.text-bg-white .title-bg-wrap {
    background-color: #ffffff;
    color: #000;
}

/* Black */
.image-card-title-sticky h3.text-bg-black .title-bg-wrap,
.band-split-image .content-area-sticky h2.text-bg-black .title-bg-wrap {
    background-color: #1a1a1a;
    color: #fff;
}

/* Cream */
.image-card-title-sticky h3.text-bg-cream .title-bg-wrap,
.band-split-image .content-area-sticky h2.text-bg-cream .title-bg-wrap {
    background-color: #f5f2ed;
    color: #000;
}

/* Semi-transparent Dark */
.image-card-title-sticky h3.text-bg-semi-dark .title-bg-wrap,
.band-split-image .content-area-sticky h2.text-bg-semi-dark .title-bg-wrap {
    background-color: rgba(0, 0, 0, 0.55);
    color: #fff;
}

/* Semi-transparent Light */
.image-card-title-sticky h3.text-bg-semi-light .title-bg-wrap,
.band-split-image .content-area-sticky h2.text-bg-semi-light .title-bg-wrap {
    background-color: rgba(255, 255, 255, 0.65);
    color: #000;
}

/* Glow: Dark — white text with dark shadow halo (for use over light images) */
.image-card-title-sticky h3.text-bg-glow-dark .title-bg-wrap,
.band-split-image .content-area-sticky h2.text-bg-glow-dark .title-bg-wrap {
    background: none;
    padding: 0;
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.7), 0 0 60px rgba(0, 0, 0, 0.5);
}

/* Glow: Dark Heavy — stronger shadow for use over light/white backgrounds */
.image-card-title-sticky h3.text-bg-glow-dark-heavy .title-bg-wrap,
.band-split-image .content-area-sticky h2.text-bg-glow-dark-heavy .title-bg-wrap {
    background: none;
    padding: 0;
    color: #fff;
    text-shadow:
        0 0 10px rgba(0, 0, 0, 1),
        0 0 20px rgba(0, 0, 0, 0.95),
        0 0 40px rgba(0, 0, 0, 0.9),
        0 0 80px rgba(0, 0, 0, 0.7);
}

/* Glow: Light — dark text with light shadow halo (for use over dark images) */
.image-card-title-sticky h3.text-bg-glow-light .title-bg-wrap,
.band-split-image .content-area-sticky h2.text-bg-glow-light .title-bg-wrap {
    background: none;
    padding: 0;
    color: #1a1a1a;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 40px rgba(255, 255, 255, 0.7), 0 0 60px rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------------
   Image Cards Band — Text Behaviour (pin-top / pin-bottom)
   ------------------------------------------------------------------ */

/* Sticky is the default — no overrides needed */

/* Pin Top + Pin Bottom — shared: keep absolute, kill sticky on inner */
.image-card-title.image-card-title--pin-top,
.image-card-title.image-card-title--pin-bottom {
    position: absolute !important;
}
.image-card-title.image-card-title--pin-top .image-card-title-sticky,
.image-card-title.image-card-title--pin-bottom .image-card-title-sticky {
    position: static !important;
}

/* Pin Top */
.image-card-title.image-card-title--pin-top {
    top: 30px !important;
    bottom: auto !important;
}

/* Pin Bottom */
.image-card-title.image-card-title--pin-bottom {
    bottom: 30px !important;
    top: auto !important;
}

/* ------------------------------------------------------------------
   WooCommerce Product Add-Ons — on-brand styling
   Scoped to form.cart:has(.wc-pao-addons-container) so products
   WITHOUT add-ons are completely unaffected.
   ------------------------------------------------------------------ */

/* Hide the price breakdown / totals table entirely.
   The main product price updates dynamically via child.js. */
#product-addons-total {
    display: none !important;
}

/* Only wrap when add-ons are present — :has() scopes this tightly.
   Products without add-ons keep the default inline flex row. */
body.woocommerce.single-product div.product .product-main-details div.summary form.cart:has(.wc-pao-addons-container) {
    flex-wrap: wrap;
}

/* Addons container takes full row */
body.woocommerce.single-product div.product .product-main-details div.summary form.cart .wc-pao-addons-container {
    flex: 0 0 100%;
    margin-top: -18px;
    margin-bottom: 5px;
}

/* Override button width:100% from parent so qty + button stay inline
   when the form is wrapping. Button fills remaining space via flex. */
body.woocommerce.single-product div.product .product-main-details div.summary form.cart:has(.wc-pao-addons-container) button.button {
    width: auto;
    flex: 1 1 auto;
}

/* "Options" heading — small uppercase Lato label */
.wc-pao-addon-name {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 14px;
}

/* Checkbox row layout — label + price on one line */
.wc-pao-addon-wrap > div {
    display: flex;
    align-items: baseline;
    margin-bottom: 0px;
}

/* Hide the native checkbox, replace with custom square */
.wc-pao-addon-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border: 1px solid #1a1a1a;
    background: #fff;
    border-radius: 0;
    cursor: pointer;
    position: relative;
    margin: 0 10px 0 0;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Checked state: solid black fill */
.wc-pao-addon-checkbox:checked {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
}

/* White tick on checked black background */
.wc-pao-addon-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Focus outline for accessibility */
.wc-pao-addon-checkbox:focus-visible {
    outline: 2px solid #b8a88a;
    outline-offset: 2px;
}

/* Label — Cormorant for the add-on name */
.wc-pao-addon-wrap label {
    font-family: 'Cormorant', serif;
    font-size: 18px;
    font-weight: 400;
    color: #1a1a1a;
    cursor: pointer;
    display: inline;
    line-height: 1.3;
}

/* Price portion inside the label — Lato, muted */
.wc-pao-addon-wrap label .wc-pao-addon-price {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

/* Hide the empty label (contains just ":") left by stripping the addon
   group name. Side cart uses <dl>/<dt>, checkout uses <div>/<span>. */
dl.variation dt.variation-,
.variation-single > span.variation-:first-child {
    display: none !important;
}

/* ------------------------------------------------------------------
   Single Product — Sticky summary column
   -----------------------------------------------------------------
   The parent theme sets div.summary to position: sticky; top: 175px.
   That hardcoded value can clip the summary bottom on smaller viewports.
   JS (in child.js) dynamically calculates and sets the top value via
   an inline style. This rule acts as the no-JS fallback.
   ------------------------------------------------------------------ */
body.woocommerce.single-product .product-main-details div.summary {
    top: 175px;
}

/* ------------------------------------------------------------------
   Split Image Band — img tag layout + text behaviour
   -----------------------------------------------------------------
   Parent theme uses background-image divs with a hardcoded aspect
   ratio. We've switched to real <img> tags for SEO/accessibility
   and constrained the band to viewport height on desktop, with
   object-fit: cover centring the crop.
   ------------------------------------------------------------------ */

/* Desktop: constrain to viewport height minus header.
   The sticky .main-header is ~128px; 130px gives a small buffer.
   overflow: hidden crops the images equally via object-fit/object-position. */
.band-split-image {
    aspect-ratio: unset;
    height: calc(100vh - 130px);
    overflow: hidden;
}

/* Block editor: release height constraint so the preview renders
   at natural image height without the grey box artefact. */
.editor-styles-wrapper .band-split-image {
    height: auto;
    overflow: visible;
}

.band-split-image .split-image-block {
    background: none;
    min-height: unset;
}

.band-split-image .split-image-block img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Block editor: let images render naturally */
.editor-styles-wrapper .band-split-image .split-image-block img {
    height: auto;
    object-fit: unset;
    object-position: unset;
}

/* Sticky is the default — no override needed */

/* Pin Top + Pin Bottom — shared: keep absolute, kill sticky on inner */
.band-split-image .content-area.content-area--pin-top,
.band-split-image .content-area.content-area--pin-bottom {
    position: absolute !important;
}
.band-split-image .content-area.content-area--pin-top .content-area-sticky,
.band-split-image .content-area.content-area--pin-bottom .content-area-sticky {
    position: static !important;
}

/* Pin Top */
.band-split-image .content-area.content-area--pin-top {
    top: 30px !important;
    bottom: auto !important;
}

/* Pin Bottom */
.band-split-image .content-area.content-area--pin-bottom {
    bottom: 30px !important;
    top: auto !important;
}

/* Hero title — approximately 2× the default h2 (parent base is 2rem) */
.band-split-image .content-area-sticky h2.title-hero {
    font-family: 'Cormorant', serif;
    font-size: 4rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 600;
}

/* Compact bottom margin — 5px gap to match image-cards stacking */
.band-split-image.band-mb-compact {
    margin-bottom: 5px;
}

/* Mobile / tablet: drop the viewport height constraint so stacked images
   render at their natural height. Breakpoint matches the parent theme's
   .band-split-image flex-wrap (max-width: 950px). */
@media screen and (max-width: 950px) {
    .band-split-image {
        height: auto;
        overflow: visible;
        gap: 0;
    }
    .band-split-image .split-image-block img {
        height: auto;
        object-fit: unset;
        object-position: unset;
    }
    /* Parent positions .content-area with left: 50% + translateX(-50%) and
       no width, so the box hugs the text and long titles stack into 3+
       lines on mobile. Switch to L/R inset for full-width text. Leave
       top/bottom alone — the parent's top: 50px / bottom: 50px and the
       sticky behaviour on the inner element handle vertical positioning
       consistently with the other bands. */
    .band-split-image .content-area {
        left: 30px;
        right: 30px;
        transform: none;
    }
    .band-split-image .content-area-sticky h2.title-hero {
        font-size: 2.5rem;
    }
}

/* ------------------------------------------------------------------
   Blog Single — Split-image hero variant
   -----------------------------------------------------------------
   When a single post's first content block is a split-image-band,
   single.php renders the block with the .band-split-image--post-hero
   modifier on its wrapper, suppresses the block's own title/button,
   and overlays the post title + date on a dark bottom-fade gradient.
   Mirrored in sculpts/sass/templates/_single-blog.scss for source
   completeness — these CSS rules are the live ones.
   ------------------------------------------------------------------ */

.blog-hero-split {
    position: relative;
}

.blog-hero-split .blog-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to bottom, rgba(25,29,27,0) 0%, rgba(25,29,27,1) 100%);
    color: #ffffff;
    pointer-events: none;
}

.blog-hero-split .blog-hero-overlay .wrapper {
    text-align: center;
    padding-bottom: 60px;
}

.blog-hero-split .blog-hero-overlay h1 {
    color: #ffffff;
    margin: 0 0 10px 0;
}

/* Date — matches the @include text-xs treatment used in the parent
   theme's .blog-intro-meta (Lato, small, uppercase, letter-spaced). */
.blog-hero-split .blog-hero-overlay .blog-date {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

/* Cap the band height — overrides the default calc(100vh - 130px)
   set on .band-split-image earlier in this file. Two-class selector
   for higher specificity than the base rule.
   margin-bottom: 0 overrides .band's inherent 45px so spacing below
   the hero is driven by .single-blog-content's padding-top (which
   gives consistent spacing on the legacy featured-image hero too). */
.band-split-image.band-split-image--post-hero {
    height: min(60vh, 600px);
    gap: 0;
    margin-bottom: 0;
}

/* Tablet + below: parent stacks via flex-wrap and the earlier child
   rule releases height to auto. We undo both — keep side-by-side
   at a reduced height. */
@media screen and (max-width: 950px) {
    .band-split-image.band-split-image--post-hero {
        flex-wrap: nowrap;
        flex-direction: row;
        overflow: hidden;
        height: min(55vh, 440px);
    }
    .band-split-image.band-split-image--post-hero .split-image-block {
        flex: 1 1 50%;
        min-height: unset;
    }
    .band-split-image.band-split-image--post-hero .split-image-block img {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* Mobile: tighter overlay padding, smaller title, shorter band. */
@media screen and (max-width: 750px) {
    .band-split-image.band-split-image--post-hero {
        height: min(50vh, 320px);
    }
    .blog-hero-split .blog-hero-overlay .wrapper {
        padding-bottom: 30px;
    }
    .blog-hero-split .blog-hero-overlay h1 {
        font-size: 1.75rem;
    }
}

/* ------------------------------------------------------------------
   Blog Single — legacy featured-image hero
   -----------------------------------------------------------------
   For posts that don't have a leading split-image-band, single.php
   falls back to the .blog-header div with a background-image. Match
   the split-image hero's height and bottom-aligned overlay so the
   two paths look visually consistent. Replaces the parent theme's
   padding-based vertical layout (300px top + 40px bottom in the
   compiled SCSS) with a fixed-height flex container — same pattern
   as .blog-hero-split.
   ------------------------------------------------------------------ */
.blog-header {
    height: min(60vh, 600px);
    position: relative;
    overflow: hidden;
}

/* Flex column, bottom-aligned — mirrors .blog-hero-overlay. Override
   the parent's 300px top + 40px bottom padding (compiled into
   style.min.css) which would otherwise leave the title floating at
   an arbitrary distance from the bottom. */
.blog-header .blog-header-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    /* Gradient already declared in parent compiled CSS — restated here
       so it's obvious this is what overlays the background image. */
    background: linear-gradient(to bottom, rgba(25,29,27,0) 0%, rgba(25,29,27,1) 100%);
}

.blog-header .blog-header-content .wrapper {
    text-align: center;
    padding-bottom: 60px;
}

/* Title + date typography — mirrors .blog-hero-overlay rules above so
   both hero paths render the post title and date identically. */
.blog-header .blog-header-content h1 {
    color: #ffffff;
    margin: 0 0 10px 0;
}
.blog-header .blog-header-content .blog-date {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

@media screen and (max-width: 950px) {
    .blog-header {
        height: min(55vh, 440px);
    }
}

@media screen and (max-width: 750px) {
    .blog-header {
        height: min(50vh, 320px);
    }
    .blog-header .blog-header-content .wrapper {
        padding-bottom: 30px;
    }
    .blog-header .blog-header-content h1 {
        font-size: 1.75rem;
    }
}

/* ------------------------------------------------------------------
   Blog Single — consistent spacing between hero and post body
   -----------------------------------------------------------------
   Both hero paths (split-image and legacy featured-image) wrap their
   body content in <div class="single-blog-content">. Without this
   rule the legacy path butts the first paragraph straight up against
   the hero (0px gap), and the split-image path inherits an
   inconsistent 45px from the .band's own margin-bottom. Setting an
   explicit padding-top here ensures both look the same. */
.single-blog-content {
    padding-top: 60px;
}
@media screen and (max-width: 950px) {
    .single-blog-content {
        padding-top: 45px;
    }
}
@media screen and (max-width: 750px) {
    .single-blog-content {
        padding-top: 30px;
    }
}

/* ------------------------------------------------------------------
   Blog Archive — uniform card height
   -----------------------------------------------------------------
   Older posts have a stale 800x959 intermediate `article-tall` crop
   stored in their attachment metadata, while newer ones render at the
   currently-registered 800x990. Parent CSS (_news.scss) uses
   `img { width: 100%; height: auto }` so the image dictates card
   height and rows wobble. Lock each card to the registered ratio
   (800x990) and let object-fit handle the crop. Also normalises any
   mismatch from split-image-band thumbnails chosen as card images.

   Scoped tightly to `.blog-index article.news` so this can't bleed
   into image-cards-band, featured-blog-band, or related-posts rails. */
.blog-index article.news .blog-image,
.blog-index article.news .blog-image > a {
    display: block;
    aspect-ratio: 800 / 990;
    overflow: hidden;
}
.blog-index article.news .blog-image img,
.blog-index article.news .blog-image > a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ============================================================
   Landing Page Template
   page-templates/landing-page.php

   WP outputs several body classes for this template; we scope to
   `.page-template-landing-page` (the basename-only one) — the
   directory-prefixed variant is `page-template-page-templateslanding-page-php`
   (no hyphen between "templates" and "landing", easy to get wrong).
   ============================================================ */

/* Grid layout — WC's flex/float rules only enqueue on .woocommerce/.woocommerce-page
   bodies, not on plain Pages. Parent SASS sets li.product width via .columns-3
   but doesn't lay out the list horizontally. We add flex-wrap + kill list bullets. */
body.page-template-landing-page ul.products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: 30px;
}

body.page-template-landing-page ul.products li.product {
    list-style: none;
    display: block;
}

body.page-template-landing-page ul.products li.product::marker {
    content: none;
}

/* Header block: generous breathing room above + below to match the canonical
   page-title rhythm (parent SASS gives h1.page-title a 50px margin-bottom on
   its own; we group title + subtitle + intro + trust as a unit and apply the
   spacing to the wrapper instead).

   IMPORTANT: use padding-top, NOT margin-top. The parent theme's
   `.footer.main-footer` is position:fixed, top:-100, bg:#191d1b, z-index:0 —
   acting as the page background behind .main-page-wrapper (z:1, bg:white).
   A margin-top here would collapse up through .wrapper / .inner-wrapper /
   .main-page-wrapper and shift the white wrapper down, exposing the black
   footer as a strip between the site header and the H1. Padding stays
   contained inside the wrapper. */
body.page-template-landing-page .landing-page-header {
    text-align: center;
    margin: 0 auto;
    padding: 45px 0 60px;
    max-width: 760px;
}

/* Override the parent's .page-title { margin-bottom: 50px } — we have a
   subtitle directly under the H1 and want them tight as a unit. */
body.page-template-landing-page .landing-page-header .page-title {
    margin: 0 0 16px;
}

/* Subtitle is an <h2> — inherits Cormorant 2rem / weight 600 / letter-spacing
   -0.02em / line-height 1.2em from the parent _typography.scss h2 rule, plus
   body-text colour. Match the 404's h2 spacing (30px below). */
body.page-template-landing-page .landing-subtitle {
    margin: 0 0 30px;
}

body.page-template-landing-page .landing-intro {
    max-width: 680px;
    margin: 0 auto 24px;
}

body.page-template-landing-page .landing-intro p {
    margin: 0;
    line-height: 1.6;
}

/* Trust strip — uses $darkgrey (#777) from the parent palette, the canonical
   muted text colour also used on .price labels. Bottom margin lives on the
   header wrapper, not here. */
body.page-template-landing-page .landing-trust-strip {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #777;
    margin: 0;
    line-height: 1.4;
}

/* Footer text — body copy below the product grid, above related links + CTA.
   Matches the intro paragraph rhythm. */
body.page-template-landing-page .landing-footer-text {
    max-width: 680px;
    margin: 3rem auto 1.5rem;
    text-align: center;
}

body.page-template-landing-page .landing-footer-text p {
    margin: 0 0 1em;
    line-height: 1.6;
}

body.page-template-landing-page .landing-footer-text p:last-child {
    margin-bottom: 0;
}

/* Related links — middot-separated link list, muted to match trust strip. */
body.page-template-landing-page .landing-related-links {
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #777;
    margin: 0 0 1rem;
    line-height: 1.4;
}

body.page-template-landing-page .landing-related-links a {
    color: inherit;
    text-decoration: none;
}

body.page-template-landing-page .landing-related-links a:hover,
body.page-template-landing-page .landing-related-links a:focus {
    text-decoration: underline;
}

body.page-template-landing-page .landing-related-links .sep {
    padding: 0 0.5em;
}

body.page-template-landing-page .landing-cta {
    text-align: center;
    margin: 3rem 0 4rem;
}

body.page-template-landing-page .landing-cta a {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 4px;
    transition: opacity 0.2s ease;
}

body.page-template-landing-page .landing-cta a:hover {
    opacity: 0.7;
}

body.page-template-landing-page .landing-cta-arrow {
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.2s ease;
}

body.page-template-landing-page .landing-cta a:hover .landing-cta-arrow {
    transform: translateX(4px);
}

@media screen and (max-width: 750px) {
    body.page-template-landing-page .landing-page-header {
        margin: 0 auto;
        padding: 30px 0 40px;
    }

    body.page-template-landing-page .landing-cta {
        margin: 2rem 0 3rem;
    }
}