/*
Theme Name:     KWD Theme - Rebrand Child
Template:       kwdtheme
Theme URI:      https://kiwiwebsitedesign.nz/
Description:    Brand override for KWD Theme. Implements Electric Indigo / Black / White palette over the parent KWD Theme. Edit the variables in the :root block below to retune the brand at any time.
Author:         Rebrand
Version:        1.2.14
Text Domain:    kwdtheme-child
*/

/* =========================================================
   1. BRAND TOKENS
   Edit these to retune the brand. Every override below uses
   these variables, so a single change cascades.
   ========================================================= */
:root {
    /* New brand palette */
    --brand-primary:        #2A2AAD;   /* Electric Indigo */
    --brand-primary-dark:   #1F1F8A;
    --brand-primary-light:  #4D4DD9;   /* For hover states / dark backgrounds */
    --brand-primary-lighter:#8585E0;   /* For text on black footer */
    --brand-black:          #000000;
    --brand-white:          #FFFFFF;

    /* Soft neutrals (cool-tinted replacements for the warm cream tones) */
    --brand-bg-soft:        #F4F4FA;   /* replaces #F5F2ED warm cream */
    --brand-bg-cool:        #F3F3F8;   /* replaces #F3F3F3 */
    --brand-bg-tinted:      #ECECF6;   /* replaces #DFCEBC darker cream */
    --brand-benefit-bg:     #ECECF6;   /* replaces rgba(248,244,240,1) */

    /* Override parent's --yellow var so anywhere it's used switches automatically */
    --yellow: #2A2AAD;

    /* Brand fonts (parent vars retargeted at the new typefaces) */
    --gbook-font:     poppins-regular;   /* body */
    --glight-font:    poppins-light;
    --gmedium-font:   poppins-medium;
    --gbold-font:     poppins-bold;
    --sregualr-font:  nekst-bold;        /* buttons (parent uses this var on .btn / .uni_btn) */
    --ssemibold-font: nekst-bold;        /* primary heading h1 */

    --bs-body-font-family: poppins-regular !important;
}

/* =========================================================
   1B. TYPOGRAPHY — Ridler DJ brand
   - h1 + hero text:     Nekst Bold
   - h2..h6 subheadings: Poppins Bold
   - buttons:            Nekst Bold (via --sregualr-font)
   - body:               Poppins Regular
   Specific selectors override the parent's font assignments
   that aren't reachable through CSS variables alone.
   ========================================================= */
body,
p, span, ul li,
a {
    font-family: poppins-regular, 'Poppins', sans-serif !important;
}

/* Body size dropped from 18px → 16px (parent default was 18) */
body { font-size: 16px !important; }
p,
span,
ul li {
    font-size: 16px !important;
    line-height: 1.5;
}

h1,
.hero-banner h1,
.hero-banner h2,
.hero-banner strong,
.not-found-page-404 h1 span {
    font-family: nekst-bold, 'Nekst', sans-serif !important;
    font-weight: 700;
}

h2, h3, h4, h5, h6,
.uni_heading,
.tab-title,
.service-gallery h1,
.service-gallery_h2,
.form_cont .fields_heading,
.form_cont .addon_heading,
.contact-wrapper strong {
    font-family: poppins-bold, 'Poppins', sans-serif !important;
    font-weight: 700;
}

/* Buttons - Nekst Bold */
.block-content:not(.blog) p:last-child a,
.btn,
.btn-tel,
.btn-white,
.uni_btn,
.col-lg-12.prefer a,
.testimonial-tabs .nav-link,
.wpforms-form button[type="submit"],
.submit_btn,
.new_seo_content button,
.bottom-banner p:last-child a,
.service-sec .btn,
#nav-menu-container .nav-menu .menu-item-type-custom.btn-tel {
    font-family: nekst-bold, 'Nekst', sans-serif !important;
    font-weight: 700;
}

/* =========================================================
   2. ACCORDION (Bootstrap component)
   ========================================================= */
.accordion {
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important;
    --bs-accordion-active-color: #fff !important;
    --bs-accordion-active-bg: var(--brand-primary) !important;
    --bs-accordion-btn-focus-box-shadow: none !important;
}

/* =========================================================
   3. LINKS / GLOBAL ACCENTS
   No default underline; hover dims to a subtle indigo fade.
   ========================================================= */
a {
    color: var(--brand-primary);
    text-decoration: none !important;
    transition: opacity 0.2s ease, color 0.2s ease;
}
a:hover {
    color: var(--brand-primary-dark);
    opacity: 0.75;
    text-decoration: none !important;
}

/* Some parent rules force underlines on .block-content links via
   text-decoration: underline; flatten those too. */
.block-content a,
.contact-wrapper a,
.contact-wrapper strong,
.contact-wrapper * {
    text-decoration: none !important;
}

.primary_bg {
    background-color: var(--brand-primary) !important;
    color: var(--brand-white);
}

/* Defensive: keep page from showing a white strip below the footer.
   The footer is indigo; if the page is short and body bg shows below
   it, force the document bg to indigo. */
html {
    background-color: var(--brand-primary);
}
body {
    background-color: var(--brand-white);
}

/* =========================================================
   4. HERO / BACKGROUND GRADIENTS
   - Home hero slider:  PURE WHITE (no tint)
   - Inner page banner: very subtle cool tint, kept light so
     headline text stays dark and readable
   ========================================================= */
body:not(.home)::before {
    background: linear-gradient(180deg, var(--brand-bg-soft) 0%, var(--brand-bg-tinted) 100%) !important;
    opacity: 0.5 !important;
}
body.home::before,
body.home::after {
    background: var(--brand-white) !important;
    background-image: none !important;
    opacity: 1 !important;
}
#hero-slider-2::before {
    background: var(--brand-white) !important;
    background-image: none !important;
    opacity: 1 !important;
}
.darkHeader {
    background: var(--brand-white) !important;
}

/* =========================================================
   5. HEADER / MAIN MENU
   ========================================================= */
.menu-item.current-menu-item > a,
.menu-item a:hover {
    color: var(--brand-primary) !important;
}
#header .menu-item.current-menu-item a::before {
    background: var(--brand-primary) !important;
}
#header .menu-item.current-menu-item a::after {
    background: var(--brand-primary) !important;
}
.sub-menu .menu-item a:hover {
    color: var(--brand-primary) !important;
}
.sub-menu .menu-item.current-menu-item a {
    color: var(--brand-primary) !important;
}

