/* =========================================================
   BURGEROAD — GLOBAL STYLES
   Part 1
   ========================================================= */

/* =========================================================
   1. FONT
   ========================================================= */

@font-face {
    font-family: "Great Sejagad";
    src: url("../fonts/GreatSejagad-Regular.otf") format("opentype");
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Assistant ExtraLight";
    src: url("../fonts/Assistant-ExtraLight.ttf") format("truetype");
    font-display: swap;
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Assistant";
    src: url("../fonts/Assistant-Regular.ttf") format("truetype");
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Assistant";
    src: url("../fonts/Assistant-Medium.ttf") format("truetype");
    font-display: swap;
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Assistant";
    src: url("../fonts/Assistant-SemiBold.ttf") format("truetype");
    font-display: swap;
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Assistant";
    src: url("../fonts/Assistant-Bold.ttf") format("truetype");
    font-display: swap;
    font-weight: 700;
    font-style: normal;
}

/* =========================================================
   2. ROOT VARIABLES
   ========================================================= */

:root {
    --black: #050505;
    --black-soft: #0b0b0b;

    --orange: #d98a25;
    --orange-light: #efa84c;

    --white: #ffffff;
    --white-soft: #eeeeee;

    --text-muted: #d1d1d1;

    --content-width: 1200px;
    --gallery-width: 1100px;

    --section-padding-desktop: 80px;
    --section-padding-tablet: 60px;
    --section-padding-mobile: 40px;

    --transition-fast: 0.25s ease;
    --transition-medium: 0.5s ease;
}

/* =========================================================
   3. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 30px;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: var(--black);
    color: var(--white);

    font-family: "Assistant", sans-serif;

    font-size: 18px;
    line-height: 1;

    overflow-x: hidden;
}

img,
video {
    display: block;
    max-width: 100%;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
    font: inherit;
}

/* =========================================================
   4. ACCESSIBILITY
   ========================================================= */

.visually-hidden {
    position: absolute !important;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
}

/* Keyboard skip link */

.skip-link {
    position: fixed;

    top: 10px;
    right: 10px;

    z-index: 10000;

    padding: 10px 18px;

    background: var(--white);
    color: var(--black);

    border-radius: 4px;

    font-weight: 700;

    transform: translateY(-150%);

    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

/* Visible keyboard focus */

:focus-visible {
    outline: 3px solid var(--orange-light);
    outline-offset: 4px;
}

/* =========================================================
   5. GLOBAL BACKGROUND VIDEO
   ========================================================= */

.site-background {
    position: fixed;

    inset: 0;

    z-index: -2;

    overflow: hidden;

    background: var(--black);
}

.site-background__video {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 100%;
    height: 100%;

    min-width: 100%;
    min-height: 100%;

    object-fit: cover;

    transform: translate(-50%, -50%);
}

/* =========================================================
   6. MAIN CONTENT LAYER
   ========================================================= */

main,
.site-footer {
    position: relative;
    z-index: 1;
}

/* =========================================================
   7. HERO
   ========================================================= */

.hero {
    position: relative;

    width: 100%;
    min-height: 100vh;

    min-height: 100svh;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: var(--black);
}

/* Hero image */

.hero__image-wrapper {
    position: absolute;

    inset: 0;

    overflow: hidden;
}

.hero__image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 45% center;

    animation: heroImageReveal 1.2s ease both;
}

/* Dark overlay */

.hero__image-wrapper::after {
    content: "";

    position: absolute;

    inset: 0;
}

/* Hero content */

.hero__content {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    min-height: 100vh;
    min-height: 100svh;
}

/* Logo */

.hero__logo-link {
    position: absolute;

    top: clamp(25px, 4vw, 60px);
    right: clamp(25px, 5vw, 80px);

    display: inline-block;

    transition: transform var(--transition-medium), opacity var(--transition-fast);
}

.hero__logo {
    width: clamp(120px, 12vw, 220px);
    height: auto;

    object-fit: contain;
}

.hero__logo-link:hover {
    transform: scale(1.04);
    opacity: 0.9;
}

/* =========================================================
   8. SECTION GLOBAL STYLING
   ========================================================= */

.story,
.events,
.locations {
    position: relative;

    width: 100%;

    padding-left: 20px;
    padding-right: 20px;
}

