/* =========================================
   Spwashi.biz — style.css v1.2.4
   REFACTOR: Switched to a mobile-first approach for improved scalability.
   - Introduced fluid spacing with clamp().
   - Replaced fragile attribute selectors with a robust .layout-sidebar class.
   - Consolidated all styles into a single, organized structure.
   - UPDATE: Added more robust wrapping for grids and content to prevent overflow.
   ========================================= */

/* ----- Tokens ----- */
:root {
    /* Colors */
    --bg: #f9f9f7;
    --ink: #222;
    --muted: #666;
    --accent: #266e8e;
    --accent-light: #e8f4f8;
    --line: #d1e5ee;
    --card: #fff;

    /* Sizing & Layout */
    --gap: clamp(1rem, 4vw, 1.5rem); /* Fluid gap for responsive spacing */
    --radius: .5rem;
    --focus: 2px;
    --container: 1200px;
    --measure: 68ch; /* For comfortable reading width */
    --sidebar: clamp(20rem, 40vw, 28rem);

    /* Typography & Effects */
    --font: "Inter", system-ui, sans-serif;
    --shadow: 0 4px 10px rgba(0, 0, 0, .07);
}

/* ----- Reset ----- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html,
body {
    height: 100%
}

/* JS/FOUC guard */
html.js body {
    visibility: visible
}

body {
    visibility: hidden
}

/* ----- Base ----- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    font: 16px/1.5 var(--font);
    color: var(--ink);
    background: var(--bg);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

a {
    color: var(--accent);
    text-underline-offset: 2px
}

header,
main,
footer {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--gap);
    text-align: center;
}

/* ----- Typography ----- */
h1,
h2,
h3 {
    text-wrap: balance
} /* Prevents awkward line breaks */
header h1 {
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    margin: .25rem 0;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: .02em
}
header p {
    color: var(--muted);
    margin: .25rem 0
}
.kicker {
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .78rem;
    color: var(--muted)
}
.price {
    font-weight: 700;
    font-size: 1.1rem;
    margin: -.25rem 0 .75rem;
    white-space: nowrap
}
.muted {
    color: var(--muted)
}
p {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
    hyphens: auto;
}

/* ----- Layout Helpers ----- */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cluster,
.grid {
    display: grid;
    gap: var(--gap);
}

/* General purpose responsive grid for 2-4 column layouts */
.grid-auto {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* MODIFIED: smaller min */
}

/* NEW: Robust class to handle main content + sidebar layout */
.layout-sidebar {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr; /* Mobile: single column */
    width: 100%;
}

/* ----- Navigation ----- */
nav {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: .5rem; /* Prevents scrollbar from clipping content */
}
nav::-webkit-scrollbar {
    display: none
}
nav a {
    scroll-snap-align: start;
    padding: .6rem .9rem;
    min-height: 44px;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
    color: var(--ink);
    word-break: keep-all;
}
nav a[aria-current="true"],
nav a.is-active {
    border-color: var(--accent);
    background: var(--accent-light)
}

/* ----- Cards ----- */
.card {
    width: 100%;
    max-width: var(--measure); /* Default to readable width */
    background: var(--card);
    border-radius: var(--radius);
    padding: calc(var(--gap) * 1.25);
    box-shadow: var(--shadow);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
    text-align: left;
}
.card h2 {
    font-size: 1.4rem;
    margin-bottom: .75rem
}
.card h3 {
    margin: .2rem 0 .4rem
}
.card ul {
    list-style: disc inside;
    margin-left: .25rem
}
.card li+li {
    margin-top: .45rem
}

/* ----- Components ----- */

/* CTA Button */
.cta {
    display: inline-block;
    width: 100%; /* Mobile: full width */
    text-align: center;
    margin-top: var(--gap);
    padding: .55rem 1.25rem;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    transition: transform .15s ease
}
.cta:hover,
.cta:focus {
    transform: translateY(-2px)
}
.cta.small {
    padding: .4rem .9rem;
    font-size: .9rem;
    margin-top: .5rem
}

/* Bundles */
.bundle-grid {
    display: flex;
    margin-top: var(--gap);
    width: 100%;
    flex-wrap: wrap;
    max-width: var(--container);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* MODIFIED: smaller min */
}
.bundle {
    background: var(--card);
    border: 2px solid var(--accent-light);
    border-radius: var(--radius);
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
    text-align: left;
    overflow-wrap: break-word; /* NEW: Forces long words to wrap */
}
.bundle header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap; /* NEW: Allows header content to stack vertically */
    padding: 0; /* Override header defaults */
    text-align: left;
}
.bundle h3 {
    font-size: 1.25rem;
    margin-bottom: .5rem;
    color: var(--accent)
}
.bundle ul {
    list-style: disc;
    margin-left: 1rem
}
.bundle li+li {
    margin-top: .35rem
}
.bundle .cta {
    align-self: flex-start;
    width: auto; /* Override full-width CTA default */
}

/* Estimator */
.estimator {
    position: static; /* Mobile: in flow */
    width: 100%;
    margin-top: var(--gap);
}
.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem
}
#selected-list {
    margin-top: .5rem;
    padding: 0;
    list-style: none
}
#selected-list li {
    font-size: .9rem;
    margin-bottom: .3rem;
    color: var(--muted)
}
.updated {
    color: var(--accent)
}
body.has-selection .estimator {
    border: 1px solid var(--accent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12)
}

