/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/
Template: kadence
Author: Rankers
Description: Kadence child theme for the Rankers Blueprint. Put per-site template overrides and custom styles here so they survive parent theme updates.
Version: 1.5.2.3
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v3.0
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* ==================================================================
 * This stylesheet holds the site's custom BEM component blocks, one
 * divider-commented section per block. It loads AFTER the RP Framework
 * (assets/css/rp-framework.css — see functions.php), so every block here
 * must consume the --rp-* design tokens instead of hard-coded literals.
 * Add new blocks below; keep them purpose-named (block__element--modifier).
 *
 * Site-wide tweaks can also live in Appearance > Customize > Additional CSS
 * (the shop filter CSS lives there, marker-commented "rp ...").
 * ================================================================== */

/* ------------------------------------------------------------------
 * Featured products grid — styles for the .rp-featured-grid block
 * Rendered by [rp_featured_grid] (sandbox plugin rp-featured-grid.php).
 * Look follows the source site's FEATURED list, mirroring its own Elementor
 * breakpoints: two columns above 1024px; one column, row-layout cards from
 * 768–1024px (tablet); one column, stacked cards at 767px and below (mobile).
 * Colours/spacing come from the RP Framework tokens (source-true values;
 * the CTA purple is the source's #8040ff — corrected from the earlier
 * #6d28d9 approximation).
 * ------------------------------------------------------------------ */
/* Double class selector: Kadence's content.min.css has ".single-content ul, .single-content ol"
 * (specificity 0,1,1) setting padding-left: 2em, which beats a plain ".rp-featured-grid__list"
 * selector (0,1,0) regardless of load order — the padding:0 below was silently losing that fight,
 * leaving a ~34px one-sided left gutter on the <ul>. Repeating the class bumps us to (0,2,0). */
.rp-featured-grid__list.rp-featured-grid__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rp-space-lg);
}
.rp-featured-grid__card {
    display: flex;
    gap: var(--rp-space-sm);
    background: var(--rp-color-surface);
    padding: var(--rp-space-sm);
    margin: 0;
}
.rp-featured-grid__media {
    flex: 0 0 190px;
}
.rp-featured-grid__media img {
    display: block;
    width: 100%;
    height: auto;
}
.rp-featured-grid__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rp-space-2xs);
}
.rp-featured-grid__title {
    font-size: var(--rp-text-lg);
    line-height: var(--rp-leading-tight);
    font-weight: var(--rp-weight-medium);
    margin: 0;
}
.rp-featured-grid__title a {
    color: var(--rp-color-heading);
    text-decoration: none;
}
.rp-featured-grid__price {
    font-size: 18px;
    font-weight: var(--rp-weight-semibold);
    color: var(--rp-color-heading);
}
.rp-featured-grid__price del {
    opacity: 0.55;
    margin-right: 6px;
}
.rp-featured-grid__price ins {
    text-decoration: none;
}
.rp-featured-grid__rating .star-rating {
    margin: 0;
}
.rp-featured-grid__button.button {
    background: var(--rp-color-cta);
    color: var(--rp-color-on-cta);
    padding: 11px 15px;
    border-radius: var(--rp-radius-sm);
    font-weight: var(--rp-weight-semibold);
    line-height: 1;
    margin-top: auto;
    transition: background var(--rp-transition), color var(--rp-transition);
}
.rp-featured-grid__button.button:hover {
    background: var(--rp-color-cta-hover);
    color: var(--rp-color-on-cta-hover);
}
/* Tablet (768–1024px — the source site's own Elementor tablet breakpoint): single column,
 * cards keep their row/landscape layout (image left, text right) — matches the source's
 * tablet rendering exactly. Only the column count changes; .rp-featured-grid__card's row
 * layout is untouched here, it's the shared default set above. */
@media (max-width: 1024px) {
    .rp-featured-grid__list.rp-featured-grid__list {
        grid-template-columns: 1fr;
    }
}
/* Mobile (<=767px — the source site's own Elementor mobile breakpoint): single column,
 * cards stack vertically (image on top, text below) since there's no room for a row.
 * grid-template-columns stays 1fr from the 1024px query above; only the card's own
 * flex-direction changes here. */