/* =========================================================
   9. SECTION HEADINGS
   ========================================================= */

.section-heading {
    width: 100%;
    max-width: var(--content-width);

    margin: 0 auto;

    text-align: center;
}

.section-heading h2 {
    margin: 0;

    display: flex;
    flex-direction: column;

    align-items: center;

    line-height: 1.15;
}

.section-heading__english {
    display: block;

    font-family: "Great Sejagad", cursive;

    font-size: clamp(42px, 5vw, 72px);

    font-weight: 400;

    color: var(--orange);

    line-height: 1.1;
}

.section-heading__hebrew {
    display: block;

    font-family: "Assistant ExtraLight", sans-serif;

    font-size: clamp(28px, 3vw, 28px);

    font-weight: 200;

    color: var(--white);

    z-index: 1;

    transform: translateY(-15px);
}

/* =========================================================
   10. OUR STORY
   ========================================================= */

.story {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
}

/* Story content */

.story__content {
    width: min(900px, 100%);

    margin: 55px auto 0;

    text-align: right;

    text-align: justify;

    font-family: "Assistant", sans-serif;
}

.story__content p {
    margin: 0 auto 28px;

    color: var(--white-soft);

    font-size: clamp(21px, 1.5vw, 22px);

    font-weight: 400;

    line-height: 1.3;

    text-wrap: pretty;
}

.story__content p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   11. EVENTS SECTION
   ========================================================= */

.events {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
}

.events__heading {
    margin-bottom: 55px;
}

/* =========================================================
   12. HERO ANIMATION
   ========================================================= */

