/* ==========================================================================
   ESNNA Policies: page navigation and editorial reading surface
   ========================================================================== */

/* Keep anchor destinations visible below the persistent section navigation. */
.esnna-policies-page :is(section, div)[id] {
    scroll-margin-top: 6.5rem;
}

/* Provide a compact, horizontally scrollable map of the policy sections. */
.esnna-policy-nav {
    position: sticky;
    top: 0;
    z-index: 25;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    background-color: #171717;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12);
}

/* Preserve a single-line navigation rhythm without forcing page overflow. */
.esnna-policy-nav-list {
    display: flex;
    gap: 0;
    align-items: stretch;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: #f10100 #171717;
}

/* Style section links as compact, touch-friendly wayfinding controls. */
.esnna-policy-nav-list a {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    padding: 0.85rem 1rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 180ms ease, color 180ms ease;
}

/* Make hover and keyboard states unmistakable against the dark rail. */
.esnna-policy-nav-list a:hover,
.esnna-policy-nav-list a:focus-visible {
    background-color: #b90201;
    color: #ffffff;
    outline: 0;
}

/* ==========================================================================
   Opening statement and source image
   ========================================================================== */

/* Introduce the policy on a calm white surface with generous reading space. */
.esnna-policy-opening {
    padding: clamp(3.5rem, 7vw, 6.5rem) 0;
    background-color: #ffffff;
}

/* Balance the long statement with the supplied ESNNA visual. */
.esnna-policy-opening-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.72fr);
    gap: clamp(2.5rem, 6vw, 6.5rem);
    align-items: center;
}

/* Keep policy text at an accessible editorial measure. */
.esnna-policy-opening-copy {
    max-width: 46rem;
}

/* Give the original policy title clear authority below the shared hero. */
.esnna-policy-opening-copy h2 {
    max-width: 18ch;
    margin: 0 0 2rem;
    color: #171717;
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.04;
    text-transform: uppercase;
    text-wrap: balance;
}

/* Set a comfortable measure and rhythm for the opening source paragraphs. */
.esnna-policy-opening-copy p {
    max-width: 70ch;
    margin: 0 0 1.15rem;
    color: #5d5d5d;
    font-size: 1rem;
    line-height: 1.78;
}

/* Strengthen source emphasis without introducing another accent color. */
.esnna-policy-opening-copy strong {
    color: #171717;
}

/* Present the supplied ESNNA image as a document rather than decorative art. */
.esnna-policy-figure {
    width: min(100%, 28rem);
    margin: 0 auto;
}

/* Clip the linked poster and reveal the viewing action on focus or hover. */
.esnna-policy-figure a {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid #e8e8e4;
    border-radius: 7px;
    background-color: #f7f7f5;
    box-shadow: 0 18px 44px rgba(17, 24, 39, 0.12);
}

/* Preserve the original poster proportion and readable detail. */
.esnna-policy-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 7px;
}