@media (max-width: 767px) {
    .rp-featured-grid__card {
        flex-direction: column;
    }
    .rp-featured-grid__media {
        flex-basis: auto;
    }
}

/* "Load more" pagination button (rp-featured-grid.php v2.1.0 — AJAX, appends
 * the next batch in place, no page reload). Plain .rp-btn brand style rather
 * than .rp-btn--cta so it reads as a page control, not another product
 * action next to the many per-card ORDER NOW (.rp-btn--cta) buttons. */
.rp-featured-grid__load-more-wrap {
    text-align: center;
    margin-top: var(--rp-space-lg);
}
.rp-featured-grid__load-more:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ------------------------------------------------------------------
 * 404 page — styles for the .rp-404 block
 * Child-theme template override: template-parts/content/error-404.php.
 * Centered, focused "page not found" layout: themed image, heading,
 * message, search, and Home/Shop buttons (the .rp-btn primitives).
 * All spacing/colour comes from the RP Framework --rp-* tokens.
 * ------------------------------------------------------------------ */
.rp-404__inner {
    text-align: center;
}
.rp-404__figure {
    margin: 0 auto var(--rp-space-lg);
    max-width: 480px;
}
.rp-404__image {
    display: block;
    width: 100%;
    height: auto;
}
.rp-404__title {
    margin: 0 0 var(--rp-space-sm);
}
.rp-404__text {
    max-width: 560px;
    margin: 0 auto var(--rp-space-lg);
    color: var(--rp-color-text);
}
.rp-404__search {
    max-width: 480px;
    margin: 0 auto var(--rp-space-xl);
}
.rp-404__search .search-form,
.rp-404__search form {
    display: flex;
    gap: var(--rp-space-2xs);
}
/* Kadence's search-field renders at its intrinsic width (~267px) inside a
 * 480px box, and the icon button is absolutely positioned pinned to the
 * form's right edge — leaving a large empty gap between the visible input
 * and the icon. The label (flex item wrapping the input) never grows to
 * fill the row, so make it do so and stretch the input to fill the label;
 * the input already carries 60px of right padding reserved for the icon
 * overlay, so text won't run under it once the input is full width. */
