/* ==========================================================================
   CLIENT.CSS (Updated)
   Contains all CSS unique to Client pages not found in site.css
   ========================================================================== */

/* 1. GLOBAL CLIENT FOUNDATION
   (Reset and Variables specific to the client-facing theme)
*/
/** {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}*/

/*:root {
    --background: #eeeeee;
    --foreground: #2b2640;
    --card: #ffffff;
    --muted-foreground: #6b6680;
    --border: #ddd6e3;
    --primary-foreground: #ffffff;
    --teal: #26bcbb;
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family: "Inter", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}*/

/* 2. SHARED LAYOUT & SPACING
   (Hero, Spacing Utilities, and Alignment)
*/
/*.hero-inner {
    max-width: 56rem;
    margin: 0 auto;
    padding: 5rem 1.5rem;
    text-align: center;
}

.eyebrow {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(213,86,129,0.8);
}

.hero h1 {
    margin-top: 0.75rem;
    font-size: 3rem;
    line-height: 1.05;
}

.hero-lead {
    max-width: 42rem;
    margin: 1.5rem auto 0;
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(43,38,64,0.8);
}*/

/* Spacing Utilities */
/*.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.pb-10 {
    padding-bottom: 2.5rem;
}

.pb-16 {
    padding-bottom: 4rem;
}

.pb-20 {
    padding-bottom: 5rem;
}

.pb-24 {
    padding-bottom: 6rem;
}

.section.tight {
    padding-top: 0;
}*/

/* Alignment */
/*.center {
    text-align: center;
}*/

:root {
    --background: #eeeeee;
    --foreground: #2b2640;
    --card: #ffffff;
    --muted-foreground: #6b6680;
    --border: #ddd6e3;
    --primary-foreground: #ffffff;
    --teal: #26bcbb;
}

.sub {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}



/* 3. INTERACTIVE FORMS (Safety Plan Page)
   (Inputs, Labels, and Buttons)
*/
input, textarea {
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: var(--card);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--foreground);
    box-shadow: var(--shadow-soft);
    font-family: inherit;
}

    input:focus, textarea:focus {
        outline: none;
        border-color: rgba(213,86,129,0.4);
        box-shadow: 0 0 0 2px rgba(213,86,129,0.15);
    }

.field {
    margin-top: 2rem;
}

    .field > label {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--wine);
    }

    .field .inputs {
        margin-top: 0.75rem;
        display: grid;
        gap: 0.75rem;
    }

