/*
Theme Name:         NPEA 2026
Theme URI:          https://getblankspace.com
Description:        Block-theme rebuild of the NPEA Theme (formerly a Roots/Sage 8 + Bootstrap 3.3.6 classic theme). Same visual language, native block editing, same event/report/item custom post types and ACF fields.
Version:            1.0.0
Author:             Blank Space
Author URI:         https://getblankspace.com
Text Domain:        npea
Requires at least:  6.5
Requires PHP:       7.4
Tested up to:       6.6

License:            MIT License
License URI:        http://opensource.org/licenses/MIT
*/

/*
 * Everything below is hand-ported from xp-theme/dist/styles/main.css (compiled Sass —
 * no source .scss survives, only the ~187KB compiled/minified output). theme.json only
 * carries color/font/spacing *tokens*; this file carries the actual component styling
 * (old class names still referenced by these templates) plus fresh CSS for the class
 * names introduced during the block conversion that never existed in the old theme
 * (.site-header, .site-footer, .primary-navigation, etc — nothing to "port" for those,
 * written to match the old theme's visual language using its color/spacing values).
 * Not attempting to port Bootstrap's grid/component internals (.btn-*, .navbar-*,
 * .carousel-*, .dropdown-menu, etc) since nothing in this theme uses those classes.
 */

/* ---------- npea-glyphs icon font (tilde flourishes + state icons) ---------- */

