/*
Theme Name: Remigration Now
Template: storefront
Version: 1.7
*/

/* ================================================================
   GLOBAL
   ================================================================ */
/* Full-bleed blocks (memoriam cover, wordmark wrap) use the classic
   `width: 100vw; margin-left: calc(-50vw + 50%)` trick to escape #content's
   width. 100vw includes the scrollbar's width but 50% doesn't, so on pages
   with a vertical scrollbar those blocks overshoot the true right edge by
   the scrollbar's width — exposing the page background as a thin bar.
   Clipping horizontal overflow here hides that sliver without affecting
   normal (vertical) page scrolling. */
html {
    overflow-x: hidden;
    /* Match the page surface (#page). Chrome on Android paints the strip
       revealed while its browser controls animate in/out with the root
       canvas colour — with no html background it fell back to body's darker
       navy, showing a dark band pinned to the bottom of the screen during
       timeline drags and scrolls. */
    background: #fff;
}
#page {
    background: #fff;
    overflow-x: hidden;
}
#content {
    background: #fff;
}

.site-main {
    padding: 0 !important;
}

/* ================================================================
   HEADER - SINGLE LINE ALIGNED
   ================================================================ */
.rn-aligned-header #masthead {
    display: flex !important;
    justify-content: space-between;
    padding: 8px 1.4rem;
}
@media screen and (min-width: 768px) {
    .rn-aligned-header #masthead {
        padding: 8px 4rem;
        align-items: center;
        /* Logo + nav anchored to the left; the header-bar widgets (and cart)
           are pushed to the right via margin-left:auto below. This keeps the
           logo in a fixed position regardless of viewport width. */
        justify-content: flex-start;
    }
}
/* Push the right-hand cluster (cart / header-bar widgets) to the far right so
   the logo and nav stay left-anchored. Whichever right-hand item comes first
   consumes the free space; the rest follow it. */
.rn-aligned-header #masthead .site-header-cart,
.rn-aligned-header #masthead .rn-header-bar-desktop {
    margin-left: auto !important;
}
/* When collapsed, only the burger remains on the right — push it over.
   (#masthead in the selector beats the `.storefront-primary-navigation
   { margin:0 !important }` desktop rule.) */
body.rn-header-collapsed #masthead .storefront-primary-navigation {
    margin-left: auto !important;
}
/* Mid-size range: just ease the side padding in a little. The old "hide the
   social widget / hide the whole header-bar" hacks are gone — the nav now
   shrinks (min-width:0 + overflow, below) so nothing ever pushes the logo off
   screen, and every header item stays visible on one line at any width. */
@media screen and (max-width: 1419px) {
    .rn-aligned-header #masthead {
        padding: 8px 2rem;
    }
}
@media screen and (max-width: 767px) {
    .rn-aligned-header #masthead {
        padding: 10px 1.2rem !important;
    }
}

.rn-aligned-header #masthead .col-full {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center !important; /* ensure items stay vertically centred */
    gap: 20px;
    margin: 0 !important;
    padding: 0 !important;
}

/* Logo
   WooCommerce's CSS sets .woocommerce-active .site-header .site-branding to
   width:73.9% float:left (specificity 0,2,1 > our 0,2,0), which breaks the
   flex layout on cart/checkout pages. Override with !important to win. */
.rn-aligned-header .site-branding {
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
    width: auto !important;
    float: none !important;
    clear: none !important;
}

/* Navigation wrapper */
@media screen and (min-width: 768px) {
    .rn-aligned-header .storefront-primary-navigation {
        display: flex !important;
        align-items: center;
        /* Natural width, no shrink: if the nav can't fit, the row overflows —
           JS detects that and collapses the whole header to the burger. This
           keeps the menu's spacing comfortable rather than squashing it. */
        flex: 0 0 auto;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
    .rn-aligned-header .storefront-primary-navigation > .col-full {
        flex: 0 0 auto;
    }
}

/* Navigation
   WooCommerce sets .woocommerce-active .site-header .main-navigation to
   width:73.9% float:left clear:both (specificity 0,2,1 > our 0,2,0).
   All three need !important overrides to prevent flex layout breaking. */
.rn-aligned-header .main-navigation {
    /* Natural width, no shrink — overflow (when it won't fit) is what triggers
       the JS collapse to burger; the menu keeps its comfortable spacing. */
    flex: 0 0 auto !important;
    width: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

.rn-aligned-header .main-navigation .primary-navigation ul.menu,
.rn-aligned-header .main-navigation .primary-navigation ul.nav-menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    margin: 0 !important;
    padding: 0 20px !important;
    /* No overflow scrolling needed: when the menu can't fit, the whole header
       collapses to the burger (body.rn-header-collapsed), so the desktop menu
       is only ever shown at a width where it fits comfortably. */
    overflow: visible;
}
.rn-aligned-header .main-navigation .primary-navigation ul.menu::-webkit-scrollbar,
.rn-aligned-header .main-navigation .primary-navigation ul.nav-menu::-webkit-scrollbar {
    display: none;
}
.rn-aligned-header .main-navigation .primary-navigation ul.menu > li {
    flex-shrink: 0; /* keep each item intact; the row scrolls as a whole */
}
@media (min-width: 768px) {
    .rn-aligned-header .main-navigation ul.menu > li > a,
    .rn-aligned-header .main-navigation ul.nav-menu > li > a {
        padding: 0.5em 0.5em;
        /* Horizontal gap scales with viewport: tighter on smaller screens,
           roomier on large ones. */
        margin: 0.3em clamp(0.1em, 0.55vw, 0.55em);
    }
}

/* Cart
   WooCommerce sets .woocommerce-active .site-header .site-header-cart to
   width:21.7% float:right (specificity 0,2,1 > our 0,2,0).
   Scoped to #masthead — on shop/product pages storefront_header_cart() is
   rendered again inside .rn-shop-topbar .rn-shop-cart (also using the
   .site-header-cart class), which must keep its normal topbar styling
   rather than being squashed into a small icon button. */
.rn-aligned-header #masthead .site-header-cart {
    margin: 0 0 0 20px !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
    flex-shrink: 0;
}

/* Show only the basket icon in the header — the subtotal/item-count text
   that storefront_cart_link() outputs is what was pushing the logo over.
   Hovering (or focusing) the icon reveals the mini-cart panel via
   Storefront's existing .site-header-cart:hover .widget_shopping_cart rule. */
.rn-aligned-header #masthead .site-header-cart .cart-contents {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    padding: 0 !important;
    font-size: 0;
    text-align: center;
}
.rn-aligned-header #masthead .site-header-cart .cart-contents::after {
    font-size: 1.3rem;
    line-height: 1;
    margin-left: 0;
    float: none;
}

/* Align the hover mini-cart panel to the right edge so it doesn't
   overflow off-screen when the basket icon sits at the far right. */
.rn-aligned-header #masthead .site-header-cart .widget_shopping_cart {
    right: 0;
    left: auto;
}

/* Header widget area (social icons etc.) */
.rn-aligned-header .header-widget-region {
    margin: 0 0 0 20px !important;
    padding: 0 !important;
    flex-shrink: 0;
}

/* Hide search */
.rn-aligned-header .site-search,
.rn-aligned-header .widget_product_search {
    display: none !important;
}

@media screen and (max-width: 767px) {
    /* Only the row copy — the burger's cloned copy (.rn-header-bar-mobile)
       must stay showable. */
    .rn-aligned-header .rn-header-bar-desktop {
        display: none !important;
    }
}

/* Active nav item */
.rn-aligned-header .current-menu-item > a,
.rn-aligned-header .current_page_item > a {
    font-weight: 600;
}

/* Animated underline */
.rn-aligned-header .main-navigation ul.menu > li > a,
.rn-aligned-header .main-navigation ul.nav-menu > li > a {
    position: relative;
    text-decoration: none;
}

.rn-aligned-header .main-navigation ul.menu > li > a::after,
.rn-aligned-header .main-navigation ul.nav-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

/* Hover underline (non-active) */
.rn-aligned-header .main-navigation ul.menu > li:not(.current-menu-item):not(.current_page_item) > a:hover::after,
.rn-aligned-header .main-navigation ul.nav-menu > li:not(.current-menu-item):not(.current_page_item) > a:hover::after {
    transform: scaleX(1);
    opacity: 0.7;
}

/* Active item always underlined */
.rn-aligned-header .main-navigation ul.menu > li.current-menu-item > a::after,
.rn-aligned-header .main-navigation ul.nav-menu > li.current_page_item > a::after {
    transform: scaleX(1);
}

/* ================================================================
   STICKY HEADER
   ================================================================ */
.rn-sticky-header #masthead {
    position: fixed !important;
    top: var(--wp-admin-bar-height, 0px);
    left: 0;
    right: 0;
    z-index: 7777;
    transition: all 0.1s ease;
}

/* Compact state */
.rn-sticky-header #masthead.is-scrolled {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    border-bottom: 1px solid #2b5b81;
}
@media screen and (max-width: 782px) {
    .rn-sticky-header #masthead.is-scrolled {
        top: 0 !important;
    }
}

.rn-sticky-header .custom-logo-link img,
.rn-sticky-header .site-branding img {
    width: auto;
    max-height: 60px;
    transition: max-height 0.35s ease, margin 0.35s ease;
    margin: 8px 0;
}
.rn-sticky-header .site-header .site-logo-anchor,
.rn-sticky-header .site-header .site-logo-link,
.rn-sticky-header .site-header .custom-logo-link {
    width: 240px;
}

/* Burger button spacing (desktop / default) — before mobile overrides */
button.menu-toggle {
    margin: 1rem 0;
}
.is-scrolled button.menu-toggle {
    margin-top: 0.7rem;
}

/* Desktop scrolled: modest shrink. Scoped to ≥768 so it cannot override the
   compact mobile sizes below (same specificity, later source order). */
@media screen and (min-width: 768px) {
    .rn-sticky-header #masthead.is-scrolled .custom-logo-link img,
    .rn-sticky-header #masthead.is-scrolled .site-branding img {
        max-height: 50px;
    }
}

/* Compact mobile header — resting and scrolled both stay smaller than desktop.
   Scrolled must shrink further (not grow). Keep ~10px air above the bar and a
   properly centred, comfortable burger (earlier zero-margin made it thin + top-aligned). */
@media screen and (max-width: 767px) {
    .rn-sticky-header .custom-logo-link img,
    .rn-sticky-header .site-branding img {
        max-height: 52px;
        margin: 0;
    }
    .rn-sticky-header .site-header .site-logo-anchor,
    .rn-sticky-header .site-header .site-logo-link,
    .rn-sticky-header .site-header .custom-logo-link {
        width: 200px;
        display: flex;
        align-items: center;
    }
    .rn-sticky-header #masthead {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .rn-sticky-header #masthead .col-full,
    .rn-sticky-header #masthead #site-navigation,
    .rn-sticky-header #masthead .storefront-primary-navigation {
        align-items: center !important;
        min-height: 0;
    }
    .rn-sticky-header #masthead.is-scrolled {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    .rn-sticky-header #masthead.is-scrolled .custom-logo-link img,
    .rn-sticky-header #masthead.is-scrolled .site-branding img {
        max-height: 44px;
        margin: 0;
    }
    .rn-sticky-header #masthead.is-scrolled .site-header .site-logo-anchor,
    .rn-sticky-header #masthead.is-scrolled .site-header .site-logo-link,
    .rn-sticky-header #masthead.is-scrolled .site-header .custom-logo-link {
        width: 170px;
    }
    /* Comfortable, vertically centred burger — not a thin top-aligned strip. */
    button.menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        align-self: center;
        float: none !important;
        margin: 3px 0 0 !important;
        /* Keep Storefront's default padding — custom padding overlaps the "Menu" label. */
        min-height: 42px;
        line-height: 1.2 !important;
        box-sizing: border-box;
    }
    .rn-sticky-header #masthead.is-scrolled button.menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        align-self: center;
        float: none !important;
        margin: 3px 0 0 !important;
        /* Same as static — don't override padding or the icon overlaps "Menu". */
        min-height: 36px;
        line-height: 1.2 !important;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 420px) {
    .rn-sticky-header .site-header .site-logo-anchor,
    .rn-sticky-header .site-header .site-logo-link,
    .rn-sticky-header .site-header .custom-logo-link {
        width: 180px;
    }
    .rn-sticky-header .custom-logo-link img,
    .rn-sticky-header .site-branding img {
        max-height: 48px;
        margin: 0;
    }
    .rn-sticky-header #masthead.is-scrolled .custom-logo-link img,
    .rn-sticky-header #masthead.is-scrolled .site-branding img {
        max-height: 40px;
        margin: 0;
    }
    .rn-sticky-header #masthead.is-scrolled .site-header .site-logo-anchor,
    .rn-sticky-header #masthead.is-scrolled .site-header .site-logo-link,
    .rn-sticky-header #masthead.is-scrolled .site-header .custom-logo-link {
        width: 155px;
    }
}

/* ================================================================
   COLLAPSED HEADER (burger mode)
   Applied by JS (body.rn-header-collapsed) whenever the horizontal menu
   can't fit on one line — at ≤767px, and at any wider width where the
   nav + logo + header-bar widgets would overflow. The desktop menu and
   the header-bar widgets leave the row; the burger opens a full-width
   dropdown panel that carries both the nav and the widgets.
   ================================================================ */
/* Positioning context for the dropdown panel (the sticky rule makes this
   `fixed`, which is also a positioning context). */
.rn-aligned-header #masthead {
    position: relative;
}

/* The collapsed/mobile menu is built from the primary-navigation menu, so
   Storefront's separate "handheld" menu must never render — otherwise it shows
   a second, unstyled copy in-flow that pushes the logo down to the middle. */
.rn-aligned-header .handheld-navigation {
    display: none !important;
}

/* ---- Stage 2: horizontal menu kept, only the sidebar widgets move into a
   small burger (body.rn-hide-sidebar). Applied by JS when the full header
   won't fit but the menu still does without the sidebar. ---- */
body.rn-hide-sidebar .rn-header-bar-desktop {
    display: none !important;
}
body.rn-hide-sidebar .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    /* Pin the burger to the header's right edge (the masthead is
       position:relative) instead of trailing the nav menu. */
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    /* Icon-only square button — no space reserved for a "Menu" label. */
    width: 46px;
    height: 40px;
    min-width: 0;
    max-width: none;
    padding: 0;
    margin: 0;
    float: none;
    z-index: 30;
}
/* Hide the "Menu" label but keep the middle hamburger bar (span::before has
   its own dimensions, so it survives font-size:0). */
body.rn-hide-sidebar .menu-toggle span {
    font-size: 0;
    line-height: 0;
}
/* Enlarge + centre the three bars (Storefront draws them 14px @ left:1em). */
body.rn-hide-sidebar .menu-toggle::before,
body.rn-hide-sidebar .menu-toggle::after,
body.rn-hide-sidebar .menu-toggle span::before {
    width: 22px;
    height: 3px;
    left: 50%;
    margin-left: -11px;
    margin-top: -1.5px;
}
body.rn-hide-sidebar .menu-toggle::before { transform: translateY(-6px); }
body.rn-hide-sidebar .menu-toggle::after  { transform: translateY(6px); }
/* Preserve the toggled → X animation at the larger size. */
body.rn-hide-sidebar #site-navigation.toggled .menu-toggle::before {
    transform: rotate(45deg);
}
body.rn-hide-sidebar #site-navigation.toggled .menu-toggle::after {
    transform: rotate(-45deg);
}
body.rn-hide-sidebar #site-navigation.toggled .menu-toggle span::before {
    opacity: 0;
}
/* The menu stays left after the logo; the burger is absolutely positioned. */
body.rn-hide-sidebar #site-navigation {
    display: flex;
    align-items: center;
}
/* Burger reveals just the sidebar widgets as a dropdown below the header. */
body.rn-hide-sidebar #site-navigation.toggled .rn-header-bar-mobile {
    display: flex !important;
    position: absolute;
    top: 100%;
    right: 0;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 1rem 1.4rem;
    background: #16365c;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
    border-radius: 0 0 0 10px;
    z-index: 900;
}

/* Show the burger, hide the inline desktop menu + header-bar widgets. */
body.rn-header-collapsed .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: center;
    float: none !important;
}
body.rn-header-collapsed #site-navigation {
    display: flex;
    align-items: center;
}
body.rn-header-collapsed .storefront-primary-navigation .primary-navigation {
    display: none;
}
body.rn-header-collapsed .rn-header-bar-desktop {
    display: none !important;
}

/* Open state → full-width dropdown panel below the header. Being absolute,
   it never grows the header row, so the logo stays put. */
body.rn-header-collapsed #site-navigation.toggled .primary-navigation {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #16365c;
    padding: 0.9rem 1.4rem 1.3rem;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
    max-height: calc(100vh - var(--rn-header-height, 80px) - var(--wp-admin-bar-height, 0px));
    overflow-y: auto;
    z-index: 900;
}

/* Menu list → stacked, subtly bordered "cards" with a filled background on
   hover / current page (instead of the desktop underline). */
body.rn-header-collapsed #site-navigation .primary-navigation ul.menu {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    overflow: visible;
    justify-content: flex-start;
}
body.rn-header-collapsed #site-navigation .primary-navigation ul.menu > li {
    display: block !important;   /* Storefront makes these inline-block for the
                                    horizontal desktop menu — stack them here */
    float: none !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    text-align: left;
    border: 0;
    width: auto;
}
body.rn-header-collapsed #site-navigation .primary-navigation ul.menu > li > a {
    display: block;
    padding: 0.72em 0.95rem !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.2s ease, border-color 0.2s ease;
}
body.rn-header-collapsed #site-navigation .primary-navigation ul.menu > li > a:hover,
body.rn-header-collapsed #site-navigation .primary-navigation ul.menu > li > a:focus,
body.rn-header-collapsed #site-navigation .primary-navigation ul.menu > li.current-menu-item > a,
body.rn-header-collapsed #site-navigation .primary-navigation ul.menu > li.current_page_item > a,
body.rn-header-collapsed #site-navigation .primary-navigation ul.menu > li.current-menu-ancestor > a {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.34);
}
body.rn-header-collapsed #site-navigation .primary-navigation ul.menu > li > a::after {
    display: none !important;
}
body.rn-header-collapsed #site-navigation .primary-navigation .sub-menu {
    display: block;
    margin: 6px 0 0 0.8rem;
    padding: 0;
}

/* ---- Burger dropdown: reveal animation + page overlay ---- */
/* Slide-down + fade when the panel opens. It's an animation (not a
   transition) because Storefront flips display:none → block, which
   transitions can't animate across. */
@keyframes rn-menu-reveal {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.rn-header-collapsed #site-navigation.toggled .primary-navigation,
body.rn-hide-sidebar #site-navigation.toggled .rn-header-bar-mobile {
    animation: rn-menu-reveal 0.28s ease both;
}
@media (prefers-reduced-motion: reduce) {
    body.rn-header-collapsed #site-navigation.toggled .primary-navigation,
    body.rn-hide-sidebar #site-navigation.toggled .rn-header-bar-mobile {
        animation: none;
    }
}