.grid-2 {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.btn-primary {
    background: var(--wine);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.btn-outline {
    background: var(--card);
    color: var(--wine);
    border: 1px solid rgba(213,86,129,0.3);
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    cursor: pointer;
}

.btn-ghost {
    background: var(--card);
    color: var(--muted-foreground);
    border: 1px solid var(--border);
    padding: 0.7ryptem;
    border-radius: 0.75rem;
    cursor: pointer;
}

/* 4. INFORMATION CARDS & GRIDS
   (Tips, Patterns, and Thermometer Levels)
*/

/* Tip/Pattern Cards */
.tips {
    list-style: none;
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .tips {
        grid-template-columns: 1fr 1fr;
    }
}

.tip {
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
}

    .tip .t, .tip h3 {
        font-weight: 600;
        color: var(--wine);
        margin-top: 1rem;
    }

.patterns {
    display: grid;
    gap: 1.5rem;
}

.pattern {
    display: flex;
    gap: 1.25rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.75rem;
    box-shadow: var(--shadow-soft);
}

.icon-tile {
    display: grid;
    place-items: center;
    height: 3rem;
    width: 3rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    background: rgba(198,181,217,0.6);
    color: var(--wine);
}

/* Relationship Thermometer Logic */


.levels {
    display: grid;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.level {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-soft);
    margin-left: 5rem;
}

@media (max-width: 480px) {
    .level {
        margin-left: 0rem;
    }
}

@media (max-width: 768px) {
    .level {
        margin-left: 0rem;
    }
}

    .level .bar {
        position: absolute;
        inset: 0 auto 0 0;
        width: 0.5rem;
    }

    .level.healthy .bar {
        background: linear-gradient(to bottom, #34d399, #059669);
    }

    .level.unhealthy .bar {
        background: linear-gradient(to bottom, #fcd34d, #f59e0b);
    }

    .level.abusive .bar {
        background: linear-gradient(to bottom, #f43f5e, #b91c1c);
    }

    .level .inner {
        padding: 1.75rem 1.75rem 1.75rem 2.25rem;
    }

.level-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

    .level-head h3 {
        font-size: 1.5rem;
    }

    .level-head .tag {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted-foreground);
    }

.dot {
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 9999px;
}

.healthy .dot, .healthy .li-dot {
    background: #10b981;
}

.unhealthy .dot, .unhealthy .li-dot {
    background: #f59e0b;
}

.abusive .dot, .abusive .li-dot {
    background: #dc2626;
}

.level ul {
    list-style: none;
    margin-top: 1.25rem;
    display: grid;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(43,38,64,0.8);
}

@media (min-width: 640px) {
    .level ul {
        grid-template-columns: 1fr 1fr;
    }
}

.level li {
    display: flex;
    gap: 0.5rem;
}

.li-dot {
    margin-top: 0.5rem;
    height: 0.375rem;
    width: 0.375rem;
    flex-shrink: 0;
    border-radius: 9999px;
}

.tip-grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
    grid-template-columns: 1fr;
}

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

.tip {
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.5rem 1.5rem;
    box-shadow: var(--shadow-soft);
}

.icon-tile {
    display: grid;
    place-items: center;
    height: 3rem;
    width: 3rem;
    border-radius: 0.75rem;
    background: rgba(198,181,217,0.6);
    color: var(--wine);
}

    .icon-tile svg {
        width: 1.25rem;
        height: 1.25rem;
    }

.tip h3 {
    margin-top: 1rem;
    font-size: 1.125rem;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: var(--wine);
}

.tip p {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

.tip-graphic {
    width: 100%;
    border-radius: 2rem;
}
.panel {
    border-radius: 1.5rem;
    border: 1px solid var(--border);
    background: rgba(198,181,217,0.3);
    padding: 2rem;
}

@media (min-width: 768px) {
    .panel {
        padding: 3rem;
    }
}

.comm-list {
    list-style: none;
    margin-top: 1.5rem;
    display: grid;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(43,38,64,0.8);
}

@media (min-width: 768px) {
    .comm-list {
        grid-template-columns: 1fr 1fr;
    }
}

.comm-list li {
    border-radius: 0.75rem;
    background: var(--card);
    padding: 1rem;
    box-shadow: var(--shadow-soft);
}

    .comm-list li.full {
        grid-column: 1 / -1;
        text-align: center;
    }

.quote {
    border-radius: 1.5rem;
    border: 1px solid var(--border);
    background: var(--card);
    padding: 2rem;
    text-align: center;
}

@media (min-width: 768px) {
    .quote {
        padding: 3rem;
    }
}

.quote p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(43,38,64,0.8);
}

.cta {
    border-radius: 1.5rem;
    border: 1px solid rgba(213,86,129,0.15);
    background: var(--wine);
    color: var(--white);
    padding: 2rem;
}

@media (min-width: 768px) {
    .cta {
        padding: 3rem;
    }
}

.cta h2 {
    color: var(--primary-foreground);
    font-size: 1.875rem;
}

.cta .row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .cta .row svg {
        width: 1.5rem;
        height: 1.5rem;
    }

.cta p {
    margin-top: 0.75rem;
    max-width: 36rem;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.8);
}

.cta a.num {
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 1rem;
    background: rgba(255,255,255,0.1);
    padding: 0.75rem 1.25rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
    text-decoration:none;
}

    .cta a.num .big {
        font-size: 1.125rem;
        font-weight: 600;
        text-decoration:none;
    }

    .cta a.num .small {
        font-size: 0.875rem;
        color: rgba(255,255,255,0.8);
        text-decoration: none;
    }

.danger {
    margin-top: 2.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

    .danger strong {
        color: var(--wine);
    }

.back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--wine);
    margin-top: 2.5rem;
}

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

    .back svg {
        width: 1rem;
        height: 1rem;
    }

/* Two-column layout: rail | cards */
.thermo {
    display: grid;
    gap: 2rem;
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    .thermo {
        grid-template-columns: 80px 1fr;
        gap: 3rem;
    }
}

/* Rail is hidden on mobile, shown from md up */
.thermo-rail {
    display: none;
}

@media (min-width: 768px) {
    .thermo-rail {
        display: flex;
        justify-content: center;
        position: absolute;
        height: calc(100vh);
        /*left: 2rem;*/
    }
}

/* Large Tablets (Landscape) */
@media only screen and (max-width: 1024px) {
    /* Styles apply to devices smaller than full desktop */
    .thermo-rail {
        display: flex;
        justify-content: center;
        position: absolute;
        height: calc(77vh);
        left: 2rem;
    }
}

/* Small Tablets (Portrait) */
@media only screen and (max-width: 767px) {
    .thermo-rail {
        display: none;
    }
}

@media (min-width: 1920px) {
    .thermo-rail {
        display: flex;
        justify-content: center;
        position: absolute;
        height: calc(90vh);
        /*left: 2rem;*/
    }
}

.thermo-rail .col {
    position: relative;
    width: 1.5rem;
}

/* Green -> amber -> red gradient track */
.thermo-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 2.5rem;
    border-radius: 9999px;
    background: linear-gradient(to bottom, #34d399, #fbbf24, #dc2626);
    box-shadow: 0 1px 2px rgba(55,50,89,0.08), 0 12px 32px -12px rgba(55,50,89,0.22);
}

/* Red knob at the bottom */
.thermo-knob {
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 9999px;
    background: #dc2626;
    box-shadow: 0 0 0 4px #fff, 0 1px 2px rgba(55,50,89,0.08), 0 12px 32px -12px rgba(55,50,89,0.22);
}


/* Opioid page*/
.section {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.pb-20 {
    padding-bottom: 5rem;
}

.pb-10 {
    padding-bottom: 2.5rem;
}

.pb-24 {
    padding-bottom: 6rem;
}

.center {
    text-align: center;
}
.stack {
    display: grid;
    gap: 1.5rem;
}

.info {
    display: flex;
    gap: 1.25rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.75rem;
    box-shadow: var(--shadow-soft);
}

    .info.col {
        flex-direction: column;
    }

    .info .head {
        display: flex;
        gap: 1.25rem;
    }

.icon-tile {
    display: grid;
    place-items: center;
    height: 3rem;
    width: 3rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    background: rgba(198,181,217,0.6);
    color: var(--wine);
}

    .icon-tile svg {
        width: 1.25rem;
        height: 1.25rem;
    }

.info h2 {
    font-size: 1.25rem;
}

.info p {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

.panel {
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.75rem;
    box-shadow: var(--shadow-soft);
}

@media (min-width: 768px) {
    .panel {
        padding: 2.5rem;
    }
}

.panel h2 {
    font-size: 1.5rem;
}

.signs {
    list-style: none;
    margin-top: 1.5rem;
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .signs {
        grid-template-columns: 1fr 1fr;
    }
}

.signs li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 0.75rem;
    background: rgba(198,181,217,0.3);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--foreground);
}

    .signs li .bullet {
        margin-top: 0.4rem;
        height: 0.5rem;
        width: 0.5rem;
        flex-shrink: 0;
        border-radius: 9999px;
        background: var(--wine);
    }

.steps {
    list-style: none;
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .steps {
        grid-template-columns: repeat(5, 1fr);
    }
}

.step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
}

    .step .num {
        display: grid;
        place-items: center;
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 0.75rem;
        background: var(--wine);
        color: var(--primary-foreground);
        font-size: 1rem;
        font-weight: 600;
        text-decoration:none;
    }

    .step p {
        font-size: 0.875rem;
        line-height: 1.3;
        color: var(--foreground);
    }