@font-face {
    font-family: 'npea-glyphs';
    src: url('assets/fonts/npea.woff') format('woff'),
         url('assets/fonts/npea.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

[class*=" npea-glyphs-"], [class^="npea-glyphs-"] {
    font-family: 'npea-glyphs' !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.npea-glyphs-tilde:before { content: "\e902"; }
.npea-glyphs-tilde2:before { content: "\e903"; }
.npea-glyphs-mo:before { content: "\e901"; }
.npea-glyphs-wy:before { content: "\e904"; }
.npea-glyphs-ne:before { content: "\e905"; }
.npea-glyphs-ks:before { content: "\e906"; }
.npea-glyphs-nv:before { content: "\e907"; }
.npea-glyphs-ut:before { content: "\e908"; }
.npea-glyphs-co:before { content: "\e909"; }
.npea-glyphs-point:before { content: "\e90a"; }
.npea-glyphs-ca:before { content: "\e90b"; }
.npea-glyphs-npea:before { content: "\e90c"; }
.npea-glyphs-arrow:before { content: "\e900"; position: relative; top: .1em; margin-top: -.1em; }

.glyph_flip {
    display: inline-block;
    transform: scaleX(-1);
}

hr {
border: 0 !important;
height: 26px !important;
width: auto !important;
background: url('assets/images/separator.svg') 50% 0 no-repeat;
margin: 20px 0 !important;
}

/* Pull the block after any heading closer to it (block-gap is a top margin on
     that block; core sets it via :where() at 0 specificity, so this wins with no !important). */
  :where(.is-layout-flow, .is-layout-constrained) > .wp-block-heading + * {
      margin-block-start: 4px;
  }
  
/* A title with the flanking tilde flourishes seen on every old page-header banner.
   The default page variant used tilde2 (\e903) spans at 72px, second one mirrored,
   inheriting the heading's brown — the state-page variant (\e902) comes later with
   the state templates. */
.with-tilde-glyphs {
    text-align: center;
    text-transform: uppercase;
}
.with-tilde-glyphs:before,
.with-tilde-glyphs:after {
    font-family: 'npea-glyphs';
    content: "\e903";
    display: inline-block;
    font-size: 72px;
    margin: 0 12px;
    vertical-align: middle;
}
.with-tilde-glyphs:after {
    transform: scaleX(-1);
}
@media (max-width: 767px) {
    /* Old .page-header h1 span:first-child{display:none} — one tilde is enough on phones. */
    .with-tilde-glyphs:before { display: none; }
    .with-tilde-glyphs:after { font-size: 48px; }
}

/* ---------- base typography extras ---------- */

.wp-block-heading .small,
.wp-block-heading small {
    font-weight: 400;
    line-height: 1;
    color: var(--wp--preset--color--tertiary);
}

blockquote {
    padding: 14px 28px;
    margin: 0 0 28px;
    font-size: 22.5px;
    border-left: 5px solid #fff;
}
blockquote footer,
blockquote cite {
    display: block;
    font-size: 80%;
    line-height: 1.6;
    color: var(--wp--preset--color--tertiary);
}

/* ---------- layout utilities ---------- */

/* The .full_width bleed below and the absolutely-positioned trail-map overlays both
   push past the viewport; the old theme clipped them with this exact rule. */
html, body {
    overflow-x: hidden;
}

/* Old Bootstrap full-bleed trick: bleed a contained block edge-to-edge, then pull the
   padding back in so its own content still lines up with the rest of the page. */
.full_width {
    margin-left: -9999rem;
    margin-right: -9999rem;
    padding-left: 9999rem;
    padding-right: 9999rem;
    overflow: auto;
}

.lt_tan_bg {
    padding-top: 30px;
    padding-bottom: 30px;
    background: #f6f0e4;
    box-shadow: 0 0 8px rgba(0, 0, 0, .2);
    border-bottom: 6px solid var(--wp--preset--color--secondary)
}

.hidden { display: none !important; }

/* A floated alignleft/alignright image leaves too little room for the text beside it on
   phones. Below 600px, stop floating them and center each on its own line instead. */
@media (max-width: 600px) {
    .wp-block-image.alignleft,
    .wp-block-image.alignright,
    img.alignleft,
    img.alignright {
        float: none;
        display: block;
        width: fit-content;
        max-width: 100%;
        margin: 1em auto;
    }
    .wp-block-image.alignleft img,
    .wp-block-image.alignright img {
        max-width: 100%;
        height: auto;
    }
}

/* ---------- header ---------- */

/* Header (old .banner). The paper texture is the old banner's fixed 1400x280 image at its
   natural size, pinned to the top and centered. It caps at 1400px wide; as the window narrows
   it simply bleeds off both edges (you see more of its center) — it never stretches or tiles,
   which is what made the old header read right. Past 1400px the parchment body background
   shows at the sides. Title/rider sit on it, nav row along the bottom. */
.site-header {
    padding: 0;
    background: url('assets/images/paper.png') no-repeat top center;
    background-size: 1400px 280px;
    min-height: 280px;
    z-index: 11;
}
.site-header > .wp-block-group {
    align-items: flex-start;
    /* Content packs at the top (title+rider row, then the nav right beneath it); the leftover
       banner height sits empty below the nav, like the old header. */
    align-content: flex-start;
    /* row-gap sits between the title+rider row and the nav row; padding-top drops the whole
       block into the lower half of the paper so the nav lands just above the paper's torn
       bottom edge, matching the classic banner's vertical rhythm. */
    row-gap: 15px;
    padding: 30px 15px 16px;
    min-height: 280px;
}

/* Site title — the old banner's stepped sizes (40 / 48 / 52 / 54 / 72pt across the Bootstrap
   sm/md/lg breakpoints), not a fluid clamp, so it tracks the classic look at every width. */
.site-header .wp-block-site-title {
    margin: 30px 0 0;
    font-size: 40pt;
    line-height: 1.05;
    mix-blend-mode: multiply;
    overflow-wrap: break-word;
}
.site-header .wp-block-site-title a {
    font-family: var(--wp--preset--font-family--french);
    color: var(--wp--preset--color--contrast);
    letter-spacing: -1pt;
    text-decoration: none;
}
@media (min-width: 480px) {
    .site-header .wp-block-site-title { font-size: 48pt; margin: 10px 0 0; max-width: 480px; }
}
@media (min-width: 768px) {
    .site-header .wp-block-site-title { font-size: 52pt; margin: 30px 0 0; max-width: none; }
}
@media (min-width: 992px) {
    .site-header .wp-block-site-title { font-size: 56pt; margin: 40px 45px 0 0; }
}
@media (min-width: 1200px) {
    .site-header .wp-block-site-title { font-size: 70pt; }
}

/* Rider — 200px inline and pulled up beside the title on desktop; 140px, block and centered
   below the title under 992px; hidden on the narrowest phones. Matches the old .rider. */
.site-header .npea-rider-image {
    margin: 0;
}
.site-header .npea-rider-image img {
    display: block;
    width: 140px;
    height: auto;
    margin: 0 auto 20px;
    mix-blend-mode: multiply;
}
@media (min-width: 992px) {
    .site-header .npea-rider-image img {
        display: inline-block;
        width: 180px;
        /* Nudged down (21px) so its top aligns with the title. Inset from the right via
           position offset — NOT margin: a right margin adds to the flex row's width and, next
           to the 72pt title, tips the row past the 1220px content box so the rider wraps to
           its own line. position:relative/right shifts it visually with no layout width. */
        margin: 21px 0 0;
        position: relative;
        right: 45px;
    }
}
@media (max-width: 320px) {
    .site-header .npea-rider-image { display: none; }
}
/* Face the rider toward the ride direction (default faces west; the ride-east body class from
   inc/misc.php flips it), like the old .rider.east { transform: scaleX(-1) }. */
.ride-east .site-header .npea-rider-image img {
    transform: scaleX(-1);
}

/* Nav on its own full-width row along the bottom of the banner, like the old navbar-collapse
   row under the brand. */
.site-header .primary-navigation {
    flex-basis: 100%;
    flex-wrap: wrap;
    /* Left-packed under the title like the classic float:left navbar; re-centered on narrow
       widths in the max-width:767px block below. */
    justify-content: flex-start;
    gap: 0;
    border-bottom: 1px solid var(--wp--preset--color--contrast);
}
/* Nav links: brown, the old 16pt stepped down to 14/13pt as the bar tightens, regular weight,
   NOT uppercase — matching .navbar-default .navbar-nav>li>a. */
.primary-navigation .wp-block-navigation-item__content {
    color: var(--wp--preset--color--contrast);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13pt;
    line-height: 1.42;
    padding: 0 11px 8px;
}
@media (min-width: 992px) {
    .primary-navigation .wp-block-navigation-item__content { font-size: 14pt; padding: 0 10px 8px; }
}
@media (min-width: 1200px) {
    .primary-navigation .wp-block-navigation-item__content { font-size: 16pt; padding: 0 21px 8px; }
}
.primary-navigation .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary-hover);
}
.primary-navigation .current-menu-item > .wp-block-navigation-item__content {
    font-weight: 700;
}
/* Old dropdown: solid brown panel, white links, red hover, gold for the active item. */
.primary-navigation .wp-block-navigation__submenu-container {
    background-color: var(--wp--preset--color--contrast) !important;
    border: 0;
    text-align: center;
    z-index: 100;
    align-items: center !important;
    min-width:180px !important;
    padding: 8px 0;
}
.primary-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: #fff;
    text-transform: none;
    font-weight: 400;
    font-size: 18px !important;
    line-height: 1.4 !important;
    padding: 4px 20px 6px !important;
}
.primary-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary);
    background: none;
}
.primary-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
    color: var(--wp--preset--color--secondary);
}

