/*
 * CBT Flow Foundation Styles
 * Shared: variables, base, layouts, core components
 *
 * @package CBTFlow
 */

/* =============================================
   VARIABLES
   ============================================= */

:root {
    /* Brand colors */
    --color-primary: var(--primary, #3b82f6);
    --color-primary-soft: var(--primary-ultra-light, #eff6ff);
    --color-primary-strong: var(--primary-dark, #1d4ed8);
    --color-secondary: var(--secondary, #64748b);
    --color-accent: var(--accent, #f59e0b);

    /* Backgrounds */
    --color-bg-body: var(--body-bg-color, #ffffff);
    --color-bg-soft: var(--bg-light, #f8fafc);

    /* Text */
    --color-text: var(--body-color, #334155);
    --color-text-strong: var(--heading-color, #0f172a);
    --color-text-muted: var(--text-dark-muted, #64748b);
    --color-text-inverted: var(--text-light, #ffffff);

    /* Shadows */
    --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-strong: 0 20px 40px rgba(0, 0, 0, 0.15);

}

/* =============================================
   BASE
   ============================================= */

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================
   SECTION (shared wrapper)
   ============================================= */

.bg--ultra-light {
    background-color: var(--bg-ultra-light, #fafafa);
}

.bg--primary {
    background-color: var(--primary-light);
    --relative-heading-color: var(--bg-dark-heading, #fff);
    --icon-scheme: var(--bg-dark-icon);
}

.bg--primary .rich-text {
    color: var(--base);
}

/* Gradient backgrounds — dual radials in opposing corners */
.bg--gradient-light {
    background:
        radial-gradient(ellipse 130% 72% at top right, var(--secondary-light) 0%, transparent 43%),
        radial-gradient(ellipse 80% 50% at bottom left, var(--primary-semi-light, oklch(0.857 0.127 63.57)) 0%, transparent 60%),
        var(--bg-ultra-light, #fafafa);
}

.bg--gradient-dark {
    background:
        radial-gradient(ellipse 80% 70% at top left, var(--base-light, #1e3a5f) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at bottom right, var(--primary-dark, #1e40af) 0%, transparent 70%),
        var(--base-ultra-dark, #0a0a2e);
    --relative-heading-color: var(--bg-dark-heading, #fff);
    --icon-scheme: var(--bg-dark-icon);
}

.bg--gradient-brand {
    background:
        radial-gradient(ellipse 130% 72% at top left, var(--secondary-light, oklch(0.8569500644 0.127 63.5705191342)) 0%, transparent 70%),
        radial-gradient(ellipse 100% 45% at bottom right, var(--primary-ultra-light) 0%, transparent 92%),
        var(--primary-light);
    --relative-heading-color: var(--bg-dark-heading, #fff);
    --icon-scheme: var(--bg-dark-icon);
    color: var(--base);
}

/* Gradient text color overrides */
.bg--gradient-dark .heading-group__eyebrow {
    color: var(--primary-light, var(--primary));
}

.bg--gradient-brand .heading-group__eyebrow {
    color: var(--white, #fff);
}

/* Boxed gradient backgrounds */
.section--bg-boxed.bg--gradient-light .section__inner {
    background:
        radial-gradient(ellipse 130% 72% at top right, var(--secondary-light) 0%, transparent 43%),
        radial-gradient(ellipse 80% 50% at bottom left, var(--primary-semi-light, oklch(0.857 0.127 63.57)) 0%, transparent 60%),
        var(--bg-ultra-light, #fafafa);
}

.section--bg-boxed.bg--gradient-dark .section__inner {
    background:
        radial-gradient(ellipse 80% 70% at top left, var(--base-light, #1e3a5f) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at bottom right, var(--primary-dark, #1e40af) 0%, transparent 70%),
        var(--base-ultra-dark, #0a0a2e);
}

.section--bg-boxed.bg--gradient-brand .section__inner {
    background:
        radial-gradient(ellipse 130% 72% at top left, var(--secondary-light) 0%, transparent 70%),
        radial-gradient(ellipse 100% 45% at bottom right, var(--primary-ultra-light) 0%, transparent 92%),
        var(--primary-light);
}

/* Background image overlays for gradients */
.section--has-bg.bg--gradient-dark::before {
    background:
        radial-gradient(ellipse 80% 70% at top left, color-mix(in srgb, var(--base-light, #1e3a5f) 85%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at bottom right, color-mix(in srgb, var(--primary-dark, #1e40af) 65%, transparent) 0%, transparent 70%),
        var(--base-ultra-dark, #0a0a2e);
}

.section--has-bg.bg--gradient-brand::before {
    background:
        radial-gradient(ellipse 130% 72% at top left, color-mix(in srgb, var(--secondary-light) 85%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 100% 45% at bottom right, color-mix(in srgb, var(--primary-ultra-light) 65%, transparent) 0%, transparent 92%),
        var(--primary-light);
}

/* Grain / noise texture overlay for gradient sections */
.bg--gradient-light::after,
.bg--gradient-dark::after,
.bg--gradient-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='5' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0.15 0.3 0.1 0.25 0 0.2 0.35'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 400px 400px;
    mix-blend-mode: screen;
}

.bg--gradient-dark::after {
    mix-blend-mode: screen;
}

/* Keep grain above bg but below content */
.bg--gradient-light > *,
.bg--gradient-dark > *,
.bg--gradient-brand > * {
    position: relative;
    z-index: 2;
}

.section--full-screen {
    min-height: 100vh;
    align-content: center;
    padding-block: 0;
}

/* Full Screen Vertical Alignment Options */
.section--full-screen.section--valign-top {
    align-content: start;
}

.section--full-screen.section--valign-middle {
    align-content: center;
}

.section--full-screen.section--valign-bottom {
    align-content: end;
}

/* Background Type - Boxed (constrains background and adds border radius) */
.section--bg-boxed {
    background: transparent !important;
}

.section--bg-boxed .section__inner {
    background: var(--color-bg-body);
    border-radius: var(--radius-l);
    padding: var(--section-padding-block) var(--space-s);
}

/* Boxed with backgrounds */
.section--bg-boxed.bg--ultra-light .section__inner {
    background: var(--bg-ultra-light, #fafafa);
}

.section--bg-boxed.bg--light .section__inner {
    background: var(--color-bg-soft);
}

.section--bg-boxed.bg--dark .section__inner {
    background: var(--base);
}

.section--bg-boxed.bg--primary .section__inner {
    background: var(--primary);
}

.section--bg-boxed.section--full-screen .section__inner {
    padding: var(--space-s);
    min-height: calc(100vh - (var(--gutter) * 2));
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section--no-pt {
    padding-top: 0 !important;
}

/* =============================================
   LAYOUTS
   ============================================= */

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    width: 100%;
    text-align: left;
}

.content-gap { gap: var(--content-gap, var(--space-m)); }
.stack--center {
    align-items: center;
    text-align: center;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--content-gap);
    align-items: center;
}

.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }
.cluster--right { justify-content: flex-end; }

.grid {
    display: grid;
    gap: var(--space-m);
}

@media (min-width: 768px) {
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.content-narrow {
    max-width: 64rem;
}

/* =============================================
   SECTION BACKGROUND IMAGE (figure layer)
   ============================================= */

/* Needed for absolute bg layering */
.section {
    position: relative;
    overflow: hidden;
}

section.section .is-bg img {
    width: auto;
    height: 100%;
}

section.section .stack {
    z-index: 2;
}

/* Optional readability overlay (default) */
.section--has-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2; /* above image, below content */
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.85),
        rgba(255,255,255,0.65)
    );
}

/* Background image overlays per background type */
.section--has-bg.bg--ultra-light::before {
    background: linear-gradient(
        to bottom,
        rgba(250, 250, 250, 0.85),
        rgba(250, 250, 250, 0.65)
    );
}

.section--has-bg.bg--light::before {
    background: linear-gradient(
        to bottom,
        rgba(217, 217, 217, 0.85),
        rgba(217, 217, 217, 0.65)
    );
}

.section--has-bg.bg--dark::before {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.85),
        rgba(0,0,0,0.50)
    );
}

.section--has-bg.bg--primary::before {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--primary) 85%, transparent),
        color-mix(in srgb, var(--primary) 50%, transparent)
    );
}

/* =============================================
   INLINE UTILITIES
   ============================================= */

span.highlight {
    color: var(--primary);
    font-weight: 600;
}

/* =============================================
   HEADING GROUP (shared component)
   ============================================= */

.heading-group {
    display: flex;
    flex-direction: column;
    max-width: var(--width-60);
    gap: var(--content-gap);
}

.heading-group__top {
    display: flex;
    flex-direction: column;
    gap: calc(var(--content-gap) * 0.25);
}

.heading-group:last-child {
    margin-bottom: 0;
}

.heading-group--center {
    text-align: center;
    margin-inline: auto;
    align-items: center;
}

.heading-group--center .heading-group__top {
    align-items: center;
}


.heading-group__title:last-child {
    margin-bottom: 0;
}

.heading-group__subtitle {
    font-size: var(--text-m);
    font-weight: 500;
    max-width: var(--width-50);
}

.heading-group .heading-group__eyebrow {
    color: var(--primary);
    font-weight: 600;
    max-width: var(--width-30);
    font-size: var(--h5);
}

.bg--light .heading-group__top .heading-group__eyebrow {
    color: var(--primary);
}

.bg--dark .heading-group__eyebrow {
    color: var(--base-semi-dark);
}

.bg--ultra-dark .heading-group__eyebrow {
    color: var(--bg-ultra-dark-text);
}

section.bg--light .cluster .btn--base.btn--outline {
    --btn-background: transparent;
    --btn-background-hover: var(--base);
    --btn-text-color: var(--base);
    --btn-text-color-hover: var(--base-ultra-light);
    --btn-border-width: 2px;
    --btn-border-color: var(--base);
    --btn-border-color-hover: var(--base);
    --focus-color: var(--base-light);
}

/* =============================================
   BUTTON (shared component)
   ============================================= */

.btn--ghost {
    background: transparent;
    border-color: var(--color-secondary);
    color: var(--base-semi-dark);
}

.btn--ghost:hover {
    background: var(--color-bg-soft);
}

.btn--text {
    padding-inline: 0;
    color: var(--color-primary);
}

.btn--text:hover {
    text-decoration: underline;
}

.btn--sm {
    padding: 0.7rem 1.4rem;
    font-size: var(--text-xs);
}

.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Button overrides for dark/brand sections */
.bg--primary .btn--primary {

}

.bg--primary .btn--ghost,
.bg--dark .btn--ghost {
    border-color: var(--color-text-inverted);
    color: var(--color-text-inverted);
}

/* =============================================
   LIST (shared component)
   ============================================= */

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

/* Checklist */
.checklist {
    list-style: none;
    padding: 0;
}

.checklist li {
    display: flex;
    gap: var(--space-xs);
}

.checklist li::before {
    content: '';
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.15em;
    background: var(--secondary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.bg--primary .checklist li::before {
    background: var(--secondary);
}

/* =============================================
   GRID OVERRIDES
   ============================================= */

.grid--1-2 {
    display: grid;
    grid-template-columns: var(--grid-1-2);
    grid-template-rows: 1fr;
}

@media (max-width: 992px) {
    .grid--1-2 {
        grid-template-columns: var(--grid-1);
    }
}

.grid--2-1 {
    display: grid;
    grid-template-columns: var(--grid-2-1);
    grid-template-rows: 1fr;
}

@media (max-width: 992px) {
    .grid--2-1 {
        grid-template-columns: var(--grid-1);
    }
}

.grid--2 {
    display: grid;
    grid-template-columns: var(--grid-2);
    grid-template-rows: 1fr;
}

@media (max-width: 768px) {
    .grid--2 {
        grid-template-columns: var(--grid-1);
    }
}

.grid--3 {
    display: grid;
    grid-template-columns: var(--grid-3);
    grid-template-rows: 1fr;
}

@media (max-width: 992px) {
    .grid--3 {
        grid-template-columns: var(--grid-2);
    }
}

@media (max-width: 768px) {
    .grid--3 {
        grid-template-columns: var(--grid-1);
    }
}

.grid--1-2-1 {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr;
}

@media (max-width: 992px) {
    .grid--1-2-1 {
        grid-template-columns: var(--grid-1);
    }
}

.grid--4 {
    display: grid;
    grid-template-columns: var(--grid-4);
    grid-template-rows: 1fr;
}

@media (max-width: 992px) {
    .grid--4 {
        grid-template-columns: var(--grid-2);
    }
}

@media (max-width: 768px) {
    .grid--4 {
        grid-template-columns: var(--grid-1);
    }
}

/* =============================================
   RICH TEXT (shared component)
   ============================================= */


.rich-text li {
    margin-bottom: 0.8rem;
    font-weight: 700;
}

.rich-text a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rich-text a:hover {
    color: var(--color-primary-strong);
}

/* =============================================
   MEDIA (shared component)
   ============================================= */

.media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-m);
    margin: 0;
}

.media img,
.media video {
    display: block;
    width: 100%;
    height: auto;
}

.media--rounded {
    border-radius: var(--radius-l);
}

.media--shadow {
    box-shadow: var(--shadow-strong);
}

.media--aspect-16-9 { aspect-ratio: 16 / 9; }
.media--aspect-4-3 { aspect-ratio: 4 / 3; }
.media--aspect-1-1 { aspect-ratio: 1 / 1; }

.media--aspect-16-9 img,
.media--aspect-4-3 img,
.media--aspect-1-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =============================================
   CARD (shared component)
   ============================================= */

.card {
    justify-content: space-between;
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.card__heading a {
    color: inherit;
    text-decoration: none;
}

.card__heading a:hover {
    color: var(--card-link-color);
}

/* =============================================
   FAQ (shared component)
   ============================================= */

.faq__item {
    border-radius: var(--radius-m);
    border: var(--border);
    background: var(--color-bg-body);
    margin-bottom: var(--space-xs);
}

.faq__item:last-child {
    margin-bottom: 0;
}

.faq__question {
    width: 100%;
    padding: var(--space-s);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-weight: 500;
    color: var(--base);
}

.faq__icon {
    font-size: var(--text-l);
    transition: transform var(--transition);
    flex-shrink: 0;
}

.js-accordion.is-open .faq__icon {
    transform: rotate(45deg);
}

.js-accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
}

.faq__answer {
    padding: 0 var(--space-s) var(--space-s);
    color: var(--base-dark);
}

/* =============================================
   ACCESSIBILITY
   ============================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}