/*
Theme Name: Boutique Beach Child Theme
Description: This is a custom child theme for Boutique Beach
Theme URI:   https://boutiquebeach.club
Author: Boutique Beach
Author URI:  https://boutiquebeach.club
Template: salient
Version: 1.0
*/

/* ==========================================================================
   SINGLE POST HERO HEADER
   Targets: body.single-post #page-header-wrap and #page-header-bg
   Activated by: Blog Header Type = "default_minimal" (or "default") with
   "Single Post Header Inherits Featured Image" enabled.
   The #page-header-wrap and #page-header-bg elements are output by
   nectar_page_header() in nectar/helpers/page-header.php.
   ========================================================================== */

/* --- 1. HERO HEIGHT AND COVERAGE ----------------------------------------- */
/* Salient PHP outputs style="height:75vh" on both #page-header-wrap and
   #page-header-bg. However, Salient's single.css then overrides #page-header-bg
   with:
     .single-post #page-header-bg[data-post-hs=default_minimal] { height: auto !important; }
   That rule has specificity (ID:1, Class+Attr:2) which beats our
   body.single-post #page-header-bg (ID:1, Class:1, Elem:1), so #page-header-bg
   sizes itself by content even when we write height:100% !important.

   The robust fix: absolutely position #page-header-bg to fill #page-header-wrap.
   This bypasses height inheritance entirely. The wrap's rendered box (driven by
   our height + Salient's min-height:550px on [data-responsive=true]) determines
   the hero height; the bg stretches to fill it with top/right/bottom/left:0.

   We need higher specificity than Salient's attribute-selector rule to override
   position, so we include [data-post-hs="default_minimal"] in our selector.
   #page-header-wrap gets position:relative (already set in Section 5) and an
   explicit height; #page-header-bg gets position:absolute to fill it. */

body.single-post #page-header-wrap {
    height: 60vh !important;
}

/* The attribute selector matches Salient's own selector specificity, ensuring
   our position:absolute overrides whatever Salient sets on #page-header-bg.
   height and min-height are no longer needed on the bg itself because absolute
   top/right/bottom/left:0 stretches it to match the wrap's rendered height. */
body.single-post #page-header-bg[data-post-hs="default_minimal"] {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto !important;
    min-height: 0 !important;
}

body.single-post #page-header-bg .page-header-bg-image-wrap,
body.single-post #page-header-bg .page-header-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
}

/* --- 2. NAVY OVERLAY ------------------------------------------------------ */
/* The overlay is NOT hardcoded here. It is controlled entirely by Salient
   Theme Options: Blog > Single Post Header > Blog Header Overlay Color and
   Blog Header Overlay Opacity. Salient generates the rule in css/colors.php
   (~line 2070):
     .single-post #page-header-bg[data-post-hs="default_minimal"]
       .page-header-bg-image:after { background-color: <color>; opacity: <op>; }
   A previous hardcoded override here (opacity:0.3) out-specificity'd that rule
   and made the Theme Option do nothing, so it was removed. Change the overlay
   in Theme Options, not here. */

/* --- 3. TITLE AND META: WHITE TEXT, CENTERED ------------------------------ */
/* #page-header-bg .section-title.blog-title holds the .inner-wrap with h1. */

body.single-post #page-header-bg .section-title.blog-title,
body.single-post #page-header-bg .inner-wrap {
    text-align: center;
}

body.single-post #page-header-bg h1.entry-title {
    color: #ffffff;
    text-shadow: none;
}

body.single-post #page-header-bg .meta-author,
body.single-post #page-header-bg .meta-author a,
body.single-post #page-header-bg .meta-date,
body.single-post #page-header-bg .meta-category,
body.single-post #page-header-bg .meta-category a,
body.single-post #page-header-bg .meta-reading-time,
body.single-post #page-header-bg .meta-comment-count,
body.single-post #page-header-bg .meta-comment-count a,
body.single-post #page-header-bg #single-below-header,
body.single-post #page-header-bg #single-below-header a {
    color: rgba(255, 255, 255, 0.85);
}

body.single-post #page-header-bg .meta-category {
    text-align: center;
    display: block;
}