/* Mobile: center the title/rider stack (nav is the hamburger overlay below core's breakpoint). */
@media (max-width: 767px) {
    .site-header > .wp-block-group { justify-content: center; text-align: center; }
    /* Any inline nav still showing above the overlay breakpoint stays centered, not left-packed. */
    .site-header .primary-navigation { justify-content: center; }
}

/* ---------- mobile navigation overlay (core Navigation hamburger) ---------- */

/* Core ships the hamburger + overlay unstyled (white panel, default text). Dress them to
   match the header: brown icons, a parchment panel, brown uppercase links, red on hover. */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--contrast);
}
.site-header .wp-block-navigation__responsive-container-open svg,
.site-header .wp-block-navigation__responsive-container-close svg {
    fill: currentColor;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--base);
    padding: 2rem 1.5rem;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: var(--wp--preset--color--contrast);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.15rem;
    padding: 6px 0;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary);
}
/* Sub-menus render expanded in the overlay — drop the brown desktop panel and switch the
   links back to brown so they read on the parchment. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    background-color: transparent !important;
    min-width: 0 !important;
    padding: 0 0 0 1rem;
    align-items: inherit !important;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--wp--preset--color--contrast);
    text-transform: none;
    font-weight: 400;
    font-size: 1rem !important;
}

/* ---------- page headers ---------- */

.page-header {
    text-align: center;
    margin: 0 0 28px;
    border: 0;
    padding-bottom: 8px;
    z-index: -1;
}
.page-header h1 {
  font-size: var(--wp--preset--font-size--huge);
    text-wrap: balance;
}
.single-item .page-header h1 {
  font-size: var(--wp--preset--font-size--xx-large);
}
.state-page-header {
    margin-top: -140px !important;
}
.page-header h1 {
    text-transform: uppercase;
    margin-top: 0;
}
/* The single-post header icon (acf/host-icon / from-icon / state — a direct-child glyph span
   on single event/item/report): big and centered above the title, like the old .page-header
   span { font-size: 92px }. The `> ` scope keeps it off the small arrow glyph in .back_text
   and the tilde spans nested inside archive <h1>s. */
.page-header > [class*="npea-glyphs-"] {
    display: block;
    font-size: clamp(64px, 10vw, 92px);
    line-height: 1;
    margin-bottom: 8px;
}
/* "All Events" / "Back to …" link, centered below the title with its arrow glyph. */
.back_text {
    margin-top: 10px;
}
.back_text [class*="npea-glyphs-"] {
    vertical-align: middle;
    margin-right: 4px;
}

.featured_img {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-color: var(--wp--preset--color--base);
    height: 320px;
}
.featured_img img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}

/* The old theme composited a fixed-image gradient fade with CSS `background-image`;
   the featured image here is dynamic per-page (wp:post-featured-image), so the fade is
   layered on top with a pseudo-element instead of baked into one background shorthand. */
.state-hero-image {
    position: relative;
    height: 420px;
}
.state-hero-image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
}
.state-hero-image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--wp--preset--color--base) 0px, transparent 120px);
}
.state-page-title {
    position: relative;
    z-index: 1;
    margin-top: -130px !important;
    color: var(--wp--preset--color--base);
}

/* Featured-image caption — the old .feature_caption: a small uppercase label on a
   translucent cream chip, tucked up so it sits over the lower edge of the hero image
   (the acf/hero-caption block renders it just after the overlaid title). If the vertical
   offset lands wrong against this theme's overlap, `top` is the knob to turn. */
.feature_caption {
    position: relative;
    z-index: 1;
    top: 0;
    display: block;
    width: fit-content;
    margin: 0 auto 0 0;
    padding: 0 6px;
    background: hsla(40, 50%, 93%, 0.75);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: uppercase;
}

/* ---------- archive nav / lists ---------- */

.archive_nav_side,
.archive_nav_top {
    margin: 0;
    padding: 0;
    list-style: none;
}
.archive_nav_top {
    text-align: center;
}
.archive_nav_top li {
    display: inline-block;
    padding: 0 5px;
}
.archive_nav_side li .active,
.archive_nav_top li .active {
    font-weight: 700;
    color: var(--wp--preset--color--primary);
}

.item_thumb {
    float: left;
    padding: 0 10px 10px 0;
}
.event_excerpt {
    display: none;
}
.news_from {
    padding: 6px 0;
    font-weight: 700;
}
.back_text a:hover {
    text-decoration: none !important;
}
.headline_link {
    text-align: center;
}

/* ---------- state landing pages ---------- */

.section_title {
    text-align: center;
    text-transform: uppercase;
    border-bottom: 2px dotted rgba(96, 56, 19, .4);
    padding-bottom: 10px;
    margin-bottom: 0;
}
.section_title a {
    text-decoration: none;
    color: var(--wp--preset--color--contrast);
}
.section_content {
    display: none;
    padding: 15px 0;
}
.section_content.start {
    display: block;
}

.state_info {
    margin-top: 60px;
}
@media (max-width: 1199px) {
    .state_info {
        margin-top: 0;
        margin-bottom: 20px;
        text-align: center;
    }
}

.section_title .npea-glyphs-tilde2 {
    font-size: 40px;
}
.division-name:before {
    content: "NPEA ";
}
.division-name:after {
    content: " Division";
}