/* =========================================================
   6. BUTTONS — Unified white-with-indigo, ALL CAPS
   Default:  WHITE fill, INDIGO border, INDIGO text
   Hover:    INDIGO fill, INDIGO border, WHITE text
   ALL CAPS via text-transform.
   The `:only-child` selector on `.block-content p:last-child a`
   means only stand-alone CTA links become buttons; an inline
   "...read more here." link inside a paragraph stays a text link.
   ========================================================= */
.btn,
.block-content:not(.blog) p:last-child a:only-child,
.block-content.blog p:last-child a.btn,
.single-service a.btn,
.uni_btn,
button.uni_btn,
.col-lg-12.prefer a,
.bottom-banner p:last-child a:only-child,
.btn-white,
.service-gallery .uni_btn,
.wpforms-form button[type="submit"],
.submit_btn,
.new_seo_content button,
.service-sec .btn,
.testimonial-tabs .nav-link,
.loadMoreBtn,
#myBtn,
.wp-block-button__link,
.wp-element-button,
a.wp-block-button__link,
.wp-block-button .wp-block-button__link,
#nav-menu-container .nav-menu .menu-item-type-custom.btn-tel {
    background-color: var(--brand-white) !important;
    border: 1px solid var(--brand-primary) !important;
    color: var(--brand-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

    /* Sizing: padding-based vertical rhythm (font-metric-safe), text never
       wraps inside the pill, min-width keeps short labels from looking
       cramped, but content can grow the button if longer. */
    white-space: nowrap !important;
    line-height: 1.2 !important;
    padding: 16px 32px !important;
    min-width: 200px !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box;
}

.btn:hover,
.block-content:not(.blog) p:last-child a:only-child:hover,
.block-content.blog p:last-child a.btn:hover,
.single-service a.btn:hover,
.uni_btn:hover,
button.uni_btn:hover,
.col-lg-12.prefer a:hover,
.bottom-banner p:last-child a:only-child:hover,
.btn-white:hover,
.service-gallery .uni_btn:hover,
.wpforms-form button[type="submit"]:hover,
.submit_btn:hover,
.new_seo_content button:hover,
.service-sec .btn:hover,
.testimonial-tabs .nav-link:hover,
.btn-tel:hover,
.loadMoreBtn:hover,
#myBtn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
a.wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:hover,
#nav-menu-container .nav-menu .menu-item-type-custom.btn-tel:hover {
    background-color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
    color: var(--brand-white) !important;
    opacity: 1;
}

/* Defensive catch-all: any button-shaped element rendered with the
   indigo brand background should always paint its text white. Covers
   plugin-rendered buttons, Gutenberg button blocks with custom colour
   classes, and any other shape that lands on the indigo fill. */
[style*="background-color: #2A2AAD" i],
[style*="background:#2A2AAD" i],
[style*="background: #2A2AAD" i],
.has-electric-indigo-background-color,
.has-primary-background-color {
    color: var(--brand-white) !important;
}
[style*="background-color: #2A2AAD" i] *,
[style*="background:#2A2AAD" i] *,
[style*="background: #2A2AAD" i] *,
.has-electric-indigo-background-color *,
.has-primary-background-color * {
    color: var(--brand-white) !important;
}

/* =========================================================
   6b. GUTENBERG BUTTON BLOCK — force outlined style
   The block editor lets users pick custom background + text
   colours in the sidebar, which Gutenberg writes out as
   inline `style="background-color:...; color:..."` on the
   .wp-block-button__link element. Inline styles beat normal
   external CSS, so even though section 6 above defines the
   outlined-indigo treatment, any block where someone picked
   colours manually will keep its old solid-fill look.
   This block re-asserts the outlined style with !important
   on the inline-styled cases so every Gutenberg button on
   the site reads as the same brand pill. Hover continues to
   flip to filled-indigo via the section-6 hover rules.
   ========================================================= */
.wp-block-button__link[style],
a.wp-block-button__link[style],
.wp-block-button .wp-block-button__link[style],
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button .wp-block-button__link.has-background,
.wp-block-button .wp-block-button__link.has-text-color {
    background: var(--brand-white) !important;
    background-color: var(--brand-white) !important;
    background-image: none !important;
    color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
    box-shadow: none !important;
}
.wp-block-button__link[style]:hover,
a.wp-block-button__link[style]:hover,
.wp-block-button .wp-block-button__link[style]:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.has-background:hover,
.wp-block-button .wp-block-button__link.has-text-color:hover {
    background: var(--brand-primary) !important;
    background-color: var(--brand-primary) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-primary) !important;
}

/* MAXIMUM SPECIFICITY OVERRIDE — html body prefix bumps specificity to
   0,3,3 which beats anything reasonable in the parent theme or any
   per-block inline class combination. Also covers WordPress 6+
   .wp-element-button class which Gutenberg now adds alongside the
   classic .wp-block-button__link. */
html body .wp-block-button .wp-block-button__link,
html body a.wp-block-button__link,
html body .wp-block-button__link.wp-element-button,
html body a.wp-element-button,
html body .wp-block-buttons .wp-block-button__link,
html body .entry-content .wp-block-button__link,
html body .entry-content a.wp-element-button {
    background: var(--brand-white) !important;
    background-color: var(--brand-white) !important;
    background-image: none !important;
    color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
    border-radius: 28px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 16px 32px !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
    box-shadow: none !important;
    font-family: nekst-bold, 'Nekst', sans-serif !important;
}

html body .wp-block-button .wp-block-button__link:hover,
html body a.wp-block-button__link:hover,
html body .wp-block-button__link.wp-element-button:hover,
html body a.wp-element-button:hover,
html body .wp-block-buttons .wp-block-button__link:hover,
html body .entry-content .wp-block-button__link:hover,
html body .entry-content a.wp-element-button:hover {
    background: var(--brand-primary) !important;
    background-color: var(--brand-primary) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-primary) !important;
}

/* Also force any descendant element (e.g. <strong>, <span>) inside the
   button to inherit the brand colour so block-editor span overrides
   don't paint inline labels black. */