/* --- 4. VERTICAL CENTERING ------------------------------------------------ */
/* Salient's page hero JS sets data-alignment-v="middle" which the theme
   converts to flexbox centering. We apply the same directly here for the
   blog header since nectar_page_header() does this in JS and the blog path
   does not guarantee the same JS hook fires correctly. */

body.single-post #page-header-bg {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.single-post #page-header-bg > .container {
    width: 100%;
}

/* --- 5. TRIANGLE SHAPE DIVIDER AT BOTTOM ---------------------------------- */
/* Uses the exact SVG polygon that Salient / js_composer_salient outputs for
   shape_type="triangle" (from salient-core/includes/helpers.php, case "triangle"):
     viewBox="0 0 1000 100" preserveAspectRatio="none"
     polygon points="501 53.27 0.5 0.56 0.5 100 1000.5 100 1000.5 0.66 501 53.27"
   White fill covers: top-left corner, bottom-left, bottom-right, top-right, back
   to the downward point at horizontal center. This matches the WPBakery bottom
   triangle divider used on page heroes exactly, and avoids the clip-path
   antialiasing artifact (the "white pinch" at the point tip).
   The SVG element uses bottom:-1px (matching .nectar-shape-divider in
   salient-wpbakery-addons-basic.css line 820) to seal the 1px subpixel gap.
   overflow:visible on #page-header-wrap is still required because Salient's
   default CSS sets overflow:hidden there. */

body.single-post #page-header-wrap {
    position: relative;
    overflow: visible !important;
}

/* overflow:visible on #page-header-bg is required so the divider ::after
   (which extends below bottom:0 of #page-header-bg) is not clipped. Salient
   applies overflow:hidden to these on smaller viewports, which clipped the
   divider on mobile. The position:relative here is overridden by the higher-
   specificity position:absolute rule in Section 1; overflow:visible is the
   operative declaration from this block. */
body.single-post #page-header-bg {
    overflow: visible !important;
}

body.single-post #page-header-bg::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpolygon fill='%23ffffff' points='501 53.27 0.5 0.56 0.5 100 1000.5 100 1000.5 0.66 501 53.27'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
    z-index: 10;
    pointer-events: none;
}

/* --- 6. SCROLL-DOWN ARROW ------------------------------------------------- */
/* Salient's .scroll-down-wrap.minimal-arrow is positioned absolute, bottom:20px,
   centered via left:50% margin-left:-30px, z-index:101 in the theme CSS.
   The arrow is injected inside #page-header-bg via the
   nectar_single_post_header_after_content action hook in functions.php.
   We push it above the triangle divider (z-index > 10) and lift it slightly
   so it clears the triangle area. */

body.single-post #page-header-bg .scroll-down-wrap.minimal-arrow {
    position: absolute !important; /* forced: mobile was treating it as an in-flow flex item, so bottom was ignored and it got flex-centered into the title */
    left: 50%;
    bottom: 75px;
    z-index: 20;
}

/* --- 7. RESPONSIVE -------------------------------------------------------- */

@media only screen and (max-width: 690px) {
    /* Taller phone hero so a long (multi-line) post title, the scroll arrow,
       and the 60px divider all fit with the content vertically centered. */
    body.single-post #page-header-wrap {
        height: 58vh !important;
    }

    /* Override Salient's min-height:550px floor (it has higher specificity via
       [data-responsive=true]) so 58vh can actually shorten the hero on phones.
       Keep a 380px floor so the hero never collapses on very short viewports. */
    html body.single-post #page-header-wrap[data-responsive="true"] {
        min-height: 380px !important;
    }

    body.single-post #page-header-bg::after {
        height: 60px;
    }

    /* Arrow above the 60px divider zone so it sits over the hero image. */
    body.single-post #page-header-bg .scroll-down-wrap.minimal-arrow {
        bottom: 75px;
    }
}

@media only screen and (max-width: 999px) and (min-width: 691px) {
    body.single-post #page-header-wrap {
        height: 55vh !important;
    }

    body.single-post #page-header-bg::after {
        height: 80px;
    }

    body.single-post #page-header-bg .scroll-down-wrap.minimal-arrow {
        bottom: 65px;
    }
}

