/* ==========================================================
   LAVENDER COUNSELING CENTER
   ACCESSIBILITY STATEMENT
========================================================== */

.lavAccessibility {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(4.5rem, 8vw, 7rem)
        0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbf9fc 48%,
            #f7f2f9 100%
        );
}


/* ==========================================================
   CONTAINER
========================================================== */

.lavAccessibility .container {
    position: relative;
    z-index: 3;

    width: min(
        calc(100% - 2rem),
        1200px
    );

    margin-inline: auto;
}


/* ==========================================================
   MAIN LAYOUT
========================================================== */

.lavAccessibilityLayout {
    display: grid;
    grid-template-columns:
        minmax(220px, 0.3fr)
        minmax(0, 1fr);

    align-items: start;

    gap:
        clamp(
            2.5rem,
            6vw,
            5.5rem
        );
}


/* ==========================================================
   SIDEBAR
========================================================== */

.lavAccessibilitySidebar {
    position: relative;
    min-width: 0;
}

.lavAccessibilitySidebarInner {
    position: sticky;
    top: 7.5rem;

    padding: 1.4rem;

    background:
        rgba(255, 255, 255, 0.76);

    border:
        1px solid
        rgba(111, 81, 128, 0.13);

    border-radius: 24px;

    box-shadow:
        0 18px 48px
        rgba(74, 52, 88, 0.08);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.lavAccessibilitySidebarLabel {
    margin: 0 0 1rem;

    color: #6f527f;

    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* ==========================================================
   SIDEBAR NAVIGATION
========================================================== */

.lavAccessibilityNavigation {
    display: grid;
    gap: 0.15rem;
}

.lavAccessibilityNavigation a {
    position: relative;

    display: block;

    padding:
        0.58rem
        0.65rem
        0.58rem
        1.05rem;

    color: #746b78;

    border-radius: 10px;

    font-size: 0.83rem;
    font-weight: 600;
    line-height: 1.35;

    text-decoration: none;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.lavAccessibilityNavigation a::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 0.38rem;

    width: 4px;
    height: 4px;

    background: #a589b6;

    border-radius: 50%;

    transform:
        translateY(-50%)
        scale(0.75);

    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}

.lavAccessibilityNavigation a:hover {
    color: #4c3857;

    background:
        rgba(130, 94, 150, 0.08);

    transform: translateX(2px);
}

.lavAccessibilityNavigation a:hover::before,
.lavAccessibilityNavigation a.is-active::before {
    background: #78568d;

    transform:
        translateY(-50%)
        scale(1);
}

.lavAccessibilityNavigation a.is-active {
    color: #4c3857;

    background:
        rgba(130, 94, 150, 0.1);
}


/* ==========================================================
   SIDEBAR NOTE
========================================================== */

.lavAccessibilitySidebarNote {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;

    margin-top: 1.2rem;
    padding-top: 1.2rem;

    border-top:
        1px solid
        rgba(110, 80, 126, 0.12);
}

.lavAccessibilitySidebarNoteIcon {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    color: #775689;

    background:
        rgba(132, 96, 153, 0.1);

    border-radius: 11px;
}

.lavAccessibilitySidebarNoteIcon svg {
    width: 18px;
    height: 18px;
}

.lavAccessibilitySidebarNote p {
    margin: 0;

    color: #7c727f;

    font-size: 0.76rem;
    line-height: 1.55;
}


/* ==========================================================
   CONTENT
========================================================== */

.lavAccessibilityContent {
    min-width: 0;
    max-width: 820px;
}


/* ==========================================================
   CONTENT HEADER
========================================================== */

.lavAccessibilityContentHeader {
    margin-bottom:
        clamp(
            2.5rem,
            5vw,
            4rem
        );
}

.lavAccessibilityContentEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;

    margin-bottom: 1rem;
}

.lavAccessibilityContentEyebrow > span {
    width: 2.15rem;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #836295,
            #b89dca
        );
}

.lavAccessibilityContentEyebrow p {
    margin: 0;

    color: #775989;

    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.lavAccessibilityContentHeader h2 {
    max-width: 720px;

    margin: 0;

    color: #35283d;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.4rem
        );

    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.lavAccessibilityContentHeader > p {
    max-width: 760px;

    margin:
        1.35rem
        0
        0;

    color: #6e6472;

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.08rem
        );

    line-height: 1.8;
}