html body .wp-block-button .wp-block-button__link *,
html body a.wp-block-button__link *,
html body a.wp-element-button * {
    color: inherit !important;
    background: transparent !important;
}

/* =========================================================
   6c. .uni_btn FIX — handles BOTH markup variants:
       <strong><a class="uni_btn">...</a></strong>
       <a class="uni_btn"><strong>...</strong></a>
   The parent theme defines .uni_btn with color:#000 and the
   <strong> tag inside doesn't reliably inherit overrides
   without `color: inherit !important` on descendants.
   ========================================================= */

/* Default state: outlined indigo, on every variant we can think of. */
html body a.uni_btn,
html body .uni_btn,
html body strong > a.uni_btn,
html body strong a.uni_btn,
html body p .uni_btn,
html body .entry-content .uni_btn,
html body .block-content .uni_btn {
    background: var(--brand-white) !important;
    background-color: var(--brand-white) !important;
    background-image: none !important;
    color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
    border-radius: 28px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-family: nekst-bold, 'Nekst', sans-serif !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Force every descendant of a .uni_btn (and its <strong> wrapper variant)
   to inherit the brand-primary colour so the label is never black. */
html body a.uni_btn,
html body a.uni_btn *,
html body a.uni_btn strong,
html body a.uni_btn span,
html body a.uni_btn b,
html body a.uni_btn em,
html body strong > a.uni_btn,
html body strong > a.uni_btn * {
    color: var(--brand-primary) !important;
}

/* And for the inverted markup <strong><a class="uni_btn">…</a></strong>,
   make sure the <strong> wrapper itself doesn't paint its child with a
   conflicting color. */
html body strong:has(> a.uni_btn) {
    color: var(--brand-primary) !important;
}

/* Hover: filled indigo with WHITE text on every descendant. */
html body a.uni_btn:hover,
html body a.uni_btn:hover *,
html body a.uni_btn:hover strong,
html body a.uni_btn:hover span,
html body strong > a.uni_btn:hover,
html body strong > a.uni_btn:hover * {
    background: var(--brand-primary) !important;
    background-color: var(--brand-primary) !important;
    color: var(--brand-white) !important;
    border-color: var(--brand-primary) !important;
}
/* Override: nested elements during hover should be transparent so the
   button's indigo background shows through, not white from the rule above. */
html body a.uni_btn:hover *,
html body a.uni_btn:hover strong,
html body a.uni_btn:hover span {
    background: transparent !important;
    background-color: transparent !important;
}

/* Active testimonial tab — stay filled indigo so the user can see
   which tab is currently selected. */
.testimonial-tabs .nav-link.active {
    background-color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
    color: var(--brand-white) !important;
}

/* Defensive: if an ACF button label has a stray <br> in it, ignore it. */
.btn br,
.uni_btn br,
.btn-white br,
.submit_btn br,
.testimonial-tabs .nav-link br,
#nav-menu-container .nav-menu .menu-item-type-custom.btn-tel br {
    display: none !important;
}

/* Home hero CTA sits inside a narrow .col-lg-3 column. Tighten the
   metrics so "CHECK AVAILABILITY" stays on one line. */
.hero-banner .banner-text .btn,
.hero-banner .banner-text a.btn {
    font-size: 16px !important;
    padding: 14px 20px !important;
    min-width: 0 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: inline-block;
    width: auto;
    max-width: 100%;
}

/* Load More button — centred on its row, sized like other buttons */
.loadMoreBtn {
    display: block !important;
    margin: 50px auto 0 !important;
    text-align: center !important;
    border-radius: 28px !important;
    cursor: pointer;
}

/* Ensure inline text links (links that share a paragraph with text)
   render as plain links, not as pills. */
.block-content:not(.blog) p:last-child a:not(:only-child),
.bottom-banner p:last-child a:not(:only-child) {
    background: transparent !important;
    border: none !important;
    color: var(--brand-primary) !important;
    padding: 0 !important;
    min-width: 0 !important;
    line-height: inherit !important;
    border-radius: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: poppins-regular, 'Poppins', sans-serif !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
.block-content:not(.blog) p:last-child a:not(:only-child):hover,
.bottom-banner p:last-child a:not(:only-child):hover {
    background: transparent !important;
    color: var(--brand-primary-dark) !important;
    opacity: 0.75;
}

/* =========================================================
   7. SLIDERS / CAROUSELS
   The default owl/slick prev+next arrows are background images.
   Force-strip any inherited button styling so they don't render
   as outlined pills.
   ========================================================= */
.owl-next,
.owl-prev,
.slick-prev,
.slick-next,
button.owl-next,
button.owl-prev,
button.slick-prev,
button.slick-next,
.testimonial-wrapper .owl-prev,
.testimonial-wrapper .owl-next,
#testimonial_slider .owl-prev,
#testimonial_slider .owl-next {
    background-color: transparent !important;
    border: none !important;
    color: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    line-height: normal !important;
}

#about_slider .owl-prev,
#about_slider .owl-next {
    /* Circle outline buttons */
    border: 1px solid var(--brand-primary) !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    transition: background-color 0.3s ease;
}
#about_slider .owl-prev:hover,
#about_slider .owl-next:hover {
    background-color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
    opacity: 1;
}

/* Hide the white SVG arrow images that were uploaded to the Media
   Library (designed for dark backgrounds) — they're invisible on
   the new white section. Replace them with CSS chevrons in indigo. */
#about_slider .owl-prev .next_arrow,
#about_slider .owl-next .next_arrow,
#about_slider .owl-prev img,
#about_slider .owl-next img {
    display: none !important;
}
#about_slider .owl-prev::before,
#about_slider .owl-next::before {
    content: '';
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--brand-primary);
    border-right: 2px solid var(--brand-primary);
    transition: border-color 0.3s ease;
}
#about_slider .owl-prev::before {
    transform: rotate(-135deg);   /* left chevron */
    margin-left: 4px;
}
#about_slider .owl-next::before {
    transform: rotate(45deg);     /* right chevron */
    margin-right: 4px;
}
#about_slider .owl-prev:hover::before,
#about_slider .owl-next:hover::before {
    border-color: var(--brand-white);
}