/* Place a compact open-image action over the bottom edge of the poster. */
.esnna-policy-figure a span {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: inline-flex;
    gap: 0.55rem;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 7px;
    background-color: #171717;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

/* Surface keyboard focus clearly around the complete poster link. */
.esnna-policy-figure a:focus-visible {
    outline: 3px solid rgba(241, 1, 0, 0.35);
    outline-offset: 4px;
}

/* Label the source image without competing with its content. */
.esnna-policy-figure figcaption {
    margin-top: 0.75rem;
    color: #5d5d5d;
    font-size: 0.82rem;
    text-align: center;
}

/* ==========================================================================
   Policy reading layout and table of contents
   ========================================================================== */

/* Separate the detailed policy from the opening statement with a quiet surface. */
.esnna-policy-content {
    padding: clamp(3.5rem, 7vw, 6.5rem) 0;
    background-color: #f7f7f5;
}

/* Pair a compact contents rail with the main policy document. */
.esnna-policy-content-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

/* Keep wayfinding visible while long policy sections are read. */
.esnna-policy-contents {
    position: sticky;
    top: 5rem;
    padding: 1.5rem;
    border: 1px solid #e8e8e4;
    border-radius: 7px;
    background-color: #ffffff;
}

/* Style the contents heading as a compact document label. */
.esnna-policy-contents h2 {
    margin: 0 0 1.25rem;
    color: #171717;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
}

/* Use native numbering to reinforce the reading sequence. */
.esnna-policy-contents ol {
    display: grid;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style-position: inside;
}

/* Separate table-of-contents rows with neutral horizontal rules. */
.esnna-policy-contents li {
    padding: 0.8rem 0;
    border-bottom: 1px solid #e8e8e4;
    color: #5d5d5d;
    font-size: 0.82rem;
}

/* Let the linked section title carry the strongest contrast. */
.esnna-policy-contents li a {
    color: #444444;
    font-weight: 700;
    text-decoration: none;
}

/* Clarify interactive states for contents links. */
.esnna-policy-contents li a:hover,
.esnna-policy-contents li a:focus-visible {
    color: #b90201;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

/* Make the reporting shortcut the primary action in the contents rail. */
.esnna-policies-page .esnna-policy-contents-action {
    display: inline-flex;
    width: 100%;
    min-height: 3rem;
    gap: 0.65rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.25rem;
    padding: 0.8rem 1rem;
    border: 1px solid #b90201;
    border-radius: 7px;
    background-color: #b90201;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

/* Give the reporting shortcut a clear hover and focus response. */
.esnna-policies-page .esnna-policy-contents-action:hover,
.esnna-policies-page .esnna-policy-contents-action:focus-visible {
    border-color: #b90201;
    background-color: #b90201;
    color: #ffffff;
    outline: 3px solid rgba(241, 1, 0, 0.2);
    outline-offset: 3px;
    transform: translateY(-2px);
}

/* Hold all policy sections inside one continuous editorial document. */
.esnna-policy-document {
    overflow: hidden;
    border: 1px solid #e8e8e4;
    border-radius: 7px;
    background-color: #ffffff;
}

/* Give every policy section the same readable internal rhythm. */
.esnna-policy-section {
    padding: clamp(2rem, 4vw, 3.75rem);
    border-top: 1px solid #e8e8e4;
}

/* Remove the first divider so the document begins cleanly. */
.esnna-policy-document > .esnna-policy-section:first-child {
    border-top: 0;
}

/* Use a warm surface to distinguish the zero-tolerance declaration. */
.esnna-policy-section.is-emphasis {
    background-color: #fffaf5;
}

/* Align each section icon with its exact source heading. */
.esnna-policy-section-header {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Frame section icons using the shared red and seven-pixel corner language. */
.esnna-policy-section-icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background-color: #f10100;
    color: #ffffff;
}

/* Keep source section titles direct and highly scannable. */
.esnna-policy-section h2 {
    margin: 0;
    color: #171717;
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.08;
    text-transform: uppercase;
}

/* Maintain a comfortable reading measure across policy paragraphs. */
.esnna-policy-section > p {
    max-width: 72ch;
    margin: 0 0 1.25rem;
    color: #5d5d5d;
    line-height: 1.78;
}

/* Present legal and commitment items without decorative side borders. */
.esnna-policy-list {
    display: grid;
    gap: 0;
    padding: 0;
    margin: 1.25rem 0 0;
    list-style: none;
}

/* Turn commitment items into a responsive two-column reading grid. */
.esnna-policy-list.is-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2rem;
}

/* Use horizontal rules and check marks to organize each exact source item. */
.esnna-policy-list li {
    display: grid;
    grid-template-columns: 1.15rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 1rem 0;
    border-top: 1px solid #e8e8e4;
    color: #444444;
    line-height: 1.65;
}

/* Reserve red for the policy's affirmative markers. */
.esnna-policy-list li > i {
    margin-top: 0.28rem;
    color: #f10100;
}

/* Close the zero-tolerance section with a clear full-width statement. */
.esnna-policy-section-closing {
    margin-top: 1.5rem !important;
    padding: 1.25rem;
    border: 1px solid #e8e8e4;
    border-radius: 7px;
    background-color: #ffffff;
    color: #171717 !important;
    font-weight: 700;
}

/* ==========================================================================
   Reporting panel
   ========================================================================== */

/* Make emergency contact information the strongest operational area. */
.esnna-report-panel {
    padding: clamp(2rem, 4vw, 3.75rem);
    background-color: #171717;
    color: #ffffff;
}

/* Pair the reporting symbol with the source heading and opening statement. */
.esnna-report-panel-header {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

/* Frame the reporting icon with the shared brand accent and radius. */
.esnna-report-panel-icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background-color: #f10100;
    color: #ffffff;
}

/* Keep the reporting title legible on the dark operational surface. */
.esnna-report-panel h2 {
    margin: 0 0 0.75rem;
    color: #ffffff;
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.08;
    text-transform: uppercase;
}

/* Use warm-white copy for readable contrast on the reporting surface. */
.esnna-report-panel p {
    max-width: 72ch;
    margin: 0 0 1.25rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.75;
}

/* Arrange source reporting contacts in an efficient two-column list. */
.esnna-report-contacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0;
    margin: 1.75rem 0;
    list-style: none;
}

/* Keep every reporting channel the same height and visual weight. */
.esnna-report-contacts li {
    min-width: 0;
}

/* Share one layout between linked phone channels and the prosecutor listing. */
.esnna-report-contacts :is(a, div) {
    display: grid;
    min-height: 5.25rem;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    line-height: 1.45;
    text-decoration: none;
}

/* Clarify that telephone channels are actionable. */
.esnna-report-contacts a {
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

/* Lift actionable reporting channels on hover and keyboard focus. */
.esnna-report-contacts a:hover,
.esnna-report-contacts a:focus-visible {
    border-color: #b90201;
    background-color: #b90201;
    color: #ffffff;
    outline: 3px solid rgba(255, 255, 255, 0.25);
    outline-offset: 3px;
    transform: translateY(-2px);
}

/* Prevent the long authority names from overflowing their grid tracks. */
.esnna-report-contacts span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Distinguish device help from the exact policy text without reducing contrast. */
.esnna-report-device-note {
    margin-bottom: 0.5rem !important;
    color: rgba(255, 255, 255, 0.66) !important;
    font-size: 0.84rem;
}

/* Keep the police-station reporting option visible at the end of the panel. */
.esnna-report-station-note {
    margin-bottom: 0 !important;
    color: #ffffff !important;
    font-weight: 700;
}

/* ==========================================================================
   Important notice close
   ========================================================================== */

/* Close the policy on the brand-red surface used for urgent action. */
.esnna-important-notice {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background-color: #b90201;
    color: #ffffff;
}

/* Keep the notice centered and aligned as one decisive final statement. */
.esnna-important-notice-inner {
    display: grid;
    max-width: 60rem;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin: 0 auto;
}

/* Give the closing shield a dark, consistent seven-pixel frame. */
.esnna-important-notice-icon {
    display: inline-flex;
    width: 4rem;
    height: 4rem;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background-color: #171717;
    color: #ffffff;
    font-size: 1.25rem;
}

/* Let the exact notice heading lead the closing section. */
.esnna-important-notice h2 {
    margin: 0 0 1.25rem;
    color: #ffffff;
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.04;
    text-transform: uppercase;
}

/* Keep the closing source copy broad enough to feel declarative. */
.esnna-important-notice p {
    max-width: 70ch;
    margin: 0 0 1rem;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.75;
}

/* Separate the original source signature with typographic weight only. */
.esnna-important-notice-signature {
    margin-top: 1.5rem !important;
}

/* Offer a direct return to reporting channels without adding new policy copy. */
.esnna-important-notice a {
    display: inline-flex;
    min-height: 3rem;
    gap: 0.65rem;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid #171717;
    border-radius: 7px;
    background-color: #171717;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

/* Reverse the closing action while preserving visible focus. */
.esnna-important-notice a:hover,
.esnna-important-notice a:focus-visible {
    background-color: #ffffff;
    color: #171717;
    outline: 3px solid rgba(255, 255, 255, 0.35);
    outline-offset: 3px;
    transform: translateY(-2px);
}

/* ==========================================================================
   Responsive composition and motion preferences
   ========================================================================== */

/* Stack the opening and contents rail before either column becomes cramped. */
@media (max-width: 991.98px) {
    .esnna-policy-opening-grid,
    .esnna-policy-content-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .esnna-policy-opening-copy {
        max-width: none;
    }

    .esnna-policy-contents {
        position: static;
    }

    .esnna-policy-contents ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1.5rem;
    }
}

/* Simplify dense policy grids and typography for narrow phones. */
@media (max-width: 575.98px) {
    .esnna-policy-nav-list a {
        min-height: 3.25rem;
        padding-inline: 0.8rem;
    }

    .esnna-policy-opening,
    .esnna-policy-content,
    .esnna-important-notice {
        padding-block: 3rem;
    }

    .esnna-policy-opening-grid {
        gap: 2rem;
    }

    .esnna-policy-opening-copy h2 {
        font-size: 2rem;
    }

    .esnna-policy-contents ol,
    .esnna-policy-list.is-grid,
    .esnna-report-contacts {
        grid-template-columns: minmax(0, 1fr);
    }

    .esnna-policy-section,
    .esnna-report-panel {
        padding: 1.5rem;
    }

    .esnna-policy-section-header,
    .esnna-report-panel-header {
        grid-template-columns: 2.75rem minmax(0, 1fr);
    }

    .esnna-policy-section-icon,
    .esnna-report-panel-icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .esnna-important-notice-inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Respect reduced-motion preferences on every page-specific interaction. */
@media (prefers-reduced-motion: reduce) {
    .esnna-policy-nav-list a,
    .esnna-policy-contents-action,
    .esnna-report-contacts a,
    .esnna-important-notice a {
        transition: none;
    }
}