/*
    Rapid Web Dev Kit - base styles

    Every color, font, size, gap, corner and shadow comes from a --kit-* variable made from the Look and Feel
    tokens in config.php (kit/styles/tokens.json lists them). Don't hardcode colors or sizes here; use the
    variables so every style and dark mode keep working.
    Card / button / photo styles, textures and section rhythm are data-kit-* attributes on <html>.
    Component-specific styles live in each component's style.css. Site tweaks go in assets/css/custom.css.

    Static export markers (kit/tools/exportsite.php keeps or drops whole blocks, like #ifdef; no nesting).
    Each marker is a comment of its own: "@component:name|name", "@token:name=value|value" or "@feature:name",
    closed by "@end".
        component   kept when one of those components is used on the site
        token       kept when that Look and Feel setting has one of those values
        feature     kept only when the export allows the feature
    Everything outside a block is base code and always kept. The live site ignores the markers.
*/

:root {
    /* Fallbacks (theme_css() sets every token) */
    --kit-border-width: 1px;
    --kit-heading-scale: 1;
    --kit-section-space: 1;
    --kit-space-unit: 1rem;
    --kit-gap: 1.5;
    --kit-card-padding: 1.75;
    --kit-font-size: 16px;
    --kit-line-height: 1.6;
    --kit-heading-line-height: 1.15;
    --kit-letter-spacing: 0;
    --kit-body-weight: 400;
    --kit-button-padding-y: .65rem;
    --kit-button-padding-x: 1.35rem;
    --kit-input-height: 2.9rem;
    --kit-container-width: 1240px;
    --kit-text-width: 720px;
    --kit-opacity-tint: .12;
    --kit-opacity-overlay: .55;
    --kit-opacity-muted: .85;
    --kit-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --kit-button-shadow: none;
    --kit-nav-height: 76px;
    --kit-sidebar-width: 270px;
    --kit-space: calc(var(--kit-space-unit) * var(--kit-gap));
    --kit-tint: calc(var(--kit-opacity-tint) * 100%);
    --kit-section-pad: calc(clamp(calc(var(--kit-space-unit) * 3.5), 7vw, calc(var(--kit-space-unit) * 6.5)) * var(--kit-section-space));
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kit-nav-height) + 1rem); }