/* Old .footer_divider: a slim gold band (12px min even when its state nav is empty). */
.footer-divider {
    background: var(--wp--preset--color--secondary);
    min-height: 40px;
    width: 100%;
    text-align: center;
    margin-top: 0;
    position: relative;
    z-index: 999;
}
.footer-divider .wp-block-navigation-item__content {
    color: var(--wp--preset--color--contrast);
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--normal);
    font-weight: 600;
    padding: 4px 12px;
}
.footer-divider .current-menu-item .wp-block-navigation-item__content {
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
}

/* ---------- front page ---------- */

/* Old #brave_xp: body font, uppercase, centered — the size mix comes from inline
   span sizes in the content, not the container. */
.brave_xp {
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    margin-bottom: 20px;
}

/* Old #events_list sat directly on the parchment page background — no panel. */
.events_list {
    text-align: center;
    margin-bottom: 20px;
}
.events_list h2,
.events_list h5 {
    margin: 0;
}
.events_list p {
    line-height: 19px;
    margin-bottom: 5px;
}
.events_list span[class*="npea-glyphs"] {
    font-size: 24px;
    margin-top: 10px;
}
.events_list span.npea-glyphs-npea {
    font-size: 36px;
}

.slide_container .wp-block-gallery.is-cropped .wp-block-image a,
.slide_container .wp-block-gallery.is-cropped .wp-block-image img {
    height: 100%;
    object-fit: cover;
}

/* ---------- news page sidebar ---------- */

/* Old .sidebar was a centered 33% column (base.php + main.scss). The countdown badge sat
   static at 180px centered instead of the absolute-positioned trail-map version, and the
   news_sidebar link groups (#sidebar_sections) dropped list bullets. */
.news-sidebar {
    text-align: center;
}
.news-sidebar .wp-block-acf-countdown-badge {
    width: 180px;
    margin: 0 auto;
}
.news-sidebar .wp-block-acf-countdown-badge svg {
    width: 100%;
    height: auto;
}
.news-sidebar ul.wp-block-list, #sidebar_sections ul {
    list-style: none;
    padding: 0;
}
/* On narrow screens the columns block already stacks to one column. */
@media (max-width: 781px) {
    .news-layout .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ---------- collapsible gallery groups ---------- */

/* Put ONE custom class, "gallery-group", on a Group block, then drop plain Gallery blocks
   inside it — no per-gallery class needed. The Group tiles its galleries in a responsive
   grid, and assets/js/gallery-group.js collapses each gallery to its first image (the
   "cover"), expanding it on click. (The class also works placed directly on a single
   Gallery block; the :not(.wp-block-gallery) guard just skips the grid in that case.) */
.gallery-group:not(.wp-block-gallery) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    align-items: start;
}
/* Reset the grid items' own flow margins so the grid gap alone spaces them — WordPress's
   block-gap adds a top margin to every child except the first, which otherwise makes the
   first cell sit tighter than the rest. Targets whatever the direct children are: the
   galleries themselves, or (as on the photo-gallery page) the inner Groups that each wrap a
   heading + gallery. */
.gallery-group:not(.wp-block-gallery) > * {
    margin-top: 0;
    margin-bottom: 0;
}
/* Break the expanded gallery's grid cell out to full width. The gallery may be a direct grid
   child, or nested in an inner Group with its heading — :has() lets that wrapping grid item
   break out too. */
.gallery-group:not(.wp-block-gallery) > .wp-block-gallery.is-expanded,
.gallery-group:not(.wp-block-gallery) > *:has(.wp-block-gallery.is-expanded) {
    grid-column: 1 / -1;
}
/* Fill that full width — override the constrained layout's content-size cap. */
.wp-block-gallery.is-expanded {
    width: 100%;
    max-width: none;
}
.gallery-group h3 {
font-size: var(--wp--preset--font-size--medium);
}

/* Collapsed gallery: show only the cover image, full width. The state class lives on the
   gallery (added by JS), so only galleries inside a .gallery-group are ever affected. */
.wp-block-gallery.is-collapsed {
    cursor: pointer;
}
.wp-block-gallery.is-collapsed .wp-block-image:not(.gallery-cover) {
    display: none;
}
.wp-block-gallery.is-collapsed .gallery-cover {
    flex-basis: 100% !important;
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: relative;
    overflow: hidden; /* contain the hover zoom below */
}
/* Uniform cover height for a tidy grid — crops covers to 3:2. Remove this rule if you'd
   rather each cover keep its own aspect ratio. */
.wp-block-gallery.is-collapsed .gallery-cover img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.3s ease;
}
/* Gentle zoom on the cover to signal it's clickable. */
.wp-block-gallery.is-collapsed:hover .gallery-cover img {
    transform: scale(1.03);
}

/* "View all N photos" button over the cover. */
.gallery-group__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 0;
    cursor: pointer;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--wp--preset--color--base);
    background: var(--wp--preset--color--contrast);
    opacity: 0.92;
}
.gallery-group__badge:hover {
    background: var(--wp--preset--color--primary);
}
.wp-block-gallery.is-expanded .gallery-group__badge {
    display: none;
}

/* "Show less" control — hidden until JS reveals it (is-visible) when expanded. */
.gallery-group__collapse {
    display: none;
    border: 0;
    cursor: pointer;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--wp--preset--color--base);
    background: var(--wp--preset--color--contrast);
}
.gallery-group__collapse.is-visible {
    display: block;
    width: fit-content;
    margin: 12px auto 0;
}
.gallery-group__collapse:hover {
    background: var(--wp--preset--color--primary);
}