.testimonial-wrapper button.owl-dot.active,
.testimonial-wrapper button.owl-dot:hover,
#partner-slider button.owl-dot.active,
#partner-slider button.owl-dot:hover {
    background: var(--brand-primary) !important;
}

/* (Testimonial tabs styled together with buttons in section 6.) */

/* =========================================================
   8. BENEFIT GRID
   ========================================================= */
.grid-col .benefit-img {
    background-color: var(--brand-benefit-bg);
}
.grid-col:hover .benefit-img {
    background-color: var(--brand-primary);
}
.grid-col:hover .benefit-img img,
.grid-col:hover .benefit-img svg path {
    /* Make icons readable on indigo on hover */
    filter: brightness(0) invert(1);
}

/* =========================================================
   9. CONTACT WRAPPER
   ========================================================= */
.contact-wrapper {
    background-color: var(--brand-bg-cool);
}
.contact-wrapper:hover {
    background-color: var(--brand-bg-soft);
}
.contact-wrapper:hover svg path {
    fill: var(--brand-primary);
    stroke: var(--brand-primary);
}

/* =========================================================
   10. SOCIAL BANNER (homepage)
   ========================================================= */
.social-banner li a:hover {
    color: var(--brand-primary);
}

/* =========================================================
   11. BACKGROUND SECTIONS (warm cream -> cool neutral)
   ========================================================= */
.grey-grid {
    background-color: var(--brand-bg-cool);
}
.grey-cards .block-content {
    background-color: var(--brand-bg-cool);
}
#home_about::before {
    background: var(--brand-bg-soft) !important;
}
#quote_form {
    background: var(--brand-bg-soft) !important;
}

/* Bottom-cards (single-service / single-photobooth): give the cards
   a visible gap and a soft shadow so adjacent cards don't blur into
   one continuous block. */
.grey-cards .row {
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
    row-gap: 30px;
}
.grey-cards .row > [class*="col-"] {
    margin-bottom: 0;
}
.grey-cards .block-content {
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

/* =========================================================
   12. ADD-ONS LIST (highlighted last item)
   ========================================================= */
.main-row .block-content :is(ol,ul) li:last-child,
.main-row .block-content :is(ol.yellow-ul, ul.yellow-ul) li:last-child {
    color: var(--brand-primary);
}

/* =========================================================
   13. RADIO / CHECKBOX
   ========================================================= */
.form_cont input[type="radio"]:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* =========================================================
   14. FOOTER — Electric Indigo background, white text
   ========================================================= */
footer,
footer.main_foot {
    background-color: var(--brand-primary) !important;
    color: var(--brand-white);
}

footer *,
footer p,
footer span,
footer li,
footer strong,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
    color: var(--brand-white) !important;
}

footer h4 {
    color: var(--brand-white) !important;
}

footer a {
    color: var(--brand-white) !important;
}
footer a:hover {
    color: var(--brand-white) !important;
    text-decoration: underline !important;
    opacity: 0.85;
}

/* Phone / address icons */
.get-touch p i {
    color: var(--brand-white) !important;
}

/* Bottom borders that were dark grey — soften to a translucent white */
footer .cards {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
footer .border-top {
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* "KWD" / payment cards small print */
.kwd-copy a,
.cards a {
    color: var(--brand-white) !important;
}

/* Social pill buttons inside the footer — soft white-on-indigo, invert on hover */
footer .social-ul li a {
    background-color: rgba(255, 255, 255, 0.12);
    transition: background-color 0.3s, color 0.3s;
}
footer .social-ul li a i,
footer .social-ul li a svg path {
    color: var(--brand-white);
    fill: var(--brand-white);
}
footer .social-ul li a:hover {
    background-color: var(--brand-white);
}
footer .social-ul li a:hover i,
footer .social-ul li a:hover svg path {
    color: var(--brand-primary) !important;
    fill: var(--brand-primary) !important;
}

/* Social lists OUTSIDE the footer (Recommended Partners, contact rows
   etc.) should stay left-aligned and inherit their container colour. */
:not(footer) > .social-ul,
:not(footer) > * > .social-ul,
.partner-card .social-ul,
.partners-section .social-ul {
    text-align: left !important;
    padding-left: 0;
    margin-left: 0;
    justify-content: flex-start !important;
}
:not(footer) .social-ul li {
    display: inline-block;
    text-align: left;
}

/* =========================================================
   15. SVG ASSET OVERRIDE
   The yellow arrow on service hover. The CSS rule below
   resolves to /wp-content/themes/kwdtheme-child/images/yellow-arrow.svg
   (the indigo version shipped with this child theme).
   ========================================================= */
.service-img::after {
    background-image: url('./images/yellow-arrow.svg') !important;
}

/* Testimonial section quote bubble — original was yellow, ship indigo. */
.testimonial::before {
    background-image: url('./images/quote.svg') !important;
}

/* The .arrow_yellow image (welcome/booking/playlist pages) is
   the indigo SVG you uploaded over the original in the Media
   Library, so no CSS treatment is needed here. */

/* =========================================================
   16. MISC / EDGE CASES
   ========================================================= */
/* The bottom-banner-on-horz-lines variant had a #FFF before pseudo;
   keep as is. No change. */

/* Force any direct hardcoded yellow that escaped a variable */
.faq-sec .accordion-button:not(.collapsed) {
    color: var(--brand-white) !important;
    background-color: var(--brand-primary) !important;
}

/* =========================================================
   17. UTILITY: TWO-COLUMN GRID
   Used by `.dj-features-grid` containers on the Wedding DJ
   page (and any other page that wants a quick two-column
   layout). Drop the markup pattern:
       <div class="dj-features-grid">
           <div class="dj-features-col">...</div>
           <div class="dj-features-col">...</div>
       </div>
   and the columns will sit side-by-side at >=768px and stack
   on mobile.
   ========================================================= */
.dj-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 30px;
    align-items: start;
    margin: 30px 0;
}

/* WP's wpautop wraps comments and stray text in <p>. Anything inside the
   grid that isn't an explicit .dj-features-col is hidden so it can't
   claim a grid cell and push real columns to the wrong side. */
.dj-features-grid > *:not(.dj-features-col) {
    display: none !important;
}

.dj-features-col > :first-child { margin-top: 0; }
.dj-features-col > :last-child  { margin-bottom: 0; }

/* Headings inside these columns sit a little tighter than the page default */
.dj-features-col h2,
.dj-features-col h3,
.dj-features-col h4 {
    margin-top: 24px;
    margin-bottom: 6px;
}
.dj-features-col h2:first-child,
.dj-features-col h3:first-child,
.dj-features-col h4:first-child {
    margin-top: 0;
}

@media (max-width: 767px) {
    .dj-features-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 18px;
    }
}