/* Modules */
.modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--gap);
}
.module {
    position: relative;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    text-align: left;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.module label {
    display: block;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.module p {
    margin: .25rem 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.badge {
    display: inline-block;
    border: 1px solid var(--line);
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .8rem;
    color: var(--muted);
    white-space: nowrap;
}

/* Module state hooks (JS adds classes/attrs) */
.module[data-selected="true"],
.module:has(input[type="checkbox"]:checked) {
    border-color: var(--accent);
    background: var(--accent-light);
}
html.using-keyboard .module.is-focused {
    outline: var(--focus) solid var(--accent);
    outline-offset: 3px
}
.module.is-active {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12)
}
.module.just-changed {
    animation: pulse-bg .55s ease
}

/* Details + summary affordances */
details {
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: .6rem .8rem;
    text-align: left;
}
summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none
}
summary::marker {
    content: ""
}
summary::after {
    content: "⌄";
    display: inline-block;
    margin-left: .4rem;
    transform: translateY(-1px);
    transition: transform .2s ease
}
details[open] summary {
    color: var(--accent)
}
details[open] summary::after {
    transform: rotate(180deg)
}

/* New Components: Social, Portfolio, Testimonials */
.social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.social-links a {
    padding: .5rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    transition: background .2s ease
}
.social-links a:hover {
    background: var(--accent-light)
}

.card img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin-bottom: .75rem;
    box-shadow: var(--shadow)
}

.card blockquote {
    font-style: italic;
    margin: 1rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--accent-light)
}
.card blockquote::before,
.card blockquote::after {
    content: '“';
    font-size: 2rem;
    color: var(--muted);
    line-height: 0;
}
.card blockquote::after {
    content: '”'
}

/* ----- Footer ----- */
footer small {
    display: block;
    margin-bottom: .5rem
}
footer .social-links {
    margin-top: .5rem
}

/* ----- Utilities & Accessibility ----- */
.skip {
    position: absolute;
    left: -9999px
}
.skip:focus {
    left: 1rem;
    top: 1rem;
    background: var(--accent);
    color: #fff;
    padding: .5rem .75rem;
    border-radius: 8px;
    z-index: 999
}
.hide-scrollbar {
    scrollbar-width: none
}
.hide-scrollbar::-webkit-scrollbar {
    display: none
}
section {
    scroll-margin-top: 72px
}
section:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px
}

/* Input styles */
input,
button,
select,
textarea {
    font: inherit
}
.module input[type="checkbox"] {
    accent-color: var(--accent);
    width: 1.25rem;
    height: 1.25rem
}
.module input[type="checkbox"]:checked {
    transform: scale(1.1)
}

/* Focus policy */
html.using-pointer :focus-visible {
    outline: none
}

/* ----- Large Screen Adjustments (Mobile-First) ----- */

@media (min-width: 768px) {
    .cta {
        width: auto; /* Revert to auto width on larger screens */
    }
    .estimator {
        position: sticky; /* Activate sticky position for estimator */
        top: .75rem;
        margin-top: 0;
    }
    nav {
        flex-wrap: wrap; /* Allow nav items to wrap */
        overflow-x: visible;
        justify-content: center;
    }
    nav a {
        margin-bottom: .5rem
    }
}

@media (min-width: 1024px) {
    /* Activate the sidebar layout on wide screens */
    .layout-sidebar {
        grid-template-columns: minmax(0, 1fr) var(--sidebar);
    }
    /* Ensure the estimator fits within the sidebar */
    .layout-sidebar .estimator {
        max-width: var(--sidebar);
    }
}

/* ----- Preferences ----- */

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b0f12;
        --ink: #e6f0f3;
        --muted: #b8c7ce;
        --accent: #38bdf8;
        --accent-light: #0e1f29;
        --line: #20313a;
        --card: #11161a;
        --shadow: 0 6px 20px rgba(0, 0, 0, .25);
    }
    body {
        background: radial-gradient(1200px 1200px at 15% -10%, #0e1f29, #090c10 60%) fixed
    }
    .card {
        background: linear-gradient(180deg, #0f1519, #0b0f12)
    }
    .cta {
        color: #08202a
    }
    .skip:focus {
        color: #04222c
    }
    .bundle {
        border: 2px solid var(--line)
    }
    @keyframes pulse-bg {
        0% {
            box-shadow: 0 0 0 0 rgba(56, 189, 248, .45)
        }
        100% {
            box-shadow: 0 0 0 12px rgba(56, 189, 248, 0)
        }
    }
}

/* Motion & Data Reduction */
@media (prefers-reduced-motion: reduce) {
    .cta,
    .module,
    summary::after {
        transition: none
    }
    .module.just-changed {
        animation: none
    }
}
@media (prefers-reduced-data: reduce) {
    .card,
    .bundle {
        box-shadow: none
    }
}

/* Performance & Safe Area */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}
@supports (content-visibility: auto) {
    .card,
    .bundle {
        content-visibility: auto;
        contain-intrinsic-size: 0 420px; /* Estimated height */
    }
}