.lavAccessibilityUpdated {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    margin-top: 1.25rem;

    padding:
        0.55rem
        0.8rem;

    color: #6f6573;

    background:
        rgba(132, 97, 152, 0.07);

    border:
        1px solid
        rgba(121, 88, 140, 0.11);

    border-radius: 999px;

    font-size: 0.78rem;
    line-height: 1.3;
}

.lavAccessibilityUpdated strong {
    color: #4e3a58;
}


/* ==========================================================
   IMPORTANT MESSAGE
========================================================== */

.lavAccessibilityImportant {
    display: flex;
    align-items: flex-start;
    gap: 1rem;

    margin-bottom:
        clamp(
            2.8rem,
            5vw,
            4rem
        );

    padding:
        clamp(
            1.2rem,
            3vw,
            1.6rem
        );

    background:
        linear-gradient(
            135deg,
            rgba(121, 94, 146, 0.1),
            rgba(177, 151, 195, 0.05)
        );

    border:
        1px solid
        rgba(121, 94, 146, 0.17);

    border-radius: 22px;
}

.lavAccessibilityImportantIcon {
    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    color: #76558a;

    background:
        rgba(255, 255, 255, 0.7);

    border-radius: 14px;
}

.lavAccessibilityImportantIcon svg {
    width: 22px;
    height: 22px;
}

.lavAccessibilityImportant h3 {
    margin: 0;

    color: #4d3a57;

    font-size:
        clamp(
            1.05rem,
            1.8vw,
            1.22rem
        );

    font-weight: 750;
    line-height: 1.4;
}

.lavAccessibilityImportant p {
    margin: 0.55rem 0 0;

    color: #716875;

    font-size: 0.92rem;
    line-height: 1.7;
}


/* ==========================================================
   STATEMENT SECTIONS
========================================================== */

.lavAccessibilitySection {
    position: relative;

    scroll-margin-top: 8rem;

    padding:
        clamp(
            2rem,
            4vw,
            3rem
        )
        0;

    border-top:
        1px solid
        rgba(106, 78, 120, 0.11);
}

.lavAccessibilitySection:first-of-type {
    border-top: 0;
}

.lavAccessibilitySectionNumber {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    min-height: 30px;

    margin-bottom: 0.8rem;

    color: #7b5a8e;

    background:
        rgba(130, 94, 149, 0.08);

    border:
        1px solid
        rgba(126, 91, 145, 0.11);

    border-radius: 999px;

    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.08em;
}