.rp-404__search .search-form label,
.rp-404__search form label {
    flex: 1 1 auto;
}
.rp-404__search .search-form .search-field,
.rp-404__search form .search-field {
    width: 100%;
    box-sizing: border-box;
}
.rp-404__actions {
    display: flex;
    gap: var(--rp-space-sm);
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 767px) {
    .rp-404__figure {
        max-width: 320px;
    }
    .rp-404__actions .rp-btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ------------------------------------------------------------------
 * Contact page — styles for the .rp-contact block
 * Native core Columns block (Contact page, id 1767): .rp-contact__text
 * (heading + description) and .rp-contact__form (CF7 "Contact Page Form",
 * id 1910) are the two GSAP animation targets — see uploads/rp-gsap/rp-gsap-init.js
 * for the converging slide-in. Card sits on the Void Navy page canvas via
 * Kadence's own "boxed" content style — no extra background needed here.
 * ------------------------------------------------------------------ */
.rp-contact {
    padding: var(--rp-section-pad) 0;
    align-items: center;
}
/* Give the heading column extra width (like the source, where the text column
 * is wider than the form). At an even 50/50 split the 144px "With Us!" (591px)
 * exceeds the 572px column and breaks to a 3rd line; widening the text column
 * lets "Connect" (line 1) and "With Us!" (line 2) each sit on one line. Desktop
 * only — core Columns stack to a single column below 782px. */
@media (min-width: 782px) {
    .rp-contact.wp-block-columns > .rp-contact__text {
        flex: 1.4 1 0;
    }
    .rp-contact.wp-block-columns > .rp-contact__form {
        flex: 1 1 0;
    }
}
.rp-contact__text h1 {
    margin-top: 0;
    /* Large "hero" heading matching the source's dramatic two-line treatment
     * ("Connect" on its own line). Maxes at 144px (= the user's 108pt) on
     * desktop, scales down fluidly on smaller screens. Heavy weight + tight
     * line-height/tracking for the black display look. */
    font-size: clamp(2.75rem, 11vw, 144px);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.02em;
}
/* Pre-hide the two GSAP animation targets (see uploads/rp-gsap/rp-gsap-init.js)
 * so there's no flash of the final state before the footer script runs.
 * Scoped to html:not(.no-js) — Kadence's own early inline script removes
 * "no-js" from <html> the instant JS executes, so if JS is ever disabled or
 * fails, "no-js" stays and this rule never applies — content stays visible,
 * no permanently-hidden fallback risk. */
html:not(.no-js) .rp-contact__text,
html:not(.no-js) .rp-contact__form {
    opacity: 0;
}

/* First Name / Last Name share a row. CF7's wpautop wraps consecutive field
 * tags (no blank line between them in the form body) into a SINGLE <p>, not
 * one each — so that <p> is set to display:contents (its box disappears,
 * its two .wpcf7-form-control-wrap children become the flex items directly). */
.rp-contact-form__row {
    display: flex;
    gap: var(--rp-space-sm);
    /* The row's inner <p> is display:contents (box removed), so it contributes
     * no bottom margin — and the row div itself had none, leaving the First/Last
     * row jammed against the Email field. Restore the same 16px rhythm the other
     * stacked fields get from `.wpcf7-form p { margin: 0 0 var(--rp-space-sm) }`. */
    margin-bottom: var(--rp-space-sm);
}
.rp-contact-form__row p {
    display: contents;
}
.rp-contact-form__row .wpcf7-form-control-wrap {
    flex: 1 1 0;
    min-width: 0;
}
.rp-contact-form__row .wpcf7-form-control-wrap input {
    width: 100%;
    box-sizing: border-box;
}

/* CF7 field spacing + submit button, matching the source's dark full-width button. */
.rp-contact__form .wpcf7-form p {
    margin: 0 0 var(--rp-space-sm);
}
.rp-contact__form input[type="submit"] {
    display: block;
    width: 100%;
    background: var(--rp-color-brand);
    color: var(--rp-color-on-brand);
    border: 0;
    border-radius: var(--rp-radius-sm);
    padding: var(--rp-space-sm);
    font-weight: var(--rp-weight-semibold);
    font-size: var(--rp-text-lg);
    cursor: pointer;
    transition: background var(--rp-transition);
}
.rp-contact__form input[type="submit"]:hover {
    background: var(--rp-color-cta);
}

/* Same-window confirmation (rp-contact-form.php swaps this in on wpcf7mailsent). */
.rp-contact-form__success {
    text-align: center;
}
.rp-contact-form__success-image {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .rp-contact-form__row {
        flex-direction: column;
        gap: 0;
    }
}

/* ------------------------------------------------------------------
 * Gutenberg tables — sitewide zebra-striping + brand styling for every
 * table.wp-block-table used in post/page content (applies automatically,
 * no per-table markup needed). Colours/radius/shadow/spacing come from the
 * RP Framework tokens so it matches the current palette; typography uses
 * Poppins (header) / Mulish (body) per the reference design — both fonts
 * are enqueued sitewide in functions.php. Scoped to .wp-block-table only;
 * no other table styles or block markup are touched.
 * ------------------------------------------------------------------ */
/* Selector note: Gutenberg's table block puts the "wp-block-table" class on
 * the wrapping <figure>, not on the <table> itself — the descendant
 * combinator below is required, "table.wp-block-table" would never match. */
.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Mulish', sans-serif;
    background: var(--rp-color-surface);
    border-radius: var(--rp-radius);
    overflow: hidden;
    box-shadow: var(--rp-shadow);
}
.wp-block-table table th,
.wp-block-table table td {
    /* Core's own table-block CSS sets `border: 1px solid currentColor` on
     * every cell — reset all sides here before re-adding just the bottom
     * rule, otherwise its left/right/top borders keep showing through. */
    border: none;
    padding: 14px var(--rp-space-md);
    text-align: left;
    border-bottom: 1px solid var(--rp-color-input-border);
}
.wp-block-table table thead th {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: var(--rp-text-sm);
    line-height: 1.3;
    color: var(--rp-color-heading);
    background: var(--rp-color-base);
    border: none;
    border-bottom: 1px solid var(--rp-color-input-border);
}
.wp-block-table table td {
    color: var(--rp-color-contrast-2);
}
.wp-block-table table td:first-child,
.wp-block-table table th:first-child {
    font-weight: 700;
    color: var(--rp-color-heading);
}
.wp-block-table table tbody tr:nth-child(even) {
    background: var(--rp-color-base-2);
}
.wp-block-table table tbody tr:last-child td {
    border-bottom: none;
}