/* Smooth the button hovers, and fade/slide the extra photos in as the gallery expands.
   (The reveal is a keyframe animation, not a transition, because display:none can't be
   transitioned — the animation just plays when the images switch to visible on expand.) */
.gallery-group__badge,
.gallery-group__collapse {
    transition: background-color 0.2s ease;
}
@keyframes npea-gallery-reveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.wp-block-gallery.is-expanded .wp-block-image:not(.gallery-cover) {
    animation: npea-gallery-reveal 0.3s ease both;
}
@media (prefers-reduced-motion: reduce) {
    .wp-block-gallery.is-collapsed .gallery-cover img,
    .wp-block-gallery.is-expanded .wp-block-image:not(.gallery-cover) {
        transition: none;
        animation: none;
    }
}

/* Tile multiple gallery groups. Wrap them in a Group with the extra class "gallery-grid". */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    align-items: start;
}
/* An expanded gallery breaks out to the full grid width so the whole gallery has room. */
.gallery-grid .gallery-group.is-expanded {
    grid-column: 1 / -1;
}

/* ---------- framed slideshow (gallery-frame) ---------- */

/* Wrap a Gallery in a Group with class "gallery-frame" to get the classic framed,
   auto-advancing crossfade slideshow (ported from templates/slideshow-small.php). The frame
   is slide-frame.svg (864x468); the slides sit in the inner 810x414 window, clipped to its
   notched corners by the objectBoundingBox clip path assets/js/gallery-frame.js injects. */
.gallery-frame {
    position: relative;
    box-sizing: border-box;
    max-width: 864px;
    margin-inline: auto;
    /* The frame border is a uniform 27px = 3.125% of the 864px width on every side, so one
       width-relative padding keeps the inner window aligned to the SVG at any size — and it
       gives the frame a real height (derived from the stage), which the parent-aspect-ratio
       approach did not. */
    padding: 3.125%;
    background: url('assets/images/slide-frame.svg') center / contain no-repeat;
}
/* Hide the gallery's title when it's shown in a frame — the frame is just the slideshow. */
.gallery-frame .wp-block-heading {
    display: none;
}
/* No stray block margins on the frame's children — they'd add height and letterbox the frame
   background (making the photo look further inset than it is). */
.gallery-frame > * {
    margin-top: 0;
    margin-bottom: 0;
}
/* The gallery is the inner "stage": it carries its OWN aspect-ratio so it has a definite
   height (deriving height from the parent's aspect-ratio collapsed it to 0), and the slides
   stack absolutely over it. The !important width/height/position beat WordPress's
   high-specificity gallery-column rules, which otherwise pin each slide at its ~25% flex
   width and leave the stack broken. */