.res-block {
    border-radius: 1rem;
    border: 1px solid rgba(213,86,129,0.15);
    background: var(--wine);
    color: var(--primary-foreground);
    padding: 1.75rem;
    box-shadow: var(--shadow-soft);
    margin-bottom: 2rem;
}

    .res-block h3 {
        color: #f8fafc;
        font-size: 1.125rem;
        font-family: "Inter", sans-serif;
        font-weight: 600;
    }

.res-links {
    margin-top: 1.25rem;
    display: grid;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .res-links {
        grid-template-columns: 1fr 1fr;
    }
}

.res-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 0.75rem;
    background: rgba(255,255,255,0.1);
    padding: 0.75rem 1.25rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
    transition: background 0.2s;
    text-decoration: none;
}

    .res-link:hover {
        background: rgba(255,255,255,0.2);
        text-decoration:none;
    }

    .res-link p{
        margin:0;
    }

    .res-link .name {
        font-size: 1rem;
        font-weight: 500;
        color: rgba(255,255,255,0.8);
    }

    .res-link .num {
        margin-top: 0rem;
        font-size: 1.5rem;
        font-weight: 600;
        color: rgba(255,255,255,1);
        text-decoration:none;
    }

    .res-link svg {
        width: 1rem;
        height: 1rem;
        opacity: 0.7;
        flex-shrink: 0;
    }