/* Dimming overlay behind the open dropdown — fades in over the page (and the
   memoriam timeline at 7000) but stays under the header (7777), so the panel
   and burger button remain bright and clickable. Clicking it closes the menu
   (see initHeaderMenu in rn-core.js). */
.rn-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 7770;
    background: rgba(8, 18, 34, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.rn-menu-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s ease;
}
/* When the header isn't sticky the masthead has no z-index of its own —
   lift it (and the dropdown inside it) above the overlay while open. */
body.rn-menu-open #masthead {
    position: relative;
    z-index: 7777;
}


/* Content push for sticky header */
.rn-sticky-header #content {
    margin-top: var(--rn-header-height, 80px);
}

/* Admin bar height */
:root {
    --wp-admin-bar-height: 0px;
}
@media screen and (max-width: 782px) {
    body.admin-bar {
        --wp-admin-bar-height: 46px;
    }
}
@media screen and (min-width: 783px) {
    body.admin-bar {
        --wp-admin-bar-height: 32px;
    }
}

/* ================================================================
   HEADER BAR WIDGETS (DESKTOP + MOBILE)
   ================================================================ */
.rn-header-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 0 20px;
    flex-shrink: 0;
}

.rn-header-bar .widget {
    margin: 0 !important;
    padding: 0 !important;
}
.rn-header-bar .widget ul {
    margin: 0;
}
.rn-header-bar .widget-title {
    display: none;
}

/* Desktop only */
.rn-header-bar-desktop {
    display: flex;
}

/* Burger copy — cloned into the .primary-navigation panel by rn.js. Hidden by
   default (on desktop it's a stray clone); revealed inside the open dropdown
   panel while the header is collapsed. */
.rn-header-bar-mobile {
    display: none;
}
body.rn-header-collapsed #site-navigation.toggled .rn-header-bar-mobile {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    margin: 1rem 0 0;
    padding: 1.2rem 0 0.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.rn-header-bar-mobile .widget {
    margin: 0 !important;
    padding: 0 !important;
}
.rn-header-bar-mobile .widget-title {
    display: none;
}
.rn-header-bar-mobile ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rn-header-bar-mobile li {
    margin: 0;
}
/* The clone lives inside #site-navigation, so Storefront's
   `.main-navigation ul li a { padding }` bloats the social icon links —
   strip it (the Join Now button isn't in a ul, so it keeps its padding). */
.rn-header-bar-mobile ul li a {
    padding: 0 !important;
}

/* ================================================================
   SHOP TOPBAR (BREADCRUMB + CART)
   ================================================================ */
.rn-shop-topbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 0 0 0.88rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 3.7rem;
}
@media screen and (max-width: 767px) {
    .rn-shop-breadcrumb .col-full {
        margin: 0 !important;
    }
    .rn-shop-cart {
        text-align: right;
        min-width: 80px !important;
        max-width: 80px !important;
    }
    .woocommerce-Price-amount {
        display: block;
    }
}

.rn-shop-breadcrumb {
    flex: 1;
}
.rn-shop-cart {
    flex-shrink: 0;
    margin-left: 20px;
    min-width: 240px;
}

/* Breadcrumb & cart tweaks */
.storefront-breadcrumb {
    display: none;
}
.rn-shop-breadcrumb .storefront-breadcrumb {
    display: block;
    margin: 0 !important;
    padding: 30px 0 0 !important;
    background: none !important;
}
.rn-shop-breadcrumb .storefront-breadcrumb .col-full {
    padding: 0 !important;
}
.site-header-cart .cart-contents {
    display: block;
    color: #16365c !important;
    padding: 30px 0 0 !important;
    text-align: right;
}
.site-header-cart .cart-contents::after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: inherit;
    vertical-align: baseline;
    content: "\f291";
    height: 1em;
    float: right;
    line-height: 1.618;
    margin-left: 7px;
}
.storefront-sorting {
    display: none;
}
.site-header-cart .widget_shopping_cart {
    min-width: 300px;
}
.widget_shopping_cart p.total,
.widget_shopping_cart p.buttons {
    margin: 0 1.4rem;
}
.widget_shopping_cart .product_list_widget li {
    padding-left: 1em !important;
}
.rn-shop-cart .site-header-cart {
    margin: 0 !important;
    padding: 0 !important;
}

.single-product div.product table.variations select {
    height: 37px;
}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
    padding: 1rem 0 2rem !important;
    border-top: 1px solid #122c49;
}
html[data-theme="dark"] .site-footer {
    border-top: 1px solid #2b5b81;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.site-footer .col-full {
    max-width: 100% !important;
}
@media screen and (min-width: 768px) {
    .site-footer .col-full {
        padding: 0 3.7rem;
    }
}
.site-footer .footer-widgets {
    padding-top: 3.7rem !important;
}
.site-footer .footer-widgets .widget {
    margin: 0 0 3rem !important;
}
.site-footer .footer-widgets .wp-block-social-link-anchor {
    border-radius: 30px;
}

/* Footer buttons spacing */
.footer-widgets .wp-block-buttons {
    gap: 1.4rem !important;
}

.site-footer .site-info {
    padding: 1.4em 0 !important;
}
.rn-footer-rss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5em;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.rn-footer-rss:hover {
    opacity: 1;
}
.rn-footer-rss svg {
    fill: currentColor;
    display: block;
}
.site-credit {
    font-size: 0.8rem;
    opacity: 0.8;
}
.site-footer .widget_nav_menu ul {
    text-align: right;
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
}
.site-footer .widget_nav_menu ul li {
    padding-left: 0;
    margin-left: 1.4rem;
}
@media screen and (max-width: 479px) {
    .site-footer .widget_nav_menu ul li {
        margin-left: 1.2rem;
        font-size: 14px;
    }
    .wp-block-social-links .wp-social-link span:not(.screen-reader-text) {
        font-size: .5em !important;
    }
}
.site-footer .widget_nav_menu ul li::before {
    display: none;
}

/* Footer bar (if used) */
.rn-footer-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 16px;
}
.rn-footer-bar .widget {
    margin: 0 !important;
    padding: 0 !important;
}
.rn-footer-bar .widget-title {
    display: none;
}

/* ================================================================
   SCROLL TO TOP
   ================================================================ */
.rn-scroll-top {
    position: fixed;
    bottom: 3.7rem;
    right: 3.7rem;
    /* Below the memoriam dialog backdrop (99998/99999) so the button never
       floats above an open dialog, but above sticky chrome. */
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: #16365c;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.rn-scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.rn-scroll-top:hover {
    background: #fff;
    color: #16365c;
}
.rn-scroll-top svg {
    fill: none;
    stroke: currentColor;
    display: block;
    width: 1.35rem;
    height: 1.35rem;
}
@media screen and (max-width: 767px) {
    .rn-scroll-top {
        right: 1.4rem;
        bottom: 1.4rem; /*2.8rem*/
    }
}
/* Match the theme-toggle's smaller size on extra-small screens so the two
   corner buttons read as a pair. */
@media screen and (max-width: 420px) {
    .rn-scroll-top {
        width: 2.35rem;
        height: 2.35rem;
        right: 1rem;
        bottom: 1rem;
    }
    .rn-scroll-top svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* ================================================================
   SINGLE POST / BLOG
   ================================================================ */
.hentry .entry-header {
    padding: 1rem 0 0.7rem;
    margin-bottom: 1rem;
}
.page-header, .page-title:not(.woocommerce-products-header__title) {
    padding: 1.4rem 0 0;
}
@media screen and (min-width: 768px) {
    .hentry .entry-header {
        margin-bottom: 1.4rem;
    }
    .hentry.type-post .wp-post-image {
        float: right;
        max-width: 40% !important;
        margin-left: 40px;
        margin-bottom: 20px;
    }
    .hentry.type-post .entry-header .entry-title {
        clear: none;
        margin-bottom: 0.8rem;
    }
    .hentry.type-post .wp-block-heading {
        clear: none;
    }
}

/* ================================================================
   MAGAZINE SINGLE POST LAYOUT
   (Customizer: Single Post Layout — only applies to is_singular('post'))
   ================================================================ */
/* `.entry-header.rn-magazine-header` (two classes) is needed so this padding
   beats `.hentry .entry-header`'s padding (also two classes/elements) — a
   plain `.rn-magazine-header` selector was losing that fight. */
.entry-header.rn-magazine-header {
    text-align: left;
    padding: 1.4rem 0 1rem;
}
/* Customizer: Hero title alignment — "Center" adds this body class. */
.rn-magazine-title-center .entry-header.rn-magazine-header {
    text-align: center;
}
.rn-magazine-header__cats {
    margin-bottom: 0.6rem;
}
.rn-magazine-header__cat {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #16365c;
    border: 1px solid #16365c;
    border-radius: 999px;
    padding: 0.25em 0.9em;
    margin: 0 0.25em;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.rn-magazine-header__cat:hover {
    background: #16365c;
    color: #fff;
}
.rn-magazine-post .rn-magazine-header .entry-title {
    max-width: 850px;
    margin: 0 0 0.6rem;
    font-size: 2.6em;
    line-height: 1.08;
    overflow-wrap: break-word;
}
.rn-magazine-title-center .rn-magazine-post .rn-magazine-header .entry-title {
    margin-left: auto;
    margin-right: auto;
}
@media screen and (min-width: 768px) {
    .rn-magazine-post .rn-magazine-header .entry-title {
        font-size: 3.4em;
    }
}
.rn-magazine-post .rn-magazine-header .posted-on,
.rn-magazine-post .rn-magazine-header .post-author,
.rn-magazine-post .rn-magazine-header .post-comments {
    font-size: 0.88rem;
    /* opacity: 0.8; */
}

/* Hero image variant — the featured image fills the header as a
   background, masked by a gradient that fades it into the page
   background behind the title/meta on the left. On mobile there's no
   room for that effect, so the image just sits above the (centered)
   title/meta as a normal banner. */
.rn-magazine-header--has-image .rn-magazine-header__bg {
    background-size: cover;
    background-position: center;
}
@media screen and (max-width: 767px) {
    /* Drop the header's top padding so the hero image sits flush against
       the site header with no gap above it; the bottom padding (for
       spacing after the title/meta) is kept. */
    .entry-header.rn-magazine-header--has-image {
        padding-top: 0;
    }
    .rn-magazine-header--has-image .rn-magazine-header__bg {
        aspect-ratio: 16 / 9;
        border-radius: 6px;
        margin-bottom: 1.2rem;
    }
}
@media screen and (min-width: 768px) {
    .rn-magazine-header--has-image {
        position: relative;
        text-align: left;
        min-height: 380px;
        display: flex;
        align-items: center;
        padding: 0;
        border-radius: 8px;
        overflow: hidden;
    }
    .rn-magazine-header--has-image .rn-magazine-header__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
    }
    /* Mask width/opacity/full-width are set as CSS vars per the
       Customizer's "Hero image mask" controls (see rn_magazine_hero_css in
       functions.php); the values below are the defaults. */
    .rn-magazine-header--has-image .rn-magazine-header__bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to right,
            rgba(255, 255, 255, var(--rn-hero-mask-opacity, 0.9)) 0%,
            rgba(255, 255, 255, var(--rn-hero-mask-opacity, 0.9)) var(--rn-hero-mask-width, 60%),
            rgba(255, 255, 255, var(--rn-hero-mask-end-opacity, 0)) 100%);
    }
    .rn-magazine-header--has-image .rn-magazine-header__content {
        position: relative;
        z-index: 1;
        max-width: 560px;
        margin-left: 2.4rem;
        padding: 2.4rem 2.4rem 2.4rem 0;
    }
    .rn-magazine-post .rn-magazine-header--has-image .entry-title {
        max-width: none;
        margin: 0 0 0.6rem;
        text-align: left;
    }
}
html[data-theme="dark"] .rn-magazine-header--has-image .rn-magazine-header__bg::after {
    background: linear-gradient(to right,
        rgba(22, 54, 92, var(--rn-hero-mask-opacity, 0.9)) 0%,
        rgba(22, 54, 92, var(--rn-hero-mask-opacity, 0.9)) var(--rn-hero-mask-width, 60%),
        rgba(22, 54, 92, var(--rn-hero-mask-end-opacity, 0)) 100%);
}

/* Full width banner — escapes the content column edge-to-edge like an
   .alignfull block, and drops the rounded corners. The content wrapper is
   given the same max-width/padding as the post's normal content column
   (.col-full, ~980px content @ 42px/23px side padding) so the title/meta
   line up with the article below. */
.rn-magazine-header--full-width {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    border-radius: 0;
}
.rn-magazine-header--full-width .rn-magazine-header__bg {
    border-radius: 0;
}
.rn-magazine-header--full-width .rn-magazine-header__content {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    /* padding-left: 42px;
    padding-right: 42px; */
    margin-bottom: 1.4rem;
}
@media screen and (max-width: 568px) {
    .rn-magazine-header--full-width .rn-magazine-header__content {
        padding-left: 23px;
        padding-right: 23px;
    }
}
@media screen and (min-width: 1064px) {
    .rn-magazine-header--full-width .rn-magazine-header__content {
        min-width: 1064px;
    }
}

/* Drop cap on the opening paragraph */
.rn-magazine-post .entry-content {
    font-size: 1.05em;
    line-height: 1.75;
}
.rn-magazine-post .entry-content h1,
.rn-magazine-post .entry-content h2,
.rn-magazine-post .entry-content h3,
.rn-magazine-post .entry-content h4 {
    line-height: 1.25;
}
.rn-magazine-post:not(.rn-no-drop-cap) .entry-content > p:first-of-type::first-letter {
    float: left;
    font-size: 3.4em;
    line-height: 0.9;
    font-weight: 700;
    padding: 0.05em 0.08em 0 0;
    color: #16365c;
}
html[data-theme="dark"] .rn-magazine-header__cat {
    color: #bcdcef;
    border-color: #bcdcef;
}
html[data-theme="dark"] .rn-magazine-header__cat:hover {
    background: #bcdcef;
    color: #16365c;
}
html[data-theme="dark"] .rn-magazine-post:not(.rn-no-drop-cap) .entry-content > p:first-of-type::first-letter {
    color: #bcdcef;
}

/* ================================================================
   SINGLE POST — PREV/NEXT NAVIGATION
   (replaces storefront_post_nav; styled like the In Memoriam single nav)
   ================================================================ */