.gallery-frame .wp-block-gallery {
    position: relative;
    width: 100%;
    max-width: none;
    aspect-ratio: 810 / 414;
    margin: 0;
    gap: 0;
}
.gallery-frame .wp-block-image {
    position: absolute !important;
    inset: 0;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
    /* Clip each slide (not the stage) to the frame's notched window, so the dots/arrows the
       JS adds to the stage aren't clipped away. */
    clip-path: url(#npea-slide-clip);
}
.gallery-frame .wp-block-image.is-active {
    opacity: 1;
    pointer-events: auto;
}
.gallery-frame .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The slides' own inline captions are hidden — they'd stack over the photo. Instead
   gallery-frame.js mirrors the active slide's caption into .gallery-frame__caption, a single
   band below the frame (like the old carousel's caption). */
.gallery-frame .wp-block-gallery figcaption {
    display: none;
}

/* Control row beneath the frame: prev arrow, caption, next arrow — brown, centered. It sits in
   normal flow (inserted as the frame's sibling by gallery-frame.js), so the row grows to fit a
   multi-line caption instead of overlapping whatever follows the slideshow. */
.gallery-frame__controls {
    max-width: 864px;
    margin: 0.6em auto 1.5em;
    padding: 0 2%;
    display: flex;
    align-items: center;
    /* space-between pins the arrows to the left/right edges, so they hold the same position
       whether or not the current slide has a caption (the caption just centers between them). */
    justify-content: space-between;
    gap: 0.4em;
}
.gallery-frame__caption {
    flex: 1 1 auto;
    text-align: center;
    line-height: 1.35;
    font-size: clamp(13px, 1.4vw, 15px);
    color: var(--wp--preset--color--contrast);
}
.gallery-frame__caption:empty {
    display: none;
}

/* Indicator dots. */
.gallery-frame__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4%;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.gallery-frame__dots button {
    width: 11px;
    height: 11px;
    padding: 0;
    cursor: pointer;
    border: 2px solid var(--wp--preset--color--base);
    border-radius: 50%;
    background: transparent;
}
.gallery-frame__dots button.is-active {
    background: var(--wp--preset--color--base);
}

/* Prev/next arrows (npea-glyphs-arrow, same as the old carousel controls) — inline in the
   control row below the frame, flanking the caption. */
.gallery-frame__arrow {
    flex: 0 0 auto;
    padding: 0 10px;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 1;
    font-size: 38px;
    color: var(--wp--preset--color--contrast);
}
.gallery-frame__arrow:hover { color: var(--wp--preset--color--primary); }

/* The ornate frame doesn't scale down gracefully, so on small screens drop it and show the
   slides as a plain crossfade — same as the old theme, which removed the frame on mobile. */
@media (max-width: 600px) {
    .gallery-frame {
        padding: 0;
        background: none;
    }
    .gallery-frame .wp-block-image {
        clip-path: none;
    }
}

/* ---------- footer ---------- */

/* Zero the gap above the <footer> landmark (the template-part wrapper element itself). */
footer {
    margin-top: 0;
}

/* Old .content-info: the footer body sits on the parchment page background with brown
   text — only the search bar and the address bar are solid brown. (.site-footer is a
   vertical-flex group, so the full-bleed bars need explicit 100% width.) */
.site-footer {
    margin-top: 0;
    padding-top: 0;
    width: 100%;
}
.site-footer > * {
    width: 100%;
}
.site-footer .search-container {
    min-height: 40px;
    padding: 0;
}
.site-footer .search-container .wp-block-search {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 8px 15px;
}
.site-footer .search-container .wp-block-search__input {
    height: 42px;
    padding: 6px 12px;
    font-size: 18px;
    color: var(--wp--preset--color--contrast);
    background: rgba(246,240,228,0.5);
    border: 0;
    border-bottom: 2px solid var(--wp--preset--color--contrast);
    text-transform: uppercase;
}
.site-footer .search-container .wp-block-search__input::placeholder {
    color: var(--wp--preset--color--contrast);
    opacity: 1;
}
.site-footer .search-container .wp-block-search__button {
    color: var(--wp--preset--color--contrast);
    border: 0;
    min-width: 70px;
    text-transform: uppercase;
    cursor: pointer;
    background: url('assets/images/magnify-search.svg') no-repeat;
}
.site-footer .footer-side {
    margin-top: 30px;
    text-align: center;
}
.site-footer .brand-logo img {
    width: 100%;
    max-width: 200px;
    margin: 30px auto 0;
}
.site-footer .xp-nht-logo img,
.site-footer .facebook-link img {
    width: 100%;
    max-width: 150px;
    margin: 0 auto 0;
}
.site-footer .site-map {
    text-align: left;
    margin-top: 20px;
    margin-bottom: 50px;
}
.site-footer .site-map .wp-block-site-title {
    font-size: 40pt;
    line-height: 54pt;
    margin: 0;
}
.site-footer .site-map .wp-block-site-title a {
    font-family: var(--wp--preset--font-family--french);
    color: var(--wp--preset--color--contrast);
    letter-spacing: 0;
    text-decoration: none;
}
.site-footer .home-link {
    margin: 0 0 6px;
}
.site-footer .home-link a {
    font-size: 19px;
    font-weight: 600;
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
}
.site-footer .footer-navigation {
    justify-content: center;
    flex-wrap: wrap;
}
.site-footer .footer-navigation .wp-block-navigation-item__content {
    color: var(--wp--preset--color--contrast);
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--small);
    padding: 2px 10px;
}
.site-footer .wp-block-navigation-item.wp-block-navigation-submenu {
display: block;
}
.footer-end {
    text-align: center;
    color: var(--wp--preset--color--contrast);
    min-height: 40px;
    padding: 10px 0;
    margin: 0;
    border-top: 2px solid var(--wp--preset--color--secondary);
    font-weight: 600;
}

.site-footer .footer-navigation .wp-block-navigation__submenu-container {
    display: block !important;
    position: static !important;
    inset: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow: visible !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: none !important;

    margin: .5rem 0 0 1.5rem;
    padding: 0;

    border: 0;
    box-shadow: none;
    background: transparent;
}

.site-footer .footer-navigation .wp-block-navigation__submenu-icon {
    display: none;
}

.site-footer .site-map div.wp-block-template-part {
  display: flex;
  margin-left: 0 !important;
}
.site-footer .site-map div.wp-block-template-part > li {
  flex: 2 1 auto; /* Forces equal distribution */
  min-width: 0;
}
.site-footer .site-map li {
display: block;
font-weight: 600;
text-transform: uppercase;
font-size: 18px;
}
.site-footer .site-map li a {
    color: var(--wp--preset--color--contrast);
  text-decoration: none;
}
.site-footer .site-map li a:hover {
  text-decoration: underline;
}
.site-footer .site-map ul li::after {
}
.site-footer .site-map ul li:last-of-type::after {
content: '';
}
.site-footer .site-map li ul {
display: block;
margin-top: 0px;
padding-left: 0;
}
.site-footer .site-map ul li {
display: block;
font-weight: 400;
padding: 0 4px 0 2px;
text-transform: none;
}
.site-footer .site-map ul ul {
display: none;
}
@media (min-width: 1200px) {
    .site-footer .site-map { margin-top: 50px; }
}
nav.footer-nav-expanded {
margin-left: 0 !important;
}

.footer-nav-expanded .wp-block-navigation__container {
align-items: flex-start ;
gap:1.8em;
}
.footer-nav-expanded .wp-block-navigation__container>li>a {
font-weight: 600;
}
.footer-nav-expanded li:hover .wp-block-navigation__submenu-container { 
width: auto !important;
min-width: auto !important;
}
.footer-nav-expanded .wp-block-navigation__submenu-container { 
background: none !important;
border: 0 !important;
position: static !important; visibility: visible !important; opacity: 1 !important; display: block !important; height: auto !important; width: auto !important; box-shadow: none !important; padding: 0 !important; } 
.footer-nav-expanded .wp-block-navigation-submenu__toggle { display: none !important; }
.footer-nav-expanded .wp-block-navigation__submenu-container li a { 
padding: 0 !important;
font-size: var(--wp--preset--font-size--normal);
}

.footer-nav-expanded .wp-block-navigation__submenu-container a { 
color: var(--wp--preset--color--contrast) !important;
}
.state-footer-list ul {
  column-count: 2;    /* Splits the list into 2 columns */
  column-gap: 20px; 
  }

/* ---------- legacy trail-map / countdown-badge SVG templates ----------
   inc/legacy-svg/*.php were copied verbatim from the old theme and still use its
   Bootstrap-era .container/.row grid classes and #call_to_action/#countdown/
   #badge_container/#mission ids internally — ported here (scoped to the wrapper divs
   that inc/blocks.php adds around each render) so the copies stay verbatim.

   The desktop home hero is a *composite*: the countdown badge is rotated 15° and
   absolutely positioned top-right, the red "Here Comes the Pony!" CTA and the mission
   statement are absolutely positioned over the map. None of their ancestors are
   positioned (same as the old markup), so those coordinates resolve against the page
   itself — exactly how production renders. */

.wp-block-acf-trail-map .container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
}
.wp-block-acf-trail-map .row {
    margin: 0 -15px;
}
.wp-block-acf-trail-map .svg_container {
    position: relative;
}
.wp-block-acf-trail-map .svg_container svg {
    position: relative;
}
.wp-block-acf-trail-map #call_to_action {
    position: absolute;
    top: 30px;
    left: 52px;
    font-family: var(--wp--preset--font-family--french);
    font-size: 58px;
    color: var(--wp--preset--color--primary);
}
.wp-block-acf-trail-map #mission {
    position: absolute;
    top: 390px;
    right: 270px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 18px;
    text-align: center;
    z-index: 100;
}
.wp-block-acf-trail-map #mission a {
    font-size: 34px;
    line-height: 40px;
    color: var(--wp--preset--color--contrast);
    font-weight: 400;
    text-decoration: none;
}
.wp-block-acf-trail-map #badge_container {
    margin: 0;
    display: block;
    position: relative;
}
.wp-block-acf-trail-map #countdown {
    transform: rotate(15deg);
    z-index: 10;
    width: 220px;
    position: absolute;
    top: 25px;
    right: 0;
    height: auto;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .wp-block-acf-trail-map #call_to_action { font-size: 48px; }
    .wp-block-acf-trail-map #mission { top: 300px; right: 130px; }
    .wp-block-acf-trail-map #countdown { width: 160px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .wp-block-acf-trail-map #call_to_action { position: static; display: inline; float: left; font-size: 48px; }
    .wp-block-acf-trail-map .svg_container svg { top: -60px; }
    .wp-block-acf-trail-map #mission { margin: -180px -150px 0 0; }
}
@media (max-width: 991px) {
    .wp-block-acf-trail-map #countdown,
    .wp-block-acf-trail-map #mission,
    .wp-block-acf-trail-map .svg_container {
        position: static;
    }
    .wp-block-acf-trail-map #countdown { width: 160px; display: inline; float: right; }
    .wp-block-acf-trail-map #mission a { font-size: 26px; }
}
@media (max-width: 767px) {
    .wp-block-acf-trail-map #call_to_action {
        position: static;
        display: block;
        width: 100%;
        text-align: center;
        clear: both;
    }
    .wp-block-acf-trail-map #badge_container { margin: 0 auto; width: 170px; display: block; }
}