/* ------------------------------------------------------------------
 * Shop canvas — light-grey page frame on WooCommerce archives
 * Ported from the rankers.local blueprint (kadence-child v1.5.4, 2026-07-19).
 *
 * Site-wide the page canvas is Void Navy (RP Framework §5 sets
 * `body, .wp-site-blocks { background-color: var(--rp-color-canvas) }`) so
 * white content cards read as panels on a dark frame. The shop and its
 * category / tag archives are a deliberate exception: a light-grey frame, so
 * the dense product grid plus filter sidebar read as one bright retail
 * surface.
 *
 * Implemented by re-pointing the TOKEN rather than re-declaring
 * background-color, so both `body` and `.wp-site-blocks` — which each read
 * --rp-color-canvas — follow automatically, with no !important needed.
 * Bonus: the archive title and sidebar widget titles are dark navy
 * (--global-palette3) and were previously near-invisible against the navy
 * frame; on grey they regain contrast.
 * ------------------------------------------------------------------ */
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag {
    --rp-color-canvas: var(--rp-color-base); /* #EFEFF6 — light grey */
}


/* ------------------------------------------------------------------
 * Footer widget-area links  (ported from rankers.local child theme)
 * Links in the middle footer widget columns don't inherit the bottom
 * footer-HTML link colour; re-apply the cyan->white-hover pair via the
 * framework tokens so every footer link matches, in whatever footer row.
 * ------------------------------------------------------------------ */
.site-footer .footer-widget-area a {
    color: var(--rp-color-highlight);
    transition: color var(--rp-transition);
}
.site-footer .footer-widget-area a:hover,
.site-footer .footer-widget-area a:focus {
    color: var(--rp-color-on-brand);
}


/* ------------------------------------------------------------------
 * Homepage FAQ accordion — styles for the .rp-faq block
 * Rendered by [rp_faqs] (sandbox plugin rp-faq-accordion.php), inside the
 * homepage's dark-purple (--rp-color-brand, matches footer/chrome) full-width
 * group directly beneath the "SEO Everywhere" section. Accessible
 * button/region accordion pattern (WAI-ARIA); each answer is toggled via
 * the `hidden` attribute (JS in rp-gsap-init.js), which this CSS animates
 * with a GSAP height tween rather than a hard show/hide.
 * Ported from the rankers.local Blueprint 2026-07-23.
 * ------------------------------------------------------------------ */
.rp-faq {
    max-width: var(--rp-container-wide);
    margin: 0 auto;
}
.rp-faq__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.rp-faq__item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.rp-faq__question-wrap {
    margin: 0;
}
.rp-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rp-space-sm);
    width: 100%;
    background: none;
    border: 0;
    padding: var(--rp-space-md) 0;
    font-family: inherit;
    font-size: var(--rp-text-lg);
    font-weight: var(--rp-weight-semibold);
    color: var(--rp-color-on-brand);
    text-align: left;
    cursor: pointer;
}
.rp-faq__icon {
    position: relative;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}
.rp-faq__icon::before,
.rp-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--rp-color-on-brand);
    transform: translate(-50%, -50%);
    transition: transform var(--rp-transition);
}
.rp-faq__icon::before {
    width: 14px;
    height: 2px;
}
.rp-faq__icon::after {
    width: 2px;
    height: 14px;
}
.rp-faq__question[aria-expanded="true"] .rp-faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}
.rp-faq__answer {
    overflow: hidden;
    height: 0;
}
.rp-faq__answer-inner {
    padding: 0 0 var(--rp-space-md);
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--rp-text-md);
    line-height: var(--rp-leading);
}
.rp-faq__answer-inner > *:first-child {
    margin-top: 0;
}
.rp-faq__answer-inner > *:last-child {
    margin-bottom: 0;
}
.rp-faq__answer-inner a {
    color: var(--rp-color-highlight);
}