body {
    font-family: var(--kit-font-body);
    font-size: var(--kit-font-size);
    font-weight: var(--kit-body-weight);
    letter-spacing: var(--kit-letter-spacing);
    background: var(--kit-bg);
    color: var(--kit-text);
    line-height: var(--kit-line-height);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .kit-font-heading {
    font-family: var(--kit-font-heading);
    font-weight: var(--kit-heading-weight, 700);
    letter-spacing: var(--kit-heading-spacing, -0.02em);
    text-transform: var(--kit-heading-transform, none);
    color: var(--kit-heading, inherit);
    line-height: var(--kit-heading-line-height);
}

a { color: var(--kit-primary); }
img { max-width: 100%; }
::selection { background: color-mix(in srgb, var(--kit-primary) 25%, transparent); }
.text-success { color: var(--kit-success) !important; } .text-danger { color: var(--kit-danger) !important; }
.alert-success { --bs-alert-color: var(--kit-success); --bs-alert-bg: color-mix(in srgb, var(--kit-success) 12%, var(--kit-bg)); --bs-alert-border-color: color-mix(in srgb, var(--kit-success) 35%, transparent); }
.alert-danger { --bs-alert-color: var(--kit-danger); --bs-alert-bg: color-mix(in srgb, var(--kit-danger) 12%, var(--kit-bg)); --bs-alert-border-color: color-mix(in srgb, var(--kit-danger) 35%, transparent); }
.alert-warning { --bs-alert-color: var(--kit-warning); --bs-alert-bg: color-mix(in srgb, var(--kit-warning) 12%, var(--kit-bg)); --bs-alert-border-color: color-mix(in srgb, var(--kit-warning) 35%, transparent); }
.alert-info { --bs-alert-color: var(--kit-info); --bs-alert-bg: color-mix(in srgb, var(--kit-info) 12%, var(--kit-bg)); --bs-alert-border-color: color-mix(in srgb, var(--kit-info) 35%, transparent); }

@media (min-width: 1200px) { .container { max-width: min(var(--kit-container-width), 100%); } }
.kit-section .row, .kit-child .row { --bs-gutter-x: var(--kit-space); --bs-gutter-y: var(--kit-space); }

.kit-muted { color: var(--kit-muted) !important; }
.kit-highlight { color: var(--kit-primary); }
.kit-skip { position: absolute; top: .5rem; left: .5rem; z-index: 2000; background: var(--kit-bg); padding: .5rem 1rem; border-radius: var(--kit-radius); }

/* ---------- Sections ---------- */

.kit-section { position: relative; }
.kit-pad-none { padding-block: 0; }
.kit-pad-sm { padding-block: calc(var(--kit-section-pad) * .5); }
.kit-pad-md { padding-block: var(--kit-section-pad); }
.kit-pad-lg { padding-block: calc(var(--kit-section-pad) * 1.4); }

.kit-bg-none { background: transparent; }
.kit-bg-default { background: var(--kit-bg); }
.kit-bg-alt { background: var(--kit-surface); }
.kit-bg-dark { background: var(--kit-bg); color: var(--kit-text); }
.kit-bg-gradient { background: var(--kit-gradient); color: #fff; }
.kit-bg-primary { background: var(--kit-brand-primary); color: var(--kit-on-primary); }

.kit-bg-gradient h1, .kit-bg-gradient h2, .kit-bg-gradient h3, .kit-bg-gradient .kit-highlight,
.kit-bg-primary h1, .kit-bg-primary h2, .kit-bg-primary h3, .kit-bg-primary h4, .kit-bg-primary .kit-highlight { color: inherit; }
.kit-bg-gradient .kit-eyebrow, .kit-bg-primary .kit-eyebrow,
.kit-bg-gradient .kit-subtitle, .kit-bg-primary .kit-subtitle,
.kit-bg-gradient .kit-muted, .kit-bg-primary .kit-muted { color: inherit !important; opacity: var(--kit-opacity-muted); }
.kit-bg-primary a:not(.btn) { color: inherit; }

/* ---------- Section headings ---------- */

.kit-heading { max-width: var(--kit-text-width); margin-bottom: clamp(calc(var(--kit-space-unit) * 2), 4vw, calc(var(--kit-space-unit) * 3.25)); }
.kit-eyebrow {
    display: inline-block;
    font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--kit-primary); margin-bottom: .75rem;
}
.kit-title { font-size: calc(clamp(1.9rem, 3.6vw, 2.8rem) * var(--kit-heading-scale)); margin: 0; }
.kit-subtitle { color: var(--kit-muted); font-size: 1.125rem; margin: 1rem 0 0; }

/* ---------- Buttons ---------- */

.btn { border-radius: var(--kit-button-radius, var(--kit-radius)); font-weight: 600; padding: var(--kit-button-padding-y) var(--kit-button-padding-x); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
.btn-lg { padding: calc(var(--kit-button-padding-y) * 1.3) calc(var(--kit-button-padding-x) * 1.3); font-size: 1.05em; }
.btn-sm { padding: calc(var(--kit-button-padding-y) * .6) calc(var(--kit-button-padding-x) * .65); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.btn-primary {
    --bs-btn-bg: var(--kit-primary); --bs-btn-border-color: var(--kit-primary); --bs-btn-color: var(--kit-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--kit-primary) 86%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--kit-primary) 86%, #000); --bs-btn-hover-color: var(--kit-on-primary);
    --bs-btn-active-bg: color-mix(in srgb, var(--kit-primary) 78%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--kit-primary) 78%, #000); --bs-btn-active-color: var(--kit-on-primary);
    --bs-btn-disabled-bg: var(--kit-primary); --bs-btn-disabled-border-color: var(--kit-primary); --bs-btn-disabled-color: var(--kit-on-primary);
    --bs-btn-focus-shadow-rgb: var(--kit-primary-rgb);
    box-shadow: var(--kit-button-shadow);
}
.btn-outline-primary {
    --bs-btn-color: var(--kit-primary); --bs-btn-border-color: var(--kit-primary);
    --bs-btn-hover-bg: var(--kit-primary); --bs-btn-hover-border-color: var(--kit-primary); --bs-btn-hover-color: var(--kit-on-primary);
    --bs-btn-active-bg: var(--kit-primary); --bs-btn-active-border-color: var(--kit-primary); --bs-btn-active-color: var(--kit-on-primary);
    --bs-btn-focus-shadow-rgb: var(--kit-primary-rgb);
    border-width: 2px;
}
.btn-accent {
    --bs-btn-bg: var(--kit-accent); --bs-btn-border-color: var(--kit-accent); --bs-btn-color: var(--kit-on-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--kit-accent) 86%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--kit-accent) 86%, #000); --bs-btn-hover-color: var(--kit-on-accent);
    --bs-btn-active-bg: color-mix(in srgb, var(--kit-accent) 78%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--kit-accent) 78%, #000); --bs-btn-active-color: var(--kit-on-accent);
}
.btn-outline-light { border-width: 2px; }

/* Inverted buttons on a primary colored section */
.kit-bg-primary .btn-primary {
    --bs-btn-bg: var(--kit-on-primary); --bs-btn-border-color: var(--kit-on-primary); --bs-btn-color: var(--kit-brand-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--kit-on-primary) 88%, var(--kit-brand-primary)); --bs-btn-hover-border-color: var(--kit-on-primary); --bs-btn-hover-color: var(--kit-brand-primary);
    --bs-btn-active-bg: var(--kit-on-primary); --bs-btn-active-color: var(--kit-brand-primary);
    box-shadow: none;
}
.kit-bg-primary .btn-outline-primary {
    --bs-btn-color: var(--kit-on-primary); --bs-btn-border-color: var(--kit-on-primary);
    --bs-btn-hover-bg: var(--kit-on-primary); --bs-btn-hover-border-color: var(--kit-on-primary); --bs-btn-hover-color: var(--kit-brand-primary);
}