/* Standalone badge block in the footer — plays the old #footer_badge role (the wrapper
   there held just the oval svg, no #badge_container/#countdown ids). */
.wp-block-acf-countdown-badge {
    max-width: 200px;
    margin: 25px auto 30px;
    overflow: auto;
    transform: rotate(10deg);
}
.wp-block-acf-countdown-badge svg {
    position: static;
    width: 100%;
    height: auto;
}

/* States-hub map (templates/states-index.html): the legacy include wraps itself in a
   Bootstrap .col-md-6 — on the old page 40 it floated left at half width with the
   page copy flowing beside it (.full_width's overflow:auto contains the float). */
.wp-block-acf-state-map .col-md-6 {
    padding: 0 15px;
}
@media (min-width: 992px) {
    .wp-block-acf-state-map {
        float: left;
        width: 50%;
    }
}


.wp-block-navigation .wp-block-navigation__submenu-icon {
display:none !important;
}


/* ---------- lightbox ---------- */
.wp-lightbox-caption {

    /* fixed (not absolute) because the caption now lives on <body>, floated over the
       fixed lightbox overlay by assets/js/lightbox-captions.js */
    position: fixed;

    left: 50%;
    bottom: 2rem;

    transform: translateX(-50%) translateY(.5rem);

    max-width: min(90vw, 60rem);

    padding: .9rem 1.25rem;

    background: var(--wp--preset--color--contrast);

    backdrop-filter: blur(10px);

    color: white;

    font-size: .95rem;
    line-height: 1.5;

    text-align: center;

    text-shadow:
        0 2px 6px rgb(0 0 0 / .8);

    opacity: 0;

    transition:
        opacity .25s,
        transform .25s;

    pointer-events: none;

    z-index: 9000000;
}
.lightbox-image-container {
    background: #fff;
}
/* White frame as a border on the image itself (box-sizing so it can't overflow). Container
   padding didn't show on the left/right for images core sized to the full container width. */
.lightbox-image-container img {
    box-sizing: border-box;
    border: 0.5rem solid #fff;
    background: #fff;
}
.wp-lightbox-overlay .scrim {
opacity: 0.95 !important;
}
.wp-lightbox-overlay .wp-lightbox-close-icon svg {
display: block;
width: 40px;
height: 40px;
}
.wp-lightbox-overlay .wp-lightbox-navigation-icon svg {
width: 60px;
height: 60px;
}

.wp-lightbox-caption:not([hidden]) {

    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);

}

.wp-lightbox-caption a {

    color: inherit;

    pointer-events: auto;

}


