/*
 * 00 Content base.
 * Load order: content-style.css -> css/10-content-patterns.css -> css/15-woocommerce.css -> css/20-page-patterns.css -> css/20-support-pages.css -> style.css -> css/pages/50-page-*.css.
 * Purpose: DentiMax tokens, global content defaults, row/section utilities, buttons, and base Kadence content primitives.
 * Related files: css/10-content-patterns.css holds reusable content components; css/15-woocommerce.css holds WooCommerce/plugin base styles; css/20-page-patterns.css and css/20-support-pages.css hold page-family overrides; css/pages/50-page-*.css holds single-page overrides.
 */

:root,
.editor-styles-wrapper {
    /* DentiMax brand aliases — resolve to Kadence palette; change colors in Customizer */
    --dmax-blue: var(--global-palette1);
    /* #155492 */
    --dmax-sky: var(--global-palette3);
    /* #3cbce6 */
    --dmax-navy: var(--global-palette6);
    /* #08263c */
    --dmax-ink: var(--global-palette5);
    /* #0b1f33 — body text */
    --dmax-soft: #f4f7fb;
    /* light section bg — no palette match */
    --dmax-white: #ffffff;
    --dmax-light-gray: #dddddd;
    --dmax-black: #0a0a0a;
    /* --dmax-h1-size: clamp(26px, 3vw, 48px); */
    --dmax-h1-size: clamp(26px, 3vw, 43px);

    /* Kadence block spacing tokens */
    --global-kb-spacing-xxs: 0.5rem;
    --global-kb-spacing-xs: 1rem;
    --global-kb-spacing-sm: 1.5rem;
    --global-kb-spacing-md: 2rem;
    --global-kb-spacing-lg: 3rem;
    --global-kb-spacing-xl: 4rem;
    --global-kb-spacing-xxl: 5rem;
    --global-kb-spacing-3xl: 6.5rem;
    --global-kb-spacing-4xl: 8rem;
    --global-kb-spacing-5xl: 10rem;
    --global-kb-gap-xs: 0.5rem;
    --global-kb-gap-sm: 1rem;
    --global-kb-gap-md: 2rem;
    --global-kb-gap-lg: 4rem;
    --global-kb-font-size-sm: 0.9rem;
    --global-kb-font-size-md: 1.25rem;
    --global-kb-font-size-lg: 2rem;
    --global-kb-font-size-xl: 3rem;
    --global-kb-font-size-xxl: 4rem;
    --global-kb-font-size-xxxl: 5rem;
    --global-kb-row-default-top: 25px;
    --global-kb-row-default-bottom: 25px;
}

body {
    color: var(--dmax-ink);
}

h1.page-title.archive-title,
.entry-hero.page-hero-section .entry-header h1 {
    font-size: var(--dmax-h1-size);
}

.content-title-style-above .entry-hero .entry-hero-container-inner {
    padding-top: 72px;
}