.kit-buttons { display: flex; flex-wrap: wrap; gap: calc(var(--kit-space) / 2); }
.text-center .kit-buttons, .kit-buttons.justify-content-center { justify-content: center; }

/* ---------- Cards, icons, badges ---------- */

.kit-card {
    background: var(--kit-card, var(--kit-bg));
    border: var(--kit-border-width) solid var(--kit-border);
    border-radius: var(--kit-radius);
    box-shadow: var(--kit-shadow-sm, none);
    padding: calc(var(--kit-space-unit) * var(--kit-card-padding));
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.kit-card, .kit-card-hover { color: inherit; text-decoration: none; }
a.kit-card:hover, .kit-card-hover:hover { transform: translateY(-4px); box-shadow: var(--kit-shadow); border-color: color-mix(in srgb, var(--kit-primary) 35%, var(--kit-border)); }
.kit-bg-alt .kit-card { background: var(--kit-card, var(--kit-bg)); }

.kit-icon {
    width: 3.25rem; height: 3.25rem; flex: none;
    display: inline-grid; place-items: center;
    border-radius: calc(var(--kit-radius) * .8);
    background: color-mix(in srgb, var(--kit-primary) var(--kit-tint), transparent);
    color: var(--kit-primary);
    font-size: 1.45rem;
}
.kit-bg-primary .kit-icon, .kit-bg-gradient .kit-icon { background: rgba(255, 255, 255, .15); color: inherit; }

.kit-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .85rem; border-radius: 999px;
    font-size: .85rem; font-weight: 600;
    background: color-mix(in srgb, var(--kit-primary) var(--kit-tint), transparent);
    color: var(--kit-primary);
}