/* =========================================================
   18. v9 — HERO IMPACT
   Bigger, tighter heading typography, rounded photo with
   soft shadow, gentle fade-up on load.
   ========================================================= */

/* Bigger, tighter hero heading using fluid clamp() sizing.
   Trimmed from 84px → 64px max so it doesn't dominate at desktop. */
.hero-banner .banner-top h1,
.hero-banner .banner-top h2,
.hero-banner .banner-top strong,
.hero-banner h1,
.hero-banner h2,
.hero-banner strong {
    font-size: clamp(34px, 4.2vw, 64px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.015em !important;
    font-family: nekst-bold, 'Nekst', sans-serif !important;
}

/* Hero photo: rounded corners + soft shadow + subtle hover lift. */
.hero-banner .banner-wrap img {
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.hero-banner .banner-wrap:hover img {
    transform: translateY(-4px);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.16);
}

/* Hero entrance animation — fade up, staggered */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-banner .banner-top,
.hero-banner .banner-wrap,
.hero-banner .banner-text {
    animation: heroFadeUp 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.hero-banner .banner-top  { animation-delay: 0s;    }
.hero-banner .banner-wrap { animation-delay: 0.15s; }
.hero-banner .banner-text { animation-delay: 0.30s; }

/* Hero CTA gets a hair more emphasis — slightly thicker border */
.hero-banner .banner-text .btn,
.hero-banner .banner-text a.btn {
    border-width: 1.5px !important;
}

/* =========================================================
   19. v9 — CARD HOVER POLISH
   Service / blog / partner / bottom-cards / contact cards
   all get the same treatment: lift + soft shadow on hover,
   contained image zoom inside service / blog cards.
   ========================================================= */

/* Service + blog cards (used across home, archive-service,
   blog grid, single-service home_blogs, etc.).
   IMPORTANT: do NOT put overflow:hidden on .service-img — the indigo
   arrow circle is rendered as `.service-img::after` positioned at
   bottom:-20px (i.e. extending BELOW the image) and overflow:hidden
   clips it away. Round the image directly instead. */
.service-wrapper {
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-wrapper:hover {
    transform: translateY(-4px);
}
.service-img {
    /* No overflow:hidden, no border-radius — the ::after arrow needs
       to extend below the image bounds. */
    border-radius: 0;
    overflow: visible;
}
.service-img img,
.service-img .plan_img,
.service-img .blog_img_set {
    border-radius: 14px;
    transition: transform 0.4s ease;
}
/* Note: image-zoom-on-hover removed — it would have required overflow
   clipping which conflicts with the ::after arrow. The card lift +
   the arrow appearing is enough hover feedback. */

/* Bottom cards lift (already have shadow from earlier polish) */
.grey-cards .block-content {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.grey-cards .block-content:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10);
}

/* Contact cards (Phone / Location / Email row on contact page) */
.contact-wrapper {
    border-radius: 14px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.contact-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(42, 42, 173, 0.10);
}

/* Partner logo carousel: subtle desaturation by default, full colour on hover */
.partners img {
    filter: grayscale(20%);
    opacity: 0.85;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.partners .item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.04);
}

/* Inner-page banner image (single-service grey-grid image) */
.grey-grid .grey_boxes,
.image-block.grey_boxes {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

/* Generic image rounding for content images on blog pages */
.block-content.blog img,
.block-content.blog .wp-block-image img {
    border-radius: 12px;
}

/* =========================================================
   20. v9 — TESTIMONIAL SECTION POLISH
   Frame the testimonial in a soft indigo-tinted card; make
   the quote feel like a feature, not an aside. Author line
   gets an indigo accent dot.
   ========================================================= */

/* Frame the testimonial section as a full-width, edge-to-edge tinted band */
.testimonial_sec {
    padding: 0 !important;
    margin: 60px 0;
}
.testimonial_sec .testimonial-tabs,
section.testimonial_sec > .container.testimonial-tabs {
    max-width: 100% !important;
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#myTabContent {
    background: linear-gradient(135deg, var(--brand-bg-soft) 0%, var(--brand-bg-tinted) 100%);
    border-radius: 0 !important;
    padding: 110px clamp(20px, 5vw, 80px) 70px !important;
    position: relative;
    overflow: hidden;
}

/* Larger, tighter section title */
.tab-title,
.testimonial-tab-content .tab-title {
    font-size: clamp(28px, 3.5vw, 46px) !important;
    line-height: 1.1 !important;
    margin-bottom: 36px;
    font-family: nekst-bold, 'Nekst', sans-serif !important;
    display: block;
    text-align: center;
}

/* Testimonial body text — feature-sized */
.testimonial p {
    font-size: clamp(18px, 1.6vw, 22px) !important;
    line-height: 1.55 !important;
    max-width: 820px;
    margin: 24px auto !important;
    text-align: center;
    color: var(--brand-black);
}

/* Author credit (rendered as a <strong> inside the review HTML).
   Uppercase tracking, no decorative dot (it landed weirdly when the
   credit wraps to two lines). */
.testimonial p strong {
    display: inline-block;
    margin-top: 22px;
    font-size: 13px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-primary) !important;
    font-family: poppins-bold, 'Poppins', sans-serif !important;
}

/* Soften the navigation arrows so they feel intentional inside
   the new tinted card (they were a bit floaty before). */
.testimonial-wrapper .owl-nav {
    margin-top: 36px;
}
.testimonial-wrapper .owl-nav button {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.testimonial-wrapper .owl-nav button:hover {
    opacity: 0.5;
    transform: scale(1.1);
}

/* Quote bubble (the indigo SVG) lives ABOVE the card now — keep
   it visible but slightly larger so it reads as decorative */
.testimonial::before {
    width: 100px;
    height: 64px;
    top: -120px;
}

/* Mobile testimonial: tighten paddings */
@media (max-width: 767px) {
    #myTabContent {
        padding: 80px 24px 50px !important;
        border-radius: 14px;
    }
    .testimonial p {
        max-width: 100%;
    }
    .testimonial::before {
        top: -90px;
        width: 70px;
        height: 44px;
    }
}

/* =========================================================
   21. v11 — INSTAGRAM FEED DEFENSIVE FIX
   The [instagram-feed] shortcode renders inside .insta_wrepp.
   Force the wrapper and the plugin's own root containers to
   span the full container width so the slider doesn't pin
   itself to the left.
   ========================================================= */
#insta_sec .insta_wrepp,
.insta_wrepp {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.insta_wrepp #sb_instagram,
.insta_wrepp .sb_instagram_feed,
.insta_wrepp .sbi_carousel,
.insta_wrepp .sbi_items_wrap,
.insta_wrepp .sbi_photo_wrap {
    width: 100% !important;
    max-width: 100% !important;
}
/* Stretch the row so the col-lg-12 actually fills */
#insta_sec .row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
#insta_sec .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
}

/* =========================================================
   22. v12 — INSTAGRAM SLIDER (Smash Balloon + Owl Carousel)
   custom.js adds .owl-carousel to #sbi_images after Smash
   Balloon finishes rendering. Smash Balloon's own grid styles
   (floats, inline widths, padding) fight Owl's stage layout,
   so we neutralize them here.
   ========================================================= */

/* Hide the plugin's header/footer/load-more — they don't belong in a slider */
.insta_wrepp #sb_instagram .sbi_header_wrap,
.insta_wrepp #sb_instagram #sbi_load,
.insta_wrepp #sb_instagram .sbi_load_btn,
.insta_wrepp #sb_instagram .sbi_follow_btn {
    display: none !important;
}