.entry-hero-container-inner {
    background: linear-gradient(135deg, rgba(60, 188, 230, 0.12), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%) !important;
    background: radial-gradient(circle at 15% 20%, rgba(60, 188, 230, 0.10), transparent 30%),
        radial-gradient(circle at 85% 0%, rgba(19, 73, 102, 0.06), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f9fbfc 45%, #f2f8fa 100%) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 74%, #ffffff 100%),        radial-gradient(ellipse at 15% 18%, rgba(60, 188, 230, 0.18), transparent 42%),        radial-gradient(ellipse at 88% 0%, rgba(21, 84, 146, 0.12), transparent 44%),        linear-gradient(180deg, rgba(21, 84, 146, 0.14) 0%, #eef7fb 11%, #ffffff 100%) !important;
}

body.page-id-17037 .entry-hero-container-inner {
    /* background:
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 74%, #ffffff 100%),
        radial-gradient(ellipse at 15% 18%, rgba(60, 188, 230, 0.18), transparent 42%),
        radial-gradient(ellipse at 88% 0%, rgba(21, 84, 146, 0.12), transparent 44%),
        linear-gradient(180deg, rgba(21, 84, 146, 0.14) 0%, #eef7fb 72%, #ffffff 100%) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 89%, #ffffff 100%),        radial-gradient(ellipse at 15% 18%, rgba(60, 188, 230, 0.18), transparent 42%),        radial-gradient(ellipse at 88% 0%, rgba(21, 84, 146, 0.12), transparent 44%),        linear-gradient(180deg, rgba(21, 84, 146, 0.14) 0%, #eef7fb 92%, #ffffff 100%) !important; */
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 74%, #ffffff 100%),        radial-gradient(ellipse at 15% 18%, rgba(60, 188, 230, 0.18), transparent 42%),        radial-gradient(ellipse at 88% 0%, rgba(21, 84, 146, 0.12), transparent 44%),        linear-gradient(180deg, rgba(21, 84, 146, 0.14) 0%, #eef7fb 11%, #ffffff 100%) !important;
}

@media (max-width: 767px) {
    body.page-id-17037 .entry-hero-container-inner {
        background:
            linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 62%, #ffffff 100%),
            radial-gradient(ellipse at 18% 12%, rgba(60, 188, 230, 0.14), transparent 34%),
            radial-gradient(ellipse at 86% 0%, rgba(21, 84, 146, 0.08), transparent 34%),
            linear-gradient(180deg, rgba(21, 84, 146, 0.10) 0%, #f2f8fa 56%, #ffffff 100%) !important;
    }
}

.content-title-style-above .entry-hero.page-hero-section .entry-header,
.content-title-style-above .entry-hero.-archive-hero-section .entry-header {
    min-height: clamp(96px, 9vw, 130px);
    min-height: clamp(86px, 8vw, 120px);
}

.content-title-style-above .entry-hero-container-inner .entry-title {
    line-height: 1.18;
}

@media (max-width: 767px) {
    .content-title-style-above.mobile-transparent-header .entry-hero .entry-hero-container-inner {
        padding-top: 82px;
    }

    .content-title-style-above .entry-hero.page-hero-section .entry-header,
    .content-title-style-above .entry-hero.-archive-hero-section .entry-header {
        min-height: 86px;
    }
}

h1.page-title.archive-title,
.wp-site-blocks .product-archive-title h1.page-title.archive-title {
    /* font-style: normal; */
    /* font-weight: 900; */
    /* line-height: 1.5; */
    color: var(--global-palette1);
}

@media (max-width: 767px) {
    .hero-container.site-container {
        padding: 0 calc(0.25 * var(--global-content-edge-padding));
    }
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
del,
details,
dfn,
div,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
span,
strike,
strong,
summary,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

table td,
table th {
    padding: var(--global-kb-spacing-xxs, 10px) 5px;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    vertical-align: middle;
}



/* ── Form inputs — Betheme production colors (Issue #2) ──── */
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
    color: #626262;
}

input[type="date"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    color: #1982c2;
}

/* Global content link defaults */
.content-wrap a,
.kb-content a,
.editor-styles-wrapper a {
    text-decoration: none;
}

.content-wrap a:hover,
.kb-content a:hover,
.editor-styles-wrapper a:hover {
    text-decoration: underline;
}

/* .content-wrap a span i,
.content-wrap a:hover span i,
.kb-content a span i,
.kb-content a:hover span i,
.editor-styles-wrapper a i,
.editor-styles-wrapper a:hover i {
    text-decoration: none;
} */

/* Base paragraph margins to override Kadence's large default gap */
div.single-content p,
.editor-styles-wrapper div.single-content p,
ul.wp-block-list {
    margin-bottom: var(--global-kb-spacing-xs);
}
ul.wp-block-list li {
    margin-bottom: var(--global-kb-spacing-xxs);
}

.dmax-row,
.editor-styles-wrapper .dmax-row {
    overflow: hidden;
    /* padding: clamp(80px, 8vw, 140px) 0 clamp(80px, 8vw, 120px) 0;
    padding: clamp(75px, 5.5vw, 105px) 0 clamp(75px, 5.5vw, 90px) 0; */
    padding: clamp(45px, 4vw, 75px) 0 clamp(45px, 4vw, 90px) 0;
}

body.content-title-style-above .dmax-row {
    padding-top: clamp(40px, 3.5vw, 70px);
    padding-bottom: clamp(40px, 3.5vw, 60px);
}

.dmax-row-large,
.editor-styles-wrapper .dmax-row-large,
body.content-title-style-above .dmax-row.dmax-row-large {
    padding-top: clamp(80px, 8vw, 140px);
    padding-bottom: clamp(80px, 8vw, 120px);
}

body:not(.content-title-style-above) .dmax-row:first-child {
    /* padding-top: clamp(100px, 10vw, 140px); */
    /* padding-top: clamp(75px, 6vw, 105px); */
    /* padding-top: clamp(110px, 6vw, 100px); */
    padding-top: clamp(135px, 4vw, 100px);
}


style:first-child+.dmax-row {
    /* padding-top: clamp(60px, 6vw, 120px); */
    /* padding-top: clamp(45px, 4.5vw, 90px); */
    padding-top: clamp(45px, 4vw, 70px);
}

/* .dmax-row.dmax-section-dark+.dmax-row.dmax-section-dark, */
.dmax-row.dmax-section-dark+style+.dmax-row.dmax-section-dark,
.dmax-row.dmax-section-light+.dmax-row.dmax-section-light:not(.dmax-os-freetrial-section),
.dmax-row.dmax-section-light+style+.dmax-row.dmax-section-light:not(.dmax-os-freetrial-section) {
    padding-top: 0;
    padding-bottom: calc(clamp(45px, 4vw, 90px));
}

.dmax-row.dmax-section-dark .dmax-row {
    padding-top: calc(clamp(45px, 4vw, 75px) * .25);
    padding-bottom: 0;
}

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

.dmax-section-tall>.kt-row-column-wrap,
.editor-styles-wrapper .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,
.editor-styles-wrapper .dmax-row .kb-grid-columns-2 {
    /* Removed forced grid to allow Kadence editor column widths to work */
    align-items: center;
}

.dmax-row .dmax-row {
    padding-top: calc(.625 * clamp(45px, 4vw, 75px));
    padding-bottom: 0;
}

/* Utility classes for dark/light sections */
.dmax-section-dark,
.editor-styles-wrapper .dmax-section-dark {
    background: var(--dmax-navy);
    color: #fff;
}

.dmax-section-dark a:not(.kb-button):not(.button):not(.btn):not(.kb-btn):not(.wp-block-button__link):not(.kt-tab-title):not(.dmax-partner-action),
.editor-styles-wrapper .dmax-section-dark a:not(.kb-button):not(.button):not(.btn):not(.kb-btn):not(.wp-block-button__link):not(.kt-tab-title) {
    color: var(--global-palette3, #3cbce6);
}

.dmax-section-dark h1,
.dmax-section-dark h2,
.dmax-section-dark h3,
.dmax-section-dark p,
.editor-styles-wrapper .dmax-section-dark h1,
.editor-styles-wrapper .dmax-section-dark h2,
.editor-styles-wrapper .dmax-section-dark h3,
.editor-styles-wrapper .dmax-section-dark p {
    color: #fff;
}

/* preffer to use block attributes over this css class, to make it look the same in both editor and frontend */
.dmax-section-dark .dmax-eyebrow,
.editor-styles-wrapper .dmax-section-dark .dmax-eyebrow {
    color: var(--dmax-sky);
}

.dmax-section-light,
.editor-styles-wrapper .dmax-section-light {
    background: #fff;
}

.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,
.editor-styles-wrapper .dmax-section-light h1,
.editor-styles-wrapper .dmax-section-light h2,
.editor-styles-wrapper .dmax-section-light h3,
.editor-styles-wrapper .dmax-section-light p,
.editor-styles-wrapper .dmax-section-soft h1,
.editor-styles-wrapper .dmax-section-soft h2,
.editor-styles-wrapper .dmax-section-soft h3,
.editor-styles-wrapper .dmax-section-soft p {
    color: var(--dmax-ink);
    text-shadow: 0 0 4px #fff;
}

.dmax-section-soft,
.editor-styles-wrapper .dmax-section-soft {
    background: var(--dmax-soft);
}

.dmax-sensors-section .dmax-sensor-desc,
.editor-styles-wrapper .dmax-sensors-section .dmax-sensor-desc {
    color: var(--dmax-ink);
}

.dmax-section-title,
.editor-styles-wrapper .dmax-section-title {
    margin: 0 0 18px;
    font-size: var(--dmax-h1-size);
    line-height: 1;
    font-weight: 900;
}

.dmax-copy,
.single-content h2.dmax-copy,
.editor-styles-wrapper .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;
}

/* Glassmorphic backdrop-blur card for copy readability on mobile & tablet ≤1024px */
@media (max-width: 1024px) {


    .dmax-section-light .dmax-copy,
    .single-content .dmax-section-light h2.dmax-copy,
    .editor-styles-wrapper .dmax-section-light .dmax-copy {
        /* Webkit/Safari fallback */
        padding: 14px 18px;
    }

    .dmax-section-light:not(.dmax-pm-desktop-row) .dmax-copy,
    .single-content .dmax-section-light h2.dmax-copy,
    .editor-styles-wrapper .dmax-section-light .dmax-copy {
        background: rgba(8, 38, 60, 0.45);
        /* Elegant semi-transparent navy glass */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        /* Webkit/Safari fallback */
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #ffffff;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    }

    /* Automatic theme adaptation inside light/soft sections */
    .dmax-section-light:not(.dmax-pm-desktop-row) .dmax-copy,
    .dmax-section-light.dmax-dream-integration-section .dmax-copy,
    .dmax-section-soft .dmax-copy {
        background: rgba(255, 255, 255, 0.55);
        /* Elegant white glass */
        border: 1px solid rgba(0, 0, 0, 0.06);
        color: #0b1f33;
        /* Dark slate text */
    }
}

.bigmobile,
.editor-styles-wrapper .bigmobile {
    font-weight: 900;
}


/* 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,
.editor-styles-wrapper .dmax-section-light .button.button-style-secondary,
.editor-styles-wrapper .dmax-section-light .button.button-style-secondary:visited,
.editor-styles-wrapper .dmax-section-soft .button.button-style-secondary,
.editor-styles-wrapper .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,
.editor-styles-wrapper .dmax-section-light .button.button-style-secondary:hover,
.editor-styles-wrapper .dmax-section-soft .button.button-style-secondary:hover {
    color: #fff;
    background-color: var(--global-palette1);
    border-color: var(--global-palette1);
}

th .kb-button:not(.kb-btn-global-inherit) {
    /* background: red; */
    padding: .25em .625em;
    cursor: pointer;
    font-size: .95rem;
    /* border-radius: 3px; */
    margin-top: .5em;
}