.kit-img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--kit-radius); display: block; }
.kit-img-frame { position: relative; border-radius: var(--kit-radius); overflow: hidden; box-shadow: var(--kit-shadow); }
/* @component:testimonials */
.kit-stars { color: #f5b301; letter-spacing: .1em; }
/* @end */

/* @component:split|hero|pricing */
.kit-checklist { list-style: none; padding: 0; margin: 0; }
.kit-checklist li { position: relative; padding-left: 1.9rem; margin-bottom: .6rem; }
.kit-checklist li::before {
    content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .05rem;
    color: var(--kit-primary); font-size: 1.2rem; line-height: 1.4;
}
.kit-bg-primary .kit-checklist li::before, .kit-bg-gradient .kit-checklist li::before { color: inherit; }
/* @end */

/* @feature:forms */
/* ---------- Forms ---------- */

.form-control, .form-select {
    border-radius: calc(var(--kit-radius) * .7);
    min-height: var(--kit-input-height);
    padding: .5rem 1rem;
    border-width: var(--kit-border-width);
    border-color: var(--kit-border);
    background-color: var(--kit-bg);
}
.form-control:focus, .form-select:focus {
    border-color: var(--kit-primary);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--kit-primary) 20%, transparent);
}
.form-label { font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.kit-req { color: var(--kit-primary); }
.kit-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* @end */

/* ---------- Social ---------- */

.kit-social { display: flex; flex-wrap: wrap; gap: .5rem; }
.kit-social a {
    width: 2.5rem; height: 2.5rem; display: inline-grid; place-items: center;
    border-radius: 50%; border: 1px solid var(--kit-border); color: inherit; text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.kit-social a:hover { background: var(--kit-primary); border-color: var(--kit-primary); color: var(--kit-on-primary); }

/* ---------- Scroll reveal animations ---------- */

.kit-js [data-reveal] { opacity: 0; transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.kit-js [data-reveal="fade-up"] { transform: translateY(28px); }
.kit-js [data-reveal="zoom"] { transform: scale(.96); }
.kit-js [data-reveal="slide-left"] { transform: translateX(40px); }
.kit-js [data-reveal="slide-right"] { transform: translateX(-40px); }
.kit-js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .kit-js [data-reveal] { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- Toasts (kit.toast) ---------- */

.kit-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; display: grid; gap: .5rem; }
.kit-toast {
    background: var(--kit-text); color: var(--kit-bg);
    padding: .8rem 1.1rem; border-radius: var(--kit-radius); box-shadow: var(--kit-shadow);
    animation: kit-toast-in .3s ease;
}
@keyframes kit-toast-in { from { opacity: 0; transform: translateY(10px); } }

/* Sections that switch to dark (data-bs-theme) must reset text color, since color inherits from body */
[data-bs-theme] { color: var(--kit-text); }

/* =====================================================================
   Style attributes (data-kit-* on <html>, from the Look and Feel select tokens)
   ===================================================================== */

/* ---------- small label style (label_style): plain | pill | line | mono | bracket ---------- */
.kit-eyebrow-pill { /* the hero eyebrow - a pill unless the theme says otherwise */ }
/* @token:label_style=pill */
[data-kit-eyebrow=pill] .kit-eyebrow {
    padding: .3rem .8rem; border-radius: 999px; letter-spacing: .08em;
    background: color-mix(in srgb, var(--kit-primary) var(--kit-tint), transparent);
}
/* @end */
/* @token:label_style=line|plain|mono|bracket */
[data-kit-eyebrow=line] .kit-eyebrow, [data-kit-eyebrow=line] .kit-eyebrow-pill,
[data-kit-eyebrow=plain] .kit-eyebrow-pill, [data-kit-eyebrow=mono] .kit-eyebrow-pill, [data-kit-eyebrow=bracket] .kit-eyebrow-pill {
    background: none; padding: 0; border-radius: 0; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
/* @end */
/* @token:label_style=line */
[data-kit-eyebrow=line] .kit-eyebrow::before, [data-kit-eyebrow=line] .kit-eyebrow-pill::before {
    content: ""; display: inline-block; width: 2.2rem; height: 2px; background: currentColor; vertical-align: middle; margin-right: .75rem;
}
/* @end */
/* @token:label_style=plain */
[data-kit-eyebrow=plain] .kit-eyebrow, [data-kit-eyebrow=plain] .kit-eyebrow-pill { letter-spacing: .24em; font-weight: 600; font-size: .75rem; }
/* @end */
/* @token:label_style=mono */
[data-kit-eyebrow=mono] .kit-eyebrow, [data-kit-eyebrow=mono] .kit-eyebrow-pill { font-family: var(--kit-font-mono); letter-spacing: .04em; text-transform: none; font-weight: 600; }
[data-kit-eyebrow=mono] .kit-eyebrow::before, [data-kit-eyebrow=mono] .kit-eyebrow-pill::before { content: "// "; opacity: .6; }
/* @end */
/* @token:label_style=bracket */
[data-kit-eyebrow=bracket] .kit-eyebrow::before, [data-kit-eyebrow=bracket] .kit-eyebrow-pill::before { content: "[ "; }
[data-kit-eyebrow=bracket] .kit-eyebrow::after, [data-kit-eyebrow=bracket] .kit-eyebrow-pill::after { content: " ]"; }
/* @end */
.kit-hero--image .kit-eyebrow-pill, .kit-bg-primary .kit-eyebrow, .kit-bg-gradient .kit-eyebrow { color: inherit; }

/* ---------- card style (card_style): soft | flat | outline | raised | brutal ---------- */
/* @token:card_style=flat */
[data-kit-cards=flat] .kit-card { background: var(--kit-surface); border-color: transparent; box-shadow: none; }
[data-kit-cards=flat] .kit-bg-alt .kit-card { background: var(--kit-bg); }
/* @end */
/* @token:card_style=outline */
[data-kit-cards=outline] .kit-card { box-shadow: none; border-color: color-mix(in srgb, var(--kit-heading) 22%, var(--kit-border)); }
[data-kit-cards=outline] a.kit-card:hover, [data-kit-cards=outline] .kit-card-hover:hover { box-shadow: none; border-color: var(--kit-primary); }
/* @end */
/* @token:card_style=raised */
[data-kit-cards=raised] .kit-card { border-color: transparent; box-shadow: var(--kit-shadow); }
/* @end */
/* @token:card_style=brutal */
[data-kit-cards=brutal] .kit-card, [data-kit-cards=brutal] .kit-img-frame {
    border: var(--kit-border-width) solid var(--kit-border); box-shadow: var(--kit-shadow);
}
[data-kit-cards=brutal] a.kit-card:hover, [data-kit-cards=brutal] .kit-card-hover:hover { transform: translate(-3px, -3px); box-shadow: var(--kit-shadow), 3px 3px 0 var(--kit-border); border-color: var(--kit-border); }
/* @end */
/* @token:card_style=brutal|outline */
[data-kit-cards=brutal] .form-control, [data-kit-cards=brutal] .form-select,
[data-kit-cards=outline] .form-control, [data-kit-cards=outline] .form-select { border-width: var(--kit-border-width); border-color: color-mix(in srgb, var(--kit-heading) 55%, var(--kit-border)); }
/* @end */
/* @token:card_style=brutal */
[data-kit-cards=brutal] .kit-icon { border: var(--kit-border-width) solid var(--kit-border); background: var(--kit-accent); color: var(--kit-on-accent); }
/* @end */

/* ---------- background texture (background_texture): none | grid | dots | lines | paper | noise ---------- */
/* @token:background_texture=grid */
[data-kit-texture=grid] body, [data-kit-texture=grid] .kit-bg-default {
    background-image:
        linear-gradient(color-mix(in srgb, var(--kit-border) 45%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--kit-border) 45%, transparent) 1px, transparent 1px);
    background-size: 32px 32px;
}
/* @end */
/* @token:background_texture=dots */
[data-kit-texture=dots] body, [data-kit-texture=dots] .kit-bg-default {
    background-image: radial-gradient(color-mix(in srgb, var(--kit-heading) 16%, transparent) 1.2px, transparent 1.4px);
    background-size: 22px 22px;
}
/* @end */
/* @token:background_texture=lines */
[data-kit-texture=lines] body, [data-kit-texture=lines] .kit-bg-default {
    background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--kit-heading) 5%, transparent) 0 1px, transparent 1px 4px);
}
/* @end */
/* @token:background_texture=paper|noise */
[data-kit-texture=paper] body, [data-kit-texture=paper] .kit-bg-default, [data-kit-texture=paper] .kit-bg-alt,
[data-kit-texture=noise] body, [data-kit-texture=noise] .kit-bg-default, [data-kit-texture=noise] .kit-bg-alt {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* @end */
/* @token:background_texture=noise */
[data-kit-texture=noise] body, [data-kit-texture=noise] .kit-bg-default, [data-kit-texture=noise] .kit-bg-alt {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* @end */

/* ---------- button style (button_style): soft | hard ---------- */
/* @token:button_style=hard */
[data-kit-buttons=hard] .btn-primary, [data-kit-buttons=hard] .btn-accent, [data-kit-buttons=hard] .btn-outline-primary {
    border: var(--kit-border-width) solid var(--kit-heading);
    box-shadow: var(--kit-button-shadow, 3px 3px 0 var(--kit-heading));
}
[data-kit-buttons=hard] .btn-primary:hover, [data-kit-buttons=hard] .btn-accent:hover, [data-kit-buttons=hard] .btn-outline-primary:hover {
    transform: translate(-2px, -2px); border-color: var(--kit-heading);
}
[data-kit-buttons=hard] .btn:active { transform: translate(2px, 2px); box-shadow: none; }
[data-kit-buttons=hard] .kit-bg-primary .btn-primary, [data-kit-buttons=hard] .kit-cta-card .btn-primary { border-color: currentColor; }
/* @end */

/* ---------- text buttons (button_style): underline | line | arrow | quiet - no box, hover changes slightly ---------- */
/* @token:button_style=underline|line|arrow|quiet */
:is([data-kit-buttons=underline], [data-kit-buttons=line], [data-kit-buttons=arrow], [data-kit-buttons=quiet]) .btn {
    --kit-tb: var(--kit-primary);
    background: none; border: 0; border-radius: 0; box-shadow: none; padding-inline: 0; color: var(--kit-tb);
    text-decoration: none; transform: none;
}
:is([data-kit-buttons=underline], [data-kit-buttons=line], [data-kit-buttons=arrow], [data-kit-buttons=quiet]) .btn:is(:hover, :focus-visible, :active) {
    background: none; border: 0; box-shadow: none; transform: none; color: var(--kit-tb);
}
:is([data-kit-buttons=underline], [data-kit-buttons=line], [data-kit-buttons=arrow], [data-kit-buttons=quiet]) .btn-accent { --kit-tb: var(--kit-accent); }
:is([data-kit-buttons=underline], [data-kit-buttons=line], [data-kit-buttons=arrow], [data-kit-buttons=quiet]) :is(.btn-light, .btn-outline-light) { --kit-tb: #fff; }
:is([data-kit-buttons=underline], [data-kit-buttons=line], [data-kit-buttons=arrow], [data-kit-buttons=quiet]) .kit-bg-primary .btn { --kit-tb: var(--kit-on-primary); }
[data-kit-buttons=underline] .btn { text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .3em; }
[data-kit-buttons=underline] .btn:is(:hover, :focus-visible) { text-decoration-thickness: .2em; text-underline-offset: .2em; }
[data-kit-buttons=line] .btn { border-bottom: 2px solid currentColor; padding-block: .25em; }
[data-kit-buttons=line] .btn:is(:hover, :focus-visible) { border-bottom-width: 5px; padding-bottom: calc(.25em - 3px); }
[data-kit-buttons=arrow] .btn::after { content: "\2192"; display: inline-block; margin-left: .45em; transition: transform .2s ease; }
[data-kit-buttons=arrow] .btn:is(:hover, :focus-visible)::after { transform: translateX(.35em); }
[data-kit-buttons=quiet] .btn { transition: opacity .15s ease; }
[data-kit-buttons=quiet] .btn:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: .25em; opacity: .75; }
/* @end */

/* ---------- link style (link_style): underline | hover | none | grow - links inside the page text ---------- */
/* @token:link_style=hover|none|grow */
:is([data-kit-links=hover], [data-kit-links=none], [data-kit-links=grow]) :is(main, footer) a:not(.btn, .kit-card, .nav-link, .navbar-brand, .dropdown-item, .kit-logo) { text-decoration: none; }
[data-kit-links=hover] :is(main, footer) a:not(.btn, .kit-card, .nav-link, .navbar-brand, .dropdown-item, .kit-logo):is(:hover, :focus-visible) { text-decoration: underline; }
[data-kit-links=none] :is(main, footer) a:not(.btn, .kit-card, .nav-link, .navbar-brand, .dropdown-item, .kit-logo) { transition: opacity .15s ease; }
[data-kit-links=none] :is(main, footer) a:not(.btn, .kit-card, .nav-link, .navbar-brand, .dropdown-item, .kit-logo):is(:hover, :focus-visible) { opacity: .7; }
[data-kit-links=grow] :is(main, footer) a:not(.btn, .kit-card, .nav-link, .navbar-brand, .dropdown-item, .kit-logo) {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 .1em no-repeat; transition: background-size .25s ease;
}
[data-kit-links=grow] :is(main, footer) a:not(.btn, .kit-card, .nav-link, .navbar-brand, .dropdown-item, .kit-logo):is(:hover, :focus-visible) { background-size: 100% .1em; }
/* @end */

/* ---------- photo corners (image_style): round | square | frame ---------- */
/* @token:image_style=square */
[data-kit-images=square] .kit-img, [data-kit-images=square] .kit-img-frame { border-radius: 0; }
/* @end */
/* @token:image_style=frame */
[data-kit-images=frame] .kit-img-frame {
    padding: .65rem; background: var(--kit-card, var(--kit-bg)); border: 1px solid var(--kit-border); border-radius: 0;
}
[data-kit-images=frame] .kit-img-frame .kit-img { border-radius: 0; }
/* @end */

/* ---------- highlighted words (highlight_style): color | marker | italic | block | wavy | underline  (*word* in titles) ---------- */
/* @token:highlight_style=marker */
[data-kit-highlight=marker] .kit-highlight { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--kit-primary) 30%, transparent) 62%); color: inherit; }
/* @end */
/* @token:highlight_style=italic */
[data-kit-highlight=italic] .kit-highlight { font-style: italic; font-weight: inherit; }
/* @end */
/* @token:highlight_style=block */
[data-kit-highlight=block] .kit-highlight {
    color: var(--kit-on-accent); background: var(--kit-accent); padding: 0 .18em; border-radius: .15em;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
[data-kit-highlight=block] .kit-bg-primary .kit-highlight, [data-kit-highlight=block] .kit-hero--image .kit-highlight { color: var(--kit-on-accent); }
[data-kit-highlight=block] .kit-pill { border: 2px solid var(--kit-border); }
/* @end */
/* @token:highlight_style=wavy */
[data-kit-highlight=wavy] .kit-highlight {
    text-decoration: underline wavy color-mix(in srgb, var(--kit-accent) 80%, transparent);
    text-decoration-thickness: .08em; text-underline-offset: .18em;
}
/* @end */
/* @token:highlight_style=underline */
[data-kit-highlight=underline] .kit-highlight {
    color: inherit; text-decoration: underline; text-decoration-color: var(--kit-primary);
    text-decoration-thickness: .12em; text-underline-offset: .14em;
}
/* @end */

/* ---------- button lettering (button_text): normal | mono (uppercase monospace) | spaced (small spaced capitals) ---------- */
/* @token:button_text=mono */
[data-kit-button-text=mono] .btn { text-transform: uppercase; letter-spacing: .06em; font-family: var(--kit-font-mono); font-size: .9rem; }
[data-kit-button-text=mono] .btn-lg { font-size: 1rem; }
/* @end */
/* @token:button_text=spaced */
[data-kit-button-text=spaced] .btn { text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; font-weight: 600; }
/* @end */

/* ---------- section backgrounds (section_rhythm): flat | alternate | divided ---------- */
/* @token:section_rhythm=alternate */
[data-kit-rhythm=alternate] main > .kit-section.kit-bg-default:nth-child(even) { background-color: var(--kit-surface); }
/* @end */
/* @token:section_rhythm=divided */
[data-kit-rhythm=divided] main > .kit-section + .kit-section:not(.kit-bg-primary):not(.kit-bg-gradient) { border-top: var(--kit-border-width) solid var(--kit-border); }
/* @end */

/* =====================================================================
   Ad banners ($ad_banners) - shown at their real size, centered, above the footer or under the header
   ===================================================================== */
/* @feature:ads */
.kit-ads { padding-block: calc(var(--kit-space-unit) * 1.5); clear: both; position: relative; z-index: 1; }
.kit-ads .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--kit-space-unit); }
.kit-ad { display: inline-block; line-height: 0; max-width: 100%; }
.kit-ad img { display: block; width: auto; height: auto; max-width: 100%; }
/* @end */