/* --- 8. REMOVE SALIENT'S TRANSPARENT-HEADER TOP PADDING ------------------- */
/* Salient adds padding-top:123px to the hero inner-wrap at >=1000px to clear
   the transparent header. We remove it on single posts. body.single-post
   raises specificity above Salient's #page-header-bg[...] .span_6 .inner-wrap
   rule, so no !important is needed. */

@media only screen and (min-width: 1000px) {
    body.single-post #page-header-bg[data-alignment-v="middle"] .span_6 .inner-wrap,
    body.single-post #page-header-bg[data-alignment-v="top"] .span_6 .inner-wrap {
        padding-top: 0;
    }
}

/* On mobile/tablet Salient pads the inner-wrap top by 110px to position the
   hero content. We set our own value to place the badge/title/meta block.
   Increase to push the block down, decrease to lift it. body.single-post
   raises specificity above Salient's rule, so no !important needed. */
@media only screen and (max-width: 999px) {
    body.single-post #page-header-bg[data-alignment-v="middle"] .span_6 .inner-wrap,
    body.single-post #page-header-bg[data-alignment-v="top"] .span_6 .inner-wrap {
        padding-top: 95px;
    }
}

/* --- 9. REMOVE CONTENT-WRAP TOP PADDING (material skin, bg header) -------- */
/* Salient's material skin adds padding-top:80px !important to .container-wrap
   on single posts that use a background header. We zero it on DESKTOP only.
   On mobile that 80px gives needed breathing room between the divider and the
   article, so we leave Salient's value alone below 1000px. The leading html
   adds an element to the selector so this beats Salient's !important rule
   regardless of stylesheet load order. */

@media only screen and (min-width: 1000px) {
    html body.single-post.material[data-bg-header="true"] .container-wrap {
        padding-top: 0 !important;
    }
}

/* On mobile/tablet keep a little breathing room between the divider and the
   article, but much less than Salient's default 80px. */
@media only screen and (max-width: 999px) {
    html body.single-post.material[data-bg-header="true"] .container-wrap {
        padding-top: 10px !important;
    }
}

/* --- 11. BLOG PULL-QUOTE (sand panel + teal quote mark + name/role) -------
   CLASSLESS: applies to EVERY blockquote inside a single blog post's content.
   No per-post class or special markup is required. Scoped to
   body.single-post .post-area .post-content blockquote so it never touches
   testimonial sliders or page quotes (those live outside .post-content).

   Quote mark is drawn by ::before (no span needed).
   Attribution: use the quote's Citation field (renders as <cite>). It gets the
   gold rule + uppercase navy name automatically. OPTIONAL two-tone name/role:
   put the role in a <span class="bq-role"> inside the citation, e.g.
     Captain Ibrahim <span class="bq-role">Boat Captain</span>
   and it renders teal. Without that span it still looks correct. */

body.single-post .post-area .post-content blockquote {
  all: unset;
  display: block;
  margin: 48px 0;
  padding: 36px 40px 32px;
  background: #f5f3ef;
  position: relative;
  /* Salient adds an accent left-border to blockquotes via a more specific rule
     that survives all:unset; kill it explicitly. */
  border: 0 !important;
}

/* Teal open-quote mark at the top of the sand panel (pseudo-element, no markup).
   Salient styles blockquote.wp-block-quote:before as an absolute full-height
   4px left bar. CSS cascade is per-property, so we MUST reset position/height/
   width/border here or those leak into this same ::before and draw that bar. */
body.single-post .post-area .post-content blockquote::before {
  content: '"';
  display: block;
  position: static;
  width: auto;
  height: auto;
  border: 0;
  font-family: 'Lora', Georgia, serif;
  font-size: 96px;
  line-height: 0.75;
  color: #00a8cb;
  margin-bottom: -16px;
}

/* Quote text
   Applied to the blockquote itself AND to any <p> inside it.
   The blockquote rule covers bare text nodes (classic editor, Gutenberg, and
   WPBakery all sometimes put text directly inside <blockquote> with no <p>
   wrapper). After `all: unset` on the blockquote the text would otherwise
   inherit body font (Noto Sans) through the cascade. Declaring font properties
   on the element itself ensures every text node gets Lora regardless of whether
   the editor wrapped it in a <p> or not.
   The `blockquote p` rule is kept for specificity parity with any Salient rule
   that targets that selector and to handle margin on wrapped paragraphs. */