@keyframes heroImageReveal {
    from {
        opacity: 0;
        transform: scale(1.025);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================================================
   13. TABLET
   ========================================================= */

@media (max-width: 1024px) {
    :root {
        --section-padding-desktop: var(--section-padding-tablet);
    }

    body {
        font-size: 17px;
    }

    .hero {
        min-height: 85vh;
        min-height: 85svh;
    }

    .hero__content {
        min-height: 90vh;
        min-height: 90svh;
    }

    .hero__logo-link {
        top: 30px;
        right: 35px;
    }

    .story,
    .events,
    .locations {
        padding-left: 30px;
        padding-right: 30px;
    }

    .story__content {
        max-width: 780px;
    }
}

/* =========================================================
   14. MOBILE
   ========================================================= */

@media (max-width: 767px) {
    :root {
        --section-padding-desktop: var(--section-padding-mobile);
    }

    body {
        font-size: 16px;
        line-height: 1;
    }

    .hero {
        min-height: 78vh;
        min-height: 78svh;
    }

    .hero__content {
        min-height: 92vh;
        min-height: 92svh;
    }

    .hero__image {
        object-position: 60% center;
    }

    .hero__logo-link {
        top: 20px;
        right: 20px;
    }

    .hero__logo {
        width: 125px;
    }

    .story,
    .events,
    .locations {
        padding-left: 25px;
        padding-right: 25px;
    }

    .story {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .events {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .section-heading__english {
        font-size: clamp(38px, 12vw, 55px);
    }

    .section-heading__hebrew {
        font-size: 20px;
    }

    .story__content {
        margin-top: 35px;
    }

    .story__content p {
        font-size: 17px;
        line-height: 1;

        margin-bottom: 24px;
    }

    .events__heading {
        margin-bottom: 35px;
    }
}

/* =========================================================
   15. SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {
    .hero {
        min-height: 72vh;
        min-height: 72svh;
    }

    /* .hero__content {
        min-height: 72vh;
        min-height: 72svh;
    } */

    .hero__logo {
        width: 110px;
    }

    .hero__logo-link {
        top: 15px;
        right: 15px;
    }

    .story__content p {
        font-size: 16px;
    }
}

/* =========================================================
   16. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .site-background__video {
        display: none;
    }

    .site-background {
        background: var(--black);
    }
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.story__content p,
.events-gallery>*,
.location {
    opacity: 0;

    transform: translateY(20px);

    transition: opacity 0.8s ease, transform 0.8s ease;
}

.story__content p.is-visible,
.events-gallery>*.is-visible,
.location.is-visible {
    opacity: 1;

    transform: translateY(0);
}

/* =========================================================
   17. EVENTS — MASONRY / COLLAGE GALLERY
   ========================================================= */

.events-gallery {
    width: min(85vw, 850px);
    aspect-ratio: 550 / 1250;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(11, 1fr);

    gap: 3px;

    direction: ltr;

    overflow: hidden;
}

/* Every image */

.events-gallery>* {
    position: relative;

    margin: 0;
    padding: 0;

    overflow: hidden;

    min-width: 0;
    min-height: 0;

    background: #000;
}

.events-gallery img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Subtle hover */

.events-gallery>*:hover img {
    transform: scale(1.035);
}

.events::before {
    content: "···";

    display: block;

    text-align: center;

    color: var(--text-muted);

    font-size: 28px;

    letter-spacing: 15px;

    margin-bottom: 30px;
}

/* =========================================================
   IMAGE PLACEMENT — 15 IMAGE COLLAGE
   ========================================================= */

/* 01 */
.events-gallery> :nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
}

/* 02 */
.events-gallery> :nth-child(2) {
    grid-column: 2 / span 2;
    grid-row: 1 / span 3;
}

/* 03 */
.events-gallery> :nth-child(3) {
    grid-column: 1;
    grid-row: 3;
}

/* 04 */
.events-gallery> :nth-child(4) {
    grid-column: 1;
    grid-row: 4 / span 2;
}

/* 05 */
.events-gallery> :nth-child(5) {
    grid-column: 2;
    grid-row: 4 / span 2;
}

/* 06 */
.events-gallery> :nth-child(6) {
    grid-column: 3;
    grid-row: 4 / span 2;
}

/* 07 */
.events-gallery> :nth-child(7) {
    grid-column: 1 / span 2;
    grid-row: 6 / span 2;
}

/* 08 */
.events-gallery> :nth-child(8) {
    grid-column: 3;
    grid-row: 6;
}

/* 09 */
.events-gallery> :nth-child(9) {
    grid-column: 3;
    grid-row: 7;
}

/* 10 */
.events-gallery> :nth-child(10) {
    grid-column: 1;
    grid-row: 8 / span 2;
}

/* 11 */
.events-gallery> :nth-child(11) {
    grid-column: 2 / span 2;
    grid-row: 8 / span 2;
}

/* 12 */
.events-gallery> :nth-child(12) {
    grid-column: 1;
    grid-row: 10;
}

/* 13 */
.events-gallery> :nth-child(13) {
    grid-column: 1;
    grid-row: 11;
}

/* 14 */
.events-gallery> :nth-child(14) {
    grid-column: 2;
    grid-row: 10 / span 2;
}

/* 15 */
.events-gallery> :nth-child(15) {
    grid-column: 3;
    grid-row: 10 / span 2;
}

/* =========================================================
   19. LOCATIONS
   ========================================================= */

.locations {
    padding-top: var(--section-padding-desktop);
    padding-bottom: 80px;
}

/*
 * Two locations side by side
 */

.locations__grid {
    width: min(1000px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: clamp(50px, 8vw, 120px);

    text-align: center;
}

/* Individual location */

.location {
    display: flex;

    flex-direction: column;

    align-items: center;

    min-width: 0;
}

/* Location title */

.location__title {
    margin: 0 0 25px;

    color: var(--text-muted);

    font-family: "Assistant", sans-serif;

    font-size: clamp(25px, 2vw, 25px);

    font-weight: 600;

    letter-spacing: 0.5px;

    line-height: 1.2;
}

/* Address */

.location__address {
    margin: 0;

    color: var(--white-soft);

    font-style: normal;

    font-size: 18px;

    letter-spacing: 0.5px;

    line-height: 1;
}

.location__address p {
    margin: 0 0 8px;
}

.location__address p:last-child {
    margin-bottom: 0;
}

/* Phone */

.location__phone {
    margin: 20px 0 0;

    font-size: 19px;
}

.location__phone a {
    color: var(--white);

    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.location__phone a:hover {
    color: var(--orange-light);
}

/* =========================================================
   20. LOCATION SOCIAL ICONS
   ========================================================= */

.location__social {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    margin-top: 25px;
}

.location__social a {
    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    transition: transform var(--transition-fast), opacity var(--transition-fast),
        background-color var(--transition-fast);
}

.location__social a:hover {
    transform: translateY(-3px);

    background-color: rgba(255, 255, 255, 0.08);
}

.location__social img {
    width: 26px;
    height: 26px;

    object-fit: contain;
}

.waze-icon-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #ffffff;

    font-family: "Assistant", sans-serif;

    font-size: 16px;
    font-weight: 400;

    text-decoration: none;

    transition: opacity 0.25s ease;
}

.waze-icon-link img {
    width: 32px;
    height: 32px;

    object-fit: contain;

    flex-shrink: 0;
}

.waze-icon-link:hover {
    opacity: 0.8;
}

.waze-text {
    line-height: 1;
}

/* =========================================================
   21. LOCATION LINKS
   ========================================================= */

.location__links {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 12px;

    margin-top: 28px;
}

.location__link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 8px 24px;

    border: 1px solid var(--orange);

    color: var(--white);

    font-size: 17px;

    font-weight: 600;

    transition: background-color var(--transition-fast),
        color var(--transition-fast), transform var(--transition-fast);
}

.location__link:hover {
    background-color: var(--orange);

    color: var(--black);

    transform: translateY(-2px);
}

/* =========================================================
   22. FOOTER
   ========================================================= */

.site-footer {
    padding: 50px 20px 130px;

    text-align: center;
}

/* Logo */

.site-footer__brand {
    display: flex;

    justify-content: center;
}

.site-footer__logo-link {
    display: inline-block;

    transition: transform var(--transition-medium), opacity var(--transition-fast);
}

.site-footer__logo {
    width: clamp(90px, 15vw, 120px);

    height: auto;
}

.site-footer__logo-link:hover {
    transform: scale(1.03);

    opacity: 0.9;
}

/* Accessibility statement */

.site-footer__accessibility {
    display: inline-block;

    margin-top: 20px;

    color: var(--text-muted);

    font-size: 15px;

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

    transition: color var(--transition-fast);
}

.site-footer__accessibility:hover {
    color: var(--white);
}

/* =========================================================
   23. FIXED ORDERING BAR
   ========================================================= */

.ordering-bar {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 5000;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    min-height: 62px;

    background: rgba(0, 0, 0, 0.94);

    border-top: 1px solid rgba(255, 255, 255, 0.15);

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

.ordering-bar__button {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 62px;

    padding: 10px 20px;

    color: var(--white);

    font-family: "Assistant", Arial, sans-serif;

    font-size: 18px;

    font-weight: 600;

    text-align: center;

    transition: background-color var(--transition-fast),
        color var(--transition-fast);
}

.ordering-bar__button+.ordering-bar__button {
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.ordering-bar__button:hover {
    background-color: var(--orange);

    color: var(--black);
}

/* =========================================================
   24. BACK TO TOP
   ========================================================= */

.back-to-top {
    position: fixed;

    right: 22px;
    bottom: 84px;

    z-index: 5100;

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.82);

    border: 1px solid rgba(255, 255, 255, 0.35);

    color: var(--white);

    font-size: 22px;

    line-height: 1;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: opacity var(--transition-fast), visibility var(--transition-fast),
        transform var(--transition-fast), background-color var(--transition-fast);
}

/*
 * JS will add .is-visible when the user scrolls.
 */

.back-to-top.is-visible {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--orange);

    color: var(--black);
}

/* =========================================================
   25. TABLET — GALLERY
   ========================================================= */

@media (max-width: 1024px) {
    .events-gallery {
        width: min(900px, 100%);

        grid-auto-rows: 60px;
    }

    .locations__grid {
        gap: 60px;
    }

    .location__address {
        font-size: 17px;
    }
}

/* =========================================================
   26. MOBILE — GALLERY
   ========================================================= */

@media (max-width: 767px) {
    /* Locations */

    .locations {
        padding-top: 65px;

        padding-bottom: 60px;
    }

    .locations__grid {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .location__title {
        margin-bottom: 18px;
    }

    .location__phone {
        margin-top: 15px;
    }

    /* Ordering bar */

    .ordering-bar {
        min-height: 58px;
    }

    .ordering-bar__button {
        min-height: 58px;

        padding: 8px 10px;

        font-size: 16px;
    }

    /* Back to top */

    .back-to-top {
        right: 14px;

        bottom: 72px;

        width: 42px;
        height: 42px;

        font-size: 20px;
    }

    /* Footer */

    .site-footer {
        padding-bottom: 110px;
    }
}

/* =========================================================
   27. SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {
    .events-gallery {
        grid-auto-rows: 48px;
    }

    .location__links {
        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }

    .location__link {
        width: 100%;
    }

    .location__social {
        gap: 12px;
    }

    .ordering-bar__button {
        font-size: 15px;
    }

    .back-to-top {
        right: 10px;

        bottom: 68px;
    }
}

/* =========================================================
   28. TOUCH DEVICES
   ========================================================= */

@media (hover: none) {
    .events-gallery>*:hover img {
        transform: none;
    }

    .location__link:hover {
        transform: none;
    }

    .hero__logo-link:hover,
    .site-footer__logo-link:hover {
        transform: none;
    }
}

/* =========================================================
   ACCESSIBILITY STATEMENT MODAL
   ========================================================= */

.accessibility-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    direction: rtl;
}

.accessibility-modal[hidden] {
    display: none;
}

/* Dark background */

.accessibility-modal__overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.78);

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

/* Modal window */

.accessibility-modal__content {
    position: relative;
    z-index: 1;

    width: min(720px, 100%);
    max-height: min(80vh, 800px);

    overflow-y: auto;

    padding: 45px 45px 40px;

    background: #0b0b0b;

    border: 1px solid rgba(255, 255, 255, 0.18);

    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.65);

    color: var(--white);

    text-align: right;

    overscroll-behavior: contain;

    animation: accessibilityModalIn 0.3s ease both;
}

