/*
Theme Name: Kadence Child
Template: kadence
*/

/* @font-face — disabled; Kadence Customizer now handles Lato natively */
/*
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/wp-content/uploads/betheme/fonts/Lato/Lato-400-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/wp-content/uploads/betheme/fonts/Lato/Lato-700-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/wp-content/uploads/betheme/fonts/Lato/Lato-900-latin.woff2") format("woff2");
}
*/

:root {
    --dmax-navy: #08263c;
    --dmax-ink: #0b1f33;
    --dmax-blue: #155492;
    --dmax-sky: #3cbce6;
    --dmax-soft: #f4f7fb;
    --dmax-white: #ffffff;
    /* --global-body-font-family / --global-heading-font-family — handled by Kadence Customizer */
}

/* Custom scrollbar — matches production (dentimax.com) */
::-webkit-scrollbar {
    width: 9px;
    background-color: #ecebebdc;
}
::-webkit-scrollbar-thumb {
    background-color: var(--global-palette3, #3cbce6);
}
html {
    scrollbar-width: thin;
    scrollbar-color: var(--global-palette3, #3cbce6) #ecebebdc;
}

body {
    color: var(--dmax-ink);
    /* font-family handled by Kadence --global-body-font-family */
}

/* Header branding handled by Customizer */
.site-header .custom-logo {
    max-width: 160px;
    height: auto;
}

/* .header-button {
    border-radius: 30px;
} */

.dmax-home {
    /* font-family handled by Kadence Customizer (base_font = Lato) */
}

.dmax-row {
    overflow: hidden;
    padding: clamp(80px, 10vw, 140px) 0;
}

.dmax-section-tall {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.dmax-section-tall>.kt-row-column-wrap {
    width: min(100% - 40px, 1200px);
}
.dmax-row .kt-row-layout-inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 20px;
    box-sizing: border-box;
}

.dmax-row .kt-row-column-wrap.kt-has-2-columns {
    /* Removed forced grid to allow Kadence editor column widths to work */
    align-items: center;
}

/* .kb-row-layout-iddmaxhero>.kt-row-column-wrap {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) !important;
}

*/

.kb-row-layout-iddmaxpro .kadence-columndmaxproc1>.kt-inside-inner-col {
    padding-left: clamp(32px, 5vw, 96px);
}
/* Utility classes for dark/light sections */
.dmax-section-dark {
    background: var(--dmax-navy);
    color: var(--dmax-white);
}

.dmax-section-dark h1,
.dmax-section-dark h2,
.dmax-section-dark h3,
.dmax-section-dark p {
    color: var(--dmax-white);
}

.dmax-section-light {
    background: var(--dmax-white);
}

.dmax-section-light h1,
.dmax-section-light h2,
.dmax-section-light h3,
.dmax-section-light p,
.dmax-section-soft h1,
.dmax-section-soft h2,
.dmax-section-soft h3,
.dmax-section-soft p {
    color: var(--dmax-ink);
}
.dmax-section-soft {
    background: var(--dmax-soft);
}

.dmax-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 78% 54%, rgba(60, 188, 230, 0.18), transparent 34%),
        linear-gradient(112deg, #08263c 0%, #041827 48%, #000 100%);
}

.dmax-eyebrow {
    margin-bottom: 14px;
    color: var(--dmax-sky);
    font-size: 18px;
    font-weight: 700;
}

.bigmobile {
    font-weight: 900;
}

.dmax-title {
    margin: 0 0 18px;
    font-size: clamp(40px, 4vw, 50px);
    line-height: 1;
    font-weight: 900;
}

.dmax-section-title {
    margin: 0 0 18px;
    font-size: clamp(38px, 3.6vw, 50px);
    line-height: 1;
    font-weight: 900;
}

.kt-adv-headingdmaxfaqtitle,
.kt-adv-headingdmaxreviewtitle {
    font-weight: 600;
}

.dmax-copy,
.single-content h2.dmax-copy {
    max-width: 620px;
    margin: 0 0 26px;
    /* font-size: clamp(18px, 1.5vw, 23px); */
    font-size: clamp(16px, 1.5vw, 21px);
    line-height: 1.45;
}

.dmax-home .wp-block-kadence-advancedbtn {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}

/* .dmax-home .dmax-cta-stack {
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 30px;
    max-width: 424px;
} */

/* Fix Kadence native bugs for buttons (0px border & missing hover fill) */
/* DISABLED 2026-05-07 — buttons_border option re-saved in {width} format
   so render_responsive_border() outputs 2px natively. Keeping as reference. */
/*
.kb-button.kb-btn-global-primary,
.kb-button.kb-btn-global-secondary,
.kb-button.kb-btn-global-inherit,
.button.button-style-secondary,
.wp-block-button__link {
    border-width: 2px !important;
    border-style: solid !important;
}

.kb-button.kb-btn-global-primary,
.wp-block-button__link:not(.button-style-secondary) {
    border-color: var(--global-palette-btn-bg) !important;
}

.kb-button.kb-btn-global-secondary:hover,
.button.button-style-secondary:hover {
    background-color: var(--global-palette1) !important;
    color: #ffffff !important;
    border-color: var(--global-palette1) !important;
}
*/

/* Buttons handled natively by Kadence Global Styles (Customizer) */

/*
 * Secondary button color adaptation for light vs dark sections.
 *
 * The global secondary button (set in Kadence Customizer) is white outline:
 *   --global-palette-btn-sec: #ffffff (white text)
 *   border: 2px solid #ffffff (white border)
 *   background: transparent
 *
 * This works on dark backgrounds but fails on light backgrounds (white on white).
 *
 * APPROACH A (what we use below): CSS custom properties scoped to section classes.
 *   - Overrides the CSS variables that global.min.css already consumes.
 *   - The .dmax-section-light / .dmax-section-soft classes are already on the rows.
 *   - No changes to block JSON needed — buttons stay {"inheritStyles": "inherit-secondary"}.
 *   - One rule handles ALL light sections automatically.
 *   - Scoped, not !important, not global.
 *   - MUST include :visited — Kadence global.min.css has :visited rules at 0-3-0
 *     specificity that override child theme 0-3-0 normal rules (loaded later in cascade).
 *     Adding :visited pushes the child theme selector to 0-4-0, winning the cascade.
 *
 * APPROACH B (alternative): Per-block attributes in the block JSON.
 *   - Set "color" and "borderStyle" directly on each button block.
 *   - build_css() in singlebtn generates per-button CSS with unique ID selector.
 *   - Higher specificity than global styles, so it overrides without CSS.
 *   - Most Kadence-native, but every button on a light section needs extra attributes.
 *   - Use when you need a button to differ from BOTH the global primary and secondary.
 *
 * Use Approach A when: many sections share the same light/dark pattern.
 * Use Approach B when: a single button needs unique styling that differs from both globals.
 */
.dmax-section-light .button.button-style-secondary,
.dmax-section-light .button.button-style-secondary:visited,
.dmax-section-soft .button.button-style-secondary,
.dmax-section-soft .button.button-style-secondary:visited {
    color: var(--dmax-ink);
    border-color: var(--dmax-ink);
}
.dmax-section-light .button.button-style-secondary:hover,
.dmax-section-soft .button.button-style-secondary:hover {
    color: #ffffff;
    background-color: var(--global-palette1);
    border-color: var(--global-palette1);
}

.dmax-product-logo {
    max-width: 210px;
    margin-bottom: 22px;
}

.dmax-media .kb-img {
    display: block;
    max-width: 100%;
    height: auto;
}

.dmax-media-large .kb-img {
    width: min(112%, 760px);
    max-width: none;
}

.dmax-media-bleed-left .kb-img {
    margin-left: clamp(-64px, -4vw, -24px);
}

.dmax-media-bleed-right .kb-img {
    margin-right: clamp(-64px, -4vw, -24px);
}

.dmax-award-badge {
    max-width: 156px;
    margin-top: 46px;
}
.dmax-software .kb-img {
    border-radius: 8px;
}

.dmax-faq .kt-accordion-panel-inner {
    font-size: 17px;
    line-height: 1.65;
}

/* Ensure all accordion headers are transparent and use correct icon visibility */
.kt-blocks-accordion-header {
    background-color: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.kt-blocks-accordion-header:hover,
.kt-blocks-accordion-header:focus {
    background-color: transparent !important;
}

/* Restore/Ensure icon visibility */
.kt-blocks-accordion-icon-trigger {
    display: flex !important;
    opacity: 1 !important;
}

.dmax-reviews {
    text-align: center;
}

.site-footer {
    background: #0a0a0a;
    color: var(--dmax-white);
}

.site-footer a,
.site-footer p,
.site-footer li {
    color: var(--dmax-white);
}

.site-footer h2,
.site-footer h3 {
    color: var(--dmax-sky);
}

.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer li + li {
    margin-top: 8px;
}

/* Match production behavior: use Kadence's native cart, but surface it only on WooCommerce views. */
body:not(.woocommerce):not(.woocommerce-page) .header-cart-wrap,
body:not(.woocommerce):not(.woocommerce-page) .header-mobile-cart-wrap {
    display: none;
}
/* Right-align desktop navigation.
 * Default Kadence grid: 1fr auto 1fr → center column gets equal space on both sides.
 * Override: auto 1fr auto → logo auto-sized, nav fills remaining space, right section
 * collapses to zero when cart is hidden (non-WooCommerce pages).
 * On WooCommerce pages, cart reappears in the auto-sized right column. */
.site-header-row.site-header-row-center-column {
    grid-template-columns: auto 1fr auto;
}

.site-header-section-center {
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .dmax-hero {
            align-items: flex-end;
        }
    .dmax-row .kt-row-column-wrap {
        width: min(100% - 28px, 640px);
    }
        /* .dmax-section-tall {
            min-height: auto;
    */
    
    /*.dmax-section-tall>.kt-row-column-wrap {
            width: min(100% - 28px, 640px);
    */
    .dmax-row .kt-row-column-wrap.kt-has-2-columns {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .dmax-home .wp-block-kadence-advancedbtn {
        align-items: stretch;
        flex-direction: column;
    }

    .dmax-home .kb-button {
        width: 100%;
    }
        .dmax-media-large .kb-img {
            width: 100%;
            max-width: 100%;
        }
    
        .dmax-media-bleed-left .kb-img,
        .dmax-media-bleed-right .kb-img {
            margin-inline: 0;
        }
}