.rn-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 2.4rem;
    border-top: 1px solid rgba(22, 54, 92, 0.1);
}
.rn-post-nav__link {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.4rem 0;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}
.rn-post-nav__link:hover {
    opacity: 0.7;
}
.rn-post-nav__link--prev {
    border-right: 1px solid rgba(22, 54, 92, 0.08);
    padding-right: 1.4rem;
}
.rn-post-nav__link--next {
    justify-content: flex-end;
    text-align: right;
    padding-left: 1.4rem;
}
.rn-post-nav__thumb {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(22, 54, 92, 0.1);
}
.rn-post-nav__label,
.rn-post-nav__title {
    display: block;
}
.rn-post-nav__label {
    font-size: 0.72rem;
    opacity: 0.45;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.2rem;
}
.rn-post-nav__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #16365c;
    line-height: 1.25;
}
@media screen and (max-width: 767px) {
    .rn-post-nav {
        grid-template-columns: 1fr;
    }
    .rn-post-nav__link--prev {
        border-right: none;
        border-bottom: 1px solid rgba(22, 54, 92, 0.08);
        padding-right: 0;
    }
    .rn-post-nav__link--next {
        justify-content: space-between;
        text-align: left;
        padding-left: 0;
    }
}
html[data-theme="dark"] .rn-post-nav             { border-top-color: #1e3f62; }
html[data-theme="dark"] .rn-post-nav__link--prev { border-right-color: #1e3f62; }
html[data-theme="dark"] .rn-post-nav__title      { color: #ddeef8; }
html[data-theme="dark"] .rn-post-nav__thumb      { border-color: #1e3f62; }
@media screen and (max-width: 767px) {
    html[data-theme="dark"] .rn-post-nav__link--prev { border-bottom-color: #1e3f62; }
}

/* ================================================================
   AUTHOR BOX
   (Customizer: "Show author box on posts", toggle per-post in editor)
   ================================================================ */
.rn-author-box {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    margin: 2.4rem 0 1rem;
    padding: 1.4rem;
    border-radius: 8px;
    background: rgba(22,54,92,0.04);
    border: 1px solid rgba(22,54,92,0.1);
}
.rn-author-box__avatar img {
    border-radius: 50%;
    display: block;
}
.rn-author-box__name {
    font-weight: 700;
    margin: 0 0 0.3rem;
}
.rn-author-box__bio {
    margin: 0;
    font-size: 0.92rem;
    opacity: 0.8;
    line-height: 1.5;
}
html[data-theme="dark"] .rn-author-box {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}

/* "In banner" position — sits inside the Magazine hero header in place of
   the post meta, so it drops the card background/border and shrinks down
   to fit alongside the title. */
.rn-author-box--compact {
    margin: 0.6rem 0 0;
    padding: 0;
    background: none;
    border: none;
    gap: 0.8rem;
}
.rn-author-box--compact .rn-author-box__name {
    font-size: 0.9rem;
    margin: 0 0 0.2rem;
}
.rn-author-box--compact .rn-author-box__bio {
    font-size: 0.85rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
html[data-theme="dark"] .rn-author-box--compact {
    background: none;
}

/* ================================================================
   LATEST POSTS BLOCK – FULL HOVER EFFECT
   ================================================================ */
.wp-block-latest-posts__post-title-wrap {
    margin: 0;
}
.wp-block-latest-posts__post-title {
    display: block;
    font-weight: bold !important;
    font-size: 1.7rem;
    line-height: 1.1;
    margin-bottom: 4px;
    letter-spacing: -1px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}
.wp-block-latest-posts__post-excerpt {
    font-size: 0.88rem;
    line-height: 1.2;
}

.wp-block-latest-posts__featured-image {
    position: relative;
    height: 240px;         /* explicit height so img percentage + inset:0 both work */
    max-width: 400px;
    overflow: hidden;
    margin-bottom: 0.8rem;
    border-radius: 8px;
    cursor: pointer;
}
@media screen and (max-width: 1440px) {
    .wp-block-latest-posts__featured-image {
        height: 200px;
    }
}

.wp-block-latest-posts__featured-image img {
    position: absolute;  /* fills the positioned figure regardless of <a> sizing */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Blue overlay + logo */
.wp-block-latest-posts__featured-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(22, 54, 92, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    border-radius: 8px;
}

.wp-block-latest-posts__featured-image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20px);
    width: 60px;
    height: 60px;
    background-image: url('/wp-content/themes/remigration-now/assets/images/logo-white.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}
html[data-theme="dark"] .wp-block-latest-posts__featured-image::after {
    background: rgba(255,255,255,0.7);
}
html[data-theme="dark"] .wp-block-latest-posts__featured-image::before {
    background-image: url('/wp-content/themes/remigration-now/assets/images/logo-blue.png');
}

/* Image hover effect */
.wp-block-latest-posts__featured-image:hover img {
    transform: scale(1.08);
}
.wp-block-latest-posts__featured-image:hover::after {
    opacity: 1;
}
.wp-block-latest-posts__featured-image:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* ================================================================
   LATEST POSTS BLOCK – TITLE UNDERLINE (missing ::after rule)
   ================================================================ */
.wp-block-latest-posts__post-title {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.wp-block-latest-posts__post-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.wp-block-latest-posts__post-title:hover::after,
.wp-block-latest-posts__featured-image:hover + .wp-block-latest-posts__post-title::after {
    transform: scaleX(1);
}

/* ================================================================
   LATEST POSTS BLOCK — "Magazine" block style
   (Block toolbar/sidebar: Styles -> Magazine)
   Mirrors the Magazine single-post layout: full-width rounded
   thumbnails, a pill-style date badge, bigger headline and a subtle
   hover lift on each card.
   ================================================================ */
.wp-block-latest-posts.is-style-rn-magazine {
    gap: 2.4rem 2rem;
}

.wp-block-latest-posts.is-style-rn-magazine .wp-block-latest-posts__list-item {
    border-radius: 10px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-latest-posts.is-style-rn-magazine .wp-block-latest-posts__list-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(22, 54, 92, 0.12);
}

.wp-block-latest-posts.is-style-rn-magazine .wp-block-latest-posts__featured-image {
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.wp-block-latest-posts.is-style-rn-magazine .wp-block-latest-posts__featured-image::after,
.wp-block-latest-posts.is-style-rn-magazine .wp-block-latest-posts__featured-image::before {
    border-radius: 10px;
}

.wp-block-latest-posts.is-style-rn-magazine .wp-block-latest-posts__post-date {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #16365c;
    border: 1px solid #16365c;
    border-radius: 999px;
    padding: 0.25em 0.9em;
    margin: 0 0 0.6rem;
}

.wp-block-latest-posts.is-style-rn-magazine .wp-block-latest-posts__post-title {
    font-size: 1.9rem;
    letter-spacing: -0.5px;
}

.wp-block-latest-posts.is-style-rn-magazine .wp-block-latest-posts__post-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.8;
    margin-top: 0.4rem;
}

html[data-theme="dark"] .wp-block-latest-posts.is-style-rn-magazine .wp-block-latest-posts__post-date {
    color: #bcdcef;
    border-color: #bcdcef;
}

@media screen and (max-width: 767px) {
    .wp-block-latest-posts.is-style-rn-magazine .wp-block-latest-posts__post-title {
        font-size: 1.5rem;
    }
}

/* ================================================================
   ARCHIVE GRID (archive.php)
   Uses wp-block-latest-posts__* classes on child elements so all the
   existing magazine-card hover effects apply automatically.
   ================================================================ */
.rn-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem 2rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.rn-archive-grid__item {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rn-archive-grid__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(22, 54, 92, 0.12);
}

/* Image tile — same proportions as the magazine block */
.rn-archive-grid .wp-block-latest-posts__featured-image {
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.rn-archive-grid .wp-block-latest-posts__featured-image::after,
.rn-archive-grid .wp-block-latest-posts__featured-image::before {
    border-radius: 10px;
}

/* Date pill */
.rn-archive-grid .wp-block-latest-posts__post-date {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #16365c;
    border: 1px solid #16365c;
    border-radius: 999px;
    padding: 0.25em 0.9em;
    margin: 0 0 0.6rem;
}

.rn-archive-grid .wp-block-latest-posts__post-date-wrap {
    margin-bottom: 0.2rem;
}

/* Title */
.rn-archive-grid .wp-block-latest-posts__post-title {
    font-size: 1.9rem;
    letter-spacing: -0.5px;
}

/* Excerpt */
.rn-archive-grid .wp-block-latest-posts__post-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.8;
    margin-top: 0.4rem;
}

/* Responsive — 2 columns on tablet */
@media screen and (max-width: 900px) {
    .rn-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive — 1 column on mobile */
@media screen and (max-width: 600px) {
    .rn-archive-grid {
        grid-template-columns: 1fr;
    }
    .rn-archive-grid .wp-block-latest-posts__post-title {
        font-size: 1.5rem;
    }
}

/* Dark mode — date pill */
html[data-theme="dark"] .rn-archive-grid .wp-block-latest-posts__post-date {
    color: #bcdcef;
    border-color: #bcdcef;
}

/* ================================================================
   PRODUCT GRID IMAGES – BLOCKS
   ================================================================ */
.wp-block-woocommerce-product-collection .wc-block-components-product-image,
.wp-block-woocommerce-product-collection .wc-block-grid__product-image,
.wp-block-woocommerce-product-collection .wc-block-components-product-image--aspect-ratio-3-5,
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto !important;
    margin: 0 0 1.4rem !important;
    padding: 0 !important;
    cursor: pointer;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image > a,
.wp-block-woocommerce-product-collection .wc-block-grid__product-image > a {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    width: 100%;
    height: 100% !important;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image__inner-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image img,
.wp-block-woocommerce-product-collection .wc-block-grid__product-image img,
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 !important;
}

/* Hover effect */
.wp-block-woocommerce-product-collection .wc-block-components-product-image::after,
.wp-block-woocommerce-product-collection .wc-block-grid__product-image::after,
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(22, 54, 92, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image::before,
.wp-block-woocommerce-product-collection .wc-block-grid__product-image::before,
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20px);
    width: 100px;
    height: 70px;
    background-image: url('/wp-content/themes/remigration-now/assets/images/logo-white.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    pointer-events: none;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image:hover img,
.wp-block-woocommerce-product-collection .wc-block-grid__product-image:hover img,
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image:hover img {
    transform: scale(1.08);
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image:hover::after,
.wp-block-woocommerce-product-collection .wc-block-grid__product-image:hover::after,
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image:hover::after {
    opacity: 1;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image:hover::before,
.wp-block-woocommerce-product-collection .wc-block-grid__product-image:hover::before,
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* ================================================================
   PRODUCT COLLECTION BLOCK – POST TITLE UNDERLINE + LINE-HEIGHT FIX
   ================================================================ */
.wp-block-woocommerce-product-collection .wp-block-post-title,
.wp-block-woocommerce-product-collection .wp-block-post-title a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    line-height: 1.2 !important; /* overrides the inline style="line-height:1.4;" */
}

.wp-block-woocommerce-product-collection .wp-block-post-title::after,
.wp-block-woocommerce-product-collection .wp-block-post-title a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.wp-block-woocommerce-product-collection .wp-block-post-title:hover::after,
.wp-block-woocommerce-product-collection .wp-block-post-title a:hover::after {
    transform: scaleX(1);
}

/* ================================================================
   CLASSIC WOOCOMMERCE SHOP / ARCHIVE – IMAGE WRAPPER + HOVER
   ================================================================ */
ul.products li.product .rn-product-image-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 1.4rem !important;
}

ul.products li.product .rn-product-image-wrapper img {
    width: 100% !important;
    height: auto;
    display: block;
    margin: 0 !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Blue overlay + logo */
ul.products li.product .rn-product-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(22, 54, 92, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    border-radius: 8px;
}

ul.products li.product .rn-product-image-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20px);
    width: 60px;
    height: 60px;
    background-image: url('/wp-content/themes/remigration-now/assets/images/logo-white.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

ul.products li.product:hover .rn-product-image-wrapper img {
    transform: scale(1.08);
}

ul.products li.product:hover .rn-product-image-wrapper::after {
    opacity: 1;
}

ul.products li.product:hover .rn-product-image-wrapper::before {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* Title underline – single clean rule, text-width only */
ul.products li.product .woocommerce-loop-product__title {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

ul.products li.product .woocommerce-loop-product__title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

ul.products li.product:hover .woocommerce-loop-product__title::after {
    transform: scaleX(1);
}

/* Font size */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-category__title,
ul.products .wc-block-grid__product-title,
.wp-block-latest-posts__post-title,
.wp-block-woocommerce-product-collection .wp-block-post-title {
    font-size: 1.4rem !important;
}

.site-header-cart .widget_shopping_cart .product_list_widget img {
    margin-right: 1em;
}

/* ================================================================
   BUTTONS & HOVER ANIMATIONS
   ================================================================ */
.rn-animated-button,
.crypto-link::after,
.wp-block-button__link,
button.button,
a.button,
.button,
.woocommerce button.button,
.woocommerce a.button,
.add_to_cart_button,
.single_add_to_cart_button,
.button.alt,
button,
input[type=button],
input[type=reset],
input[type=submit],
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link,
.added_to_cart,
.wc-forward,
.woocommerce-Button--next,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-return-to-cart-button {
    border-radius: 30px !important;
    transition: all 0.3s ease;
}

.added_to_cart {
    margin-left: 7px;
}

/* WooCommerce Cart/Checkout block buttons render as <a> tags and don't pick
   up the theme's brand colour or font from Storefront's button customizer
   styles — bring them in line with the rest of the site's buttons. */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-return-to-cart-button {
    font-family: inherit !important;
    text-decoration: none !important;
    background-color: #16365c !important;
    border-color: #16365c !important;
    color: #fff !important;
}
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-return-to-cart-button:hover {
    background-color: #2b5b81 !important;
    border-color: #16365c !important;
    color: #fff !important;
}

/* Hover */
.rn-animated-button:hover,
.wp-block-button__link:hover,
button.button:hover,
a.button:hover,
.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.button.alt:hover,
.added_to_cart:hover,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-return-to-cart-button:hover {
    opacity: 1;
    text-shadow: 0 0 7px #fff;
    box-shadow: 0 8px 20px rgba(22, 54, 92, 0.18);
}
html[data-theme="dark"] button, input[type="button"], input[type="reset"], input[type="submit"], .button, .widget a.button {
    border: 1px solid #FFF;
}

/* Active state */
.rn-animated-button:active,
.wp-block-button__link:active,
button.button:active,
.button:active,
.wc-block-components-button:active,
.wc-block-cart__submit-button:active,
.wc-block-components-checkout-place-order-button:active,
.wc-block-components-checkout-return-to-cart-button:active {
    transform: scale(0.96) translateY(-1px);
    transition: transform 0.1s ease;
}

.button.rn-animated-button,
.wp-block-button .rn-animated-button {
    opacity: 0.88;
}

.wc-block-cart__submit-container {
    background: none !important;
}

/* ================================================================
   CRYPTO LINK COPY
   ================================================================ */
.crypto-link {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: block;
    margin-top: 0;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid rgba(200, 220, 240, 0.7);
    font-size: 1rem;
}
html[data-theme="dark"]  .crypto-link:hover { 
    color: #FFF !important;
}
html[data-theme="dark"] .cdbbc-classic-container li.cdbbc-classic-list {
 background: none !important;
}
html[data-theme="dark"] .cdbbc-connector-modal .cdbbc-modal-content,
html[data-theme="dark"] .cdbbc-connector-modal .cdbbc-modal-content .cdbbc-wallets {
 background: rgba(255,255,255,0.03);
}
html[data-theme="dark"] .cdbbc-connector-modal .cdbbc-modal-content .cdbbc-wallets .cdbbc-wallet:hover {
    background: rgba(255,255,255,0.07)
}
@media (max-width: 768px) {
    .crypto-link {
        font-size: 0.8rem;
    }
}
.crypto-link:hover {
    color: #16365c;
}
.crypto-link::after {
    display: inline-block;
    background: #16365c;
    border-radius: 4px;
    padding: 4px 8px 2px 6px;
    border: 2px solid #fff;
    content: '📋 Copy';
    color: #FFF;
    font-size: 0.8em;
    margin-left: 8px;
}
.crypto-link:hover::after {
    color: #16365c;
    border: 2px solid #16365c;
    background: #fff;
}

/* ================================================================
   CUSTOM SEPARATOR WITH CENTERED LOGO
   ================================================================ */
.wp-block-separator {
    position: relative;
    border: none !important;
    background: transparent;
    height: 30px;
    margin-top: var(--wp--preset--spacing--70) !important;
    margin-bottom: var(--wp--preset--spacing--70) !important;
    display: block;
    overflow: visible;
}

.wp-block-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #16365c;
    z-index: 1;
    transform-origin: center; /* needed for the draw-from-center animation */
}

.wp-block-separator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 2rem;
    height: 2rem;
    background-size: contain;
    background-image: url('/wp-content/themes/remigration-now/assets/images/logo-separator.png');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
}

/* ================================================================
   SEPARATOR – scroll-triggered entrance animation
   JS adds .rn-sep-will-animate to off-screen separators, then swaps
   to .rn-sep-animated via IntersectionObserver when they enter view.
   No JS / prefers-reduced-motion = classes never added, separator
   stays fully visible as normal.
   ================================================================ */
.wp-block-separator.rn-sep-will-animate::before {
    transform: scaleX(0);
}
.wp-block-separator.rn-sep-will-animate::after {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

/* Line draws from the centre outward */
.wp-block-separator.rn-sep-animated::before {
    animation: rn-sep-line 0.8s ease-out forwards;
}
/* Icon pops in from zero with a spring overshoot, slightly after line starts */
.wp-block-separator.rn-sep-animated::after {
    animation: rn-sep-icon 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s forwards;
}

@keyframes rn-sep-line {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes rn-sep-icon {
    from { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ================================================================
   JETPACK SLIDESHOW – WHITE ARROW ICONS
   ================================================================ */
.wp-block-jetpack-slideshow .amp-carousel-button,
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next,
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-pause,
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-play,
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-prev {
    background-color: #E9C9A3 !important;
    filter: invert(1);
    opacity: 0.7 !important;
}
.wp-block-jetpack-slideshow .amp-carousel-button:hover,
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next:hover,
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-pause:hover,
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-play:hover,
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-prev:hover {
    opacity: 1 !important;
}
.swiper-pagination-bullet {
    background: #16365c !important;
    color: #16365c !important;
}

/* ================================================================
   WOOCOMMERCE HEADER FIXES
   Pin header padding to override Storefront WooCommerce stylesheet rules.
   ================================================================ */
.woocommerce-active.rn-aligned-header #masthead {
    padding: 8px 4rem !important;
}
@media screen and (max-width: 1419px) {
    .woocommerce-active.rn-aligned-header #masthead {
        padding: 8px 2rem !important;
    }
}
@media screen and (max-width: 767px) {
    .woocommerce-active.rn-aligned-header #masthead {
        padding: 12px 1.2rem !important;
    }
}

/* ================================================================
   MISC / MOBILE / WOO TWEAKS
   ================================================================ */
h1.wp-block-heading,
h1.entry-title {
    padding-top: 1.4rem;
}
h1, .alpha {
    font-size: 3em;
    line-height: 1.1;
    letter-spacing: -1px;
}
h2, .beta {
    font-size: 2.4em;
    line-height: 1.07;
    letter-spacing: -1px;
}
h2 + h3,
.beta + h3 {
    border-top: 1px solid rgba(0,0,0,.05);
    padding-top: .5407911001em;
}
h3, .gamma {
    font-size: 1.618em;
}
h4, .delta {
    font-size: 1.41575em;
}

.wp-block-button__link.has-white-background-color {
    padding: 8px 1.4rem;
    border: 2px solid #fff;
}
.wp-block-button__link.has-white-background-color:hover {
    background-color: #16365c !important;
    color: #fff !important;
    text-shadow: none;
}
.hentry .entry-content a.wp-block-button__link:hover {
    background-color: #fff !important;
    color: #16365c !important;
}

.hentry .entry-content figure.wp-block-image.float-left {
    float: left;
    margin: 20px !important;
}
.hentry .entry-content .wp-block-cover .wp-block-cover__inner-container h2 {
    line-height: 1.1;
}
@media (max-width: 600px) {
    .hentry .entry-content .wp-block-cover .wp-block-cover__inner-container h2 {
        font-size: 30px !important;
    }
}

@media (min-width: 66.4989em) {
    .storefront-align-wide.page-template-template-fullwidth-php .hentry .entry-content .alignwide,
    .storefront-align-wide.storefront-full-width-content .hentry .entry-content .alignwide {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media screen and (max-width: 767px) {
    .wp-block-woocommerce-product-collection ul {
        margin: 0 1.5em 1.41575em 1.5em;
    }
    .wc-block-components-product-image img {
        max-height: 300px;
    }
}

.storefront-handheld-footer-bar ul.columns-3 li {
    width: 50%;
}
.storefront-handheld-footer-bar ul li.search {
    display: none;
}

@media (min-width: 768px) {
    .storefront-full-width-content.woocommerce-cart .entry-header,
    .storefront-full-width-content.woocommerce-checkout .entry-header,
    .storefront-full-width-content.woocommerce-account .entry-header,
    .storefront-full-width-content .woocommerce-products-header {
        text-align: left;
    }
    .storefront-product-pagination a[rel=next] {
        right: -400px;
    }
    .storefront-product-pagination a[rel=prev] {
        left: -400px;
    }
}

.wc-forward::after,
.woocommerce-Button--next::after {
    content: '\f054' !important;
}

/* ================================================================
   BANNER UTILITY
   ================================================================ */
.rn-banner {
    min-height: 420px !important;
}
@media screen and (max-width: 1440px) {
    .rn-banner {
        min-height: 300px !important;
    }
}
@media screen and (max-width: 767px) {
    .rn-banner {
        min-height: 120px !important;
    }
}
@media screen and (max-width: 479px) {
    .rn-banner {
        min-height: 100px !important;
    }
    .rn-banner .wp-block-cover__inner-container {
        padding: 1em 0 !important;
    }
}

a {
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
.wp-block-paragraph a {
    text-decoration: underline;
}
.hentry .entry-content a.wp-block-latest-posts__post-title {
    text-decoration: none;
}
.hentry .entry-content .wp-block-quote, .editor-styles-wrapper .wp-block-quote {
    border-left-color: #16365C;
}
html[data-theme="dark"] .hentry .entry-content .wp-block-quote,
html[data-theme="dark"] .editor-styles-wrapper .wp-block-quote {
    border-left-color: rgba(255, 255, 255, 0.3);
}
.wc-block-product {
    text-align: center;
}
.home.page-template-template-fullwidth .hentry .entry-content h2+.woocommerce, .home.page-template-template-fullwidth .hentry .entry-content h2+[class*=wp-block-woocommerce-] {
    margin-top: 0 !important;
}
.wp-block-latest-posts__post-author { font-weight: bold;}
.wp-block-woocommerce-product-collection .wc-block-components-notices:not(:has(*)) + .wc-block-product-template {
    margin: 0 !important;
}
ul.wc-block-product-template {
    margin-left: 0;
}

/* Restore top padding removed by Storefront WooCommerce CSS
   (which sets padding:0 0 5.9968em — wiping the top padding entirely) */
.storefront-full-width-content.woocommerce-cart .entry-header,
.storefront-full-width-content.woocommerce-checkout .entry-header,
.storefront-full-width-content.woocommerce-account .entry-header,
.storefront-full-width-content .woocommerce-products-header {
    padding-top: 1.4rem;
    padding-bottom: 3rem;
}

@media (min-width: 768px) {
    .content-area,
    .widget-area {
        margin-bottom: 0 !important;
    }
}

/* ================================================================
   MEMORIAM WORDMARK BANNER
   Outer wrapper breaks out of the content max-width (full bleed).
   Outline SVG sits behind; masked names div sits on top.
   viewBox 1400×220 — aspect ratio 15.7 : 1.
   ================================================================ */

/* Full-bleed wrapper — escapes the entry-content max-width.
   Horizontal offset (40px/20px) keeps letters just off the screen edge.
   Vertical margins add breathing room: more above, some below. */
.rn-memoriam-wordmark-wrap {
    position: relative;
    height: clamp(60px, 15.7vw, 280px);
    margin-top: 60px;
    margin-bottom: 60px;
    margin-left: calc(-50vw + 50% + 50px);
    margin-right: calc(-50vw + 50% + 50px);
    width: calc(100vw - 100px);
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    .rn-memoriam-wordmark-wrap {
        margin-top: 60px;
        margin-bottom: 60px;
        margin-left: calc(-50vw + 50% + 20px);
        margin-right: calc(-50vw + 50% + 20px);
        width: calc(100vw - 40px);
    }
}

/* Visible grey outline sits below the names */
.rn-memoriam-wordmark__outline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Masked names layer */
.rn-memoriam-wordmark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    color: #16365c;
    overflow: hidden;
}

.rn-memoriam-wordmark__names {
    font-size: clamp(0.5rem, 0.7vw, 0.85rem);
    line-height: 1.0;
    padding: 0;
    margin: 0;
    word-spacing: 0;
}

.rn-memoriam-wordmark__name {
    display: inline;
    text-decoration: none;
    text-transform: uppercase;
    color: currentColor;
    cursor: pointer;
}

.rn-memoriam-wordmark__name::after {
    content: '\00B7';
    margin: 0 0.28em;
    opacity: 0.4;
}

/* ================================================================
   MEMORIAM SORT BAR
   ================================================================ */
.rn-memoriam-sort-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
}

.rn-memoriam-sort-label {
    font-size: 0.85rem;
    opacity: 0.65;
    margin-right: 0.2rem;
}

.rn-memoriam-sort-btn {
    font-size: 0.8rem;
    padding: 0.3em 0.9em;
    border-radius: 30px !important;
    border: 1px solid rgba(22, 54, 92, 0.3) !important;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.rn-memoriam-sort-btn:hover {
    opacity: 1;
    border-color: #16365c !important;
}

.rn-memoriam-sort-btn.is-active {
    background: #16365c;
    color: #fff;
    border-color: #16365c !important;
    opacity: 1;
}

/* ================================================================
   MEMORIAM GRID — PHOTO WORDMARK VARIANT
   ================================================================ */
.rn-memoriam-wordmark--images .rn-memoriam-wordmark__photos {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    height: 100%;
}

/* Navy overlay lives on each tile via ::after so individual hover works */
.rn-memoriam-wordmark__photo-tile {
    position: relative;
    width: 2.5vw;
    height: 2.5vw;
    min-width: 18px;
    min-height: 18px;
    max-width: 32px;
    max-height: 32px;
    background-size: cover;
    background-position: center;
    background-color: #fff;
    flex-shrink: 0;
    cursor: pointer;
    z-index: 0;
    transition: z-index 0s, background-color 0.6s ease;
}

html[data-theme="dark"] .rn-memoriam-wordmark__photo-tile {
    background-color: #16365c;
}

/* JS fires all of this grid's photo requests at once (see rnLoadPhotoTiles
   in rn.js) — the placeholder colour fades out as each photo arrives. */
.rn-memoriam-wordmark__photo-tile.is-photo-loaded {
    background-color: transparent;
    animation: rn-photo-reveal 0.4s ease-out;
}

.rn-memoriam-wordmark__photo-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.54);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
html[data-theme="dark"] .rn-memoriam-wordmark__photo-tile::after {
    background: rgba(22, 54, 92, 0.54);
}
html[data-theme="dark"] .rn-memoriam-cover__photo-tile::after {
    /* Same opacity mechanism as light mode (--rn-cover-overlay), just navy-tinted —
       keeps the overlay strong enough for the light text to stay readable.
       NOTE: deliberately not !important — that would beat the name-flash
       animation in the cascade and freeze the overlay mid-twinkle. Its
       specificity (html[data-theme] + class, vs. just a class) already
       wins over the light-mode base rule without it. */
    background: rgba(22, 54, 92, var(--rn-cover-overlay, 0.7));
}

.rn-memoriam-wordmark__photo-tile:hover {
    z-index: 2;
}

.rn-memoriam-wordmark__photo-tile:hover::after {
    background: rgba(22, 54, 92, 0.1);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

/* ================================================================
   MEMORIAM GRID — LOCATION ON CARDS
   ================================================================ */
.rn-memoriam-grid-location {
    font-size: 0.72rem;
    opacity: 0.6;
    margin: 0.1rem 0 0;
    text-align: center;
    line-height: 1.3;
}

/* ================================================================
   MEMORIAM GRID
   ================================================================ */
.rn-memoriam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 2rem 1.5rem;
    padding: 2rem 0 3rem;
}
@media screen and (min-width: 768px) {
    .rn-memoriam-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 2.5rem 2rem;
    }
}

.rn-memoriam-item {
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none !important; /* override any theme a{text-decoration:underline} */
    color: inherit;
    outline-offset: 4px;
}

/* Belt-and-suspenders: prevent child text inheriting any residual decoration */
.rn-memoriam-item .rn-memoriam-title,
.rn-memoriam-item .rn-memoriam-caption,
.rn-memoriam-item .rn-memoriam-image-wrapper > span,
.rn-memoriam-item .rn-memoriam-grid-location {
    text-decoration: none !important;
}

.rn-memoriam-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 0.8rem;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Navy name-card is the base layer of every tile: it shows while the
       (lazy) photo loads and stays as the fallback when there is none. */
    background: #16365c;
}

.rn-memoriam-image-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.rn-memoriam-image-wrapper > span {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.3;
    text-align: center;
    padding: 0.8rem;
    word-break: break-word;
    user-select: none;
    text-decoration: none;
}

/* White overlay in light mode — base opacity driven by --rn-grid-overlay
   (set from page meta); navy is reserved for dark mode below, where white
   would wash out against the already-light surrounding page. */
.rn-memoriam-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    opacity: var(--rn-grid-overlay, 0);
    transition: opacity 0.3s ease;
    z-index: 1;
    border-radius: 8px;
}

/* Logo overlay */
.rn-memoriam-image-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20px);
    width: 60px;
    height: 60px;
    background-image: url('/wp-content/themes/remigration-now/assets/images/logo-blue.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}
html[data-theme="dark"] .rn-memoriam-image-wrapper::before {
    background-image: url('/wp-content/themes/remigration-now/assets/images/logo-white.png');
}

.rn-memoriam-item:hover .rn-memoriam-image-wrapper img,
.rn-memoriam-item:focus-visible .rn-memoriam-image-wrapper img {
    transform: scale(1.08);
}
.rn-memoriam-item:hover .rn-memoriam-image-wrapper::after,
.rn-memoriam-item:focus-visible .rn-memoriam-image-wrapper::after {
    opacity: 1;
}
.rn-memoriam-item:hover .rn-memoriam-image-wrapper::before,
.rn-memoriam-item:focus-visible .rn-memoriam-image-wrapper::before {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.rn-memoriam-caption {
    font-size: 0.88rem;
    opacity: 0.7;
    margin: 0.1rem 0 1rem;
    text-align: center;
    text-decoration: none;
}

.rn-memoriam-title {
    display: inline-block;
    position: relative;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    margin: 0;
    padding: 0 4px;
}

.rn-memoriam-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.rn-memoriam-item:hover .rn-memoriam-title::after,
.rn-memoriam-item:focus-visible .rn-memoriam-title::after {
    transform: scaleX(1);
}

/* ================================================================
   MEMORIAM DIALOG
   ================================================================ */
body.rn-dialog-open {
    overflow: hidden;
}

.rn-memoriam-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 99998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.rn-memoriam-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.rn-memoriam-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    z-index: 99999;
    background: #fff;
    border-radius: 12px;
    max-width: 640px;
    width: calc(100% - 2rem);
    max-height: 90vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

/* Scrollable inner wrapper — keeps the close button fixed in place
   (outside the scroll area) while the dialog content scrolls */
.rn-memoriam-dialog__scroll {
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 54, 92, 0.3) transparent;
}
.rn-memoriam-dialog__scroll::-webkit-scrollbar {
    width: 8px;
}
.rn-memoriam-dialog__scroll::-webkit-scrollbar-track {
    background: transparent;
}
.rn-memoriam-dialog__scroll::-webkit-scrollbar-thumb {
    background-color: rgba(22, 54, 92, 0.3);
    border-radius: 4px;
}
.rn-memoriam-dialog__scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(22, 54, 92, 0.5);
}
html[data-theme="dark"] .rn-memoriam-dialog__scroll {
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
html[data-theme="dark"] .rn-memoriam-dialog__scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
}
html[data-theme="dark"] .rn-memoriam-dialog__scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
}
.rn-memoriam-dialog.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}

.rn-memoriam-dialog__image {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    display: block;
}

.rn-memoriam-dialog__image-placeholder {
    width: 100%;
    height: 180px;
    background: #16365c;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rn-memoriam-dialog__image-placeholder span {
    font-size: 1.4rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.3;
    text-align: center;
    padding: 0 1.2rem;
    word-break: break-word;
}

/* X is drawn with pseudo-element bars (same technique as the countdown
   timer's close button) so it's always perfectly centred — the &times;
   glyph the JS injects sits off-centre, so it's hidden via font-size: 0. */
.rn-memoriam-dialog__close {
    position: absolute;
    top: 1rem;
    right: 1.4rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50% !important;
    background: #16365c;
    color: #fff;
    border: 2px solid #fff !important;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    z-index: 3;
    padding: 0 !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.rn-memoriam-dialog__close::before,
.rn-memoriam-dialog__close::after {
    content: "";
    /* Storefront hides button::after globally – restore it here */
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}
.rn-memoriam-dialog__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.rn-memoriam-dialog__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.rn-memoriam-dialog__close:hover {
    background: #fff !important;
    color: #16365c !important;
    border-color: #16365c !important;
    text-shadow: none;
    box-shadow: none;
}

.rn-memoriam-dialog__body {
    padding: 1.6rem 2rem 2rem;
}

.rn-memoriam-dialog__title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin: 0 0 0.5rem;
    color: #16365c;
}

.rn-memoriam-dialog__title-link {
    color: inherit;
    text-decoration: none;
}

.rn-memoriam-dialog__title-link:hover,
.rn-memoriam-dialog__title-link:focus {
    text-decoration: underline;
}

.rn-memoriam-dialog__years {
    font-size: 1.1rem;
    color: #16365c;
    opacity: 0.73;
    margin: 0 0 0.7rem;
    font-weight: 500;
}
.rn-memoriam-dialog__age {
    font-size: 0.88em;
    font-weight: 400;
    opacity: 0.8;
}
.rn-memoriam-dialog__edit {
    margin: 1rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(22, 54, 92, 0.08);
    font-size: 0.8rem;
}
.rn-memoriam-dialog__edit a {
    color: #16365c;
    opacity: 0.55;
    text-decoration: none;
}
.rn-memoriam-dialog__edit a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ---- Source link — shared by dialog and single post ---- */
.rn-memoriam-dialog__source,
.rn-memoriam-single__source {
    margin: 1rem 0 0;
}

.rn-memoriam-source-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 30px !important;
    border: 1px solid rgba(22, 54, 92, 0.3) !important;
    padding: 0.4em 0.8em;
    font-size: 0.8rem;
    color: #16365c;
    text-decoration: none !important;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.rn-memoriam-source-btn:hover {
    opacity: 1;
    border-color: rgba(22, 54, 92, 0.6) !important;
    background: rgba(22, 54, 92, 0.04);
    text-shadow: none;
    box-shadow: none;
}

/* ---- Polaroid dialog — three-section layout ----
   [photo | name/meta] ← flex row (top)
   [content full-width] ← below
   Click photo → expands to full dialog width, meta wraps below
   ------------------------------------------------------------ */
.rn-memoriam-dialog--polaroid {
    max-width: 680px;
}

.rn-memoriam-dialog__polaroid-layout {
    display: flex;
    flex-wrap: wrap;          /* allows photo to go full-width on expand */
    align-items: flex-start;
    align-content: flex-start;
    padding: 1.6rem 1.8rem 1.8rem;
    gap: 0;
}

/* Photo column */
.rn-memoriam-dialog__polaroid-photo-col {
    flex: 0 0 auto;
    width: 120px;
    max-width: 120px;
    order: 1;
    cursor: zoom-in;
    transition: max-width 0.4s ease, width 0.4s ease, padding 0.4s ease;
}

/* Meta column (name, years, location) */
.rn-memoriam-dialog__polaroid-meta-col {
    flex: 1;
    min-width: 0;
    order: 2;
    /* padding-top: 1rem; */
    padding-left: 1.4rem;
    transition: flex 0.4s ease, padding 0.4s ease;
}

/* Body column (content text, source, edit) — always full width */
.rn-memoriam-dialog__polaroid-body-col {
    flex: 0 0 100%;
    width: 100%;
    order: 3;
    padding-top: 0;
    margin-top: 1rem;
}

/* Polaroid frame */
.rn-memoriam-dialog__polaroid-frame {
    background: linear-gradient(160deg, rgba(255,255,255,0.64) 0%, rgba(255,255,255,0.42) 100%);
    padding: 7px 7px 24px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.08);
    transform: rotate(-1.5deg);
    transition: transform 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}

.rn-memoriam-dialog__polaroid-img-wrap {
    position: relative; /* anchors the shimmer sweep below */
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #16365c;
    display: block;
    transition: aspect-ratio 0.4s ease;
}

/* ---- Polaroid shimmer overlay ----
   A soft diagonal light band drifts across the photo on a loop, like
   light catching glossy print paper — shared by the profile dialog's
   polaroid and the single-post polaroid (.rn-memoriam-single__frame
   below). Sits above the photo but below the placeholder text/frame
   border, and never intercepts clicks. */
.rn-memoriam-dialog__polaroid-img-wrap::after,
.rn-memoriam-single__frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 38%,
        rgba(255,255,255,0.16) 50%,
        transparent 62%);
    background-size: 250% 100%;
    background-position: 150% 0;
    animation: rn-polaroid-shimmer 5.5s ease-in-out infinite;
}

@keyframes rn-polaroid-shimmer {
    0%, 50%  { background-position: 150% 0; }
    100%     { background-position: -50% 0; }
}

.rn-memoriam-dialog__polaroid-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
}

.rn-memoriam-dialog__polaroid-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    text-align: center;
}

.rn-memoriam-dialog__polaroid-placeholder span {
    color: rgba(255,255,255,0.55);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

/* Title slightly larger */
.rn-memoriam-dialog--polaroid .rn-memoriam-dialog__title {
    font-size: 1.7rem;
    margin-top: 0.7rem;
    line-height: 1.2;
    color: #16365c;
}

.rn-memoriam-dialog--polaroid .rn-memoriam-dialog__years,
.rn-memoriam-dialog--polaroid .rn-memoriam-dialog__location {
    color: #16365c;
}

/* ---- Expanded state: photo fills full dialog width ---- */
.rn-memoriam-dialog--polaroid.is-photo-expanded .rn-memoriam-dialog__polaroid-photo-col {
    width: 100%;
    max-width: 100%;
    padding-bottom: 2rem;
    cursor: zoom-out;
}

.rn-memoriam-dialog--polaroid.is-photo-expanded .rn-memoriam-dialog__polaroid-meta-col {
    flex: 0 0 100%;
    padding-left: 0;
    padding-top: 0;
}

.rn-memoriam-dialog--polaroid.is-photo-expanded .rn-memoriam-dialog__polaroid-frame {
    transform: rotate(0deg);
    padding: 6px 6px 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.rn-memoriam-dialog--polaroid.is-photo-expanded .rn-memoriam-dialog__polaroid-img-wrap {
    aspect-ratio: 4 / 3;
}

@media screen and (max-width: 479px) {
    .rn-memoriam-dialog__polaroid-layout {
        padding: 3.5rem 1.2rem 1.4rem;
    }
    .rn-memoriam-dialog__polaroid-photo-col {
        width: 120px;
        max-width: 120px;
    }
}

/* Portrait orientation — push content below the absolute close button
   (button occupies top: 1rem to 3rem; content needs to start after that) */
@media screen and (orientation: portrait) and (min-width: 480px) and (max-width: 680px) {
    .rn-memoriam-dialog__polaroid-layout {
        padding-top: 3.5rem;
    }
}

.rn-memoriam-dialog__location {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    line-height: 1.2;
    color: #666;
    margin: 0 0 0.8rem;
}
.rn-memoriam-dialog__location svg {
    flex-shrink: 0;
    fill: currentColor;
}

.rn-memoriam-dialog__content {
    font-size: 0.92rem;
    line-height: 1.54;
    border-top: 1px solid rgba(22, 54, 92, 0.1);
    padding-top: 1rem;
    margin-top: 0.7rem;
    color: #333;
}
/* REST lazy-load spinner — generous vertical padding keeps the dialog from
   collapsing to a sliver while the entry's body copy is fetched. */
.rn-memoriam-dialog__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4.5rem 0;
}
.rn-memoriam-dialog__loading-spinner {
    display: block;
    width: 34px;
    height: 34px;
    border: 3px solid rgba(22, 54, 92, 0.18);
    border-top-color: #16365c;
    border-radius: 50%;
    animation: rn-scroll-spin 0.9s linear infinite;
}
html[data-theme="dark"] .rn-memoriam-dialog__loading-spinner {
    border-color: rgba(255, 255, 255, 0.22);
    border-top-color: #fff;
}
.rn-memoriam-dialog__error {
    margin: 0;
    opacity: 0.7;
    font-style: italic;
}
.rn-memoriam-dialog__content p:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 479px) {
    .rn-memoriam-dialog__body {
        padding: 1.2rem 1.4rem 1.6rem;
    }
    .rn-memoriam-dialog__title {
        font-size: 1.4rem;
    }
    .rn-memoriam-dialog__image {
        max-height: 240px;
    }
}

/* ================================================================
   MEMORIAM SCROLL-TO-GRID BUTTON
   ================================================================ */
.rn-memoriam-scroll-wrap {
    padding: 1.4rem 0 2rem;
}

/* When the banner is hidden on mobile the wordmark wrapper provides no visual
   gap between the scroll button and the sort controls — add it back */
@media screen and (max-width: 767px) {
    .rn-memoriam-scroll-wrap--no-banner-gap {
        padding-bottom: 2.5rem;
    }
}

.rn-memoriam-scroll-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 30px !important;
    background: transparent;
    border: 1px solid rgba(22, 54, 92, 0.25) !important;
    color: #16365c;
    padding: 0.45em 1.1em;
    cursor: pointer;
    font-size: 0.88rem;
    opacity: 0.65;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    box-shadow: none;
    text-shadow: none;
}

.rn-memoriam-scroll-btn:hover {
    opacity: 1;
    border-color: rgba(22, 54, 92, 0.55) !important;
    text-shadow: none;
    box-shadow: none;
}

.rn-memoriam-scroll-btn svg {
    animation: rn-bounce 2s ease-in-out infinite;
}

@keyframes rn-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(3px); }
}