/* The plugin sets a fixed height + transition on #sbi_images for its grid;
   let Owl manage sizing instead. */
.insta_wrepp #sbi_images.owl-carousel {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: none !important;
    display: block !important;
}

/* Each post: kill inline width / float / padding so Owl can lay them out,
   AND force a consistent square aspect ratio so portrait videos and square
   images all render at the same height inside the slider. We use width:100%
   so .sbi_item fills the Owl-assigned width on its .owl-item parent — using
   width:auto collapses the slide to 0 because all child elements are
   absolutely positioned. */
.insta_wrepp #sbi_images.owl-carousel .sbi_item {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--brand-bg-soft, #F4F4FA);
    box-sizing: border-box;
    display: block;
}
/* Fallback for older browsers without aspect-ratio support */
@supports not (aspect-ratio: 1/1) {
    .insta_wrepp #sbi_images.owl-carousel .sbi_item {
        height: 0 !important;
        padding-bottom: 100% !important;
    }
    .insta_wrepp #sbi_images.owl-carousel .sbi_item > * {
        position: absolute !important;
        inset: 0 !important;
    }
}

/* The media inside each post should completely fill the (square) slide */
.insta_wrepp #sbi_images.owl-carousel .sbi_item .sbi_photo,
.insta_wrepp #sbi_images.owl-carousel .sbi_item .sbi_photo_wrap,
.insta_wrepp #sbi_images.owl-carousel .sbi_item a,
.insta_wrepp #sbi_images.owl-carousel .sbi_item .sbi_link {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    background-size: cover !important;
    background-position: center !important;
}
.insta_wrepp #sbi_images.owl-carousel .sbi_item img,
.insta_wrepp #sbi_images.owl-carousel .sbi_item video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Hide grid-only "before" pseudo elements Smash Balloon uses for square aspect */
.insta_wrepp #sbi_images.owl-carousel .sbi_item .sbi_photo:before,
.insta_wrepp #sbi_images.owl-carousel .sbi_item .sbi_photo_wrap:before {
    content: none !important;
    display: none !important;
}

/* Owl stage / items */
.insta_wrepp #sbi_images.owl-carousel .owl-stage-outer {
    overflow: hidden;
}
.insta_wrepp #sbi_images.owl-carousel .owl-item {
    padding: 0 5px;
    box-sizing: border-box;
}

/* Brand the Owl arrows: indigo circles floated to the left and right edges
   of the slider, with white SVG arrow glyphs inside. */
.insta_wrepp #sbi_images.owl-carousel .owl-nav {
    margin: 0;
    text-align: center;
    position: static;
}
.insta_wrepp #sbi_images.owl-carousel .owl-nav button.owl-prev,
.insta_wrepp #sbi_images.owl-carousel .owl-nav button.owl-next,
#insta_sec .insta_wrepp .owl-nav button.owl-prev,
#insta_sec .insta_wrepp .owl-nav button.owl-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--brand-primary) !important;
    background-color: var(--brand-primary) !important;
    background-image: none !important;
    color: var(--brand-white) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    z-index: 5 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    overflow: visible !important;
}
.insta_wrepp #sbi_images.owl-carousel .owl-nav button.owl-prev,
#insta_sec .insta_wrepp .owl-nav button.owl-prev { left: 12px !important; right: auto !important; }
.insta_wrepp #sbi_images.owl-carousel .owl-nav button.owl-next,
#insta_sec .insta_wrepp .owl-nav button.owl-next { right: 12px !important; left: auto !important; }
@media (max-width: 600px) {
    .insta_wrepp #sbi_images.owl-carousel .owl-nav button.owl-prev,
    #insta_sec .insta_wrepp .owl-nav button.owl-prev { left: 8px !important; }
    .insta_wrepp #sbi_images.owl-carousel .owl-nav button.owl-next,
    #insta_sec .insta_wrepp .owl-nav button.owl-next { right: 8px !important; }
}
/* Parent theme rotates .owl-prev 180deg via .owl-prev{transform:rotate(180deg)};
   override that so our SVG points the right way. */