.lavAccessibilitySection h3 {
    max-width: 720px;

    margin: 0;

    color: #3c2e44;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            1.9rem,
            3vw,
            2.65rem
        );

    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.lavAccessibilitySection h4 {
    margin:
        1.8rem
        0
        0.7rem;

    color: #4e3a57;

    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.lavAccessibilitySection p {
    max-width: 780px;

    margin:
        1rem
        0
        0;

    color: #706672;

    font-size: 0.98rem;
    line-height: 1.8;
}

.lavAccessibilitySection ul {
    display: grid;
    gap: 0.75rem;

    margin:
        1.1rem
        0
        0;

    padding: 0;

    list-style: none;
}

.lavAccessibilitySection li {
    position: relative;

    padding-left: 1.45rem;

    color: #706672;

    font-size: 0.96rem;
    line-height: 1.75;
}

.lavAccessibilitySection li::before {
    content: "";

    position: absolute;
    top: 0.72em;
    left: 0;

    width: 7px;
    height: 7px;

    background:
        linear-gradient(
            135deg,
            #806094,
            #b79dc8
        );

    border-radius:
        65% 35% 62% 38% /
        45% 58% 42% 55%;

    transform: rotate(18deg);
}


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

.lavAccessibilityPrinciples {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 1rem;

    margin-top: 1.5rem;
}

.lavAccessibilityPrinciple {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;

    padding: 1.15rem;

    background:
        rgba(255, 255, 255, 0.72);

    border:
        1px solid
        rgba(112, 80, 129, 0.12);

    border-radius: 18px;

    box-shadow:
        0 12px 32px
        rgba(69, 48, 82, 0.05);
}

.lavAccessibilityPrinciple > span {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    color: #75568a;

    background:
        rgba(130, 94, 149, 0.09);

    border-radius: 11px;

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.lavAccessibilityPrinciple h4 {
    margin: 0;

    color: #4c3956;
}

.lavAccessibilityPrinciple p {
    margin-top: 0.45rem;

    font-size: 0.88rem;
    line-height: 1.65;
}


/* ==========================================================
   CALLOUT
========================================================== */

.lavAccessibilityCallout,
.lavAccessibilityTip,
.lavAccessibilityRequest {
    margin-top: 1.5rem;

    padding:
        1.25rem
        1.35rem;

    border-radius: 18px;
}

.lavAccessibilityCallout {
    background:
        linear-gradient(
            135deg,
            rgba(130, 94, 149, 0.09),
            rgba(174, 144, 191, 0.05)
        );

    border:
        1px solid
        rgba(121, 87, 139, 0.14);
}

.lavAccessibilityTip {
    background:
        linear-gradient(
            135deg,
            rgba(109, 137, 145, 0.08),
            rgba(157, 185, 190, 0.04)
        );

    border:
        1px solid
        rgba(94, 130, 139, 0.14);
}

.lavAccessibilityRequest {
    background:
        rgba(130, 94, 149, 0.06);

    border:
        1px solid
        rgba(121, 87, 139, 0.12);
}

.lavAccessibilityCallout strong,
.lavAccessibilityTip strong {
    display: block;

    color: #4c3a54;

    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.4;
}

.lavAccessibilityCallout p,
.lavAccessibilityTip p {
    margin-top: 0.5rem;

    font-size: 0.9rem;
    line-height: 1.7;
}

.lavAccessibilityRequest h4 {
    margin: 0;
}


/* ==========================================================
   KEYBOARD COMMANDS
========================================================== */

.lavAccessibilityCommands {
    display: grid;
    gap: 0.65rem;

    margin:
        1.2rem
        0
        0;
}

.lavAccessibilityCommands > div {
    display: grid;
    grid-template-columns:
        minmax(110px, 0.28fr)
        minmax(0, 1fr);

    align-items: center;
    gap: 1rem;

    padding:
        0.85rem
        1rem;

    background:
        rgba(255, 255, 255, 0.68);

    border:
        1px solid
        rgba(108, 79, 123, 0.11);

    border-radius: 14px;
}

.lavAccessibilityCommands dt {
    width: fit-content;

    padding:
        0.35rem
        0.55rem;

    color: #563f62;

    background:
        rgba(130, 94, 149, 0.09);

    border:
        1px solid
        rgba(121, 87, 139, 0.11);

    border-radius: 8px;

    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
}

.lavAccessibilityCommands dd {
    margin: 0;

    color: #706672;

    font-size: 0.9rem;
    line-height: 1.6;
}


/* ==========================================================
   CONTACT SECTION
========================================================== */

.lavAccessibilityContact {
    margin-top: 1rem;

    padding:
        clamp(
            1.5rem,
            4vw,
            2rem
        );

    background:
        rgba(255, 255, 255, 0.7);

    border:
        1px solid
        rgba(108, 79, 123, 0.13);

    border-radius: 24px;

    box-shadow:
        0 18px 50px
        rgba(72, 50, 86, 0.07);
}

.lavAccessibilityAddress {
    display: grid;
    gap: 0.45rem;

    margin-top: 1.25rem;

    font-style: normal;
}

.lavAccessibilityAddress strong {
    color: #44324d;

    font-size: 1rem;
}

.lavAccessibilityAddress a {
    width: fit-content;

    color: #75548a;

    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.4;

    text-decoration-thickness: 1px;
    text-underline-offset: 4px;

    overflow-wrap: anywhere;

    transition:
        color 0.25s ease,
        text-decoration-color 0.25s ease;
}

.lavAccessibilityAddress a:hover {
    color: #4f365e;
}

.lavAccessibilityContactNote {
    padding-top: 1rem;

    border-top:
        1px solid
        rgba(108, 79, 123, 0.1);

    font-size: 0.87rem !important;
}


/* ==========================================================
   CLOSING MESSAGE
========================================================== */

.lavAccessibilityClosing {
    display: flex;
    align-items: flex-start;
    gap: 1rem;

    margin-top:
        clamp(
            2.5rem,
            5vw,
            4rem
        );

    padding:
        clamp(
            1.2rem,
            3vw,
            1.6rem
        );

    background:
        linear-gradient(
            135deg,
            rgba(126, 96, 145, 0.1),
            rgba(190, 160, 205, 0.05)
        );

    border:
        1px solid
        rgba(126, 96, 145, 0.16);

    border-radius: 22px;
}

.lavAccessibilityClosingIcon {
    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    color: #7d5b90;

    background:
        rgba(255, 255, 255, 0.7);

    border-radius: 14px;
}

.lavAccessibilityClosingIcon svg {
    width: 22px;
    height: 22px;
}

.lavAccessibilityClosing strong {
    display: block;

    color: #4d3858;

    font-size: 0.98rem;
    line-height: 1.45;
}

.lavAccessibilityClosing p {
    margin: 0.45rem 0 0;

    color: #716675;

    font-size: 0.88rem;
    line-height: 1.65;
}


/* ==========================================================
   AMBIENT GLOWS
========================================================== */

.lavAccessibilityGlow {
    position: absolute;
    z-index: 0;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(14px);
}

.lavAccessibilityGlowOne {
    top: 8%;
    left: -180px;

    width: 430px;
    height: 430px;

    background:
        radial-gradient(
            circle,
            rgba(179, 147, 198, 0.14),
            rgba(179, 147, 198, 0)
            70%
        );
}

.lavAccessibilityGlowTwo {
    right: -220px;
    bottom: 8%;

    width: 520px;
    height: 520px;

    background:
        radial-gradient(
            circle,
            rgba(135, 99, 156, 0.11),
            rgba(135, 99, 156, 0)
            72%
        );
}


/* ==========================================================
   FOCUS
========================================================== */

.lavAccessibility a:focus-visible {
    outline:
        3px solid
        rgba(109, 78, 129, 0.34);

    outline-offset: 4px;

    border-radius: 6px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

    .lavAccessibilityLayout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .lavAccessibilitySidebarInner {
        position: relative;
        top: auto;
    }

    .lavAccessibilityNavigation {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .lavAccessibilityContent {
        max-width: none;
    }

}


/* ==========================================================
   SMALL TABLET
========================================================== */

@media (max-width: 720px) {

    .lavAccessibilityPrinciples {
        grid-template-columns: 1fr;
    }

    .lavAccessibilityCommands > div {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 680px) {

    .lavAccessibilityNavigation {
        grid-template-columns: 1fr;
    }

    .lavAccessibilityImportant,
    .lavAccessibilityClosing {
        flex-direction: column;
    }

    .lavAccessibilityContentHeader h2 {
        font-size:
            clamp(
                2.45rem,
                11vw,
                3.4rem
            );
    }

}


@media (max-width: 520px) {

    .lavAccessibility {
        padding:
            3.75rem
            0;
    }

    .lavAccessibility .container {
        width:
            min(
                calc(100% - 1.4rem),
                1200px
            );
    }

    .lavAccessibilitySidebarInner {
        padding: 1.1rem;

        border-radius: 20px;
    }

    .lavAccessibilitySection {
        padding:
            1.8rem
            0;
    }

    .lavAccessibilitySection h3 {
        font-size:
            clamp(
                1.8rem,
                9vw,
                2.25rem
            );
    }

    .lavAccessibilitySection p,
    .lavAccessibilitySection li {
        font-size: 0.93rem;
    }

    .lavAccessibilityContact {
        padding: 1.15rem;

        border-radius: 20px;
    }

}


/* ==========================================================
   PRINT
========================================================== */

@media print {

    .lavAccessibility {
        padding: 0;

        background: #ffffff;
    }

    .lavAccessibilityGlow,
    .lavAccessibilitySidebar {
        display: none !important;
    }

    .lavAccessibilityLayout {
        display: block;
    }

    .lavAccessibilityContent {
        max-width: none;
    }

    .lavAccessibilitySection,
    .lavAccessibilityContact,
    .lavAccessibilityImportant,
    .lavAccessibilityClosing,
    .lavAccessibilityPrinciple,
    .lavAccessibilityCommands > div {
        break-inside: avoid;
    }

    .lavAccessibilityContact,
    .lavAccessibilityImportant,
    .lavAccessibilityClosing,
    .lavAccessibilityCallout,
    .lavAccessibilityTip,
    .lavAccessibilityRequest,
    .lavAccessibilityPrinciple,
    .lavAccessibilityCommands > div {
        background: #ffffff;
        box-shadow: none;
    }

    .lavAccessibility a {
        color: #000000;

        text-decoration: none;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .lavAccessibility *,
    .lavAccessibility *::before,
    .lavAccessibility *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}