/*
Theme Name: SocietyPress
Theme URI: https://getsocietypress.org
Author: Stricklin Development
Author URI: https://stricklindevelopment.com/
Description: A clean, readable theme for genealogical and historical societies.
             Designed for ease of use with large fonts, high contrast, and simple navigation.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: societypress
Tags: genealogy, historical-society, membership, one-column, two-columns, custom-logo, custom-menu
*/

/* ============================================================================
   RESET & BASE
   WHY: Start from a consistent baseline across browsers. We use a minimal
   reset instead of a heavy framework — less code, faster load times.

   All colors, fonts, sizes, and widths now reference CSS custom properties
   defined in the :root block output by functions.php. This means the entire
   site's appearance can be changed from the Design settings tab without
   touching any CSS files.
   ============================================================================ */

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

html {
    /* WHY var(--sp-font-size-base): The base font size (default 18px) is
       controlled by the Design settings. "Compact" = 16px, "Comfortable" = 18px,
       "Large" = 20px. All rem-based sizes throughout the stylesheet scale
       proportionally when this changes. */
    font-size: var(--sp-font-size-base, 18px);
    scroll-behavior: smooth;
}

body {
    /* WHY var(--sp-font-body): The body font family is selectable from the
       Design tab. Defaults to the system font stack for maximum compatibility. */
    font-family: var(--sp-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
    line-height: 1.7;
    color: #2d2d2d;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   ACCESSIBILITY — SKIP NAVIGATION
   WHY: Keyboard and screen reader users need a way to bypass the header and
   nav and jump straight to the page content. Without this, they have to Tab
   through every nav link on every page load. This is a WCAG 2.1 Level A
   requirement (Success Criterion 2.4.1 — Bypass Blocks).

   The link is visually hidden off-screen until it receives keyboard focus,
   at which point it slides into view at the top of the page.
   ============================================================================ */

.skip-to-main {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 100000;
    background: var(--sp-color-primary, #1e3a5f);
    color: #fff;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-bottom-right-radius: 4px;
}

.skip-to-main:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* ============================================================================
   TYPOGRAPHY
   WHY: Clear hierarchy helps users scan pages quickly. Generous spacing
   between elements prevents that "wall of text" feeling.

   Heading sizes use calc() with --sp-font-scale so a single "heading scale"
   control in the Design tab proportionally adjusts all heading sizes.
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
    /* WHY var(--sp-color-primary): All headings use the primary brand color.
       This creates visual consistency and reinforces the society's identity. */
    color: var(--sp-color-primary, #1e3a5f);
    /* WHY var(--sp-font-heading): Headings can use a different font family
       than body text. "inherit" means they use the body font. */
    font-family: var(--sp-font-heading, inherit);
    line-height: 1.3;
    margin-bottom: 0.5em;
}

/* WHY calc() with --sp-font-scale: Instead of making Harold set each heading
   size individually, a single scale factor adjusts all of them proportionally.
   "Small" (0.85) makes headings more subtle, "Large" (1.15) makes them bolder. */
h1 { font-size: calc(2rem * var(--sp-font-scale, 1)); }
h2 { font-size: calc(1.6rem * var(--sp-font-scale, 1)); }
h3 { font-size: calc(1.3rem * var(--sp-font-scale, 1)); }
h4 { font-size: calc(1.1rem * var(--sp-font-scale, 1)); }

p {
    margin-bottom: 1em;
}

a {
    /* WHY var(--sp-color-primary-hover) for links: Links use the hover variant
       of the primary color so they're visually distinct from headings while
       still belonging to the same color family. */
    color: var(--sp-color-primary-hover, #2c5282);
    text-decoration: underline;
}

a:hover {
    color: var(--sp-color-primary, #1e3a5f);
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================================================
   LAYOUT
   WHY: Simple, centered layout with a comfortable reading width. Content
   wider than ~75 characters per line becomes hard to read.

   --sp-content-width controls the max-width of all content containers.
   "Narrow" = 900px, "Standard" = 1100px, "Wide" = 1400px.
   ============================================================================ */

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    flex: 1;
    max-width: var(--sp-content-width, 1500px);
    margin: 0 auto;
    padding: 40px 20px;
    width: 100%;
}

/* Two-column layout for posts (content + sidebar) */
.content-area-with-sidebar {
    display: flex;
    gap: 40px;
}

.content-area-with-sidebar .main-content {
    flex: 1;
    min-width: 0; /* Prevent content from overflowing flex container */
}

.content-area-with-sidebar .widget-area {
    width: 300px;
    flex-shrink: 0;
}

/* Single-column layout for pages.
   WHY no max-width: .content-area-full is always nested inside .site-content
   (page.php, page-my-account.php, front-page.php, 404.php, and the plugin-
   rendered pages all wrap it that way), and .site-content already caps at
   --sp-content-width. Re-asserting the cap here was redundant and set a
   maintenance trap — any later attempt to make this container narrower than
   .site-content would have to fight the outer cap. */
.content-area-full {
    margin: 0 auto;
}

/* ============================================================================
   HEADER
   WHY: Simple, familiar layout — logo/title on the left, navigation on the
   right. Background color is controlled by --sp-color-header-bg so societies
   can match their brand without touching code.
   ============================================================================ */

.site-header {
    background: var(--sp-color-header-bg, #1e3a5f);
    color: var(--sp-color-header-text, #fff);
    padding: 0 20px;
    /* WHY box-shadow: the header's background pulls from Design settings.
       On dark colors, the edge between header and page is obvious. On
       light or white headers, the header bleeds into the white page body
       and the nav looks like it's floating mid-page with no container.
       A faint shadow draws a subtle separator that's visible against a
       white body but invisible against a dark one — works at every
       header color without special-casing. No layout shift (unlike a
       border-bottom, which would add a pixel). */
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* WHY max-width on the inner and not on .site-header: the header's
   background color (and the hairline shadow below it) should still
   span the full viewport so the page reads as a clean banded layout.
   But the nav, logo, and user menu inside should align with the
   content column below so the header feels like part of the page,
   not a disconnected ribbon. The inner matches --sp-content-width
   (same variable the body content uses). On narrower viewports the
   horizontal padding keeps the items from crowding the edges. */
/* WHY overflow: visible instead of hidden: The user dropdown menu renders
   absolutely positioned below the header. overflow:hidden would clip it.
   The original hidden was added to contain floats, but flexbox doesn't
   need that — all children are flex items already. */
.header-inner {
    max-width: var(--sp-content-width, 1500px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
    padding: var(--sp-header-padding, 8px) 20px;
}

@media (min-width: 1025px) {
    .header-inner {
        padding: var(--sp-header-padding, 8px) 40px;
    }
}

@media (min-width: 1400px) {
    .header-inner {
        padding: var(--sp-header-padding, 8px) 60px;
    }
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-branding a {
    color: var(--sp-color-header-text, #fff);
    text-decoration: none;
}

.site-branding a:hover {
    opacity: 0.9;
}

.custom-logo {
    max-height: 75px;
    width: auto;
}

.site-title {
    font-family: var(--sp-font-heading, 'Playfair Display', Georgia, serif);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.site-title a {
    color: var(--sp-color-header-text, #fff);
    text-decoration: none;
}

.site-description {
    font-size: 0.75rem;
    opacity: 0.8;
    margin: 0;
}

/* ============================================================================
   HEADER NAV AREA
   WHY: Wraps the primary nav and user menu together so they sit side by side
   in the header. The nav items flow left, the user menu anchors to the right.
   ============================================================================ */

/* WHY flex:1: The nav area fills all remaining space after the logo.
   Nav items sit flush left, .sp-nav-right items (Store, Contact, Join)
   push right via margin-left:auto on the first one. Search and Sign In
   follow naturally after the nav. */
.header-nav-area {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================================
   NAVIGATION
   WHY: Horizontal nav in the header is the most familiar pattern for our
   users. Large click targets (padding) make it easier for everyone.
   ============================================================================ */

/* WHY > ul (direct child only): The parent theme's nav is single-level, but
   some child themes use multi-level dropdowns. If we apply display:flex to
   ALL ul elements (.main-navigation ul), sub-menus inherit flex layout and
   their display:none / display:block toggle can conflict with the flex
   context. Scoping to > ul keeps the top-level menu horizontal without
   affecting nested sub-menu lists that child themes style independently. */
/* WHY flex:1 on nav and ul: The primary nav must stretch to fill the full
   header width so margin-left:auto on right-aligned items (Store, Contact,
   Join) can push them to the right edge. The :not(.sp-user-menu) exclusion
   is critical — the Sign In menu is also nav.main-navigation, and giving
   it flex:1 too would split the space 50/50, killing the gap. */
/* WHY display:flex here: Without it, the nav is display:block — it gets
   flex-sized by header-nav-area, but internally the ul's width:100% resolves
   against the nav's content-based width, not its flex-assigned width.
   Making the nav itself a flex container ensures the ul stretches fully,
   giving margin-left:auto on .sp-nav-right items room to push right.
   WHY desktop-only: On mobile (<= 1024px), the nav toggles between
   display:none and display:block via .sp-nav-open. This rule must not
   interfere with that toggle. */
@media (min-width: 1281px) {
    .main-navigation:not(.sp-user-menu) {
        flex: 1;
        display: flex;
        min-width: 0;
    }
}


.main-navigation > ul {
    list-style: none;
    display: flex;
    gap: 4px;
    width: 100%;
}

/* Sub-menus inside child themes need list-style reset too */
.main-navigation ul {
    list-style: none;
}

.main-navigation a {
    display: block;
    padding: 10px 18px;
    color: var(--sp-color-header-text, #fff);
    text-decoration: none;
    font-size: var(--sp-nav-font-size, 0.85rem);
    font-weight: var(--sp-nav-font-weight, 500);
    font-family: var(--sp-font-body, -apple-system, BlinkMacSystemFont, sans-serif);
    letter-spacing: 0.02em;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
}

.main-navigation a:hover,
.main-navigation .current-menu-item a {
    background: rgba(255, 255, 255, 0.12);
}

/* WHY explicit focus indicator: the browser default focus ring is a thin
   blue outline that fails WCAG 1.4.11 non-text contrast against the dark
   --sp-color-nav-bg. A white 2px outline with offset reliably stands out
   on every nav background a society might choose, and the background tint
   on focus matches the hover state so the active item still looks active
   when focused. */
.main-navigation a:focus,
.main-navigation a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    background: rgba(255, 255, 255, 0.12);
}

/* User account menu — "Charles" / "Log Out" etc. Sits alongside the main
   nav in the header, not inside it, so .main-navigation rules don't
   reach it. WHY we set both :link and :visited: the logout URL carries
   a nonce that changes every page load, so it's never "visited" in the
   browser's history; the my-account URL is stable and therefore IS. On
   a light header, the browser's default purple-ish visited color makes
   the two user-menu links look mismatched. Pinning both to the header
   text color keeps them consistent. */
.sp-user-nav-link,
.sp-user-nav-link:link,
.sp-user-nav-link:visited {
    display: inline-block;
    padding: 10px 14px;
    color: var(--sp-color-header-text, #fff);
    text-decoration: none;
    /* WHY font-family is explicit: without it, sp-user-nav-link inherits
       from an upstream rule that's serif on some themes, which makes
       "Charles" and "Log Out" look like a different typeface from the
       main nav. Pin it to the same body-font var the main nav uses. */
    font-family: var(--sp-font-body, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--sp-nav-font-size, 0.85rem);
    font-weight: var(--sp-nav-font-weight, 500);
    /* WHY line-height: 1: lets the optical center of the text sit at the
       flex-item center, so an adjacent avatar aligns to the visual
       middle of the word rather than to the line-box center (which
       includes descender space the word "Charles" doesn't use). */
    line-height: 1;
    letter-spacing: 0.02em;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
}

.sp-user-nav-link:hover,
.sp-user-nav-link:focus {
    background: rgba(128, 128, 128, 0.12);
    color: var(--sp-color-header-text, #fff);
}

.sp-user-nav-link:focus-visible {
    outline: 2px solid var(--sp-color-header-text, #fff);
    outline-offset: 2px;
}

/* Avatar-with-name variant — small round photo to the left of the
   member's name. Inherits link color/size from .sp-user-nav-link.
   !important on display because the base .sp-user-nav-link rule (which
   includes :link/:visited pseudo-classes, bumping its specificity) was
   winning the cascade and keeping display: inline-block. That stacked
   the avatar above the name instead of beside it. Forcing the flex
   layout here removes any possibility of another rule overriding it. */
.sp-user-nav-link--with-avatar {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
}

.sp-user-avatar {
    /* display: block removes the inline-baseline gap that pushes <img>
       slightly off-center from adjacent text. flex-shrink: 0 keeps it
       a perfect circle even if the header runs out of room. */
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* WHY: The "Join" link is the primary CTA — it should stand out from
   regular nav items. We target it by class (.menu-item-join) which
   Harold can set by adding a CSS class to the menu item, or we
   detect it by URL (the Join page). */
.main-navigation .menu-item-join > a,
.main-navigation .sp-nav-cta > a {
    background: var(--sp-color-accent, #667eea);
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
}

.main-navigation .menu-item-join > a:hover,
.main-navigation .sp-nav-cta > a:hover {
    opacity: 0.9;
    background: var(--sp-color-accent, #667eea);
}

/* Renewal CTA — visually distinct from the Join CTA so it reads as
   "action needed" rather than "optional." Uses --sp-color-warning with a
   warm amber fallback; a society can override the variable in Design
   settings (or a child theme) to match their palette. A subtle pulse
   draws the eye without being obnoxious. */
.main-navigation .sp-show-when-expiring > a {
    background: var(--sp-color-warning, #c97b2a);
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    box-shadow: 0 0 0 0 rgba(201, 123, 42, 0.5);
    animation: sp-renew-pulse 2.4s ease-out infinite;
}

.main-navigation .sp-show-when-expiring > a:hover {
    opacity: 0.92;
    background: var(--sp-color-warning, #c97b2a);
    animation-play-state: paused;
}

@keyframes sp-renew-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(201, 123, 42, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(201, 123, 42, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(201, 123, 42, 0);    }
}

/* Respect the user's reduced-motion preference — accessibility first */
@media (prefers-reduced-motion: reduce) {
    .main-navigation .sp-show-when-expiring > a {
        animation: none;
    }
}

/* WHY: Secondary nav items (Store, Contact, Join) push to the right edge
   of the header bar, matching the Ancestry pattern — primary nav flush left
   next to the logo, utility/secondary items flush right next to Sign In.
   All .sp-nav-right items get margin-left:auto (which absorbs remaining
   space), then the sibling combinator resets subsequent ones to 0 so only
   the first one creates the gap. !important overrides any gap/margin
   reset from the flex container. */
.main-navigation > ul > li.sp-nav-right {
    margin-left: auto !important;
}
.main-navigation > ul > li.sp-nav-right ~ li.sp-nav-right {
    margin-left: 0 !important;
}

/* ============================================================================
   SUB-MENU DROPDOWNS
   WHY: WordPress outputs nested <ul class="sub-menu"> for child menu items.
   On desktop, sub-menus appear as dropdown panels below the parent item on
   hover/focus. The parent li gets .menu-item-has-children from WP core.
   ============================================================================ */

/* Position the parent li so the sub-menu anchors to it */
.main-navigation > ul > li.menu-item-has-children {
    position: relative;
}

/* Dropdown caret on parent items — indicates a sub-menu is available */
.main-navigation > ul > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 6px;
    vertical-align: middle;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

/* Rotate caret when sub-menu is open */
.main-navigation > ul > li.menu-item-has-children.sp-submenu-open > a::after {
    transform: rotate(180deg);
}

/* The sub-menu itself — hidden by default, drops below the parent */
.main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--sp-color-nav-bg, var(--sp-color-header-bg, #1e3a5f));
    border-top: 3px solid var(--sp-color-accent, rgba(255, 255, 255, 0.2));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    border-radius: 0 0 4px 4px;
    padding: 4px 0;
    z-index: 1000;
    list-style: none;
}

/* Show on hover (desktop) and when JS adds .sp-submenu-open */
.main-navigation > ul > li.menu-item-has-children:hover > .sub-menu,
.main-navigation > ul > li.menu-item-has-children.sp-submenu-open > .sub-menu {
    display: block;
}

/* Sub-menu links — full width, stacked vertically */
.main-navigation .sub-menu a {
    padding: 10px 20px;
    font-size: var(--sp-nav-font-size, 0.85rem);
    white-space: nowrap;
    border-radius: 0;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu .current-menu-item a {
    background: rgba(255, 255, 255, 0.12);
}

/* Sub-menu item dividers */
.main-navigation .sub-menu li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ----------------------------------------------------------------------------
   NESTED (LEVEL 2) SUB-MENUS
   WHY: WordPress nav menus support arbitrary depth. We enabled depth: 3 so
   Resources → Library → Catalog-style nesting works for societies with deep
   information architectures. Level-2 flyouts drop to the right of their
   parent rather than cascading further down, which would otherwise run
   off the viewport.
   ---------------------------------------------------------------------------- */

/* Position each nested parent so its flyout anchors to it */
.main-navigation .sub-menu li.menu-item-has-children {
    position: relative;
}

/* Level-2 caret: right-pointing triangle, sitting at the end of the label */
.main-navigation .sub-menu li.menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.main-navigation .sub-menu li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid currentColor;
    opacity: 0.7;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* Flyout panel — anchored to the right edge of the parent item */
.main-navigation .sub-menu .sub-menu {
    top: -4px;
    left: 100%;
    border-top: none;
    border-left: 3px solid var(--sp-color-accent, rgba(255, 255, 255, 0.2));
    border-radius: 0 4px 4px 0;
}

/* Reveal on hover or when JS toggles sp-submenu-open */
.main-navigation .sub-menu li.menu-item-has-children:hover > .sub-menu,
.main-navigation .sub-menu li.menu-item-has-children:focus-within > .sub-menu,
.main-navigation .sub-menu li.menu-item-has-children.sp-submenu-open > .sub-menu {
    display: block;
}

/* Rotate caret when open (tap-toggled on mobile) */
.main-navigation .sub-menu li.menu-item-has-children.sp-submenu-open > a::after {
    transform: rotate(90deg);
}

/* Open top-level dropdowns on keyboard focus too (accessibility) */
.main-navigation > ul > li.menu-item-has-children:focus-within > .sub-menu {
    display: block;
}

/* ============================================================================
   HAMBURGER MENU BUTTON (MOBILE)
   WHY: On screens below 768px the horizontal nav won't fit. We hide the nav
   and show a hamburger icon instead. The button is always in the DOM but
   hidden on desktop via display:none. Below 768px, CSS shows it and JS
   toggles the sp-nav-open class to reveal/hide the mobile nav panel.
   ============================================================================ */

.sp-hamburger {
    display: none; /* Hidden on desktop — only visible below 768px */
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.sp-hamburger:focus-visible {
    outline: 2px solid var(--sp-color-header-text, #fff);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Three horizontal bars that form the hamburger icon. Bar height (3px) and
   margin (5px) determine the icon's total height. The transition properties
   enable the smooth X animation when the menu opens. */
.sp-hamburger-bar {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--sp-color-header-text, #fff);
    margin: 5px 0;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* X animation when menu is open — the top bar rotates down, the middle bar
   fades out, and the bottom bar rotates up. The translateY values (8px) are
   calculated from bar height (3px) + margin (5px) = 8px offset to bring the
   top and bottom bars to the center position before rotating. */
.sp-hamburger.is-active .sp-hamburger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.sp-hamburger.is-active .sp-hamburger-bar:nth-child(2) {
    opacity: 0;
}

.sp-hamburger.is-active .sp-hamburger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ============================================================================
   HEADER TOP BAR
   WHY: A slim utility strip above the main header row. Social media icons
   sit here, flush-right. Keeps them visible without crowding the nav,
   search, and user menu below. The bar inherits the header background so
   it blends seamlessly — child themes can override for a distinct look.
   ============================================================================ */

.header-top-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-top-bar-inner {
    max-width: var(--sp-content-width, 1500px);
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 0;
}


/* ============================================================================
   SOCIAL MEDIA ICONS
   WHY: Small icon links to the society's social media profiles. Displayed
   in the header top bar, flush-right. Icons inherit currentColor so they
   match the header text color.
   ============================================================================ */

.sp-social-icons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sp-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--sp-color-header-text, #fff);
    opacity: 0.7;
    transition: opacity 0.2s ease, background 0.2s ease;
    text-decoration: none;
}

.sp-social-icon:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

/* ============================================================================
   HEADER SEARCH FIELD
   WHY: A persistent search field in the header lets members search across
   the entire site (events, library, members, newsletters, pages) from any
   page. Compact on desktop (~180px, expands on focus), hidden on mobile
   where the hamburger menu provides the search field instead.
   ============================================================================ */

/* Search wrapper — holds the toggle button and the expandable form */
.sp-header-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* WHY hidden by default: When the admin adds a "Search" page to the nav
   menu, the magnifying glass toggle is redundant and creates a visual gap.
   The search wrap is still available for child themes that want it. */
.sp-header-search-wrap:not(.sp-search-open) {
    display: none;
}

/* Toggle button — the magnifying glass icon that opens/closes the search */
.sp-search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    border-radius: 50%;
}
.sp-search-toggle:hover {
    color: var(--sp-color-header-text, #fff);
    background: rgba(255, 255, 255, 0.1);
}

.sp-search-toggle:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* Search form — hidden by default, slides open from the right */
.sp-header-search {
    display: none; /* JS toggles this to flex */
    align-items: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    animation: sp-search-slide-in 0.2s ease-out;
}

/* WHY the open class: JS adds this when the toggle is clicked.
   Using a class (not :focus-within) gives us explicit control over
   open/close state — clicking away closes it via a document listener. */
.sp-header-search-wrap.sp-search-open .sp-header-search {
    display: flex;
}
.sp-header-search-wrap.sp-search-open .sp-search-toggle {
    /* Hide the toggle when search is open — the form has its own icon */
    display: none;
}

@keyframes sp-search-slide-in {
    from { opacity: 0; transform: translateY(-50%) translateX(10px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.sp-header-search input[type="text"] {
    width: 240px;
    padding: 8px 36px 8px 14px; /* Right padding leaves room for the button */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--sp-color-header-text, #fff);
    font-size: 0.85rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.sp-header-search input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* WHY solid white: rgba(255,255,255,0.7) border and subtle background
   shift didn't meet the 3:1 minimum contrast ratio for focus indicators
   against the dark header. Solid white ring is unmistakable. The browser
   default focus outline is suppressed only here (in the focus rule, not
   the base state) so it never silently disappears for keyboard users. */
.sp-header-search input[type="text"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

/* Magnifying glass submit button — positioned inside the input */
.sp-header-search button[type="submit"] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.sp-header-search button[type="submit"]:hover {
    color: var(--sp-color-header-text, #fff);
}

/* ============================================================================
   USER ACCOUNT MENU
   WHY: Replaces the WordPress admin bar with a clean dropdown in the header.
   Shows the user's avatar and name at a glance, with a dropdown for
   profile, photo, info, dashboard (admins only), and logout.

   Pure CSS dropdown using :hover and :focus-within — no JavaScript needed.
   The :focus-within ensures keyboard users can tab into the dropdown and
   it stays open while they navigate the items.
   ============================================================================ */

.sp-user-menu {
    position: relative;
}

/* The dropdown anchors to the li inside the user menu nav */
.sp-user-menu li {
    position: relative;
}

/* Log In / profile name link — styled identically to nav menu items */
.sp-user-login-link {
    display: block;
    padding: 10px 18px;
    color: var(--sp-color-header-text, #fff);
    text-decoration: none;
    font-size: var(--sp-nav-font-size, 0.85rem);
    font-weight: var(--sp-nav-font-weight, 500);
    font-family: var(--sp-font-body, -apple-system, BlinkMacSystemFont, sans-serif);
    letter-spacing: 0.02em;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.sp-user-login-link:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--sp-color-header-text, #fff);
}

/* The trigger button — avatar + name + caret */
.sp-user-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: var(--sp-color-header-text, #fff);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.sp-user-trigger:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Small downward caret */
.sp-user-caret {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-left: 2px;
}

/* ------- Dropdown panel ------- */

.sp-user-dropdown {
    /*
        WHY visibility + opacity instead of display:none: This lets us
        animate the dropdown appearing (opacity transition) while still
        keeping it out of the tab order when closed (visibility:hidden).
    */
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    min-width: 200px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 6px 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: all 0.15s ease;
    z-index: 9999;
}

/*
    WHY both :hover and :focus-within:
    - :hover handles mouse users
    - :focus-within handles keyboard users (when tabbing through dropdown items)
    Both keep the dropdown open while the user is interacting with it.
*/
.sp-user-menu:hover .sp-user-dropdown,
.sp-user-menu:focus-within .sp-user-dropdown,
.sp-user-menu.sp-user-open .sp-user-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Update aria-expanded visually when dropdown is showing */
.sp-user-menu:hover .sp-user-trigger,
.sp-user-menu:focus-within .sp-user-trigger,
.sp-user-menu.sp-user-open .sp-user-trigger {
    background: rgba(255, 255, 255, 0.25);
}

/* Individual dropdown items.
   WHY the !important overrides: sp_user_menu() outputs items inside a
   nav.main-navigation wrapper (so the trigger link matches nav font rendering
   exactly). That means .main-navigation a rules inherit to these items,
   including color: var(--sp-color-header-text) which is usually white.
   We force the dropdown items to render dark on the white dropdown background. */
.sp-user-dropdown-item,
.main-navigation .sp-user-dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 16px !important;
    color: #333 !important;
    text-decoration: none;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    transition: background 0.15s ease;
    white-space: nowrap;
    border-radius: 0 !important;
}

.sp-user-dropdown-item:hover,
.sp-user-dropdown-item:focus,
.main-navigation .sp-user-dropdown-item:hover,
.main-navigation .sp-user-dropdown-item:focus {
    background: #f0f4f8 !important;
    color: var(--sp-color-primary, #1e3a5f) !important;
}

/* Dashicon styling inside dropdown items */
.sp-user-dropdown-icon {
    font-size: 16px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #6b7280;
}

.sp-user-dropdown-item:hover .sp-user-dropdown-icon {
    color: var(--sp-color-primary, #1e3a5f);
}

/* Divider line between menu groups */
.sp-user-dropdown-divider {
    height: 1px;
    background: #e9ecef;
    margin: 4px 12px;
}

/* Logout item — subtle red on hover to indicate destructive action */
.sp-user-dropdown-item--logout:hover,
.main-navigation .sp-user-dropdown-item--logout:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

.sp-user-dropdown-item--logout:hover .sp-user-dropdown-icon {
    color: #b91c1c;
}

/* ============================================================================
   CONTENT — Posts & Pages
   ============================================================================ */

.entry-header {
    margin-bottom: 32px;
}

.entry-title {
    font-family: var(--sp-font-heading, 'Playfair Display', Georgia, serif);
    font-size: calc(2.2rem * var(--sp-font-scale, 1));
    font-weight: 500;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.entry-title a {
    color: var(--sp-color-primary, #1e3a5f);
    text-decoration: none;
    transition: color 0.2s ease;
}

.entry-title a:hover {
    color: var(--sp-color-primary-hover, #2c5282);
}

.entry-meta {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 16px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.entry-content {
    margin-bottom: 40px;
    font-size: 1rem;
    line-height: 1.8;
}

/* Give content elements consistent vertical rhythm */
.entry-content > * + * {
    margin-top: 1.2em;
}

.entry-content ul,
.entry-content ol {
    padding-left: 1.5em;
}

.entry-content blockquote {
    border-left: 4px solid var(--sp-color-accent, #667eea);
    padding: 16px 24px;
    margin: 2em 0;
    background: #f8f9fb;
    font-style: italic;
    font-size: 1.05rem;
    color: #444;
    border-radius: 0 4px 4px 0;
}

/* "Read more" link styling */
.read-more {
    display: inline-block;
    margin-top: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sp-color-primary, #1e3a5f);
    text-decoration: none;
    transition: color 0.2s ease;
}

.read-more:hover {
    color: var(--sp-color-accent, #667eea);
}

/* Post separator in archive/index views */
article.post {
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid #eef0f2;
}

article.post:last-child {
    border-bottom: none;
}

/* Featured images */
.post-thumbnail {
    margin-bottom: 24px;
    border-radius: 8px;
    overflow: hidden;
}

.post-thumbnail img {
    display: block;
    width: 100%;
    transition: transform 0.3s ease;
}

.post-thumbnail:hover img {
    transform: scale(1.02);
}

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

.widget-area .widget {
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.widget-area .widget-title {
    font-size: 1rem;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sp-color-primary, #1e3a5f);
}

.widget-area .widget ul {
    list-style: none;
}

.widget-area .widget li {
    padding: 6px 0;
    border-bottom: 1px solid #e9ecef;
}

.widget-area .widget li:last-child {
    border-bottom: none;
}

/* ============================================================================
   PAGINATION
   ============================================================================ */

.pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 8px 16px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

.pagination a:hover {
    background: var(--sp-color-primary, #1e3a5f);
    color: #fff;
    border-color: var(--sp-color-primary, #1e3a5f);
}

.pagination .current {
    background: var(--sp-color-primary, #1e3a5f);
    color: #fff;
    border-color: var(--sp-color-primary, #1e3a5f);
}

/* ============================================================================
   FOOTER
   WHY: Simple footer with copyright. Background color mirrors the header
   for a cohesive look — both controlled by Design settings.
   ============================================================================ */

.site-footer {
    background: var(--sp-color-footer-bg, #1e3a5f);
    color: var(--sp-color-footer-text, #fff);
    padding: 0;
    font-size: 0.85rem;
}

.footer-inner {
    max-width: var(--sp-content-width, 1500px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 40px;
    padding: 50px 20px 40px;
}

.footer-heading {
    font-family: var(--sp-font-heading, 'Playfair Display', Georgia, serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--sp-color-footer-text, #fff);
    margin: 0 0 16px 0;
    letter-spacing: 0.02em;
}

.footer-text {
    color: var(--sp-color-footer-text, rgba(255, 255, 255, 0.8));
    line-height: 1.7;
    margin: 0 0 6px 0;
    font-size: 0.9rem;
}

.footer-tagline {
    margin-top: 12px;
    font-style: italic;
    opacity: 0.7;
}

.site-footer a {
    color: var(--sp-color-footer-link, rgba(255, 255, 255, 0.85));
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Footer navigation — vertical link list */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li {
    margin-bottom: 8px;
}

.footer-nav a {
    font-size: 0.9rem;
    color: var(--sp-color-footer-link, rgba(255, 255, 255, 0.85));
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-nav a:hover {
    color: #fff;
}

/* Footer bottom bar — copyright line */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
    opacity: 0.7;
}

.footer-bottom p {
    margin: 0;
}

.footer-powered-by {
    margin-top: 4px;
    font-size: 0.75rem;
    opacity: 0.6;
}

.footer-powered-by a {
    color: inherit;
    text-decoration: none;
}

.footer-powered-by a:hover {
    text-decoration: underline;
}

/* Footer custom content and images */
.footer-custom-content {
    font-size: inherit;
    line-height: 1.6;
}

.footer-images {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.footer-images img.footer-image {
    max-height: 60px;
    width: auto;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.footer-images img.footer-image:hover {
    opacity: 1;
}

/* Responsive: stack columns on mobile */
@media screen and (max-width: 768px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 40px 20px 30px;
        text-align: center;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }
    .footer-col-social {
        grid-column: 1 / -1;
        text-align: center;
    }
}

/* ============================================================================
   FRONT PAGE HERO
   WHY: A full-viewport cinematic hero is the first thing visitors see. It
   needs to feel polished and intentional — this is the "wow" moment.
   Video backgrounds, image backgrounds, and a gradient fallback are all
   supported. The overlay ensures text is always readable regardless of
   the background media. All values are configurable from Design settings.
   ============================================================================ */

.sp-front-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* WHY negative margin: The hero needs to break out of the site-content
       container and go edge-to-edge. The header sits above it; the hero
       is the first thing inside the main page flow. */
    margin-top: 0;
}

/* Height variants — fullscreen is the default, others available via settings */
.sp-hero-fullscreen {
    min-height: 100vh;
}
.sp-hero-large {
    min-height: 80vh;
}
.sp-hero-medium {
    min-height: 60vh;
}
.sp-hero-small {
    min-height: 45vh;
}

/* Video background — fills the hero, object-fit:cover crops as needed */
.sp-front-hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

/* Image background — same full-cover approach */
.sp-front-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* WHY var(): the URL comes from settings, emitted as --sp-hero-bg on
     * the parent .sp-front-hero. Pulling it here keeps the inline style
     * out of the markup. */
    background-image: var(--sp-hero-bg, none);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Gradient fallback when no media is configured — dignified, not empty */
.sp-front-hero-gradient {
    background: linear-gradient(135deg,
        var(--sp-color-primary, #1e3a5f) 0%,
        color-mix(in srgb, var(--sp-color-primary, #1e3a5f), #000 30%) 50%,
        var(--sp-color-accent, #667eea) 100%
    );
}

/* Dark overlay — opacity comes from --sp-hero-overlay-opacity on the
 * parent .sp-front-hero (set from the homepage_hero_overlay setting). */
.sp-front-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: var(--sp-hero-overlay-opacity, 0.4);
    z-index: 1;
}

/* Content container — centered text above the overlay */
.sp-front-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px 20px;
    max-width: 900px;
}

/* Headline — large, elegant serif (Playfair Display by default) */
.sp-front-hero-headline {
    font-family: var(--sp-font-heading, 'Playfair Display', Georgia, serif);
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 16px 0;
    letter-spacing: 0.02em;
    /* WHY text-shadow: Ensures readability even if the overlay is light
       or the background image has bright spots */
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* Subtitle — lighter weight, slightly smaller */
.sp-front-hero-subtitle {
    font-family: var(--sp-font-body, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0 0 32px 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

/* CTA button — clean, outlined, stands out without being garish */
.sp-front-hero-cta {
    display: inline-block;
    padding: 14px 36px;
    font-family: var(--sp-font-body, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

.sp-front-hero-cta:hover {
    background: #fff;
    color: var(--sp-color-primary, #1e3a5f);
    border-color: #fff;
    text-decoration: none;
}

/* Scroll indicator — gentle bouncing chevron at the bottom */
.sp-front-hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, 0.6);
    animation: sp-hero-bounce 2s ease-in-out infinite;
}

@keyframes sp-hero-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-8px);
    }
    60% {
        transform: translateX(-50%) translateY(-4px);
    }
}

/* When hero is present, the content below doesn't need extra top padding */
.sp-front-has-hero {
    padding-top: 0;
}

/* Responsive: reduce hero headline size on small screens */
@media screen and (max-width: 768px) {
    .sp-front-hero-content {
        padding: 30px 16px;
    }
    .sp-front-hero-cta {
        padding: 12px 28px;
        font-size: 0.85rem;
    }
}

/* ============================================================================
   404 PAGE
   ============================================================================ */

.error-404 {
    text-align: center;
    padding: 60px 20px;
}

.error-404 h1 {
    font-size: calc(2.5rem * var(--sp-font-scale, 1));
    margin-bottom: 16px;
}

.error-404 p {
    font-size: 1.1rem;
    color: #6b7280;
    margin-bottom: 24px;
}

.error-404 .search-form {
    max-width: 400px;
    margin: 0 auto;
}

/* ============================================================================
   FORMS (search, comments, etc.)
   WHY: Large inputs with clear borders are easier to see and tap.
   ============================================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea {
    padding: 12px 14px;
    font-size: 1rem;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-family: inherit;
    width: 100%;
    max-width: 100%;
    transition: border-color 0.2s ease;
}

input:focus,
textarea:focus {
    outline: 2px solid var(--sp-color-accent, #667eea);
    outline-offset: 2px;
    border-color: var(--sp-color-accent, #667eea);
}

button,
input[type="submit"] {
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    background: var(--sp-color-primary, #1e3a5f);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

button:hover,
input[type="submit"]:hover {
    background: var(--sp-color-primary-hover, #2c5282);
}

button:focus-visible,
input[type="submit"]:focus-visible {
    outline: 2px solid var(--sp-color-accent, #c9973a);
    outline-offset: 2px;
}

/* ============================================================================
   WORDPRESS UTILITIES
   WHY: WordPress adds these classes for alignment and captions.
   We need to style them so content editors work as expected.
   ============================================================================ */

.alignleft {
    float: left;
    margin: 0 20px 20px 0;
}

.alignright {
    float: right;
    margin: 0 0 20px 20px;
}

.aligncenter {
    display: block;
    margin: 20px auto;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 6px;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}


/* ============================================================================
   MY ACCOUNT PAGE
   WHY: Frontend profile page so members can manage their account without
   ever seeing the WordPress backend. Three sections: photo, personal info,
   and password — each in a clearly separated card.
   ============================================================================ */

/* Each section (Photo, Info, Password) gets its own card */
/* WHY cap at 860px: Form inputs scale with the flex row they live in. When
   the page wrapper is 1100px+ and the section card fills it, "First Name"
   becomes as wide as "Street Address" and the eye loses the affordance that
   input width signals expected answer length. 860px keeps three-across rows
   at a comfortable form-scanning size on desktops. */
.sp-account-section {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 24px;
}

.sp-account-section h2 {
    font-size: calc(1.3rem * var(--sp-font-scale, 1));
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--sp-color-primary, #1e3a5f);
}

/* ------- Success / Error Messages ------- */

.sp-notice {
    padding: 14px 20px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-weight: 500;
    font-size: 0.95rem;
}

.sp-notice--success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.sp-notice--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.sp-notice--pending {
    background: #fff8e1;
    border-left: 4px solid #f9a825;
    color: #5d4037;
}

.sp-notice--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a5f;
}

/* Read-only field summary shown when a My Account section is locked by the
   society (members can see their info but not edit it). */
.sp-account-readonly {
    margin: 0 0 8px;
}
.sp-account-readonly dt {
    font-weight: 600;
    margin-top: 10px;
}
.sp-account-readonly dd {
    margin: 2px 0 0;
}

/* ------- My Account renewal banner ------- */
/* WHY: A member who is expiring or expired sees the nav "Renew Now" CTA on
   every page, but the account page itself is where they manage membership,
   so it earns a louder, escalating banner. Amber for expiring, red for
   expired. A flex row keeps the message and the action button on one line
   on desktop and stacks them on narrow screens. */
.sp-renewal-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-radius: 6px;
    margin-bottom: 24px;
}
.sp-renewal-banner--expiring {
    background: #fff8e1;
    border: 1px solid #f9a825;
    border-left-width: 4px;
    color: #5d4037;
}
.sp-renewal-banner--expired {
    background: #fef2f2;
    border: 1px solid #ef4444;
    border-left-width: 4px;
    color: #991b1b;
}
.sp-renewal-banner__text { display: flex; flex-direction: column; gap: 2px; }
.sp-renewal-banner__title { font-size: 1.05rem; }
.sp-renewal-banner__detail { font-weight: 400; font-size: 0.95rem; }
/* Reuses the theme's .sp-button; this modifier just stops the button from
   shrinking when the message text is long. */
.sp-renewal-banner__btn { flex-shrink: 0; align-self: center; }

/* ------- Members Only Gate ------- */
/* WHY: Previously inline styles. Now classes so child themes can
   override the gate appearance via CSS custom properties. */

.sp-members-only-gate {
    text-align: center;
    padding: 60px 20px;
    max-width: 500px;
    margin: 0 auto;
}

.sp-members-only-icon {
    color: #767676;
    margin-bottom: 16px;
}

.sp-members-only-heading {
    margin: 0 0 12px;
    font-size: 1.4em;
}

.sp-members-only-text {
    color: var(--sp-color-text-secondary, #666);
    margin: 0 0 24px;
}

.sp-members-only-btn {
    display: inline-block;
    padding: 10px 28px;
    background: var(--sp-color-primary, #1e3a5f);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
}

.sp-members-only-btn:hover {
    opacity: 0.9;
    color: #fff;
}

/* ------- Photo Section ------- */

.sp-photo-section {
    display: flex;
    align-items: center;
    gap: 30px;
}

.sp-photo-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #dee2e6;
}

.sp-photo-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Hide the native file input — we use a styled label instead */
.sp-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.sp-photo-hint {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

/* ------- Form Layout ------- */

.sp-account-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-form-field label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--sp-color-primary, #1e3a5f);
}

/* Inline radio group inside a .sp-form-field — used for preferred-phone
   choices and other "pick one" rows. */
.sp-radio-row {
    display: flex;
    gap: 20px;
    margin-top: 4px;
}

.sp-radio-row__option {
    font-weight: 400;
}

/* Visually-uppercase input — used for surname inputs so members see all-caps
   while typing. */
.sp-input--uppercase {
    text-transform: uppercase;
}

/* Hint shown under a surname row when other members are also researching
   the same name. Color matches the rest of the WP-blue link/info accents. */
.sp-surname-similar {
    display: block;
    font-size: 12px;
    color: #2271b1;
    margin-top: 2px;
}

.sp-field-hint {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

/* Side-by-side fields (first name / last name, etc.) */
.sp-form-row--half {
    display: flex;
    gap: 16px;
}

.sp-form-row--half .sp-form-field {
    flex: 1;
}

/* Three-column fields (prefix / first / middle / last) */
.sp-form-row--thirds {
    display: flex;
    gap: 16px;
}

.sp-form-row--thirds .sp-form-field {
    flex: 1;
}

/* City / State / Zip row — city gets more space */
.sp-form-row--city-state {
    display: flex;
    gap: 16px;
}

.sp-form-field--city {
    flex: 2;
}

.sp-form-field--state {
    flex: 1;
}

.sp-form-field--zip {
    flex: 1;
}

/* Select dropdowns — match text input styling */
select {
    padding: 12px 14px;
    font-size: 1rem;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-family: inherit;
    width: 100%;
    max-width: 100%;
    background: #fff;
    transition: border-color 0.2s ease;
    appearance: auto;
}

select:focus {
    outline: 2px solid var(--sp-color-accent, #667eea);
    outline-offset: 2px;
    border-color: var(--sp-color-accent, #667eea);
}

/* Date inputs — match text input styling */
input[type="date"] {
    padding: 12px 14px;
    font-size: 1rem;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-family: inherit;
    width: 100%;
    transition: border-color 0.2s ease;
}

input[type="date"]:focus {
    outline: 2px solid var(--sp-color-accent, #667eea);
    outline-offset: 2px;
    border-color: var(--sp-color-accent, #667eea);
}

/* Checkbox group — vertical stack with comfortable spacing */
.sp-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

/* Individual checkbox label — large click target for older users */
.sp-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 4px 0;
}

.sp-checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--sp-color-primary, #1e3a5f);
}

/* Seasonal address subsection heading */
.sp-subsection-heading {
    font-size: calc(1.1rem * var(--sp-font-scale, 1));
    margin-top: 16px;
    margin-bottom: 16px;
    padding-top: 12px;
    border-top: 1px solid #dee2e6;
}

/* Seasonal toggle checkbox (inside the address form) */
.sp-seasonal-toggle {
    margin-top: 8px;
}

/* Section description text (used in Directory Privacy) */
.sp-section-description {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 16px;
    margin-top: -8px;
}

/* ------- Buttons ------- */

.sp-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s ease;
    background: var(--sp-color-primary, #1e3a5f);
    color: #fff;
    width: auto;
    align-self: flex-start;
}

.sp-button:hover {
    background: var(--sp-color-primary-hover, #2c5282);
    color: #fff;
}

.sp-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--sp-color-primary, #1e3a5f);
}

.sp-button--secondary {
    background: #fff;
    color: var(--sp-color-primary, #1e3a5f);
    border: 2px solid var(--sp-color-primary, #1e3a5f);
}

.sp-button--secondary:hover {
    background: var(--sp-color-primary, #1e3a5f);
    color: #fff;
}

/* Text-style button for "Remove Photo" — subtle, not prominent */
.sp-button--text {
    background: none;
    border: none;
    color: #991b1b;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 4px 0;
    cursor: pointer;
    text-decoration: underline;
}

.sp-button--text:hover {
    color: #7f1d1d;
    background: none;
}

/* ============================================================================
   RESPONSIVE
   WHY: Single column on mobile. The sidebar moves below content so the
   main content is always visible first.
   ============================================================================ */

/* ============================================================================
   NAV COLLAPSE — 1024px
   WHY 1024px instead of 768px: With 7 nav items plus social icons, search,
   and user menu, the horizontal nav wraps awkwardly between 768–1024px.
   Collapsing at 1024px matches the iPad landscape/portrait divide and
   prevents the nav from ever wrapping to two lines.
   ============================================================================ */

@media (max-width: 1280px) {

    /* === HAMBURGER + MOBILE NAV COLLAPSE ===
       WHY: The full horizontal nav wraps or overflows on narrow screens.
       We hide the nav behind a hamburger toggle that reveals a full-width
       dropdown panel below the header. The search toggle and user menu
       remain visible outside the hamburger panel — they're separate elements
       in .header-nav-area and don't get hidden. */

    .header-inner {
        /* WHY relative: The mobile nav panel is absolutely positioned relative
           to the header-inner so it drops below it cleanly. */
        position: relative;
        padding: 16px 0;
    }

    /* Show the hamburger button — on the right side */
    .sp-hamburger {
        display: block;
        order: 99;
    }

    /* Nav area stays horizontal on mobile — hamburger, search toggle, and
       user menu sit in a row. The nav itself drops below as a panel. */
    .header-nav-area {
        width: 100%;
        /* WHY static: The mobile nav panel positions itself relative to
           header-inner, not header-nav-area. Static lets the panel break
           out of this flex container. */
        position: static;
    }

    /* Hide the PRIMARY nav on mobile — revealed when sp-nav-open is added.
       The :not(.sp-user-menu) exclusion keeps the Sign In / user dropdown
       visible in the header row alongside the hamburger. */
    .main-navigation:not(.sp-user-menu) {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--sp-color-nav-bg, var(--sp-color-header-bg, #1e3a5f));
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        z-index: 999;
        border-top: 3px solid var(--sp-color-accent, rgba(255, 255, 255, 0.2));
    }

    /* Show the nav panel when JS adds sp-nav-open */
    .main-navigation.sp-nav-open {
        display: block !important;
    }

    /* Stack nav links vertically in the mobile panel */
    .main-navigation > ul {
        flex-direction: column;
        gap: 0;
    }

    /* WHY: On desktop, .sp-nav-right items use margin-left:auto to push
       Store/Contact/Join to the right edge. In the mobile panel the nav
       is stacked vertically, so that auto margin shoves the item to the
       far right instead of left-aligning with everything else. */
    .main-navigation > ul > li.sp-nav-right {
        margin-left: 0 !important;
    }

    .main-navigation > ul > li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-navigation > ul > li:last-child {
        border-bottom: none;
    }

    .main-navigation a {
        padding: 14px 20px;
        font-size: 1rem;
        border-radius: 0;
    }

    .main-navigation a:hover,
    .main-navigation .current-menu-item a {
        background: rgba(255, 255, 255, 0.1);
    }

    /* Sub-menus in mobile nav — static, stacked, indented instead of floating */
    .main-navigation .sub-menu {
        position: static;
        box-shadow: none;
        border-top: none;
        border-radius: 0;
        min-width: 0;
        padding: 0;
        background: rgba(0, 0, 0, 0.15);
    }

    /* Show sub-menus when parent is toggled open */
    .main-navigation > ul > li.menu-item-has-children:hover > .sub-menu {
        display: none;
    }
    .main-navigation > ul > li.menu-item-has-children.sp-submenu-open > .sub-menu {
        display: block;
    }

    .main-navigation .sub-menu a {
        padding: 12px 20px 12px 36px;
        font-size: 0.95rem;
    }

    .main-navigation .sub-menu li + li {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* WHY: On mobile the site title can be long enough to push the hamburger
       off-screen (e.g. "Heritage Valley Historical Society" at 320px). We
       shrink the font, allow the branding block to shrink via min-width:0,
       and truncate with ellipsis so the hamburger always stays visible. */
    .site-branding {
        min-width: 0;
        flex-shrink: 1;
    }

    .site-title {
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .site-description {
        display: none;
    }

    /* On mobile, hide the name and just show the avatar to save space */
    .sp-user-name {
        display: none;
    }

    .sp-user-trigger {
        padding: 6px 10px;
    }

    /* Center the dropdown on mobile instead of right-aligning */
    .sp-user-dropdown {
        right: auto;
        left: 50%;
        transform: translateX(-50%) translateY(-4px);
    }

    .sp-user-menu:hover .sp-user-dropdown,
    .sp-user-menu:focus-within .sp-user-dropdown,
    .sp-user-menu.sp-user-open .sp-user-dropdown {
        transform: translateX(-50%) translateY(0);
    }

} /* end 1280px nav collapse */


@media (max-width: 768px) {
    html {
        /* WHY we clamp mobile font size: On small screens, the chosen base
           size might be too large. We use a slightly smaller size but still
           respect the user's preference via the CSS variable. */
        font-size: 16px;
    }

    .content-area-with-sidebar {
        flex-direction: column;
    }

    .content-area-with-sidebar .widget-area {
        width: 100%;
    }

    .site-content {
        padding: 24px 16px;
    }

    /* My Account page: stack photo above actions, full-width name fields */
    .sp-photo-section {
        flex-direction: column;
        text-align: center;
    }

    .sp-photo-actions {
        align-items: center;
    }

    .sp-form-row--half,
    .sp-form-row--thirds,
    .sp-form-row--city-state {
        flex-direction: column;
    }

    .sp-account-section {
        padding: 20px;
    }
}


/* ============================================================================
   NEWSLETTER ARCHIVE — Frontend Grid, Cards, and PDF Viewer Modal

   WHY: The newsletter archive needs a visually appealing card grid to
        showcase PDF covers. Cards use a portrait aspect ratio (more natural
        for printed newsletter covers than the landscape ratio used for photo
        albums). The PDF viewer modal uses an iframe to leverage the browser's
        native PDF renderer — no third-party library needed.
   ============================================================================ */

/* Grid — 3 columns on desktop, 2 on tablet, 1 on mobile */
.sp-newsletter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 8px;
}

/* Individual card */
.sp-newsletter-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sp-newsletter-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Cover image area — portrait aspect ratio for newsletter covers */
.sp-newsletter-card-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 8.5 / 11; /* US Letter proportions */
    overflow: hidden;
    background: #f0f0f0;
}

.sp-newsletter-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder when no cover image exists */
.sp-newsletter-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card body — title, date, description, actions */
.sp-newsletter-card-body {
    padding: 14px;
}

.sp-newsletter-card-title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sp-color-primary, #1e3a5f);
}

.sp-newsletter-card-date,
.sp-newsletter-card-issue {
    display: block;
    font-size: 0.85rem;
    color: #595959;
    line-height: 1.4;
}

.sp-newsletter-card-desc {
    font-size: 0.85rem;
    color: #555;
    margin: 6px 0 0;
    line-height: 1.4;
    /* Clamp to 2 lines to keep cards uniform height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sp-newsletter-card-actions {
    margin-top: 10px;
}

/* Buttons */
.sp-newsletter-btn {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    line-height: 1.4;
    transition: background 0.2s ease;
}

.sp-newsletter-btn-download {
    background: var(--sp-color-primary, #1e3a5f);
    color: #fff;
}

.sp-newsletter-btn-download:hover {
    background: var(--sp-color-primary-hover, #2c5282);
    color: #fff;
}

/* Members-only badge shown to non-logged-in users */
.sp-newsletter-members-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 500;
    background: #fef0c7;
    color: #92400e;
    border-radius: 4px;
}


/* ========== PDF VIEWER MODAL ========== */

/* Full-screen overlay + centered content container */
.sp-pdf-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark semi-transparent backdrop */
.sp-pdf-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

/* Modal content box — takes up most of the viewport */
.sp-pdf-modal-content {
    position: relative;
    width: 90vw;
    height: 90vh;
    max-width: 1200px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header bar with title + actions */
.sp-pdf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.sp-pdf-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    padding-right: 16px;
}

.sp-pdf-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Close button */
.sp-newsletter-btn-close {
    background: #e5e7eb;
    color: #374151;
    font-size: 1.3rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
}

.sp-newsletter-btn-close:hover {
    background: #d1d5db;
}

/* iframe fills the remaining space */
.sp-pdf-modal-body {
    flex: 1;
    overflow: hidden;
}

.sp-pdf-modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}


/* ========== NEWSLETTER RESPONSIVE ========== */

@media (max-width: 768px) {
    .sp-newsletter-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
    }

    .sp-pdf-modal-content {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    .sp-pdf-modal-header h3 {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .sp-newsletter-grid {
        grid-template-columns: 1fr;
    }
}