body.single-post .post-area .post-content blockquote,
body.single-post .post-area .post-content blockquote p {
  font-family: 'Lora', Georgia, serif;
  font-size: 21px;
  line-height: 1.65;
  font-weight: 400;
  font-style: normal;
  color: #071e30;
}

body.single-post .post-area .post-content blockquote p {
  margin: 0 !important;
  padding-bottom: 0 !important;
  letter-spacing: 0.01em;
}

/* Attribution row (the Citation): gold rule + uppercase navy name */
body.single-post .post-area .post-content blockquote cite {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  font-style: normal;
  font-family: 'Noto Sans', sans-serif;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #071e30;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

/* The gold rule: precious flourish, used once */
body.single-post .post-area .post-content blockquote cite::before {
  content: '';
  display: block;
  width: 40px;
  height: 1.5px;
  background: #fbb032;
  flex-shrink: 0;
}

/* Optional role span: muted teal, lighter weight */
body.single-post .post-area .post-content blockquote cite .bq-role {
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #446876;
  margin-left: 6px;
}

@media only screen and (max-width: 690px) {
  body.single-post .post-area .post-content blockquote {
    padding: 28px 24px 24px;
  }
  body.single-post .post-area .post-content blockquote::before {
    font-size: 72px;
  }
  body.single-post .post-area .post-content blockquote,
  body.single-post .post-area .post-content blockquote p {
    font-size: 18px;
  }
}

/* ==========================================================================
   12. BLOG POST-GRID "READ MORE" -> MATCH ARROW-ANIMATION CTA
   The site's standard link CTA uses data-style="arrow-animation": a left-aligned
   horizontal line bar followed by a straight chevron, then the label
   (visually: ---> Label). The blog post-grid Read More instead ships
   data-style="curved-arrow-animation" (a curved arrow), so the two never match.

   Salient hardcodes the curved style + curved SVG in the salient-core PLUGIN at
   includes/post-grid/loop-markup.php (~line 852); there is no theme option or
   filter to switch it, and editing the plugin is wiped on update. The read-more
   markup is also bare: <span class="link_text">Read More <svg.../></span> with
   no .link_wrap, no .text span, no .next-arrow chevron, no .line bar, so we
   cannot reuse Salient's arrow-animation rules directly.

   So we REBUILD the arrow-animation visual here with pseudo-elements, the same
   technique the hero triangle divider and pull-quote use. We keep the element's
   own data-style="curved-arrow-animation" and simply out-specify Salient's curved
   rules: the element also carries the .nectar-post-grid-item__read-more class, so
   adding it to the selector gives us (0,0,4,0) vs Salient's (0,0,3,0) and we win
   without !important or load-order luck.

   currentColor is used for the bar + chevron so they follow whatever colour the
   read-more label inherits (nectar-inherit-label), exactly like Salient's own
   arrow-animation rule `svg polyline { stroke: currentColor }`.

   Hover is driven by .nectar-post-grid-item:hover (pure CSS), matching the
   curved version's card-level trigger (data-triggered-by=".nectar-post-grid-item")
   with no dependency on Salient's hover JS.
   ========================================================================== */

/* Space above the Read More. It's a <span>, so inline-block is required for
   margin-top to take effect. */
.nectar-cta.nectar-post-grid-item__read-more[data-style="curved-arrow-animation"] {
    display: inline-block;
    margin-top: 20px;
}

/* Slot: 40px left padding holds the always-on 25px line bar (left:0) plus the
   hover-only 6px chevron (left:25px), so the label never shifts when the chevron
   appears. Reset the curved style's inline-flex/gap. */
.nectar-cta.nectar-post-grid-item__read-more[data-style="curved-arrow-animation"] .link_text {
    position: relative;
    display: inline-block;
    padding-left: 40px;
    padding-right: 0;
}

/* Hide the curved SVG that Salient injects; we draw our own line + chevron. */
.nectar-cta.nectar-post-grid-item__read-more[data-style="curved-arrow-animation"] .link_text > svg {
    display: none;
}

/* Line bar: 25px x 1px at left:0, ALWAYS visible. currentColor follows the label. */
.nectar-cta.nectar-post-grid-item__read-more[data-style="curved-arrow-animation"] .link_text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 25px;
    height: 1px;
    transform: translateY(-50%);
    background-color: currentColor;
}