/* ================================================================
   MEMORIAM YEAR TIMELINE
   Fixed 1px line on the right. JS positions ticks + moves indicator.
   Shows only when sorted chronologically and grid is in view.
   ================================================================ */
.rn-memoriam-timeline {
    position: fixed;
    right: 1.4rem;
    /* Default top — pushed down a safe amount from the viewport top */
    top: 8vh;
    /* Bottom clears the scroll-to-top button (3.7rem offset + 3rem height + gap) */
    bottom: 8rem;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(22, 54, 92, 0.12) 8%,
        rgba(22, 54, 92, 0.12) 92%,
        transparent 100%);
    /* Below the fixed header (7777) and the menu overlay (7770) so the open
       burger dropdown always covers it, and the overlay dims it. */
    z-index: 7000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    overflow: visible;
}

/* When sticky header is active, push the top down past the header */
.rn-sticky-header .rn-memoriam-timeline {
    top: calc(var(--wp-admin-bar-height, 0px) + var(--rn-header-height, 80px) + 3rem);
}

/* On mobile the header-based top is too close to paragraph text;
   add extra clearance so the timeline starts well below it */
@media screen and (max-width: 767px) {
    .rn-sticky-header .rn-memoriam-timeline {
        top: calc(var(--wp-admin-bar-height, 0px) + var(--rn-header-height, 80px) + 4rem);
    }
    .rn-memoriam-timeline {
        top: max(8vh, 35vw); /* floor prevents overlap with tall mobile headers */
    }
}