.insta_wrepp #sbi_images.owl-carousel .owl-nav button.owl-prev {
    transform: translateY(-50%) !important;
}
.insta_wrepp #sbi_images.owl-carousel .owl-nav button.owl-prev:hover,
.insta_wrepp #sbi_images.owl-carousel .owl-nav button.owl-next:hover {
    background: var(--brand-primary-dark) !important;
    color: var(--brand-white) !important;
}
/* Hide whatever Owl injects as nav content (SVG or span text) — we paint
   the chevron ourselves with a CSS pseudo-element so nothing depends on
   font, inherited color, or RUCSS keeping our <svg> rules alive. */
.insta_wrepp #sbi_images.owl-carousel .owl-nav button > *,
#insta_sec .insta_wrepp .owl-nav button > * {
    display: none !important;
}

/* Draw chevrons with two rotated borders */
.insta_wrepp #sbi_images.owl-carousel .owl-nav button.owl-prev::before,
.insta_wrepp #sbi_images.owl-carousel .owl-nav button.owl-next::before,
#insta_sec .insta_wrepp .owl-nav button.owl-prev::before,
#insta_sec .insta_wrepp .owl-nav button.owl-next::before {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-style: solid !important;
    border-color: var(--brand-white, #fff) !important;
    border-width: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    position: relative !important;
}
.insta_wrepp #sbi_images.owl-carousel .owl-nav button.owl-prev::before,
#insta_sec .insta_wrepp .owl-nav button.owl-prev::before {
    border-left-width: 2px !important;
    border-bottom-width: 2px !important;
    transform: rotate(45deg) !important;
    margin-left: 3px !important;   /* optical centering */
}
.insta_wrepp #sbi_images.owl-carousel .owl-nav button.owl-next::before,
#insta_sec .insta_wrepp .owl-nav button.owl-next::before {
    border-right-width: 2px !important;
    border-top-width: 2px !important;
    transform: rotate(45deg) !important;
    margin-right: 3px !important;  /* optical centering */
}
.insta_wrepp #sbi_images.owl-carousel .owl-nav button.disabled {
    opacity: 0.4;
}
/* Make sure the slider's row is positioned so absolute arrows anchor to it */
#insta_sec .insta_wrepp { position: relative; }

/* (mobile arrow positions handled in the !important block above) */


/* =========================================================
   23. v13 — MOBILE HEADER LOGO + FOOTER LAYOUT
   On mobile (<= 991px), the parent theme has no width
   constraint on #header .site-logo img, so the logo renders
   at its full intrinsic size and dominates the screen.
   The footer also stacks every column flush-left with no
   spacing, so columns of links read like a long centred
   ribbon. We fix both here.
   ========================================================= */

/* --- Header logo on mobile --- */
@media (max-width: 991px) {
    #header .site-logo {
        text-align: left;
    }
    #header .site-logo img,
    #header .site-logo a img {
        max-width: 160px !important;
        width: auto !important;
        height: auto !important;
        display: inline-block;
    }
}
@media (max-width: 600px) {
    #header .site-logo img,
    #header .site-logo a img {
        max-width: 130px !important;
    }
}

/* --- Footer logo on mobile --- */
@media (max-width: 767px) {
    footer.main_foot .site-logo img {
        max-width: 150px !important;
        height: auto;
    }
}

/* =========================================================
   23b. FOOTER LAYOUT (mobile)
   Footer columns currently stack as centred plain text. On
   mobile we want:
   - The first column (logo + Get in touch + Connect) centred.
   - The link columns (Quick Links, Services, Photobooths,
     Enhancements) laid out as a 2-up grid so they don't
     consume so much vertical space.
   - Tighter spacing between headings and items.
   ========================================================= */
@media (max-width: 767px) {
    /* The first column with logo / contact / socials stays centred,
       but tighten the vertical rhythm. */
    footer.main_foot > .container > .row > .col-lg-4,
    footer.main_foot > .container > .row > .col-md-4 {
        text-align: center;
        margin-bottom: 28px !important;
    }
    footer.main_foot .get-touch p {
        margin: 6px 0;
    }
    footer.main_foot .get-touch h4,
    footer.main_foot h4 {
        margin-top: 10px;
        margin-bottom: 12px;
    }
    footer.main_foot .social-ul {
        text-align: center !important;
        padding-left: 0;
        display: flex !important;
        justify-content: center !important;
        gap: 8px;
        flex-wrap: wrap;
    }
    footer.main_foot .social-ul li {
        margin-right: 0 !important;
    }

    /* The Footer_Menu_Walker outputs each menu column as a
       direct child of <footer .row>. Force them into a 2-col
       grid on phones so headings + lists pack neatly. */
    footer.main_foot > .container > .row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    footer.main_foot > .container > .row > .col-lg-4 + * ~ *,
    footer.main_foot > .container > .row > .col-md-2,
    footer.main_foot > .container > .row > .col-lg-2,
    footer.main_foot > .container > .row > [class*="footer-col"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        text-align: center;
        margin-bottom: 24px !important;
        padding-left: 8px;
        padding-right: 8px;
    }
    /* Tighten the menu lists themselves */
    footer.main_foot ul,
    footer.main_foot ol {
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }
    footer.main_foot ul li,
    footer.main_foot ol li {
        margin: 4px 0;
        line-height: 1.4;
    }
    footer.main_foot h4 {
        font-size: 16px !important;
        margin-bottom: 10px;
        letter-spacing: 0.02em;
    }
    footer.main_foot a {
        font-size: 14px;
        line-height: 1.4;
    }

    /* Bottom row: Privacy / Terms / cards / copyright */
    footer.main_foot .row.cards {
        text-align: center;
    }
    footer.main_foot .row.cards .col-md-7,
    footer.main_foot .row.cards .col-md-5 {
        text-align: center !important;
    }
    footer.main_foot .row.cards img {
        margin: 8px auto 0;
        display: block;
        max-width: 140px;
    }
    footer.main_foot .row.cards .kwd-copy {
        margin-top: 6px;
    }
}

/* On very narrow phones (<= 380px) collapse the link columns to
   a single column so headings don't wrap awkwardly. */