/* =====================================================================
   Components inside components (Dual View, Background Image Title) + "No Images Found"
   ===================================================================== */
/* @component:columns|backdrop|box|position|videobg */
.kit-children { display: grid; gap: var(--kit-space); }
.kit-children > .kit-child { min-width: 0; }
.kit-child .container { max-width: none; padding-inline: 0; }
.kit-child .kit-heading { margin-bottom: calc(var(--kit-space-unit) * 1.25); }
.kit-child.kit-bg-alt, .kit-child.kit-bg-primary, .kit-child.kit-bg-gradient, .kit-child.kit-bg-dark { padding: calc(var(--kit-space-unit) * var(--kit-card-padding)); border-radius: var(--kit-radius); }
/* @end */
/* @component:gallery|carousel|logos */
.kit-no-images {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 220px;
    border: var(--kit-border-width) dashed var(--kit-border); border-radius: var(--kit-radius); color: var(--kit-muted); text-align: center; padding: 2rem;
}
.kit-no-images i { font-size: 2rem; }
.kit-no-images span { font-size: .85rem; font-family: var(--kit-font-mono); }
/* @end */

/* Text outline per component (section options text_outline / text_outline_color): eight equally spaced shadows, so text stands out on photos */
.kit-outline { --ol-c: #000; --ol: 1px; }
.kit-outline--light { --ol-c: #fff; }
.kit-outline--primary { --ol-c: var(--kit-primary); }
.kit-outline--thin { --ol: 1px; }
.kit-outline--medium { --ol: 2px; }
.kit-outline--thick { --ol: 3px; }
.kit-outline {
    text-shadow: calc(var(--ol) * -1) calc(var(--ol) * -1) 0 var(--ol-c), 0 calc(var(--ol) * -1) 0 var(--ol-c), var(--ol) calc(var(--ol) * -1) 0 var(--ol-c),
                 calc(var(--ol) * -1) 0 0 var(--ol-c), var(--ol) 0 0 var(--ol-c),
                 calc(var(--ol) * -1) var(--ol) 0 var(--ol-c), 0 var(--ol) 0 var(--ol-c), var(--ol) var(--ol) 0 var(--ol-c);
}
.kit-outline :is(.btn, .form-control, .form-select, input, textarea, select, button) { text-shadow: none; }

/* Title thickness per component (section option title_weight): big titles don't have to be bold */
.kit-tw-thin { --kit-heading-weight: 200; }
.kit-tw-light { --kit-heading-weight: 300; }
.kit-tw-regular { --kit-heading-weight: 400; }
.kit-tw-bold { --kit-heading-weight: 800; }
:is(.kit-tw-thin, .kit-tw-light, .kit-tw-regular, .kit-tw-bold) :is(h1, h2, h3, h4, h5, .kit-title, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
    font-weight: var(--kit-heading-weight);
}