.rn-memoriam-timeline.is-visible {
    opacity: 1;
}

/* Year tick marks */
.rn-memoriam-timeline__tick {
    position: absolute;
    right: -1px;
    display: flex;
    align-items: center;
    transform: translateY(-50%);
    /* clickable: jumps to the nearest row for this year */
    pointer-events: auto;
    cursor: pointer;
    padding: 7px 4px;
    margin: -7px -4px;
}

.rn-memoriam-timeline__tick:hover::before {
    background: rgba(22, 54, 92, 0.55);
    width: 8px;
}

.rn-memoriam-timeline__tick:hover span {
    color: rgba(22, 54, 92, 0.75);
}

.rn-memoriam-timeline__tick::before {
    content: '';
    width: 5px;
    height: 1px;
    background: rgba(22, 54, 92, 0.25);
    flex-shrink: 0;
}

.rn-memoriam-timeline__tick span {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    color: rgba(22, 54, 92, 0.4);
    white-space: nowrap;
    letter-spacing: 0.02em;
    line-height: 1;
    opacity: 1;
    transition: opacity 0.15s ease;
}

/* Hide a tick's year label while the badge is showing that same year,
   so the two don't visually overlap/duplicate */
.rn-memoriam-timeline__tick--current span {
    opacity: 0;
}

/* Scrolling indicator — dot + year badge, draggable */
.rn-memoriam-timeline__indicator {
    position: absolute;
    right: -4px;
    transition: top 0.18s ease;
    transform: translateY(-50%);
    pointer-events: auto; /* override timeline's pointer-events:none */
    cursor: grab;
    /* slightly larger hit area so it's easier to grab */
    padding: 6px;
    margin: -6px;
    /* The drag is handled entirely in JS — without this, mobile browsers also
       treat it as a native scroll gesture, collapsing the URL bar and
       resizing the view so the indicator jumps away from the finger. */
    touch-action: none;
}

.rn-memoriam-timeline__indicator:active {
    cursor: grabbing;
}

.rn-memoriam-timeline__dot {
    width: 9px;
    height: 9px;
    background: #16365c;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px rgba(22, 54, 92, 0.35), 0 1px 6px rgba(0,0,0,0.15);
}

.rn-memoriam-timeline__badge {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 1rem;
    font-weight: 700;
    color: #16365c;
    background: rgba(255, 255, 255, 0.94);
    padding: 4px 11px;
    border-radius: 20px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.1);
    white-space: nowrap;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(22, 54, 92, 0.1);
    transition: opacity 0.2s ease;
}

@media screen and (max-width: 900px) {
    .rn-memoriam-timeline {
        right: 0.6rem;
    }
    .rn-memoriam-timeline__tick span {
        font-size: 0.6rem; /* slightly smaller on narrow screens but still visible */
    }
    .rn-memoriam-timeline__badge {
        font-size: 0.85rem;
        padding: 3px 9px;
    }
}

@media screen and (max-width: 600px) {
    .rn-memoriam-timeline {
        display: none;
    }
}

.rn-memoriam-wordmark-wrap--hide {
    display: none !important;
}

@media screen and (max-width: 767px) {
    .rn-memoriam-wordmark-wrap--hide-mobile {
        display: none !important;
    }
}

/* Left-side variant */
.rn-memoriam-timeline--left {
    right: auto;
    left: 1.4rem;
}
.rn-sticky-header .rn-memoriam-timeline--left {
    right: auto;
    left: 1.4rem;
}
.rn-memoriam-timeline--left .rn-memoriam-timeline__tick {
    right: auto;
    left: -1px;
    flex-direction: row-reverse;
}
.rn-memoriam-timeline--left .rn-memoriam-timeline__tick::before {
    order: 2;
}
.rn-memoriam-timeline--left .rn-memoriam-timeline__tick span {
    position: static;
    transform: none;
    order: 1;
    margin-right: 5px;
    right: auto;
}
.rn-memoriam-timeline--left .rn-memoriam-timeline__indicator {
    right: auto;
    left: -4px;
}
.rn-memoriam-timeline--left .rn-memoriam-timeline__badge {
    right: auto;
    left: 16px;
}
@media screen and (max-width: 900px) {
    .rn-memoriam-timeline--left {
        left: 0.6rem;
    }
}

/* ================================================================
   WAVE REVEAL ANIMATION
   ::before starts as a solid cover — same colour as each block's own
   resting background (white in light mode, navy in dark mode) — hiding
   each photo completely. It fades out in a left→right wave driven by
   --tile-reveal-delay (set from getBoundingClientRect in JS), revealing
   each photo with its normal ::after overlay still intact.
   animation-fill-mode:both keeps ::before solid during its delay window
   and fully transparent once done.
   ================================================================ */
@keyframes rn-tile-fadein {
    from { opacity: 1; }   /* solid cover — photo hidden */
    to   { opacity: 0; }   /* removed — photo + overlay visible */
}

/* Cover always exists for ripple elements — no flash before animation starts.
   Solid colour matching each block's own resting background (and the tile
   placeholder background below) so an unfilled/uncovered edge of the grid
   is indistinguishable from a covered tile — no "strip" of a different
   colour while the grid is still being laid out. */
.rn-memoriam-cover--ripple .rn-memoriam-cover__photo-tile::before,
.rn-memoriam-wordmark-wrap--ripple .rn-memoriam-wordmark__photo-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #fff;
    pointer-events: none;
    opacity: 1; /* solid until animation plays */
}

html[data-theme="dark"] .rn-memoriam-cover--ripple .rn-memoriam-cover__photo-tile::before,
html[data-theme="dark"] .rn-memoriam-wordmark-wrap--ripple .rn-memoriam-wordmark__photo-tile::before {
    background: #16365c;
}

/* While animating: fade every tile's cover in a left-to-right wave, on a
   fixed timeline driven by --tile-reveal-delay — independent of whether
   that tile's photo has arrived yet. Tying this to is-photo-loaded (as
   before) meant the wave rarely ran: photos mostly finish loading only
   once the whole sweep is done, so nearly every tile missed its wave
   slot and ended up fading together in the rn-ripple-done rule below —
   the "flash" the wave was supposed to avoid. Tiles whose photo hasn't
   arrived yet just reveal their (same-colour) placeholder underneath,
   then the photo itself fades in via the background-color transition
   below once it loads. */
.rn-memoriam-cover--ripple.rn-ripple-active .rn-memoriam-cover__photo-tile::before,
.rn-memoriam-wordmark-wrap--ripple.rn-ripple-active .rn-memoriam-wordmark__photo-tile::before {
    animation: rn-tile-fadein var(--ripple-dur, 0.4s) ease-out both;
    animation-delay: var(--tile-reveal-delay, 0s);
}

/* After the sweep: make sure every cover is gone, fading any stragglers
   (tiles whose reveal animation above hadn't started/finished yet). */
.rn-memoriam-cover--ripple.rn-ripple-done .rn-memoriam-cover__photo-tile::before,
.rn-memoriam-wordmark-wrap--ripple.rn-ripple-done .rn-memoriam-wordmark__photo-tile::before {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* While the load animation is sweeping across (any style — shimmer, pixel,
   name-wave), tiles are inert: no click-through to memoriam pages, no hover
   reveal, no twinkle-exclusion churn from the cursor. pointer-events:none
   blocks both the <a> navigation AND the :hover rules in one stroke — JS
   removes the class the moment the reveal finishes (see initRipple). */
.rn-tiles-loading .rn-memoriam-cover__photo-tile,
.rn-tiles-loading .rn-memoriam-wordmark__photo-tile {
    pointer-events: none;
}

/* ================================================================
   MEMORIAM COVER BLOCK
   --rn-cover-overlay CSS variable set inline by PHP render callback
   ================================================================ */
.rn-memoriam-cover {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Only visible behind the photo grid (no-photo fallback / first paint) —
       light mode reads white like the rest of the block, dark mode stays navy */
    background: #fff;
    border-top: 3px solid #16365c;
    border-bottom: 3px solid #16365c;
}

html[data-theme="dark"] .rn-memoriam-cover {
    background: #16365c;
}

/* Full-bleed alignment — same technique as the wordmark wrapper */
.rn-memoriam-cover.alignfull {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
}

.rn-memoriam-cover.alignwide {
    width: calc(100vw - 80px);
    margin-left: calc(-50vw + 50% + 40px);
    margin-right: calc(-50vw + 50% + 40px);
    max-width: calc(100vw - 80px);
}

/* Photo tile grid */
.rn-memoriam-cover__photos {
    position: absolute;
    inset: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: hidden;
}

/* Each tile — JS sets exact width/height; CSS only provides non-size props.
   70px is a pre-JS fallback so the block doesn't look empty on first paint. */
.rn-memoriam-cover__photo-tile {
    display: block;
    width: 70px;
    height: 70px;
    background-size: cover;
    background-position: center 20%;
    background-color: #fff;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative;
    z-index: 0;
    transition: z-index 0s, background-color 0.6s ease;
    text-decoration: none;
}

html[data-theme="dark"] .rn-memoriam-cover__photo-tile {
    background-color: #16365c;
}

/* JS fires every tile's photo request at once (see rnLoadPhotoTiles in
   rn.js) and adds this class as each one arrives — the placeholder colour
   fades out as the image fades in. A quick brightness sweep masks the
   otherwise-instant background-image swap, making the reveal feel like a
   soft fade rather than a sudden pop, even with ~200 tiles landing in
   close succession. */
.rn-memoriam-cover__photo-tile.is-photo-loaded {
    background-color: transparent;
    animation: rn-photo-reveal 0.4s ease-out;
}

@keyframes rn-photo-reveal {
    from { filter: brightness(1.6) saturate(0.7); }
    to   { filter: brightness(1) saturate(1); }
}

.rn-memoriam-cover__photo-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, var(--rn-cover-overlay, 0.60));
    transition: background 0.25s ease, box-shadow 0.25s ease;
    z-index: 2;
}

/* Name watermark — sits ABOVE the overlay so it always reads clearly,
   in the same colour as the block's own content (dark blue / white) */
.rn-memoriam-cover__tile-name {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px;
    /* Pre-JS fallback only — initMemoriamCoverBlock() measures each name and
       sets an inline font-size so it fills its tile as much as possible
       without overflowing (different names end up at different sizes). */
    font-size: calc(var(--rn-tile-size, 70px) * 0.16);
    font-weight: 700;
    color: #16365c;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);
    line-height: 1.08;
    /* Wrap whole words only — never split a name mid-letter */
    word-break: keep-all;
    overflow-wrap: normal;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    pointer-events: none;
    overflow: hidden;
}