@media (max-width: 380px) {
    footer.main_foot > .container > .row > .col-lg-4 + * ~ *,
    footer.main_foot > .container > .row > .col-md-2,
    footer.main_foot > .container > .row > .col-lg-2,
    footer.main_foot > .container > .row > [class*="footer-col"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   25. v15 — PLANNING BEATS IFRAME FORM (Contact page)
   The Planning Beats form caps its internal layout to ~600px
   for readability, and we can't reach inside the iframe to
   change that (cross-origin). To stop it floating in a vast
   empty container, we cap the WRAPPER to ~760px and centre
   it on the page so the form reads as an intentional, anchored
   card rather than a narrow form lost in white space.
   We also add an h2 heading + intro paragraph above the form.
   ========================================================= */
#quote_form .pb-form-wrapper,
#quote_form .form_cont.pb-form-wrapper {
    width: 100% !important;
    max-width: 1080px !important;   /* v1.2.14: PB widened form internally, lift cap from 760 -> 1080 */
    padding: 8px 16px 0 !important;
    margin: 0 auto !important;
    overflow: visible;
    text-align: center;
}

/* Heading above the form — H2 to keep heading hierarchy clean
   (the page's H1 lives in the inner-banner section above).
   v1.2.14: colour changed from brand-primary (indigo) to brand-black
   to match the rest of the site's H2 treatment. */
#quote_form .pb-form-heading {
    font-family: nekst-bold, 'Nekst', 'Poppins', sans-serif;
    font-size: 36px;
    line-height: 1.15;
    margin: 0 0 12px;
    color: var(--brand-black) !important;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
}

/* Intro paragraph */
#quote_form .pb-form-intro {
    font-family: poppins-regular, 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: #444;
    margin: 0 auto 24px;
    max-width: 580px;
    text-align: center;
}

/* The iframe itself */
#quote_form iframe[data-pb-form],
.pb-form-wrapper iframe[data-pb-form] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 600px;
    border: 0 !important;
    display: block !important;
    background: transparent !important;
    margin: 0 !important;
}

/* Make sure the column itself doesn't constrain the iframe on
   any viewport width. */
#quote_form .col-lg-12 {
    width: 100% !important;
    max-width: 100% !important;
}

/* Mobile: tighter heading, more breathing room */
@media (max-width: 600px) {
    #quote_form .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    #quote_form .col-lg-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #quote_form .pb-form-wrapper,
    #quote_form .form_cont.pb-form-wrapper {
        max-width: 100% !important;
        padding: 4px 8px 0 !important;
    }
    #quote_form .pb-form-heading {
        font-size: 26px;
    }
    #quote_form .pb-form-intro {
        font-size: 15px;
        margin-bottom: 20px;
    }
    #quote_form iframe[data-pb-form] {
        min-height: 700px;
    }
}

/* =========================================================
   26. v15b — HIDE HOMEPAGE QUOTE FORM
   The homepage's #quote_form section is being killed to reduce
   death-scroll. CSS hide keeps the parent template untouched
   so we don't have to maintain a 392-line front-page.php copy
   in the child theme. CF7 JS is already dequeued on the home
   page (via parent footer.php), so the perf cost is minimal.
   The Contact page also has #quote_form, so we MUST scope this
   to body.home only.
   ========================================================= */
body.home #quote_form,
body.front-page #quote_form,
body.page-template-front-page #quote_form,
body.home section#quote_form {
    display: none !important;
}

/* =========================================================
   24. v14 — HOMEPAGE HERO REORDER (mobile)
   Desired mobile order:
     1. Heading (already separate, stays at top)
     2. Description paragraph
     3. Hero image (larger)
     4. CHECK AVAILABILITY button
     5. Social links (last)
   Markup (front-page.php → .hero-banner .row):
     col1: .col-lg-3 .mt-auto > .social-banner
     col2: .col-lg-6 .banner-wrap > <img>
     col3: .col-lg-3 .banner-text > [text] + <a class="btn">
   The button and the description live inside the SAME column,
   so we use `display: contents` on .banner-text on mobile to
   flatten its children into the row's flex layout, then use
   `order` to position the description before the image and
   the button after it.
   Desktop layout (>= 992px) is untouched.
   ========================================================= */
@media (max-width: 991px) {
    /* Make the wrapper row a single-column flex so `order` works */
    .hero-banner .col-lg-11 > .row,
    .hero-banner > .container > div > .row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Flatten .banner-text so [text] and [button] become direct
       flex children of the row alongside .banner-wrap and the
       social-banner column. */
    .hero-banner .banner-text {
        display: contents !important;
    }

    /* Order the four flex children */
    .hero-banner .banner-text > *:not(.btn):not(a.btn) {
        order: 1 !important;
        text-align: center;
        margin-bottom: 12px;
    }
    .hero-banner .banner-wrap {
        order: 2 !important;
        margin-bottom: 16px;
    }
    .hero-banner .banner-text > .btn,
    .hero-banner .banner-text > a.btn {
        order: 3 !important;
        align-self: center;
        margin-top: 8px;
        margin-bottom: 16px;
    }
    .hero-banner .col-lg-3.mt-auto,
    .hero-banner .col-md-12.mt-auto {
        order: 4 !important;
        margin-top: 8px;
    }
    .hero-banner .social-banner {
        text-align: center;
    }

    /* Make the hero image larger — fill the column width edge to
       edge, no inherited bootstrap col padding. */
    .hero-banner .banner-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .hero-banner .banner-wrap img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 16px;
    }

    /* The CHECK AVAILABILITY button: make it a comfortable mobile size */
    .hero-banner .banner-text .btn {
        min-width: 220px;
    }
}

/* =========================================================
   23c. FOOTER FONT SIZE (desktop)
   The parent doesn't set a footer-specific font-size, so it
   inherits from the body (~15px). Drop it to 12px on desktop
   for a tighter, more secondary feel; phone footer keeps the
   slightly larger 14px set in section 23 for legibility.
   ========================================================= */
@media (min-width: 768px) {
    footer.main_foot,
    footer.main_foot p,
    footer.main_foot a,
    footer.main_foot li,
    footer.main_foot .get-touch p,
    footer.main_foot .get-touch a,
    footer.main_foot ul li a,
    footer.main_foot ol li a {
        font-size: 12px !important;
        line-height: 1.6;
    }
    footer.main_foot h4 {
        font-size: 14px !important;
        margin-bottom: 10px;
        letter-spacing: 0.04em;
    }
    footer.main_foot .kwd-copy a,
    footer.main_foot .cards a,
    footer.main_foot .row.cards a {
        font-size: 12px !important;
    }
}