/* Heading */

.accessibility-modal__content h2 {
    margin: 0 0 35px;

    color: var(--orange);

    font-family: "Assistant", sans-serif;

    font-size: clamp(28px, 4vw, 40px);

    font-weight: 600;

    line-height: 1.3;
}

.accessibility-modal__text h3 {
    margin: 30px 0 10px;

    color: var(--orange);

    font-family: "Assistant", sans-serif;

    font-size: 20px;

    font-weight: 600;

    line-height: 1.4;
}

.accessibility-modal__text h3:first-child {
    margin-top: 0;
}

/* Body text */

.accessibility-modal__text p {
    margin: 0 0 18px;

    color: var(--white-soft);

    font-family: "Assistant", sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.8;
}

/* Lists */

.accessibility-modal__text ul {
    margin: 10px 0 22px;

    padding-right: 25px;
    padding-left: 0;

    color: var(--white-soft);
}

.accessibility-modal__text li {
    margin-bottom: 7px;

    font-family: "Assistant", sans-serif;

    font-size: 16px;

    line-height: 1.7;
}

/* Close button */

.accessibility-modal__close {
    position: absolute;

    top: 14px;
    left: 14px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.25);

    background: transparent;

    color: var(--white);

    font-family: Arial, sans-serif;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

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

.accessibility-modal__close:hover {
    background: var(--orange);

    border-color: var(--orange);

    color: var(--black);
}

/* Updated date */

.accessibility-modal__updated {
    margin-top: 35px !important;

    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.15);

    color: var(--text-muted) !important;

    font-size: 14px !important;
}

/* =========================================================
   MODAL ANIMATION
   ========================================================= */

@keyframes accessibilityModalIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =========================================================
   PREVENT PAGE SCROLL WHEN MODAL IS OPEN
   ========================================================= */

body.accessibility-modal-open {
    overflow: hidden;
}

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

@media (max-width: 767px) {
    .accessibility-modal {
        align-items: center;

        padding: 15px;
    }

    .accessibility-modal__content {
        width: 100%;

        max-height: 88vh;

        padding: 45px 22px 30px;
    }

    .accessibility-modal__content h2 {
        margin-bottom: 25px;

        font-size: 28px;
    }

    .accessibility-modal__text h3 {
        margin-top: 25px;

        font-size: 19px;
    }

    .accessibility-modal__text p,
    .accessibility-modal__text li {
        font-size: 15px;

        line-height: 1.8;
    }

    .accessibility-modal__close {
        top: 10px;
        left: 10px;

        width: 38px;
        height: 38px;

        font-size: 27px;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .accessibility-modal__content {
        animation: none;
    }
}