.danger {
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

    .danger strong {
        color: var(--wine);
    }

.back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wine);
}

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

    .back svg {
        width: 1rem;
        height: 1rem;
    }

.rounded-xl {
    border-radius: 2rem;
}

.max-w-md {
    height: 100%;
    width: 500px;
}

.max-h-xs {
    height: 150px;
    width: 100%;
}

.max-w-xs {
    height: 100%;
    width: 150px;
}

.mt-auto{
    margin-top: auto;
}

.object-cover {
    object-fit: cover;
}

.center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%; /* Optional: Adjust the width as needed */
}


/* Safety Plan*/
.tips {
    list-style: none;
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .tips {
        grid-template-columns: 1fr 1fr;
    }
}

    .tip .t {
        font-weight: 600;
        color: var(--wine);
    }

    .tip .d {
        margin-top: 0.5rem;
        font-size: 0.875rem;
        line-height: 1.6;
        color: var(--muted-foreground);
    }

    .tip.last {
        grid-column: 1 / -1;
        max-width: 36rem;
        margin: 0 auto;
    }

.form-panel {
    border-radius: 1.5rem;
    border: 1px solid var(--border);
    background: rgba(198,181,217,0.3);
    padding: 2rem;
}

@media (min-width: 768px) {
    .form-panel {
        padding: 3rem;
    }
}

.form-panel > p {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.fields {
    margin-top: 2rem;
    display: grid;
    gap: 2rem;
}

.field > label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wine);
}

.field .inputs {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.75rem;
}

.grid-2 {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

input, textarea {
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: var(--card);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--foreground);
    box-shadow: var(--shadow-soft);
    font-family: inherit;
}

    input:focus, textarea:focus {
        outline: none;
        border-color: rgba(213,86,129,0.4);
        box-shadow: 0 0 0 2px rgba(213,86,129,0.15);
    }

.hint {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

    .hint strong {
        color: var(--wine);
    }

    .hint a {
        color: var(--wine);
        text-decoration: underline;
    }

.actions {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

button {
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid transparent;
}

    button svg {
        width: 1rem;
        height: 1rem;
    }

.btn-primary {
    background: var(--wine);
    color: var(--primary-foreground);
}

    .btn-primary:hover {
        opacity: 0.9;
    }

.btn-outline {
    background: var(--card);
    color: var(--wine);
    border-color: rgba(213,86,129,0.3);
}

    .btn-outline:hover {
        background: rgba(198,181,217,0.4);
    }

.btn-ghost {
    background: var(--card);
    color: var(--muted-foreground);
    border-color: var(--border);
}

    .btn-ghost:hover {
        color: var(--wine);
    }

.cta {
    border-radius: 1.5rem;
    border: 1px solid rgba(213,86,129,0.15);
    background: var(--wine);
    color: var(--primary-foreground);
    padding: 2rem;
}

@media (min-width: 768px) {
    .cta {
        padding: 3rem;
    }
}

.cta h2 {
    color: var(--primary-foreground);
    font-size: 1.875rem;
}

.cta .row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .cta .row svg {
        width: 1.5rem;
        height: 1.5rem;
    }

.cta p {
    margin-top: 0.75rem;
    max-width: 36rem;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.8);
}

.cta a.num {
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 1rem;
    background: rgba(255,255,255,0.1);
    padding: 0.75rem 1.25rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

    .cta a.num .big {
        font-size: 1.125rem;
        font-weight: 600;
    }

    .cta a.num .small {
        font-size: 0.875rem;
        color: rgba(255,255,255,0.8);
    }

.danger {
    margin-top: 2.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

    .danger strong {
        color: var(--wine);
    }

.back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--wine);
    margin-top: 2.5rem;
}

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

    .back svg {
        width: 1rem;
        height: 1rem;
    }

@media print {
    .actions, .hero, .cta, .danger, .back, .tips-section {
        display: none !important;
    }
}