html[data-theme="dark"] .rn-memoriam-cover__tile-name {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* Names stay hidden while a tile's photo is loading — no placeholder
   sequencing, so there's nothing to animate while the grid fills in. Once
   loaded, names go back to behaving however the block is configured
   (hidden, watermark, flash, etc.), with a gentle fade either way. */
.rn-memoriam-cover__photo-tile .rn-memoriam-cover__tile-name {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.rn-memoriam-cover:not(.rn-memoriam-cover--name-flash):not(.rn-memoriam-cover--show-names) .rn-memoriam-cover__photo-tile.is-photo-loaded .rn-memoriam-cover__tile-name {
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* "Show names" variant — names stay visible permanently once their photo
   has loaded (the base rule above hides names until then). */
.rn-memoriam-cover--show-names .rn-memoriam-cover__photo-tile.is-photo-loaded .rn-memoriam-cover__tile-name {
    opacity: 1;
    transition: opacity 0.6s ease;
}

/* Water ripple names — names stay visible at a soft resting opacity, then
   randomly dip and swell like ripples across water. No overlay flash: the
   photo grid stays calm; only the watermark opacity moves. */
.rn-memoriam-cover--name-water .rn-memoriam-cover__photo-tile.is-photo-loaded .rn-memoriam-cover__tile-name {
    opacity: 0.62;
    transition: opacity 0.8s ease;
}
.rn-memoriam-cover--name-water .rn-memoriam-cover__photo-tile:hover .rn-memoriam-cover__tile-name {
    opacity: 1;
    animation: none;
}
.rn-memoriam-cover--name-water .rn-memoriam-cover__photo-tile.is-rippling .rn-memoriam-cover__tile-name {
    animation: rn-name-water-ripple ease-in-out;
    animation-duration: var(--rn-water-dur, 2.8s);
}
@keyframes rn-name-water-ripple {
    0%   { opacity: 0.62; }
    22%  { opacity: 0.12; }
    48%  { opacity: 1; }
    72%  { opacity: 0.35; }
    100% { opacity: 0.62; }
}
@media (prefers-reduced-motion: reduce) {
    .rn-memoriam-cover--name-water .rn-memoriam-cover__photo-tile.is-rippling .rn-memoriam-cover__tile-name {
        animation: none;
    }
}

/* Twinkling name flash — JS toggles .is-flashing on the TILE itself (not the
   name span), so --rn-twinkle-dur cascades to both the name AND its ::after
   overlay and they animate in sync, off the same per-tile clock: name fades
   in then out, then that tile's own overlay flashes fully solid for a beat
   of maximum contrast, before both settle back to normal. Several tiles can
   be mid-twinkle at once — like a sky of stars, not a single spotlight. */
.rn-memoriam-cover--name-flash .rn-memoriam-cover__tile-name {
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* Hovering a tile reveals its name over the white-out (or navy-darken in
   dark mode), independent of the random twinkle — so you can read any
   name on demand, not just the ones currently flashing. */
.rn-memoriam-cover--name-flash .rn-memoriam-cover__photo-tile:hover .rn-memoriam-cover__tile-name {
    opacity: 1;
}

.rn-memoriam-cover--name-flash .rn-memoriam-cover__photo-tile.is-flashing .rn-memoriam-cover__tile-name {
    animation: rn-name-twinkle ease-in-out;
    animation-duration: var(--rn-twinkle-dur, 2s);
}

/* The name is the star of the show — it zooms in with a gentle overshoot
   (scales past 100% then settles), holds for a long readable beat, then
   eases back out as it fades, growing slightly as it dissolves. */
@keyframes rn-name-twinkle {
    0%   { opacity: 0; transform: scale(0.88); }
    16%  { opacity: 1; transform: scale(1.1); }
    28%  { opacity: 1; transform: scale(1); }
    68%  { opacity: 1; transform: scale(1); }
    88%  { opacity: 0; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.1); }
}

.rn-memoriam-cover--name-flash .rn-memoriam-cover__photo-tile.is-flashing::after {
    animation: rn-tile-flash-light ease-in-out;
    animation-duration: var(--rn-twinkle-dur, 2s);
}

html[data-theme="dark"] .rn-memoriam-cover--name-flash .rn-memoriam-cover__photo-tile.is-flashing::after {
    animation-name: rn-tile-flash-dark;
}

/* Overlay eases up to fully solid as the name zooms/fades in — maximum
   contrast for its long readable hold — then, once it's gone, eases down
   to a soft low (never bare-transparent — the tile should still feel
   "covered", just clear enough to enjoy the photo) before easing back to
   normal. Generous, overlapping percentage spans keep every transition
   gradual rather than snapping between states. Each tile runs its own
   clock, so several can be at different stages of this sequence at once. */
@keyframes rn-tile-flash-light {
    0%       { background: rgba(255, 255, 255, var(--rn-cover-overlay, 0.6)); }
    30%, 66% { background: #fff; }
    90%      { background: rgba(255, 255, 255, 0.3); }
    100%     { background: rgba(255, 255, 255, var(--rn-cover-overlay, 0.6)); }
}

@keyframes rn-tile-flash-dark {
    0%       { background: rgba(22, 54, 92, var(--rn-cover-overlay, 0.6)); }
    30%, 66% { background: #16365c; }
    90%      { background: rgba(22, 54, 92, 0.3); }
    100%     { background: rgba(22, 54, 92, var(--rn-cover-overlay, 0.6)); }
}

/* "Name wave" load animation — a calmer, single-pass cousin of the twinkle
   above. JS adds .rn-name-wave-tile to each named tile and sets two custom
   properties: --name-wave-delay (that tile's photo-reveal delay plus a
   short lag, so the flash visibly "chases" the reveal wave) and
   --wave-flash-dur (one shared duration for the whole name+dip sequence).
   animation-fill-mode "both" holds each tile at its 0% state until its
   delay elapses, then at its end state once done; JS removes the class
   when the whole cascade finishes so :hover can take back over cleanly.
   No scale-overshoot "zoom" here — just a smooth fade, because a single
   sweeping wave reads as fussier than scattered twinkling stars if it
   bounces the same way. */
.rn-name-wave-tile .rn-memoriam-cover__tile-name {
    animation: rn-name-wave-flash var(--wave-flash-dur, 0.85s) ease-in-out both;
    animation-delay: var(--name-wave-delay, 0s);
}

.rn-name-wave-tile::after {
    animation: rn-tile-wave-dip-light var(--wave-flash-dur, 0.85s) ease-in-out both;
    animation-delay: var(--name-wave-delay, 0s);
}

html[data-theme="dark"] .rn-name-wave-tile::after {
    animation-name: rn-tile-wave-dip-dark;
}

/* Percentages below are scaled for the new ~3s --wave-flash-dur (see JS
   FLASH_DUR) so the name reveal/hold/fade-out still plays out over roughly
   its original ~0.85s — only the final "dip back to normal" stretches out
   over the remaining ~2.3s. */
@keyframes rn-name-wave-flash {
    0%   { opacity: 0; transform: scale(0.96); }
    8%   { opacity: 1; transform: scale(1); }
    16%  { opacity: 1; transform: scale(1); }
    23%  { opacity: 0; transform: scale(1.02); }
    100% { opacity: 0; transform: scale(1.02); }
}

/* Overlay holds fully solid while the name is visible (matching its fade
   in/hold above), then — only once the name has actually faded out at
   ~23% — dips so the photo reads clearly, before slowly easing back to
   its resting opacity over the remaining ~2.3s. Sequenced to FOLLOW the
   name-flash, not run alongside it, so the two read as one continuous
   "reveal → flash → dip → slow fade back" beat per tile rather than a
   busy blur of simultaneous motion. */
@keyframes rn-tile-wave-dip-light {
    0%, 16%  { background: rgba(255, 255, 255, var(--rn-cover-overlay, 0.6)); }
    23%      { background: rgba(255, 255, 255, 0.2); }
    100%     { background: rgba(255, 255, 255, var(--rn-cover-overlay, 0.6)); }
}

@keyframes rn-tile-wave-dip-dark {
    0%, 16%  { background: rgba(22, 54, 92, var(--rn-cover-overlay, 0.6)); }
    23%      { background: rgba(22, 54, 92, 0.2); }
    100%     { background: rgba(22, 54, 92, var(--rn-cover-overlay, 0.6)); }
}

/* z-index: 3 ensures hovered tile is above its neighbours AND above its own
   ::after (z-index: 2), so the hover state reliably fires and renders. */
.rn-memoriam-cover__photo-tile:hover {
    z-index: 3;
}

/* Light mode: hovering whites the photo out via its overlay so the
   (dark-blue) name reads clearly against a near-solid white tile. */
.rn-memoriam-cover__photo-tile:hover::after {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

/* Dark mode: same idea, navy-tinted — hovering pushes the overlay toward
   near-solid navy (not a thin tint) so the photo "navies out" and the
   white name reads clearly, matching the light-mode white-out treatment. */
html[data-theme="dark"] .rn-memoriam-cover__photo-tile:hover::after {
    background: rgba(22, 54, 92, 0.92);
}

/* Hover "outro" — JS adds .is-unhovering on mouse-leave (and clears it again
   if you re-hover mid-animation, or once it finishes). The reveal on hover-IN
   stays the instant opacity flip above (quick, on-demand reading); leaving
   plays a quick one-shot wind-down on just the name — a brief expand-and-
   dissolve, like a twinkle's ending — before it settles back to resting. */
.rn-memoriam-cover--name-flash .rn-memoriam-cover__photo-tile.is-unhovering .rn-memoriam-cover__tile-name {
    animation: rn-name-hover-out 0.4s ease-out both;
}

@keyframes rn-name-hover-out {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.08); }
}

/* Content overlay — dark blue text/buttons read better against the
   now white-tinted tile overlay (matches the REMIGRATION banner look).
   pointer-events: none lets the photo tiles beneath stay hoverable/clickable
   right up to the text — only the buttons re-enable interaction. */
.rn-memoriam-cover__content {
    position: relative;
    /* Above every photo-tile state, including :hover (z-index: 3) — a tile
       sitting beneath the content area must never visually pop on top of
       it (and its buttons) just because the cursor is over it. */
    z-index: 4;
    width: 100%;
    max-width: 860px;
    padding: 3rem 2rem;
    text-align: center;
    color: #16365c;
    pointer-events: none;
}

.rn-memoriam-cover__content .wp-block-buttons,
.rn-memoriam-cover__content .wp-block-button,
.rn-memoriam-cover__content .wp-block-button__link {
    pointer-events: auto;
}

.rn-memoriam-cover__content h1,
.rn-memoriam-cover__content h2,
.rn-memoriam-cover__content h3,
.rn-memoriam-cover__content h4,
.rn-memoriam-cover__content p,
.rn-memoriam-cover__content .wp-block-heading {
    color: #16365c !important;
}

.rn-memoriam-cover__content .wp-block-buttons {
    justify-content: center;
}

.rn-memoriam-cover__content .wp-block-button__link {
    color: #16365c !important;
    border-color: #16365c !important;
}

/* Dark mode keeps the original light text/buttons — the navy overlay
   above (now using --rn-cover-overlay) provides the contrast instead */
html[data-theme="dark"] .rn-memoriam-cover__content,
html[data-theme="dark"] .rn-memoriam-cover__content h1,
html[data-theme="dark"] .rn-memoriam-cover__content h2,
html[data-theme="dark"] .rn-memoriam-cover__content h3,
html[data-theme="dark"] .rn-memoriam-cover__content h4,
html[data-theme="dark"] .rn-memoriam-cover__content p,
html[data-theme="dark"] .rn-memoriam-cover__content .wp-block-heading {
    color: #fff !important;
}

html[data-theme="dark"] .rn-memoriam-cover__content .wp-block-button__link {
    color: #fff !important;
    border-color: #fff !important;
}

@media screen and (max-width: 767px) {
    .rn-memoriam-cover__content {
        padding: 2rem 1.4rem;
    }
    .rn-memoriam-cover.alignwide {
        width: calc(100vw - 40px);
        margin-left: calc(-50vw + 50% + 20px);
        margin-right: calc(-50vw + 50% + 20px);
        max-width: calc(100vw - 40px);
    }
}

/* ----------------------------------------------------------------
   Loading wheel → scroll-down button
   A spinner sits fixed to the bottom of the block frame while the
   photo tiles load. Once they've all settled, JS adds
   .rn-memoriam-cover--photos-ready and the spinner morphs into a
   bouncing "scroll down" arrow that scrolls to the next section.
   ---------------------------------------------------------------- */
.rn-memoriam-cover__scroll-indicator {
    position: absolute;
    /* left: 50%; CENTERS IT */
    right: 3rem;
    bottom: 3.7rem;
    transform: translateX(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(22, 54, 92, 0.54);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background 0.2s ease;
}
@media screen and (max-width: 767px) {
    .rn-memoriam-cover__scroll-indicator {
        right: 1.4rem;
        bottom: 1.4rem;
    }
}

.rn-memoriam-cover__scroll-indicator:hover {
    background: rgba(255, 255, 255, 0.26);
    border: 1px solid #16365c;
}

html[data-theme="dark"] .rn-memoriam-cover__scroll-indicator {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.54);
}

html[data-theme="dark"] .rn-memoriam-cover__scroll-indicator:hover {
    background: #2b5b81;
    border: 1px solid #fff;
}

.rn-memoriam-cover__spinner {
    position: absolute;
    inset: 7px;
    border: 3px solid rgba(22, 54, 92, 0.18);
    border-top-color: #16365c;
    border-radius: 50%;
    animation: rn-scroll-spin 0.9s linear infinite;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

html[data-theme="dark"] .rn-memoriam-cover__spinner {
    border-color: rgba(255, 255, 255, 0.22);
    border-top-color: #fff;
}

.rn-memoriam-cover__scroll-arrow {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.rn-memoriam-cover__scroll-arrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #16365c;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html[data-theme="dark"] .rn-memoriam-cover__scroll-arrow svg {
    stroke: #fff;
}

@keyframes rn-scroll-spin {
    to { transform: rotate(360deg); }
}

/* Once all tiles have settled (loaded or failed), morph spinner -> arrow */
.rn-memoriam-cover--photos-ready .rn-memoriam-cover__spinner {
    opacity: 0;
    transform: scale(0.4) rotate(180deg);
    animation: none;
}

.rn-memoriam-cover--photos-ready .rn-memoriam-cover__scroll-arrow {
    opacity: 1;
    transform: scale(1);
    animation: rn-scroll-bounce 1.6s ease-in-out infinite;
}

@keyframes rn-scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

/* ================================================================
   MEMORIAM SINGLE POST — polaroid photo + content column layout
   ================================================================ */
.rn-memoriam-single {
    margin: 0;
    padding: 0;
}

/* Two-column layout: polaroid left, content right */
.rn-memoriam-single__layout {
    display: flex;
    gap: 3.5rem;
    align-items: flex-start;
    max-width: 900px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
}

/* ---- Polaroid photo ---- */
.rn-memoriam-single__photo-col {
    flex-shrink: 0;
    width: 240px;
}

.rn-memoriam-single__polaroid {
    background: linear-gradient(160deg, rgba(255,255,255,0.64) 0%, rgba(255,255,255,0.42) 100%);
    padding: 10px 10px 38px; /* wider bottom border = polaroid effect */
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.18),
        0 1px 4px  rgba(0, 0, 0, 0.08);
    transform: rotate(-1.5deg);
    margin: 0;
    display: block;
}

.rn-memoriam-single__frame {
    position: relative; /* anchors the shimmer overlay (see polaroid-img-wrap::after) */
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #16365c;
    display: block;
}

.rn-memoriam-single__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
}

.rn-memoriam-single__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
}

.rn-memoriam-single__placeholder span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

/* ---- Content column ---- */
.rn-memoriam-single__content-col {
    flex: 1;
    min-width: 0;
    padding: 0;
}

.rn-memoriam-single__name {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.03em;
    margin: 0 0 0.5rem;
    color: #16365c;
    padding: 0;
}

.rn-memoriam-single__years {
    font-size: 1.05rem;
    color: #16365c;
    opacity: 0.7;
    margin: 0 0 0.5rem;
    letter-spacing: 0.05em;
}

.rn-memoriam-single__location {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: #16365c;
    opacity: 0.7;
    margin: 0 0 1.4rem;
    font-style: italic;
}

.rn-memoriam-single__location svg {
    flex-shrink: 0;
    fill: currentColor;
}

.rn-memoriam-single__text {
    font-size: 0.95rem;
    line-height: 1.65;
}

.rn-memoriam-single__back {
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(22, 54, 92, 0.1);
}

.rn-memoriam-single__back a {
    color: #16365c;
    font-size: 0.85rem;
    opacity: 0.55;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.rn-memoriam-single__back a:hover {
    opacity: 1;
}

/* ---- Share bar (outside the content column, above prev/next nav) ---- */
.rn-memoriam-single__share {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}

.rn-memoriam-single__share .rn-share-bar {
    padding-bottom: 1.4rem;
}

/* ---- Prev / Next navigation ---- */
.rn-memoriam-single__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(22, 54, 92, 0.1);
}

.rn-memoriam-single__nav-link {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.4rem 2rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease;
    border-right: 1px solid rgba(22, 54, 92, 0.08);
}

.rn-memoriam-single__nav-link:last-child {
    border-right: none;
}

.rn-memoriam-single__nav-link:hover {
    background: rgba(22, 54, 92, 0.03);
}

.rn-memoriam-single__nav-link--next {
    justify-content: flex-end;
    text-align: right;
}

.rn-memoriam-single__nav-thumb {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background-size: cover;
    background-position: center 20%;
    opacity: 0.85;
    border: 2px solid rgba(22, 54, 92, 0.15);
}

.rn-memoriam-single__nav-label,
.rn-memoriam-single__nav-name {
    display: block;
}

.rn-memoriam-single__nav-label {
    font-size: 0.72rem;
    opacity: 0.45;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.2rem;
}

.rn-memoriam-single__nav-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #16365c;
    line-height: 1.2;
}

@media screen and (max-width: 767px) {
    .rn-memoriam-single__layout {
        flex-direction: column;
        align-items: center;
        /* No side padding — Storefront's .col-full gutter already provides
           one; doubling it squeezed the content and forced the prev/next
           nav links to stack. */
        padding: 1.4rem 0 0;
        gap: 1.6rem;
    }
    .rn-memoriam-single__photo-col {
        width: 200px;
    }
    .rn-memoriam-single__content-col {
        width: 100%;
        padding-bottom: 1.4rem;
    }
    .rn-memoriam-single__name {
        font-size: 1.8rem;
    }
    /* Prev / next stay side by side on one line — tighter padding, smaller
       type and thumbs so both links fit a narrow viewport. */
    .rn-memoriam-single__nav-link {
        padding: 1rem 0.8rem;
        gap: 0.6rem;
    }
    .rn-memoriam-single__nav-thumb {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
    .rn-memoriam-single__nav-label {
        font-size: 0.66rem;
    }
    .rn-memoriam-single__nav-name {
        font-size: 0.85rem;
    }
}

/* ================================================================
   PERPETRATOR PHOTO SECTION
   Used in both the memoriam profile dialog and the single post page.
   Always rendered conditionally — only when a perpetrator photo has
   been attached to that memoriam post. Kept visually secondary to the
   victim (smaller, desaturated, separated by a divider) so the victim
   remains the unambiguous focus of each profile.
   ================================================================ */

/* <details> element — the collapsible wrapper */
details.rn-memoriam-perp {
    margin-top: 1.6rem;
    border-top: 1px solid rgba(22, 54, 92, 0.12);
}

/* <summary> row — label + chevron side by side */
.rn-memoriam-perp__summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0 0.5rem;
    cursor: pointer;
    list-style: none; /* hide default triangle in Firefox */
    user-select: none;
    -webkit-user-select: none;
}
/* Hide default marker in Chrome / Safari */
.rn-memoriam-perp__summary::-webkit-details-marker { display: none; }

/* All-caps label: "PERPETRATOR" */
.rn-memoriam-perp__label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(22, 54, 92, 0.45);
    transition: color 0.2s ease;
}

/* Chevron — rotates when details is open */
.rn-memoriam-perp__chevron {
    flex-shrink: 0;
    color: rgba(22, 54, 92, 0.35);
    transition: transform 0.2s ease, color 0.2s ease;
}
details.rn-memoriam-perp[open] .rn-memoriam-perp__chevron {
    transform: rotate(180deg);
}

/* Hover feedback on the perpetrators toggle */
.rn-memoriam-perp__summary:hover .rn-memoriam-perp__label,
.rn-memoriam-perp__summary:hover .rn-memoriam-perp__chevron {
    color: rgba(22, 54, 92, 0.8);
}

/* Revealed content area */
.rn-memoriam-perp__body {
    padding-bottom: 1rem;
}

/* Figure wrapping the photo + caption */
.rn-memoriam-perp__figure {
    margin: 0;
    display: inline-block;
}

/* The photo itself — smaller than the victim image; partially
   desaturated so it reads as clearly secondary */
.rn-memoriam-perp__img {
    display: block;
    width: 90px;
    height: 110px;
    object-fit: cover;
    object-position: center top;
    border-radius: 3px;
    filter: grayscale(35%);
}

/* Name caption below the photo */
.rn-memoriam-perp__caption {
    display: block;
    font-size: 0.72rem;
    font-style: italic;
    color: rgba(22, 54, 92, 0.55);
    margin-top: 0.35rem;
    max-width: 90px;
    line-height: 1.3;
    word-break: break-word;
}

/* Single post variant — now lives in the content column */
.rn-memoriam-single__perp.rn-memoriam-perp {
    margin-top: 0;
    margin-bottom: 1.4rem;
}

/* Multiple perpetrators — full width, clears text so nothing wraps around it */
details.rn-memoriam-perp--multi {
    float: none;
    clear: both;
    max-width: none;
    width: 100%;
    margin: 0.8rem 0 0;
}

/* Grid of figures inside the multi-perp body */
.rn-memoriam-perp__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding-top: 0.25rem;
}

/* Dropdown <details> when floated right in the polaroid body-col — applies
   to single AND multiple perpetrators so they share the same position */
.rn-memoriam-dialog__polaroid-body-col details.rn-memoriam-perp {
    float: right;
    clear: right;
    margin: -0.8rem 0 0.6rem 1.2rem;
    border-top: none;
    text-align: center;
    max-width: 100px;
}
.rn-memoriam-dialog__polaroid-body-col details.rn-memoriam-perp .rn-memoriam-perp__summary {
    padding-top: 0;
    justify-content: center;
    gap: 0.3rem;
}

/* Multiple perpetrators in the dialog: stack the photos in a column on
   desktop so the box stays the same narrow width as a single perpetrator */
