/* =========================================================================
   frontend-5star.css
   PsychSupport & Educational Services — premium polish layer
   Loads AFTER style.css / coloring.css / scheme-01.css so it can override.
   - WCAG 2.1 AA accessibility (skip link, visible focus, motion safety)
   - Premium typography weights + tighter heading rhythm
   - Soft elevated cards, refined buttons, status badges
   - Hero / breadcrumb upgrades using the new clinical palette
   ========================================================================= */

/* ---------- 1. Accessibility primitives ---------- */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 10000;
    padding: 10px 18px;
    background: var(--primary-color);
    color: #fff !important;
    border-radius: var(--r-md);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: top .2s ease;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
    top: 16px;
    outline: none;
    box-shadow: var(--shadow-focus), var(--shadow-lg);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: none !important;
    box-shadow: var(--shadow-focus) !important;
    border-radius: var(--r-sm);
}

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

::selection {
    background: rgba(var(--primary-color-rgb), .18);
    color: var(--ink-900);
}

/* ---------- 2. Typography rhythm ---------- */
body {
    color: var(--ink-700);
    background: var(--surface-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--ink-800);
    letter-spacing: -.01em;
}
h1 { font-weight: 600; }
h2 { font-weight: 600; }
.lead, p.lead {
    color: var(--ink-700);
    font-size: 1.125rem;
    line-height: 1.7;
}

/* ---------- 3. Buttons (refined) ---------- */
.btn-main,
a.btn-main,
.btn-primary,
a.btn-primary {
    background: var(--primary-color);
    color: #fff !important;
    border: 1px solid var(--primary-color);
    border-radius: var(--r-pill);
    padding: 12px 28px;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: var(--shadow-sm);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-main:hover,
a.btn-main:hover,
.btn-primary:hover,
a.btn-primary:hover {
    background: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.btn-outline-primary,
a.btn-outline-primary {
    color: var(--primary-color) !important;
    background: transparent;
    border: 1px solid var(--primary-color);
    border-radius: var(--r-pill);
    padding: 12px 28px;
    font-weight: 600;
}
.btn-outline-primary:hover {
    background: var(--primary-color);
    color: #fff !important;
}
.btn-accent {
    background: var(--accent-color);
    color: var(--ink-900) !important;
    border-radius: var(--r-pill);
    padding: 12px 28px;
    font-weight: 600;
    border: 1px solid var(--accent-color);
    box-shadow: var(--shadow-sm);
}
.btn-accent:hover {
    background: var(--accent-color-dark);
    border-color: var(--accent-color-dark);
    color: #fff !important;
}
.btn-sm { padding: 8px 18px; font-size: .875rem; }

/* ---------- 4. Cards / surfaces ---------- */
.card,
.feature-box,
.de_pricing-table,
.de-team-list,
.bg-light {
    border-radius: var(--r-lg);
}
.bg-light {
    background: var(--surface-100) !important;
    border: 1px solid var(--ink-200);
}
.shadow-soft { box-shadow: var(--shadow-md); }
.shadow-elevated { box-shadow: var(--shadow-lg); }

/* ---------- 5. Badges (standards / status) ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .02em;
    line-height: 1.2;
}
.badge.bg-primary {
    background: var(--primary-color-light) !important;
    color: var(--primary-color-dark) !important;
    border: 1px solid rgba(var(--primary-color-rgb), .25);
}
.badge.bg-secondary {
    background: var(--secondary-color-light) !important;
    color: var(--secondary-color-dark) !important;
    border: 1px solid rgba(var(--secondary-color-rgb), .25);
}
.badge.bg-accent {
    background: var(--accent-color-light) !important;
    color: var(--accent-color-dark) !important;
    border: 1px solid rgba(var(--accent-color-rgb), .25);
}
.badge.bg-success {
    background: rgba(var(--color-success-rgb), .12) !important;
    color: var(--color-success) !important;
    border: 1px solid rgba(var(--color-success-rgb), .25);
}
.badge.bg-warning {
    background: rgba(var(--color-warning-rgb), .12) !important;
    color: var(--color-warning) !important;
    border: 1px solid rgba(var(--color-warning-rgb), .25);
}
.badge.bg-danger {
    background: rgba(var(--color-danger-rgb), .12) !important;
    color: var(--color-danger) !important;
    border: 1px solid rgba(var(--color-danger-rgb), .25);
}

/* ---------- 6. Hero / sub-header overlays ---------- */
section.jarallax .sw-overlay,
section .sw-overlay {
    background: linear-gradient(135deg,
        rgba(15, 42, 61, .80) 0%,
        rgba(31, 111, 139, .65) 60%,
        rgba(106, 156, 137, .55) 100%);
}
section.jarallax h1,
section.jarallax h2,
section.jarallax .breadcrumb a,
section.jarallax .breadcrumb span {
    color: #fff !important;
}
.breadcrumb {
    background: transparent;
    padding: 0;
    font-size: .875rem;
    letter-spacing: .02em;
}
.breadcrumb a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.breadcrumb a:hover { border-bottom-color: rgba(255, 255, 255, .85); }

/* ---------- 7. Links / lists in policy / clinical pages ---------- */
a { color: var(--primary-color); text-decoration: none; transition: color .15s; }
a:hover { color: var(--primary-color-dark); }
.text-muted { color: var(--ink-500) !important; }

ul li { line-height: 1.7; }

/* ---------- 8. Accessible forms ---------- */
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 12px 14px;
    color: var(--ink-800);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-focus);
    outline: none;
}
label { font-weight: 600; color: var(--ink-800); }

/* ---------- 9. Footer polish ---------- */
footer {
    background: var(--ink-900) !important;
    color: rgba(255, 255, 255, .82);
}
footer h3, footer h4, footer h5 { color: #fff !important; }
footer a { color: rgba(255, 255, 255, .82); }
footer a:hover { color: #fff; }

/* ---------- 10. Print stylesheet (for clinical / policy documents) ---------- */
@media print {
    header, footer, #back-to-top, #de-loader, .breadcrumb, .btn { display: none !important; }
    body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
    h1, h2, h3 { color: #000; page-break-after: avoid; }
    .badge { border: 1px solid #000; background: #fff !important; color: #000 !important; }
}

/* ---------- 11. High-contrast / forced-colors support ---------- */
@media (forced-colors: active) {
    .btn-main, .btn-primary, .btn-accent { forced-color-adjust: none; }
    a:focus-visible, button:focus-visible { outline: 2px solid CanvasText !important; }
}


/* =========================================================================
   Page-height guard � neutralise legacy skrollr/lenis inflating body height
   beyond actual content (shows up as empty whitespace below the footer).
   ========================================================================= */
html,
body {
    height: auto !important;
    min-height: 0 !important;
}

/* =========================================================================
   Layout-gap reset � eliminate the white strip between the header and the
   first hero/slider widget. Caused by Blade-whitespace text nodes between
   `@livewire` directives rendering as anonymous line-boxes (~30px at the
   theme's 1.875 line-height). Flexbox on the wrapper chain collapses them.
   ========================================================================= */
html, body { margin: 0 !important; padding: 0 !important; }
#wrapper, #main-content, #content { margin: 0 !important; }
#main-content { padding-top: 0 !important; }
#content,
#content.no-top { padding-top: 0 !important; margin-top: 0 !important; }
#content > #top { display: none !important; height: 0 !important; }

.w-hero,
section.w-hero,
section.w-hero:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}