/* Chevron: the exact polyline Salient outputs for arrow-animation (viewBox
   0 0 50 80, points 0,0 45,40 0,80, round caps), rendered as a currentColor
   mask. Hidden at rest (opacity:0, tucked left), fades/slides in on hover. */
.nectar-cta.nectar-post-grid-item__read-more[data-style="curved-arrow-animation"] .link_text::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 50%;
    width: 6px;
    height: 10px;
    opacity: 0;
    transform: translateY(-50%) translateX(-3px);
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 80'%3E%3Cpolyline points='0,0 45,40 0,80' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 80'%3E%3Cpolyline points='0,0 45,40 0,80' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: opacity 0.45s cubic-bezier(0.23, 0.46, 0.4, 1), transform 0.45s cubic-bezier(0.23, 0.46, 0.4, 1);
}

/* Card hover: reveal the chevron. Pure CSS off the card, no JS hook needed. */
.nectar-post-grid-item:hover .nectar-cta.nectar-post-grid-item__read-more[data-style="curved-arrow-animation"] .link_text::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ==========================================================================
   13. HOMEPAGE BOOKING WIDGET: RESERVE ITS HEIGHT
   The IPMS247 booking bar in the homepage hero (#hero raw-HTML block,
   initialised in functions.php after window load) starts as an empty
   #bb_resBookingBox and grows when the widget builds its form. Everything
   below it in the hero moved down with it: a 0.07-0.11 layout shift at every
   viewport, enough on its own to fail the 0.1 CLS threshold.

   min-height on the wrapper holds the final height from first paint, so the
   build happens inside space that is already there. Heights are the widget's
   measured final .bewarp size at each of its own breakpoints
   (resui_bookingbox.css uses max-width 776px and 415px). Between 416px and
   776px the bar wraps to 174px or 149px depending on width; reserving the
   taller value costs at most 25px of extra space at the top of that range.

   The box itself also moved: it starts as a narrow centred &nbsp; and widens
   to its final size, so its left edge jumped. Until the widget has built its
   inputs the box shows nothing, so it stays hidden until then and appears in
   place instead of sliding. Browsers without :has() ignore the rule and keep
   the old behaviour.
   ========================================================================== */

#hero .bewarp {
    min-height: 99px;
}

#hero #bb_resBookingBox:not(:has(input)) {
    visibility: hidden;
}

@media only screen and (max-width: 776px) {
    #hero .bewarp {
        min-height: 174px;
    }
}

@media only screen and (max-width: 415px) {
    #hero .bewarp {
        min-height: 243px;
    }
}

/* ==========================================================================
   14. SELF-HOSTED FONTS + ICON FONT SWAP
   Lora and Noto Sans used to come from fonts.googleapis.com via Salient's
   Redux typography (handle redux-google-fonts-salient_redux). That stylesheet
   blocked rendering and cost two extra connections (googleapis for the CSS,
   gstatic for the files) before any text could paint on mobile.

   functions.php now dequeues that handle and preloads the two files below,
   which live in this theme's fonts/ folder (SIL Open Font License, see
   fonts/OFL-*.txt). Both are Google's variable-weight latin subsets: one file
   per family covers every weight the theme options use (Lora 400/500/700,
   Noto Sans 400/500/600/700). The family names must stay exactly 'Lora' and
   'Noto Sans' because Salient's generated CSS refers to them by those names.
   Latin subset only; the site is English.

   Font Awesome: Salient declares it with font-display: block, which hides
   text using the icon font for up to 3s. Re-declaring the same file (same
   URL, so nothing extra is downloaded) with swap lets the page paint first.
   This rule wins because this stylesheet loads after Salient's.
   ========================================================================== */

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/lora-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('fonts/noto-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'FontAwesome';
    src: url('../salient/css/fonts/fontawesome-webfont.woff?v=4.2') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}