.rn-memoriam-dialog__polaroid-body-col .rn-memoriam-perp__grid {
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

/* On small screens the floated column gets too cramped for multiple
   perpetrators — unfloat and lay the photos out in a row/grid instead */
@media screen and (max-width: 479px) {
    .rn-memoriam-dialog__polaroid-body-col details.rn-memoriam-perp--multi {
        float: none;
        clear: both;
        max-width: none;
        width: 100%;
        margin: 0.8rem 0 0;
    }
    .rn-memoriam-dialog__polaroid-body-col .rn-memoriam-perp__grid {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Inline name-links injected into content text */
a.rn-perp-name-link {
    color: inherit;
    font-weight: 600;
    cursor: pointer;
}
a.rn-perp-name-link:hover {
    color: #16365c;
}
a.rn-perp-name-link:focus { outline: none; }

/* Inline links to other victims' memoriam entries */
a.rn-victim-name-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(22, 54, 92, 0.35);
}
a.rn-victim-name-link:hover,
a.rn-victim-name-link:focus {
    color: #16365c;
    text-decoration-color: currentColor;
}

/* Dark mode */
html[data-theme="dark"] details.rn-memoriam-perp {
    border-top-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .rn-memoriam-perp__label {
    color: rgba(200, 221, 233, 0.4);
}
html[data-theme="dark"] .rn-memoriam-perp__chevron {
    color: rgba(200, 221, 233, 0.3);
}
html[data-theme="dark"] .rn-memoriam-perp__caption {
    color: rgba(200, 221, 233, 0.5);
}
html[data-theme="dark"] .rn-memoriam-perp__summary:hover .rn-memoriam-perp__label,
html[data-theme="dark"] .rn-memoriam-perp__summary:hover .rn-memoriam-perp__chevron {
    color: rgba(200, 221, 233, 0.85);
}
html[data-theme="dark"] a.rn-perp-name-link:hover {
    color: #c8dde9;
}
html[data-theme="dark"] a.rn-victim-name-link {
    text-decoration-color: rgba(200, 221, 233, 0.35);
}
html[data-theme="dark"] a.rn-victim-name-link:hover,
html[data-theme="dark"] a.rn-victim-name-link:focus {
    color: #c8dde9;
    text-decoration-color: currentColor;
}

/* ================================================================
   DARK MODE TOGGLE BUTTON
   ================================================================ */
.rn-theme-toggle {
    position: fixed;
    bottom: 3.7rem;
    left: 3.7rem;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: #16365c;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Hide when the site footer is visible */
.rn-theme-toggle.is-footer-visible {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}
.rn-theme-toggle:hover {
    background: #fff;
    color: #16365c;
}
.rn-theme-toggle svg {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Moon icon: visible in light mode */
.rn-theme-icon--moon { display: block; }
.rn-theme-icon--moon circle { fill: currentColor; stroke: none; }
/* Sun icon: visible in dark mode */
.rn-theme-icon--sun  { display: none; }
.rn-theme-toggle.is-dark .rn-theme-icon--moon { display: none; }
.rn-theme-toggle.is-dark .rn-theme-icon--sun  { display: block; }

html[data-theme="dark"] .rn-theme-toggle {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.5);
}
html[data-theme="dark"] .rn-theme-toggle:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

@media screen and (max-width: 767px) {
    .rn-theme-toggle {
        left: 1.4rem;
        bottom: 1.4rem; /*2.8rem*/
    }
}
@media screen and (max-width: 420px) {
    .rn-theme-toggle {
        width: 2.35rem;
        height: 2.35rem;
        left: 1rem;
        bottom: 1rem;
    }
    .rn-theme-toggle svg {
        width: 1rem;
        height: 1rem;
    }
}

/* ================================================================
   DARK MODE
   html[data-theme="dark"] is set immediately by an inline <head> script
   to avoid flash-of-wrong-theme. Falls back to prefers-color-scheme.
   Header (#masthead) and footer (.site-footer) retain their navy look.
   Content backgrounds become our navy #16365c; text becomes light.
   Light greys become navy-blue greys.
   ================================================================ */

/* --- Page canvas --- */
html[data-theme="dark"]          { background: #16365c; } /* keep the URL-bar reveal strip invisible (see html rule up top) */
html[data-theme="dark"] #page    { background: #16365c; }
html[data-theme="dark"] #content { background: #16365c; }
html[data-theme="dark"] body     { background-color: #071626; color: #c8dde9; }

/* --- Typography --- */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .alpha,
html[data-theme="dark"] .beta,
html[data-theme="dark"] .gamma,
html[data-theme="dark"] .delta { color: #ddeef8; }

html[data-theme="dark"] a          { color: rgba(255,255,255,0.7); }
html[data-theme="dark"] a:hover    { color: rgba(255,255,255,0.95); }
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] blockquote { color: #c0d6e6; }

/* --- Storefront structural elements --- */
html[data-theme="dark"] .site-header-cart .cart-contents .count, html[data-theme="dark"] .site-header-cart .cart-contents::after { color: rgba(255,255,255,0.7); }
html[data-theme="dark"] .storefront-breadcrumb a,
html[data-theme="dark"] .storefront-breadcrumb .breadcrumb { color: rgba(255,255,255,0.55); }
html[data-theme="dark"] .storefront-sticky-add-to-cart { background: #122c49; color: #c8dde9; border-color: #1e3f62 !important; }

html[data-theme="dark"] .entry-header h1,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .entry-title { color: #ddeef8; }

/* --- Secondary backgrounds (cards, widgets — content area only, not header/footer) --- */
/* html[data-theme="dark"] .site-main .widget,
html[data-theme="dark"] .widget-area .widget,
html[data-theme="dark"] .woocommerce .woocommerce-ordering select,
html[data-theme="dark"] .wc-block-components-panel,
html[data-theme="dark"] .wc-block-components-totals-wrapper { background: #122c49; border-color: #1e3f62 !important; } */

/* --- Borders and separators --- */
html[data-theme="dark"] hr,
html[data-theme="dark"] .wp-block-separator::before { background-color: #1e3f62; }
html[data-theme="dark"] .wp-block-separator::after  { background-color: #16365c; }
html[data-theme="dark"] h2 + h3,
html[data-theme="dark"] .beta + h3 { border-top-color: rgba(200,221,233,0.12); }

/* --- Inputs and forms --- */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #122c49;
    color: #c8dde9;
    border-color: #1e3f62;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #5a84a0; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus { border-color: rgba(255,255,255,0.5); outline-color: rgba(255,255,255,0.5); }
html[data-theme="dark"] label { color: rgba(255,255,255,0.6); }

/* --- Buttons — keep existing pill style but invert where needed --- */
html[data-theme="dark"] .wp-block-button__link.has-white-background-color {
    background-color: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.5) !important;
    color: #fff !important;
}
html[data-theme="dark"] .wp-block-button__link.has-white-background-color:hover {
    background-color: rgba(255,255,255,0.2) !important;
}
.hentry .entry-content .wp-block-button__link:not(.has-background) {
    border: 1px solid #FFF;
}

/* --- WooCommerce product cards --- */
html[data-theme="dark"] ul.products li.product {
    background: transparent;
}
html[data-theme="dark"] ul.products li.product .woocommerce-loop-product__title,
html[data-theme="dark"] ul.products li.product .price,
html[data-theme="dark"] .woocommerce-Price-amount { color: #c8dde9; }
html[data-theme="dark"] ul.products li.product .price ins { color: #ddeef8; }

/* --- WooCommerce cart / checkout / notices --- */
html[data-theme="dark"] .woocommerce-info,
html[data-theme="dark"] .woocommerce-message { background: #122c49; color: #c8dde9; border-color: #1e3f62 !important; }
html[data-theme="dark"] .woocommerce-error   { background: #2c1a1a; color: #f0c8c8; border-color: #5a2828 !important; }

html[data-theme="dark"] table.shop_table,
html[data-theme="dark"] .wc-block-cart-items { background: #122c49; }
html[data-theme="dark"] table.shop_table td,
html[data-theme="dark"] table.shop_table th,
html[data-theme="dark"] .wc-block-cart-items__header th { border-color: #1e3f62; color: #c8dde9; }
html[data-theme="dark"] .wc-block-cart-item__product a,
html[data-theme="dark"] .wc-block-components-product-name { color: rgba(255,255,255,0.8); }

html[data-theme="dark"] .wc-block-components-sidebar,
html[data-theme="dark"] .wc-block-cart__totals-title,
html[data-theme="dark"] .wc-block-components-totals-item__label,
html[data-theme="dark"] .wc-block-components-totals-footer-item { color: #c8dde9; }
html[data-theme="dark"] .wc-block-components-totals-item { border-color: #1e3f62; }

/* --- Memoriam grid --- */
html[data-theme="dark"] .rn-memoriam-title,
html[data-theme="dark"] .rn-memoriam-caption,
html[data-theme="dark"] .rn-memoriam-grid-location { color: #c8dde9 !important; }
html[data-theme="dark"] .rn-memoriam-image-wrapper        { background: #122c49; }
html[data-theme="dark"] .rn-memoriam-image-wrapper > span { color: rgba(200,221,233,0.55); }
/* Keep the grid photo overlay navy in dark mode — white would barely
   register against the page's own dark background, whereas navy still
   reads as a deliberate tint at the same opacity (--rn-grid-overlay). */
html[data-theme="dark"] .rn-memoriam-image-wrapper::after { background: rgba(22, 54, 92, 0.7); }

/* --- Memoriam dialog --- */
html[data-theme="dark"] .rn-memoriam-dialog {
    background: #122c49;
    box-shadow: 0 24px 64px rgba(0,0,0,0.7);
}
html[data-theme="dark"] .rn-memoriam-dialog__title,
html[data-theme="dark"] .rn-memoriam-dialog__polaroid-title { color: #ddeef8; }
html[data-theme="dark"] .rn-memoriam-dialog__years,
html[data-theme="dark"] .rn-memoriam-dialog__location { color: rgba(255,255,255,0.55); }
html[data-theme="dark"] .rn-memoriam-dialog__content { color: #c0d6e6; border-color: #1e3f62; }
html[data-theme="dark"] .rn-memoriam-dialog__badge {
    background: rgba(18,44,73,0.96);
    color: #ddeef8;
    border-color: rgba(100,160,188,0.2);
}
html[data-theme="dark"] .rn-memoriam-dialog__source a { color: rgba(255,255,255,0.7) !important; border-color: rgba(255,255,255,0.25) !important; }
html[data-theme="dark"] .rn-memoriam-dialog__edit a  { color: rgba(255,255,255,0.5); }

/* --- Memoriam single post --- */
html[data-theme="dark"] .rn-memoriam-single__content-col { color: #c0d6e6; }
html[data-theme="dark"] .rn-memoriam-single__name        { color: #ddeef8; }
html[data-theme="dark"] .rn-memoriam-single__years,
html[data-theme="dark"] .rn-memoriam-single__location    { color: rgba(255,255,255,0.55) !important; opacity: 1; }
html[data-theme="dark"] .rn-memoriam-single__text        { color: rgba(255,255,255,0.75); }
html[data-theme="dark"] .rn-memoriam-single__back a      { color: rgba(255,255,255,0.5); opacity: 1; }

/* Polaroid "paper" card — frosted glass treatment in dark mode */
html[data-theme="dark"] .rn-memoriam-dialog__polaroid-frame,
html[data-theme="dark"] .rn-memoriam-single__polaroid {
    background: linear-gradient(160deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 100%);
    box-shadow: 0 4px 20px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .rn-memoriam-single__back        { border-top-color: #1e3f62; }
html[data-theme="dark"] .rn-memoriam-single__nav         { border-top-color: #1e3f62; }
html[data-theme="dark"] .rn-memoriam-single__nav-link    { color: inherit; border-right-color: #1e3f62; }
html[data-theme="dark"] .rn-memoriam-single__nav-link:hover { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .rn-memoriam-single__nav-name    { color: #ddeef8; }
html[data-theme="dark"] .rn-memoriam-single__nav-label   { opacity: 0.5; }

/* --- Sort bar and scroll button --- */
html[data-theme="dark"] .rn-memoriam-sort-btn {
    color: #c8dde9;
    border-color: rgba(200,221,233,0.3) !important;
}
html[data-theme="dark"] .rn-memoriam-sort-btn.is-active {
    background: rgba(200,221,233,0.15);
    color: #ddeef8;
    border-color: rgba(200,221,233,0.6) !important;
}
html[data-theme="dark"] .rn-memoriam-scroll-btn {
    color: #c8dde9;
    border-color: rgba(200,221,233,0.3) !important;
}

/* --- Timeline line, ticks and badge --- */
html[data-theme="dark"] .rn-memoriam-timeline {
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(255,255,255,0.18) 8%,
        rgba(255,255,255,0.18) 92%,
        transparent 100%);
}
html[data-theme="dark"] .rn-memoriam-timeline__tick::before {
    background: rgba(255,255,255,0.35);
}
html[data-theme="dark"] .rn-memoriam-timeline__tick span { color: rgba(255,255,255,0.45); }
html[data-theme="dark"] .rn-memoriam-timeline__tick:hover::before { background: rgba(255,255,255,0.7); width: 8px; }
html[data-theme="dark"] .rn-memoriam-timeline__tick:hover span    { color: rgba(255,255,255,0.85); }
html[data-theme="dark"] .rn-memoriam-timeline__dot {
    background: rgba(255,255,255,0.88);
    border-color: #16365c;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4), 0 1px 6px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .rn-memoriam-timeline__badge {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* --- Latest posts block --- */
html[data-theme="dark"] .wp-block-latest-posts__post-title { color: #ddeef8; }
html[data-theme="dark"] .wp-block-latest-posts__post-excerpt { color: rgba(255,255,255,0.6); }

/* --- Separator dark mode ---
   background:transparent on the element kills the mystery box behind the line.
   ::before  = visible white line.
   ::after   = logo, inverted to white via filter, screened so the black former-background
               becomes transparent. No isolation (that caused the compositing rectangle). */
html[data-theme="dark"] .wp-block-separator {
    background: transparent !important;
    border: none !important;
}
html[data-theme="dark"] .wp-block-separator::before {
    /* Line with a transparent gap in the centre matching the logo width —
       same visual as the white box in light mode, no compositing required */
    background: linear-gradient(
        to right,
        rgba(255,255,255,0.45) calc(50% - 1.1rem),
        transparent              calc(50% - 1.1rem),
        transparent              calc(50% + 1.1rem),
        rgba(255,255,255,0.45) calc(50% + 1.1rem)
    ) !important;
}
html[data-theme="dark"] .wp-block-separator::after {
    background-image: url('/wp-content/themes/remigration-now/assets/images/logo-separator.png') !important;
    background-color: transparent !important;
    background-size: contain !important;
    width: 2rem !important;
    height: 2rem !important;
    filter: invert(1) saturate(0) brightness(3) !important;
    mix-blend-mode: screen !important;
}

/* --- Source button --- */
html[data-theme="dark"] .rn-memoriam-source-btn {
    color: rgba(255,255,255,0.7) !important;
    border-color: rgba(255,255,255,0.25) !important;
}
html[data-theme="dark"] .rn-memoriam-source-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.5) !important;
}

/* Chevron uses stroke: currentColor (see .rn-scroll-top svg above) so it always
   matches the button's own text colour — white at rest, navy on hover —
   and stays visible against whichever background is showing. */
html[data-theme="dark"] .rn-scroll-top { background: #16365c; color: #fff; border-color: rgba(255,255,255,0.5); }
html[data-theme="dark"] .rn-scroll-top:hover { background: #2b5b81; border-color: #FFF; }

/* --- Banner dark-mode auto-switch --- */
html[data-theme="dark"] .rn-memoriam-wordmark__photos[data-photo-mode="victims"]           { display: none; }
html:not([data-theme="dark"]) .rn-memoriam-wordmark__photos[data-photo-mode="perpetrators"] { display: none; }

/* --- WooCommerce dark mode fixes --- */

/* Breadcrumb: clear every descendant's background — only the bar div keeps its colour */
html[data-theme="dark"] .storefront-breadcrumb * { background-color: transparent !important; }

/* Product tab labels (Description, Reviews…) */
.woocommerce-tabs ul.tabs li a { padding: 0.7rem; }
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {text-decoration: none;}/* TODO: ORGANISE/TIDYUP FILE */
html[data-theme="dark"] .woocommerce-tabs ul.tabs li a { color: rgba(255,255,255,0.7) !important; }
html[data-theme="dark"] .woocommerce-tabs ul.tabs li.active a { color: #fff !important; }
html[data-theme="dark"] .woocommerce-tabs ul.tabs { border-bottom-color: #1e3f62 !important; }
html[data-theme="dark"] .woocommerce-tabs ul.tabs li { background: #122c49 !important; border-color: #1e3f62 !important; }
html[data-theme="dark"] .woocommerce-tabs ul.tabs li.active { background: #16365c !important; border-bottom-color: #16365c !important; }

/* Prev/Next floating product cards */
html[data-theme="dark"] .storefront-product-pagination a {
    background: #122c49 !important;
    border-color: #1e3f62 !important;
    color: rgba(255,255,255,0.85) !important;
}
html[data-theme="dark"] .storefront-product-pagination a span { color: rgba(255,255,255,0.88) !important; }

/* Add to basket — 1px white border */
html[data-theme="dark"] .single_add_to_cart_button,
html[data-theme="dark"] ul.products .add_to_cart_button,
html[data-theme="dark"] .related .add_to_cart_button,
html[data-theme="dark"] .upsells .add_to_cart_button {
    border: 1px solid rgba(255,255,255,0.6) !important;
}

/* Cart/Checkout block buttons — 1px white border to match other buttons */
html[data-theme="dark"] .wc-block-components-button,
html[data-theme="dark"] .wc-block-cart__submit-button,
html[data-theme="dark"] .wc-block-components-checkout-place-order-button,
html[data-theme="dark"] .wc-block-components-checkout-return-to-cart-button {
    border: 1px solid rgba(255,255,255,0.6) !important;
}

/* === END ================================================================ */

/* ================================================================
   Social Share Bar
   ================================================================ */
.rn-share-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    /* padding: 1.4rem 0 0.6rem;
    margin-top: 2.4rem;
    border-top: 1px solid rgba(22,54,92,0.1); */
}
.rn-share-bar__title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(22,54,92,0.5);
    white-space: nowrap;
}
.rn-share-bar__icons {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    align-items: center;
}
.rn-share-bar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--rn-share-btn-size, 2.4rem);
    height: var(--rn-share-btn-size, 2.4rem);
    border-radius: 50%;
    background: #16365c;
    color: #fff;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    padding: 0;
    position: relative;
}
.rn-share-bar__btn svg {
    width: var(--rn-share-icon-size, 1.05rem);
    height: var(--rn-share-icon-size, 1.05rem);
    fill: #fff;
    display: block;
    pointer-events: none;
    flex-shrink: 0;
}

/* Icon size options (set via meta — Small / Medium / Large) */
.rn-share-bar--small  { --rn-share-btn-size: 2.0rem; --rn-share-icon-size: 0.85rem; }
.rn-share-bar--medium { --rn-share-btn-size: 2.4rem; --rn-share-icon-size: 1.05rem; }
.rn-share-bar--large  { --rn-share-btn-size: 3.0rem; --rn-share-icon-size: 1.35rem; }
.rn-share-bar__btn:hover,
.rn-share-bar__btn:focus-visible {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(0,0,0,0.22);
    color: #fff;
    text-decoration: none;
    outline: none;
}

/* The copy-link button is a <button>, not an <a> like its siblings — and
   unlike anchors, buttons stay :focus'd after a mouse click (not just
   keyboard nav). Storefront's global "button:focus { outline: 2px solid
   #7f54b3 }" was therefore painting a lingering purple ring around it
   alone after every click. :focus-visible above already handles the
   keyboard-nav indicator; this just silences the plain mouse-click :focus
   outline so the button rests exactly like the <a> ones do. */
.rn-share-bar__btn:focus {
    outline: none;
}
.rn-share-bar__btn--x:hover         { background: #000;    }
.rn-share-bar__btn--facebook:hover  { background: #1877F2; }
.rn-share-bar__btn--whatsapp:hover  { background: #25D366; }
.rn-share-bar__btn--telegram:hover  { background: #2AABEE; }
.rn-share-bar__btn--email:hover     { background: #555;    }
.rn-share-bar__btn--linkedin:hover  { background: #0A66C2; }
.rn-share-bar__btn--copy-link:hover { background: #16365c; }

/* "Link copied!" tooltip on the copy-link button */
.rn-share-bar__btn--copy-link::after {
    content: 'Link copied!';
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0;
    background: #333;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    text-transform: none;
}
.rn-share-bar__btn--copy-link.is-copied::after {
    opacity: 1;
}

/* Dark mode */
html[data-theme="dark"] .rn-share-bar {
    border-top-color: rgba(255,255,255,0.1);
}
html[data-theme="dark"] .rn-share-bar__title {
    color: rgba(255,255,255,0.4);
}
html[data-theme="dark"] .rn-share-bar__btn {
    background: rgba(255,255,255,0.12);
    border: none
}
html[data-theme="dark"] .rn-share-bar__btn--x:hover         { background: #1a1a1a; }
html[data-theme="dark"] .rn-share-bar__btn--facebook:hover  { background: #1877F2; }
html[data-theme="dark"] .rn-share-bar__btn--whatsapp:hover  { background: #25D366; }
html[data-theme="dark"] .rn-share-bar__btn--telegram:hover  { background: #2AABEE; }
html[data-theme="dark"] .rn-share-bar__btn--email:hover     { background: #999999; }
html[data-theme="dark"] .rn-share-bar__btn--linkedin:hover  { background: #0A66C2; }
html[data-theme="dark"] .rn-share-bar__btn--copy-link:hover { background: #777777; }

/* ================================================================
   END
   ================================================================ */

   .forminator-ui.forminator-custom-form[data-design=basic] .forminator-description {
    font-size: 0.88rem;
    opacity: 0.54;
   }

/* Textarea character-count: pin the description/counter to the field's top
   right (next to the label) instead of it stacking below the input. */
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-field {
    position: relative;
}
.forminator-ui.forminator-custom-form[data-design=basic] .forminator-label + .forminator-description {
    margin: 0 0 5px;
    position: absolute;
    right: 5px;
    top: 5px;
}

/* Dark mode — Forminator response banners (loading / success / error).
   The dark theme turns their text white while Forminator keeps its light
   pastel backgrounds, making the messages unreadable. Swap the banners to
   translucent dark-friendly tints with matching light text instead.
   !important outguns Forminator's own #forminator-module-<id> rules. */
html[data-theme="dark"] .forminator-ui .forminator-response-message {
    background: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .forminator-ui .forminator-response-message,
html[data-theme="dark"] .forminator-ui .forminator-response-message p {
    color: #c8dde9 !important;
}
html[data-theme="dark"] .forminator-ui .forminator-response-message.forminator-success {
    background: rgba(46, 204, 113, 0.14) !important;
}
html[data-theme="dark"] .forminator-ui .forminator-response-message.forminator-success,
html[data-theme="dark"] .forminator-ui .forminator-response-message.forminator-success p {
    color: #a7e6c3 !important;
}
html[data-theme="dark"] .forminator-ui .forminator-response-message.forminator-error {
    background: rgba(231, 76, 60, 0.14) !important;
}
html[data-theme="dark"] .forminator-ui .forminator-response-message.forminator-error,
html[data-theme="dark"] .forminator-ui .forminator-response-message.forminator-error p {
    color: #f3b3ac !important;
}

/* This muted blue-grey only reads well against the dark-mode navy background —
   on the light background it washed out Storefront's own link colour (#2c2d33),
   which already has perfectly good contrast there. So: leave light mode on the
   theme's default link colour, and reserve this colour for dark mode only. */
html[data-theme="dark"] .widget-area .widget a,
html[data-theme="dark"] .hentry .entry-header .posted-on a,
html[data-theme="dark"] .hentry .entry-header .post-author a,
html[data-theme="dark"] .hentry .entry-header .post-comments a,
html[data-theme="dark"] .hentry .entry-header .byline a {
    color: rgba(162, 173, 188, 0.7);
}

/* Dark mode — WooCommerce Blocks (cart/checkout) text inputs, matching
   the palette used for regular form inputs above. */
html[data-theme="dark"] .wc-block-components-form .wc-block-components-text-input input[type=email],
html[data-theme="dark"] .wc-block-components-form .wc-block-components-text-input input[type=number],
html[data-theme="dark"] .wc-block-components-form .wc-block-components-text-input input[type=password],
html[data-theme="dark"] .wc-block-components-form .wc-block-components-text-input input[type=tel],
html[data-theme="dark"] .wc-block-components-form .wc-block-components-text-input input[type=text],
html[data-theme="dark"] .wc-block-components-form .wc-block-components-text-input input[type=url],
html[data-theme="dark"] .wc-block-components-text-input input[type=email],
html[data-theme="dark"] .wc-block-components-text-input input[type=number],
html[data-theme="dark"] .wc-block-components-text-input input[type=password],
html[data-theme="dark"] .wc-block-components-text-input input[type=tel],
html[data-theme="dark"] .wc-block-components-text-input input[type=text],
html[data-theme="dark"] .wc-block-components-text-input input[type=url] {
    background-color: #122c49;
    color: #c8dde9;
    border-color: #1e3f62;
}
html[data-theme="dark"] .wc-block-components-text-input input::placeholder { color: #5a84a0; }
html[data-theme="dark"] .wc-block-components-text-input input:focus { border-color: rgba(255,255,255,0.5); outline-color: rgba(255,255,255,0.5); }
html[data-theme="dark"] .wc-block-components-text-input label { color: rgba(255,255,255,0.6); }

/* Dark mode — WooCommerce Blocks select (e.g. country/state dropdowns).
   The select's value text is unstyled (#2b2d2f) by default, so on the dark
   background it was effectively invisible — only the floating label showed,
   which read as the text sitting at the wrong vertical position. */
html[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__select {
    background-color: #122c49;
    color: #c8dde9;
    border-color: #1e3f62;
}
html[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__select:focus {
    border-color: rgba(255,255,255,0.5);
    outline-color: rgba(255,255,255,0.5);
}
html[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__container {
    background-color: #122c49;
}
html[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__label {
    color: rgba(255,255,255,0.6);
}
html[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__expand {
    fill: #c8dde9;
}

/* ================================================================
   QUANTITY DISCOUNTS — "Order discount" table on product pages
   ================================================================ */
.rn-qty-discounts {
    margin: 1.2rem 0;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(22, 54, 92, 0.15);
    border-radius: 8px;
    background: rgba(22, 54, 92, 0.03);
}

.rn-qty-discounts__title {
    margin: 0 0 0.5rem;
    font-weight: 700;
    color: #16365c;
}

.rn-qty-discounts__table {
    width: 100%;
    border-collapse: collapse;
    background: transparent !important;
}

/* Storefront's `table:not(.has-background) tbody td` gives table cells a
   solid white background — override it so the table cells stay transparent
   and the .rn-qty-discounts container's own tint shows through. */
.rn-qty-discounts__table td {
    padding: 0.25rem 0.6rem 0.25rem 0;
    font-size: 0.95rem;
    background: transparent !important;
}

.rn-qty-discounts__qty {
    font-weight: 700;
    white-space: nowrap;
}

.rn-qty-discounts__percent {
    color: #16365c;
    white-space: nowrap;
}

.rn-qty-discounts__price {
    text-align: right;
    white-space: nowrap;
    opacity: 0.75;
}

html[data-theme="dark"] .rn-qty-discounts {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .rn-qty-discounts__title,
html[data-theme="dark"] .rn-qty-discounts__percent {
    color: #c8dde9;
}

html[data-theme="dark"] .rn-qty-discounts__qty,
html[data-theme="dark"] .rn-qty-discounts__price {
    color: #e8eef4;
}

.rn-memoriam-single__layout {
    align-items: start !important;
}
/*html[data-theme="dark"] .hurrytimer-headline {
	color: #fff;
}*/

/* Countdown Timer */
.rn-countdown {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
	margin-top: 30px;
	padding-bottom: 30px;
}

.rn-countdown .unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 50px;
    border-radius: 50px;
    min-width: 120px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    text-align: center;
    background: rgba(255,255,255,0.07);
	background: linear-gradient(
  to bottom,
  rgba(255,255,255,0.10),
  rgba(255,255,255,0.04)
);
	border: 2px solid  rgba(255,255,255,0.14);
}

.rn-countdown .number {
    font-size: 100px;
    font-weight: bold;
    line-height: 1;
    /* Fixed-width, centred, tabular figures so the box doesn't shift or resize
       as the digits change each second (e.g. 1→8, or 9→10). */
    display: inline-block;
    min-width: 1.4em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.rn-countdown .label {
    margin-top: -14px;
    font-size: 14px;     
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Different colors per unit
.rn-countdown .unit:nth-child(1) { background: #e74c3c; }
.rn-countdown .unit:nth-child(2) { background: #3498db; }
.rn-countdown .unit:nth-child(3) { background: #2ecc71; }
.rn-countdown .unit:nth-child(4) { background: #f39c12; } */

/* Countdown — responsive scaling. The base sizing (100px numbers, 30/50px
   tile padding) is built for large screens; step it down so the row doesn't
   overflow or wrap awkwardly on tablets and phones. */
@media screen and (max-width: 1200px) {
    .rn-countdown { gap: 20px; }
    .rn-countdown .unit   { padding: 24px 34px; min-width: 100px; }
    .rn-countdown .number { font-size: 72px; }
}
@media screen and (max-width: 767px) {
    .rn-countdown { gap: 12px; margin-top: 10px; padding-bottom: 10px; }
    .rn-countdown .unit   { padding: 15px 17px; min-width: 72px; border-radius: 28px; }
    .rn-countdown .number { font-size: 46px; }
    .rn-countdown .label  { margin-top: -10px; font-size: 11px; letter-spacing: 1px; }
}
@media screen and (max-width: 420px) {
    .rn-countdown .unit   { padding: 14px 12px; min-width: 58px; }
    .rn-countdown .number { font-size: 34px; }
    .rn-countdown .label  { font-size: 9px; }
}

/* Editor preview — the block canvas has a light background, so give the
   translucent tiles a dark backdrop to sit on (matching the dark sections
   these countdowns are normally placed in) and keep the numbers legible. */
.rn-countdown--editor {
    background: #16365c;
    color: #fff;
    padding: 30px 20px;
    border-radius: 12px;
}

/* Countdown — block sizing & per-row layout.
   The block adds .rn-countdown--sized and sets these custom properties:
     --rn-cd-per-row / --rn-cd-per-row-mobile : units per row
     --rn-cd-scale   / --rn-cd-scale-mobile   : size multiplier (1 = base)
   A CSS grid gives exactly N columns per row (default 3 → Y/M/D then H/M/S),
   and every dimension is derived from the base sizes × the scale so the boxes
   grow/shrink proportionally. Placed after the generic responsive rules above
   so it wins for block-rendered countdowns. */
.rn-countdown.rn-countdown--sized {
    display: grid;
    grid-template-columns: repeat(var(--rn-cd-per-row, 3), auto);
    justify-content: center;
    align-items: stretch;
    gap: calc(30px * var(--rn-cd-scale, 1));
}
.rn-countdown--sized .unit {
    padding: calc(30px * var(--rn-cd-scale, 1)) calc(50px * var(--rn-cd-scale, 1));
    min-width: calc(120px * var(--rn-cd-scale, 1));
    border-radius: calc(50px * var(--rn-cd-scale, 1));
}
.rn-countdown--sized .number {
    font-size: calc(100px * var(--rn-cd-scale, 1));
}
.rn-countdown--sized .label {
    font-size: calc(14px * var(--rn-cd-scale, 1));
    margin-top: calc(-10px * var(--rn-cd-scale, 1));
}
@media screen and (max-width: 767px) {
    .rn-countdown.rn-countdown--sized {
        grid-template-columns: repeat(var(--rn-cd-per-row-mobile, 3), auto);
        gap: calc(30px * var(--rn-cd-scale-mobile, 0.55));
    }
    .rn-countdown--sized .unit {
        padding: calc(30px * var(--rn-cd-scale-mobile, 0.55)) calc(50px * var(--rn-cd-scale-mobile, 0.55));
        min-width: calc(120px * var(--rn-cd-scale-mobile, 0.55));
        border-radius: calc(50px * var(--rn-cd-scale-mobile, 0.55));
    }
    .rn-countdown--sized .number {
        font-size: calc(100px * var(--rn-cd-scale-mobile, 0.55));
    }
    .rn-countdown--sized .label {
        font-size: max(12px, calc(14px * var(--rn-cd-scale-mobile, 0.55)));
        margin-top: calc(-8px * var(--rn-cd-scale-mobile, 0.55));
    }
}

/* Countdown — wrapper holding an optional small title + the timer. */
.rn-countdown-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Hidden until rn-countdown.js fills in real values, so the whole bar
       doesn't flash "00 00 00 00" on load. */
    opacity: 0;
    transition: opacity 0.3s ease;
}
.rn-countdown-wrap.is-ready { opacity: 1; }
.rn-countdown__title {
    font-size: clamp(0.8rem, 1.4vw, 1rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 0.45rem;
    text-align: center;
}

/* Compact variant — a small single row, e.g. for a banner/header that links
   down to the full countdown. */
.rn-countdown-wrap--compact { gap: 0.3rem; }
.rn-countdown-wrap--compact .rn-countdown__title { margin-bottom: 0.3rem; }
.rn-countdown.rn-countdown--compact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.rn-countdown--compact .unit {
    padding: 6px 12px;
    min-width: 46px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.rn-countdown--compact .number { font-size: 26px; min-width: 1.4em; }
.rn-countdown--compact .label  { margin-top: -2px; font-size: 8px; letter-spacing: 1px; }
@media screen and (max-width: 767px) {
    .rn-countdown--compact .unit   { padding: 5px 9px; min-width: 40px; border-radius: 10px; }
    .rn-countdown--compact .number { font-size: 21px; }
    .rn-countdown--compact .label  { font-size: 7px; }
}

/* Countdown link — the whole compact timer is clickable when its target exists.
   rn-countdown.js adds .is-inert (and removes the href) when it doesn't. */
a.rn-countdown-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
    cursor: pointer;
}
/* No underline anywhere in the linked timer, whatever the theme does to links. */
a.rn-countdown-link,
a.rn-countdown-link:hover,
a.rn-countdown-link:focus,
a.rn-countdown-link .unit,
a.rn-countdown-link .number,
a.rn-countdown-link .label,
a.rn-countdown-link .rn-countdown__title { text-decoration: none !important; }

/* Hover: the tiles light up (instead of the whole thing nudging up). */
a.rn-countdown-link .unit {
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
a.rn-countdown-link .rn-countdown__title { transition: opacity 0.25s ease; }
a.rn-countdown-link:not(.is-inert):hover .unit,
a.rn-countdown-link:not(.is-inert):focus-visible .unit {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.42);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}
a.rn-countdown-link:not(.is-inert):hover .rn-countdown__title,
a.rn-countdown-link:not(.is-inert):focus-visible .rn-countdown__title { opacity: 1; }
a.rn-countdown-link.is-inert { cursor: default; }

/* Closeable — a × button in the corner. Needs a positioning context. */
.rn-countdown-wrap--closeable { position: relative; padding-right: 2.8rem; }
.rn-countdown__close {
    position: absolute;
    top: 50%;
    right: clamp(0.5rem, 2vw, 1.2rem);
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    /* The &times; glyph never centres optically — hide it and draw the X
       with two pseudo-element bars, which centre exactly. */
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
    cursor: pointer;
    opacity: 0.85;
    z-index: 2;
    transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.rn-countdown__close::before,
.rn-countdown__close::after {
    content: "";
    /* Storefront hides button::after globally – restore it here */
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}
.rn-countdown__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.rn-countdown__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.rn-countdown__close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Fixed announcement-bar mode — pinned below the header (declared after the
   closeable rule so its position wins when both are set). */
.rn-countdown-wrap--fixed {
    position: fixed;
    top: calc(var(--rn-header-height, 80px) + var(--wp-admin-bar-height, 0px));
    left: 0;
    right: 0;
    z-index: 100;
    margin: 0;
    padding: 0.55rem clamp(1rem, 4vw, 3rem) 0.6rem;
    background: #16365c;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
}
.rn-countdown-wrap--fixed .rn-countdown { margin: 0; padding: 0; }
/* In a bar, lay the title and timer on one row to keep it shallow. */
.rn-countdown-wrap--fixed .rn-countdown-link,
.rn-countdown-wrap--fixed.rn-countdown-wrap--compact .rn-countdown-link {
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 2vw, 1.4rem);
}
.rn-countdown-wrap--fixed .rn-countdown__title { margin: 0; }
@media screen and (max-width: 767px) {
    .rn-countdown-wrap--fixed { padding: 0.4rem 2.6rem 0.45rem 0.8rem; }
    /* Stack the title above the timer so a long title can't push the units
       onto two lines. */
    .rn-countdown-wrap--fixed .rn-countdown-link,
    .rn-countdown-wrap--fixed.rn-countdown-wrap--compact .rn-countdown-link {
        flex-direction: column;
        gap: 0.15rem;
    }
    .rn-countdown-wrap--fixed .rn-countdown__title { font-size: 0.62rem; letter-spacing: 0.14em; }
}

/* Very small screens — tighten the fixed compact bar so the units stay on
   one row rather than wrapping. Above ~300px there's room for slightly
   larger unit boxes; the tiniest sizes only kick in below that. */
@media screen and (max-width: 479px) {
    .rn-countdown-wrap--fixed { padding: 0.35rem 2.1rem 0.4rem 0.5rem; }
    .rn-countdown-wrap--fixed .rn-countdown--compact { gap: 6px; }
    .rn-countdown-wrap--fixed .rn-countdown--compact .unit { padding: 5px 8px; min-width: 40px; border-radius: 9px; }
    .rn-countdown-wrap--fixed .rn-countdown--compact .number { font-size: 20px; }
    .rn-countdown-wrap--fixed .rn-countdown--compact .label { font-size: 7px; letter-spacing: 0.5px; }
    .rn-countdown-wrap--fixed .rn-countdown__close { width: 30px; height: 30px; right: 0.35rem; }
}
@media screen and (max-width: 300px) {
    .rn-countdown-wrap--fixed .rn-countdown--compact { gap: 5px; }
    .rn-countdown-wrap--fixed .rn-countdown--compact .unit { padding: 4px 6px; min-width: 32px; border-radius: 8px; }
    .rn-countdown-wrap--fixed .rn-countdown--compact .number { font-size: 17px; }
    .rn-countdown-wrap--fixed .rn-countdown--compact .label { font-size: 6px; }
    .rn-countdown-wrap--fixed .rn-countdown__close { width: 26px; height: 26px; }
}

/* ================================================================
   404 PAGE (404.php — content editable via Customizer → "404 Page")
   ================================================================ */
.rn-404 {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    padding: 3.4rem 1.4rem 2.4rem;
}
.rn-404__code {
    font-size: clamp(5rem, 18vw, 11rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin: 0 0 0.4rem;
    color: #16365c;
    opacity: 0.12;
}
.rn-404__title {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    line-height: 1.1;
    margin: 0 0 0.8rem;
}
.rn-404__message {
    font-size: 1.05rem;
    line-height: 1.6;
    opacity: 0.8;
    margin: 0 auto 1.8rem;
    max-width: 520px;
}
.rn-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}
.rn-404__search {
    flex: 1 1 260px;
    max-width: 360px;
}
.rn-404__search form,
.rn-404__search .search-form {
    display: flex;
    gap: 0.5rem;
}
.rn-404__search .search-field {
    flex: 1;
    min-width: 0;
}
.rn-404__home {
    white-space: nowrap;
}

.rn-404__posts {
    max-width: 1180px;
    margin: 1.4rem auto 3rem;
    padding: 0 1.4rem;
}
.rn-404__posts-heading {
    text-align: center;
    font-size: 1.4rem;
    margin: 0 0 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(22, 54, 92, 0.1);
}
.rn-404__search form {
    margin-bottom: 0;
}
html[data-theme="dark"] .rn-404__code {
    color: #bcdcef;
    opacity: 0.18;
}
html[data-theme="dark"] .rn-404__posts-heading {
    border-top-color: #1e3f62;
}

/* Glightbox */
.glightbox-clean .gclose {
    opacity: 0.88;
    height: 50px;
}