/* State division contact block (acf/address / email / division_website / facebook_page). */
.division-address,
.division-email,
.division-website {
    margin: 4px 0;
}
.state_fb {
    margin-top: 10px;
}
.state_fb img {
    max-width: 40px;
    height: auto;
}

/* ---------- migrated ACF field blocks (inc/field-blocks.php) ---------- */

/* Event date/location (acf/event-meta). In the compact homepage/state sidebars the old
   theme rendered these as <small>, so scale the heading back down there. */
.event-date {
    margin: 0;
}
.event-location {
    margin: 0 0 15px;
}
.events_list .event-date,
.state-events .event-date {
    font-size: 15px;
    font-weight: 400;
}

/* ---------- events archive (post-type-archive-event) ---------- */

/* The event cards: a responsive grid of centered cards (host glyph, title, date, location).
   Scoped to the archive body class so the compact sidebar/homepage event lists — which reuse
   .type-event query items — are untouched. The grid-template override also makes the fixed
   4-column post-template reflow on smaller screens (and survives a Site-Editor DB override
   of the template, where the column count is baked into inline styles). */
.post-type-archive-event .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)) !important;
    gap: 30px 20px;
}
.post-type-archive-event .wp-block-post.type-event {
    text-align: center;
}
.post-type-archive-event .type-event [class*="npea-glyphs-"] {
    display: block;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 8px;
    color: var(--wp--preset--color--contrast);
}
.post-type-archive-event .type-event .npea-glyphs-npea {
    font-size: 40px;
}
.post-type-archive-event .type-event .wp-block-post-title {
    margin: 0 0 4px;
    font-size: 1.15rem;
}
.post-type-archive-event .type-event .wp-block-post-title a {
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
}
.post-type-archive-event .type-event .wp-block-post-title a:hover {
    color: var(--wp--preset--color--primary);
}
.post-type-archive-event .type-event .event-date {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}
.post-type-archive-event .type-event .event-location {
    font-size: 14px;
    line-height: 1.4;
    margin: 2px 0 0;
}
.post-type-archive-event .wp-block-query-pagination {
    justify-content: center;
    margin-top: 30px;
}

/* News item list byline (acf/from-byline) — old theme forced uppercase inline. */
.from-byline {
    display: block;
    text-transform: uppercase;
}

/* National directory (acf/member, acf/president). The old theme hand-split rows into three
   columns by counting count/3 and breaking manually; CSS columns do it without the math. */
.directory-list {
    column-count: 3;
    column-gap: 30px;
}
.directory-list p {
    break-inside: avoid;
}
#pres_table {
    width: 100%;
    border-collapse: collapse;
}
#pres_table td {
    padding: 4px 15px 4px 0;
    border-bottom: 1px solid rgba(96, 56, 19, .2);
}
@media (max-width: 767px) {
    .directory-list {
        column-count: 1;
    }
}

/* Notable moments (acf/notable_moments): sticky anchor sidebar + content column, the old
   Bootstrap col-md-3 / col-md-9 split. assets/js/sticky-toc.js toggles .float_column.stick
   and sets its top inline. */
.notable-moments {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.notable-moments .col-md-3 {
    flex: 0 0 22%;
}
.notable-moments .col-md-9 {
    flex: 1 1 65%;
}
.notable-moments .float_column.stick {
    position: fixed;
    top: 20px;
}
@media (max-width: 991px) {
    .notable-moments .col-md-3,
    .notable-moments .col-md-9 {
        flex-basis: 100%;
    }
}

/* "Anchor Sections" block (npea/anchor-sections, inc/anchor-sections.php): two-column
   layout — a generated anchor list on the left, heading-led sections on the right. The nav
   is floated by assets/js/anchor-sections-view.js (it sets position/top/width inline when
   stuck); native position:sticky can't be used because html,body{overflow-x:hidden} above
   severs it, the same reason Notable Moments floats with JS. */
.anchor-nav-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}
.anchor-nav-layout .anchor-nav-col {
    flex: 0 0 30%;
    position: relative;
}
.anchor-nav-layout .anchor-sections {
    flex: 1 1 60%;
    min-width: 0;
}
.anchor-nav {
    margin-top: 40px;
    padding: 0;
}
.anchor-nav a {
  text-decoration: none;
}
.anchor-nav a:hover {
  text-decoration: underline;
}
.anchor-nav ul {
    list-style: none;
}
.anchor-nav li {
    margin: 0 0 0.4em;
}
.anchor-section {
    scroll-margin-top: 30px;
}
.anchor-section + .anchor-section {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(96, 56, 19, 0.2);
}
@media (max-width: 781px) {
    .anchor-nav-layout .anchor-nav-col,
    .anchor-nav-layout .anchor-sections {
        flex-basis: 100%;
    }
    /* The view script clears its inline styles below this width; guard anyway. */
    .anchor-nav-layout .anchor-nav-sticky {
        position: static !important;
    }
}

li.report {
  padding: 10px 15px;
border-top: 2px dotted #603813;
}

li.wp-block-post.type-item {

padding: 1rem;
background: #f6f0e4;
box-shadow: 0 0 8px rgba(0,0,0,.15);
}

.page-template-state-landing li.wp-block-post.type-item {

padding: 0;
background: none;
box-shadow: none;
}

/* FORMS */
.gform_wrapper {
background-color: #fbf9f4;
padding: 1em;
max-width: 970px;
margin: 0 auto;
box-shadow: 0 0 8px rgba(0,0,0,.15);
}
.ginput_price {
display: none;
}