/*
Theme Name: Association Pro
Theme URI: https://example.com
Author: Your Association
Description: A full-featured association theme with a rotating hero slider, About mosaic grid, "What We Do" cards, Events timeline, a "Join Us" banner with floating member photos, Media grid, Blog/Insights cards, and a newsletter footer. Pairs with the Member Portal, News/Events/Publications, and Team Gallery plugins.
Version: 1.8.1
Requires at least: 5.8
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: association-pro
*/

/* ===================== Brand tokens ===================== */
:root {
    --pro-primary: #008751;      /* Nigerian green */
    --pro-secondary: #AEB3A8;    /* Light grey */
    --pro-accent: #C6D62E;       /* Lemon green */
    --pro-text: #1C1C1A;
    --pro-text-muted: #5B6058;
    --pro-paper: #FFFFFF;
    --pro-paper-deep: #F2F3EF;
    --pro-line: #E4E6E2;
    --pro-dark: #0E1410;         /* Footer / overlay near-black */
    --pro-deep-green: #0B4428;   /* Button hover text */

    /* Aliases so plugin CSS (assoc-content, team-gallery) that reads
       --assoc-* variables picks up the exact same palette automatically. */
    --assoc-primary: var(--pro-primary);
    --assoc-secondary: var(--pro-secondary);
    --assoc-accent: var(--pro-accent);
    --assoc-text: var(--pro-text);
    --assoc-text-muted: var(--pro-text-muted);
    --assoc-line: var(--pro-line);
    --assoc-paper-deep: var(--pro-paper-deep);

    --font-display: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}
#register { scroll-margin-top: 100px; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--pro-text);
    background: var(--pro-paper);
    line-height: 1.65;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--pro-text); margin: 0 0 0.5em; line-height: 1.2; font-weight: 700; }
p { margin: 0 0 1em; color: var(--pro-text-muted); }
a { color: var(--pro-primary); text-decoration: none; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 3px solid var(--pro-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .pro-hero-content { opacity: 1 !important; }
}

.pro-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

@media (max-width: 400px) {
    .pro-container { padding: 0 16px; }
}

/* ===================== Section scaffolding ===================== */
.pro-section { padding: 88px 0; }
.pro-section-textured {
    background-color: var(--pro-paper-deep);
    background-image: radial-gradient(circle at 20% 20%, rgba(0,135,81,0.05) 0, transparent 45%),
                       radial-gradient(circle at 80% 60%, rgba(0,135,81,0.04) 0, transparent 45%);
}
.pro-section-head { max-width: 620px; margin-bottom: 44px; }
.pro-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.pro-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pro-primary);
    margin-bottom: 10px;
}
.pro-eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--pro-primary); display: inline-block; }
.pro-diagonal-band .pro-eyebrow::before { background: var(--pro-accent); }

.pro-heading-xl { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 800; }

@media (max-width: 700px) {
    .pro-section { padding: 56px 0; }
}

/* ===================== Buttons ===================== */
.pro-btn {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pro-btn-primary { background: var(--pro-primary); color: #fff; border-color: var(--pro-primary); }
.pro-btn-primary:hover,
.pro-btn-primary:focus-visible { background: var(--pro-accent); border-color: var(--pro-accent); color: var(--pro-deep-green); }

.pro-btn-secondary { background: transparent; color: var(--pro-primary); border-color: var(--pro-primary); }
.pro-btn-secondary:hover,
.pro-btn-secondary:focus-visible { background: var(--pro-primary); color: #fff; }

/* ===================== Top bar ===================== */
.pro-topbar { background: var(--pro-primary); color: rgba(255,255,255,0.9); font-size: 0.85rem; }
.pro-topbar-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; padding-bottom: 8px; }
.pro-topbar-email { color: rgba(255,255,255,0.9); display: inline-flex; align-items: center; gap: 8px; }
.pro-topbar-email:hover { color: #fff; }
.pro-topbar-social { display: flex; gap: 14px; }
.pro-topbar-social a { color: rgba(255,255,255,0.85); display: inline-flex; }
.pro-topbar-social a:hover { color: #fff; }

@media (max-width: 600px) {
    .pro-topbar-inner { flex-direction: column; gap: 4px; text-align: center; }
}

/* ===================== Header + dropdown nav ===================== */
.pro-header { background: #fff; border-bottom: 1px solid var(--pro-line); position: sticky; top: 0; z-index: 50; transition: box-shadow 0.2s ease; }
.pro-header.is-scrolled { box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.pro-header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.pro-logo { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--pro-primary); display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pro-logo img {
    max-height: 72px;
    max-width: min(330px, 40vw);
    width: auto;
    height: auto;
    object-fit: contain;
}

.pro-nav > ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; }
.pro-nav a { color: var(--pro-text); font-weight: 500; font-size: 0.95rem; }
.pro-nav > ul > li > a:hover { color: var(--pro-primary); }

.pro-nav li { position: relative; }
.pro-nav .menu-item-has-children > a::after {
    content: ''; display: inline-block; width: 6px; height: 6px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); margin-left: 6px; position: relative; top: -2px; opacity: 0.6;
}
.pro-nav .sub-menu {
    list-style: none; margin: 0; padding: 8px 0; position: absolute; top: 100%; left: 0;
    min-width: 220px; background: #fff; border: 1px solid var(--pro-line); border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.08); opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 60;
}
.pro-nav .menu-item-has-children:hover > .sub-menu,
.pro-nav .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.pro-nav .sub-menu li { border: none; }
.pro-nav .sub-menu a { display: block; padding: 9px 18px; font-size: 0.9rem; white-space: nowrap; }
.pro-nav .sub-menu a:hover { background: var(--pro-paper-deep); color: var(--pro-primary); }

.pro-menu-toggle { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--pro-primary); }

@media (max-width: 900px) {
    .pro-nav { display: none; width: 100%; }
    .pro-nav.is-open { display: block; }
    .pro-nav > ul { flex-direction: column; gap: 0; }
    .pro-nav > ul > li { border-top: 1px solid var(--pro-line); }
    .pro-nav a { display: block; padding: 12px 0; }
    .pro-header-inner { flex-wrap: wrap; }
    .pro-menu-toggle { display: block; }
    .pro-logo img { max-height: 60px; }

    .pro-nav .sub-menu {
        position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
        border: none; background: var(--pro-paper-deep); border-radius: 4px; padding: 4px 0; display: none;
        min-width: 0; width: 100%;
    }
    .pro-nav .menu-item-has-children.submenu-open > .sub-menu { display: block; }
    .pro-nav .sub-menu a { padding: 10px 16px; }
}

@media (max-width: 420px) {
    .pro-logo img { max-height: 48px; max-width: 45vw; }
}

/* =========================================================================
   HERO - full-bleed rotating photo slider, each slide with its OWN text/button
   ========================================================================= */
.pro-hero { position: relative; min-height: 640px; overflow-x: hidden; background: var(--pro-dark); }

.pro-hero-slider { position: absolute; inset: 0; overflow-x: hidden; }
.pro-hero-track { display: flex; height: 100%; transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.pro-hero-slide { flex: 0 0 100%; height: 100%; position: relative; }
.pro-hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.pro-hero-slide .pro-hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,20,10,0.72) 0%, rgba(0,20,10,0.4) 45%, rgba(0,20,10,0.15) 100%);
    z-index: 1;
}

/* Each slide's text sits in its own centered flex layer, above its scrim */
.pro-hero-slide .pro-hero-flexwrap { position: relative; z-index: 2; display: flex; align-items: center; height: 100%; }

.pro-hero-content {
    position: relative;
    max-width: 640px;
    opacity: 0;
}

/* Only the currently-active slide's text animates in - each time the
   active slide changes, this class lands on a fresh element, so the
   animation always plays again rather than needing a JS reset trick. */
.pro-hero-slide.is-active .pro-hero-content {
    animation: pro-slide-in-right 0.9s cubic-bezier(0.22, 0.8, 0.28, 1) both;
    animation-delay: 0.5s;
}

/* Progressive-enhancement fallback: only applies while the "no-js" class
   is still on <html> (removed immediately by main.js). If JavaScript
   fails to load entirely, this keeps the first slide's text visible
   instead of stuck at opacity:0 - and critically, it can never collide
   with or override the real .is-active animation once JS is confirmed
   working, since the two states are mutually exclusive by class. */
.no-js .pro-hero-slide:first-child .pro-hero-content { opacity: 1; }

@keyframes pro-slide-in-right {
    from { opacity: 0; transform: translateX(90px); }
    to   { opacity: 1; transform: translateX(0); }
}
.pro-hero-badge {
    display: inline-block; padding: 8px 20px; border: 1.5px solid rgba(255,255,255,0.6); border-radius: 999px;
    color: #fff; font-size: 0.85rem; font-weight: 500; margin-bottom: 20px;
}

/* Highlighted "announcement" tag - stands in for the plain badge on slides marked as an announcement */
.pro-hero-announcement {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--pro-accent);
    color: var(--pro-deep-green);
    padding: 8px 10px 8px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.pro-hero-announcement-plain { padding: 8px 8px; }
.pro-hero-announcement-tag {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(11,68,40,0.15);
    padding: 4px 12px;
    border-radius: 999px;
}
.pro-hero-announcement-datetime { white-space: nowrap; padding-right: 6px; }

.pro-hero-heading { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.1; margin-bottom: 18px; }
.pro-hero-description { color: rgba(255,255,255,0.88); font-size: 1.05rem; max-width: 50ch; margin-bottom: 28px; }

@media (max-width: 380px) {
    .pro-hero-announcement { flex-wrap: wrap; border-radius: 12px; }
    .pro-hero-announcement-datetime { white-space: normal; padding-right: 0; }
}

.pro-hero-dots {
    position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 3;
    display: flex; flex-direction: column; gap: 10px;
}
.pro-hero-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.6); background: transparent; cursor: pointer; padding: 0; }
.pro-hero-dot.is-active { background: var(--pro-accent); border-color: var(--pro-accent); }

.pro-hero-arrow {
    position: absolute; bottom: 28px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.1); color: #fff;
    font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
}
.pro-hero-arrow:hover { background: var(--pro-accent); border-color: var(--pro-accent); color: var(--pro-deep-green); }
.pro-hero-prev { left: calc(50% - 50px); }
.pro-hero-next { left: calc(50% + 10px); }

@media (max-width: 820px) {
    .pro-hero { min-height: 720px; }
    .pro-hero-content { margin-left: auto; margin-right: auto; text-align: center; }
    .pro-hero-description { margin-left: auto; margin-right: auto; }
    .pro-hero-dots { display: none; }
}

/* Smallest phones: tighten spacing so stacked badge/heading/description/button
   need less total height, reducing how often the safety-net overflow below
   is ever actually needed. */
@media (max-width: 480px) {
    .pro-hero { min-height: 640px; }
    .pro-hero-badge,
    .pro-hero-announcement { margin-bottom: 14px; }
    .pro-hero-heading { font-size: clamp(1.7rem, 7vw, 2.4rem); margin-bottom: 12px; }
    .pro-hero-description { font-size: 0.95rem; line-height: 1.5; margin-bottom: 18px; }
}

/* ===================== About / Who We Are ===================== */
.pro-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.pro-about-photos { columns: 2; column-gap: 10px; }
.pro-about-photo { break-inside: avoid; margin-bottom: 10px; border-radius: 12px; overflow: hidden; }
.pro-about-photo img { width: 100%; height: auto; display: block; }

@media (min-width: 700px) {
    .pro-about-photos { columns: 3; }
}

@media (max-width: 900px) {
    .pro-about-grid { grid-template-columns: 1fr; }
}

/* ===================== What We Do cards ===================== */
.pro-cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .pro-cards-3 { grid-template-columns: 1fr; } }

.pro-card {
    background: #fff; border-radius: 8px; padding: 36px 30px; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pro-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,0.09); }
.pro-card-icon { width: 56px; height: 56px; margin: 0 auto 18px; color: var(--pro-primary); }
.pro-card-icon svg { width: 100%; height: 100%; }
.pro-card h3 { margin-bottom: 10px; }

/* Solid color variants - used on the About page's "What We Do" cards */
.pro-card-solid-primary { background: var(--pro-primary); }
.pro-card-solid-primary h3,
.pro-card-solid-primary p { color: #fff; }
.pro-card-solid-primary .pro-card-icon { color: #fff; }

.pro-card-solid-secondary { background: var(--pro-secondary); }
.pro-card-solid-secondary h3,
.pro-card-solid-secondary p { color: var(--pro-text); }
.pro-card-solid-secondary .pro-card-icon { color: var(--pro-text); }

.pro-card-solid-accent { background: var(--pro-accent); }
.pro-card-solid-accent h3,
.pro-card-solid-accent p { color: var(--pro-deep-green); }
.pro-card-solid-accent .pro-card-icon { color: var(--pro-deep-green); }

/* ===================== Join Us banner ===================== */
.pro-joinus {
    position: relative; min-height: 480px;
    background-color: var(--pro-dark); background-size: cover; background-position: center; overflow: hidden;
}
.pro-joinus-flexwrap { position: relative; z-index: 3; display: flex; align-items: center; min-height: 480px; }
.pro-joinus-scrim { position: absolute; inset: 0; background: rgba(6,10,8,0.72); z-index: 1; }
.pro-joinus-content { position: relative; }
.pro-joinus-content h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); max-width: 14ch; margin-bottom: 28px; }

.pro-joinus-avatars { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pro-joinus-avatar {
    position: absolute; width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
    border: 2px solid rgba(255,255,255,0.5); animation: pro-float 5s ease-in-out infinite;
}
.pro-joinus-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Scattered decorative positions - purely visual, repeats/wraps for any avatar count */
.pro-avatar-0 { top: 15%; right: 30%; animation-delay: 0s; }
.pro-avatar-1 { top: 30%; right: 20%; width: 44px; height: 44px; animation-delay: 0.6s; }
.pro-avatar-2 { top: 10%; right: 12%; animation-delay: 1.2s; }
.pro-avatar-3 { top: 45%; right: 8%; width: 48px; height: 48px; animation-delay: 1.8s; }
.pro-avatar-4 { top: 60%; right: 22%; animation-delay: 2.4s; }
.pro-avatar-5 { top: 70%; right: 5%; width: 40px; height: 40px; animation-delay: 3s; }

@keyframes pro-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@media (max-width: 820px) {
    .pro-joinus-avatars { display: none; }
    .pro-joinus-content { text-align: center; }
    .pro-joinus-content h2 { max-width: none; margin-left: auto; margin-right: auto; }
}

/* ===================== Blog / Insights cards ===================== */
.pro-blog-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); display: flex; flex-direction: column; }
.pro-blog-card-image { aspect-ratio: 16/10; overflow: hidden; }
.pro-blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.pro-blog-card-body { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }
.pro-blog-meta { display: flex; gap: 16px; font-size: 0.82rem; color: var(--pro-primary); font-weight: 600; margin-bottom: 12px; }
.pro-blog-card h3 { font-size: 1.15rem; margin-bottom: 10px; line-height: 1.35; }
.pro-blog-card h3 a { color: var(--pro-text); }
.pro-blog-card h3 a:hover { color: var(--pro-primary); }
.pro-blog-card p { flex-grow: 1; font-size: 0.92rem; }
.pro-read-more { color: var(--pro-primary); font-weight: 600; font-size: 0.9rem; align-self: flex-start; }
.pro-read-more:hover { color: var(--pro-text); }

.pro-pagination { text-align: center; margin-top: 32px; }
.pro-pagination .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 3px; border-radius: 4px; background: var(--pro-paper-deep); color: var(--pro-text); }
.pro-pagination .page-numbers.current { background: var(--pro-primary); color: #fff; }

/* ===================== Non-Elementor page fallback ===================== */
.pro-page-hero {
    position: relative;
    background-color: var(--pro-primary);
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 56px 24px;
    text-align: center;
}
.pro-page-hero h1 { position: relative; z-index: 1; color: #fff; margin-bottom: 6px; }
.pro-page-hero p,
.pro-page-hero span,
.pro-page-hero a { position: relative; z-index: 1; }
.pro-page-hero p { color: rgba(255,255,255,0.85); margin: 0; }

/* When a background photo is set, add a dark scrim so white text stays readable */
.pro-page-hero-has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(6,10,8,0.6);
    z-index: 0;
}

@media (max-width: 820px) {
    /* "Fixed" backgrounds are unreliable/janky on most mobile browsers -
       force normal scrolling there regardless of the setting. */
    .pro-page-hero,
    .pro-joinus { background-attachment: scroll !important; }
}

.pro-content { padding: 64px 0; }
.pro-content-narrow { max-width: 780px; }
/* =========================================================================
   Entry content - proper branded typography for whatever an admin types
   into the WordPress editor (headings, lists, quotes, images, links,
   tables), rather than leaving it at plain default formatting.
   ========================================================================= */
.pro-entry-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--pro-text);
}

.pro-entry-content > * + * { margin-top: 1.3em; }

.pro-entry-content h2,
.pro-entry-content h3,
.pro-entry-content h4 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--pro-deep-green);
    line-height: 1.3;
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}
.pro-entry-content h2 { font-size: 1.6rem; }
.pro-entry-content h3 { font-size: 1.3rem; }
.pro-entry-content h4 { font-size: 1.1rem; }
.pro-entry-content > h2:first-child,
.pro-entry-content > h3:first-child { margin-top: 0; }

.pro-entry-content p { margin: 0; }

.pro-entry-content a {
    color: var(--pro-primary);
    text-decoration: underline;
    text-decoration-color: rgba(0,135,81,0.35);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.15s ease;
}
.pro-entry-content a:hover { text-decoration-color: var(--pro-primary); }

.pro-entry-content ul,
.pro-entry-content ol {
    padding-left: 1.4em;
    margin: 0;
}
.pro-entry-content ul { list-style: none; }
.pro-entry-content ul li { position: relative; padding-left: 1.5em; margin-bottom: 0.6em; }
.pro-entry-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pro-accent);
}
.pro-entry-content ol li { padding-left: 0.3em; margin-bottom: 0.6em; }
.pro-entry-content ol li::marker { color: var(--pro-primary); font-weight: 700; }

.pro-entry-content blockquote {
    margin: 0;
    padding: 20px 28px;
    border-left: 4px solid var(--pro-accent);
    background: var(--pro-paper-deep, #f2f3ef);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--pro-text-muted);
    font-size: 1.1rem;
}
.pro-entry-content blockquote p { margin: 0; }
.pro-entry-content blockquote p + p { margin-top: 0.8em; }

.pro-entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}
.pro-entry-content figure { margin: 0; }
.pro-entry-content figcaption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--pro-text-muted);
    margin-top: 10px;
}

.pro-entry-content hr {
    border: none;
    border-top: 2px solid var(--pro-line);
    margin: 2em 0;
}

.pro-entry-content strong { color: var(--pro-deep-green); }

.pro-entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.pro-entry-content th {
    background: var(--pro-primary);
    color: #fff;
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
}
.pro-entry-content td { padding: 10px 14px; border-bottom: 1px solid var(--pro-line); }
.pro-entry-content tr:last-child td { border-bottom: none; }

@media (max-width: 600px) {
    .pro-entry-content { font-size: 1rem; }
    .pro-entry-content h2 { font-size: 1.35rem; }
    .pro-entry-content h3 { font-size: 1.15rem; }
    .pro-entry-content blockquote { padding: 16px 20px; font-size: 1rem; }
}

.pro-elementor-content { }

/* Featured image banner on single posts/events - a wide rectangle rather
   than the photo's natural aspect ratio. Height = width x 0.4 (a 2.5:1
   ratio) - design/upload images at roughly 1560x624px (or 780x312px
   minimum) for a crisp, uncropped-looking result. */
.pro-featured-banner {
    aspect-ratio: 2.5 / 1;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 28px;
}
.pro-featured-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===================== Forms ===================== */
.pro-form-section { padding: 56px 24px; }
.pro-form-panel { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--pro-line); border-radius: 8px; padding: 32px; }

.pro-contact-form .pro-form-row { margin-bottom: 16px; }
.pro-contact-form label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.pro-contact-form input[type="text"],
.pro-contact-form input[type="email"],
.pro-contact-form textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--pro-line); border-radius: 4px; font-size: 0.95rem; font-family: inherit;
}
.pro-form-message { margin-top: 12px; font-size: 0.9rem; }
.pro-form-success { color: var(--pro-primary); font-weight: 600; }
.pro-form-error { color: #9c2b2b; }

.pro-alert { padding: 14px 18px; border-radius: 6px; margin-bottom: 24px; font-size: 0.92rem; }
.pro-alert-success { background: #e6f4ea; color: #1a5d3a; border: 1px solid #b7dfc4; }
.pro-alert-error { background: #fdecec; color: #9c2b2b; border: 1px solid #f3c1c1; }

/* ===================== Footer ===================== */
.pro-footer { background: var(--pro-dark); color: rgba(255,255,255,0.65); padding: 64px 0 24px; }
.pro-footer-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 0.9fr 1fr; gap: 40px; margin-bottom: 44px; }
@media (max-width: 900px) { .pro-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pro-footer-grid { grid-template-columns: 1fr; } }

.pro-footer-brand img {
    max-height: 48px;
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 14px;
}
.pro-footer-logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: #fff; margin-bottom: 14px; }
.pro-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 16px; position: relative; padding-bottom: 12px; }
.pro-footer h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; background: var(--pro-accent); }
.pro-footer a { color: rgba(255,255,255,0.65); }
.pro-footer-label { margin-bottom: 2px; font-weight: 600; color: rgba(255,255,255,0.85); }

.pro-footer-menu { list-style: none; margin: 0; padding: 0; }
.pro-footer-menu li { margin-bottom: 10px; }
.pro-footer-menu a {
    position: relative; display: inline-block; color: rgba(255,255,255,0.65);
    font-size: 1rem; font-weight: 400; transition: color 0.2s ease;
}
.pro-footer-menu a::after {
    content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px;
    background: var(--pro-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.pro-footer-menu a:hover { color: #fff; }
.pro-footer-menu a:hover::after { transform: scaleX(1); }

.pro-newsletter-form { display: flex; gap: 0; margin-top: 8px; }
.pro-newsletter-form input {
    flex-grow: 1; min-width: 0; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px 0 0 4px;
    background: rgba(255,255,255,0.06); color: #fff; font-size: 0.9rem;
}
.pro-newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.pro-newsletter-form button {
    flex-shrink: 0; padding: 10px 18px; border: none; border-radius: 0 4px 4px 0; background: var(--pro-primary);
    color: #fff; font-weight: 600; cursor: pointer; font-size: 0.9rem;
}
.pro-newsletter-form button:hover { background: var(--pro-accent); color: var(--pro-deep-green); }
.pro-newsletter-message { font-size: 0.85rem; margin-top: 8px; }

@media (max-width: 400px) {
    .pro-newsletter-form { flex-direction: column; gap: 8px; }
    .pro-newsletter-form input,
    .pro-newsletter-form button { border-radius: 4px; width: 100%; }
}

.pro-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 20px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    text-align: center;
}
.pro-footer-credit { color: rgba(255,255,255,0.5); }

@media (max-width: 560px) {
    .pro-footer-bottom { flex-direction: column; justify-content: center; }
}

/* ===================== Back to top ===================== */
.pro-back-to-top {
    position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid var(--pro-primary); background: #fff; color: var(--pro-primary); font-size: 1.2rem;
    cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    z-index: 100;
}
.pro-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.pro-back-to-top:hover { background: var(--pro-primary); color: #fff; }

/* =========================================================================
   Ease-in scroll reveal utility (used across About / Contact / Blog pages)
   ========================================================================= */
.pro-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.pro-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* =========================================================================
   Diagonal-cut section band (used on the About page hero + CTA band)
   ========================================================================= */
.pro-diagonal-band {
    position: relative;
    background-color: var(--pro-primary);
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 90px 0 130px;
    overflow: hidden;
}
.pro-diagonal-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(6, 20, 12, 0.55);
    z-index: 0;
}
.pro-diagonal-band-content { position: relative; z-index: 1; }
.pro-diagonal-band::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 90px;
    background: var(--pro-paper);
    clip-path: polygon(0 45%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 2;
}
.pro-diagonal-band-flip::after {
    clip-path: polygon(0 0%, 100% 45%, 100% 100%, 0% 100%);
}

@media (max-width: 700px) {
    .pro-diagonal-band { padding: 64px 0 90px; }
    .pro-diagonal-band::after { height: 56px; }
}

/* =========================================================================
   Contact page - floating split card (info panel + form)
   ========================================================================= */
.pro-contact-section {
    padding: 70px 0 90px;
    background: linear-gradient(180deg, var(--pro-paper-deep) 0%, var(--pro-paper) 60%);
}

.pro-contact-card {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0,0,0,0.12);
}

.pro-contact-info {
    position: relative;
    background: var(--pro-primary);
    color: #fff;
    padding: 48px 40px;
    overflow: hidden;
}
.pro-contact-info h2 { color: #fff; margin-bottom: 12px; }
.pro-contact-info p { color: rgba(255,255,255,0.82); margin-bottom: 32px; }

.pro-contact-items { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; }
.pro-contact-item { display: flex; align-items: flex-start; gap: 14px; }
.pro-contact-icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
}
.pro-contact-icon svg { width: 18px; height: 18px; color: #fff; }
.pro-contact-text { color: rgba(255,255,255,0.92); font-size: 0.95rem; line-height: 1.5; }
.pro-contact-text strong { color: #fff; }
.pro-contact-text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.pro-contact-text a:hover { color: var(--pro-accent); }

.pro-contact-circle {
    position: absolute;
    right: -60px; bottom: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    z-index: 0;
}

.pro-contact-form-wrap { padding: 48px 44px; }
.pro-contact-form-wrap .pro-entry-content { margin-bottom: 20px; }

.pro-form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Sleek underline-style inputs, replacing the boxed default inside this card */
.pro-contact-form-wrap .pro-contact-form label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pro-text-muted);
    font-weight: 600;
}
.pro-contact-form-wrap .pro-contact-form input[type="text"],
.pro-contact-form-wrap .pro-contact-form input[type="email"],
.pro-contact-form-wrap .pro-contact-form textarea {
    border: none;
    border-bottom: 2px solid var(--pro-line);
    border-radius: 0;
    padding: 8px 2px;
    background: transparent;
    font-size: 1rem;
    transition: border-color 0.2s ease;
    resize: none;
}
.pro-contact-form-wrap .pro-contact-form input:focus,
.pro-contact-form-wrap .pro-contact-form textarea:focus {
    outline: none;
    border-color: var(--pro-primary);
}
.pro-contact-form-wrap .pro-form-row { margin-bottom: 22px; }

@media (max-width: 900px) {
    .pro-contact-card { grid-template-columns: 1fr; }
    .pro-contact-info { padding: 40px 32px; }
    .pro-contact-form-wrap { padding: 40px 32px; }
}

@media (max-width: 560px) {
    .pro-form-row-split { grid-template-columns: 1fr; gap: 0; }
    .pro-contact-form-wrap { padding: 32px 22px; }
    .pro-contact-info { padding: 32px 22px; }
}

/* =========================================================================
   Blog / News page - dark theme (matches this page only, rest of site
   stays light - same pattern already used for the hero and Join Us band)
   ========================================================================= */
.pro-blog-dark-section {
    background: #1B2620; /* deliberately lighter than the footer's near-black, so the two areas read as distinct */
    padding: 80px 0 100px;
}
.pro-blog-dark-section .pro-eyebrow,
.pro-blog-dark-section .pro-eyebrow::before { color: var(--pro-accent); }
.pro-blog-dark-section .pro-eyebrow::before { background: var(--pro-accent); }
.pro-eyebrow-center::after { content: ''; width: 22px; height: 2px; background: var(--pro-primary); display: inline-block; }
.pro-blog-dark-section .pro-eyebrow-center::after { background: var(--pro-accent); }
.pro-blog-dark-section .pro-heading-xl { color: #fff; }

.pro-blog-dark-section .pro-blog-card {
    background: rgba(255,255,255,0.04);
    box-shadow: none;
    border: 1px solid rgba(255,255,255,0.08);
}
.pro-blog-dark-section .pro-blog-meta span { color: var(--pro-accent); font-weight: 600; }
.pro-blog-dark-section .pro-blog-card h3 a { color: #fff; }
.pro-blog-dark-section .pro-blog-card h3 a:hover { color: var(--pro-accent); }
.pro-blog-dark-section .pro-blog-card p { color: rgba(255,255,255,0.65); }
.pro-blog-dark-section .pro-read-more { color: var(--pro-accent); }
.pro-blog-dark-section .pro-read-more:hover { color: #fff; }

.pro-blog-dark-section .pro-pagination .page-numbers {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
}
.pro-blog-dark-section .pro-pagination .page-numbers.current { background: var(--pro-primary); color: #fff; }

@media (max-width: 700px) {
    .pro-blog-dark-section { padding: 56px 0 64px; }
}

/* =========================================================================
   Vision & Mission (About page)
   ========================================================================= */
.pro-vision-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pro-vm-card {
    background: #fff;
    border-radius: 10px;
    padding: 36px 34px;
    border-left: 4px solid var(--pro-primary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.pro-vm-card-accent { border-left-color: var(--pro-accent); }
.pro-vm-label {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--pro-primary);
    margin-bottom: 14px;
}
.pro-vm-card-accent .pro-vm-label { color: var(--pro-deep-green); }
.pro-vm-card p { margin: 0; font-size: 1.02rem; line-height: 1.7; }

@media (max-width: 700px) {
    .pro-vision-mission { grid-template-columns: 1fr; }
}

/* =========================================================================
   Collapsible long-form content (e.g. "Our History" on the About page)
   ========================================================================= */
.pro-readmore {
    position: relative;
    max-height: 480px;
    overflow: hidden;
    transition: max-height 0.5s ease;
}
.pro-readmore.is-expanded { max-height: 6000px; }

.pro-readmore-inner h2,
.pro-readmore-inner h3 { margin-top: 1.4em; }
.pro-readmore-inner ol,
.pro-readmore-inner ul { padding-left: 1.4em; }
.pro-readmore-inner li { margin-bottom: 0.5em; }
.pro-readmore-inner p { line-height: 1.75; }

.pro-readmore-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(242,243,239,0) 0%, var(--pro-paper-deep) 90%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.pro-readmore.is-expanded .pro-readmore-fade { opacity: 0; }

.pro-readmore-toggle {
    display: block;
    margin: 16px auto 0;
    padding: 12px 28px;
    border: 2px solid var(--pro-primary);
    border-radius: 999px;
    background: transparent;
    color: var(--pro-primary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
    z-index: 1;
}
.pro-readmore-toggle:hover { background: var(--pro-primary); color: #fff; }

/* =========================================================================
   Board of Trustees (About page) - all names display equally, no hierarchy
   ========================================================================= */
.pro-trustee-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 900px;
    margin: 0 auto;
}
.pro-trustee-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 16px 18px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    font-size: 0.92rem;
    font-weight: 500;
}
.pro-trustee-icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--pro-primary); }
.pro-trustee-icon svg { width: 100%; height: 100%; }

@media (max-width: 900px) {
    .pro-trustee-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .pro-trustee-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   History 2-column section with commitments accordion (About page)
   ========================================================================= */
.pro-history-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}
.pro-history-left p {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--pro-text);
    font-family: var(--font-display);
    font-weight: 600;
}
.pro-history-right p { margin-bottom: 1em; }

@media (max-width: 800px) {
    .pro-history-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Accordion */
.pro-accordion { border-top: 1px solid var(--pro-line); margin-top: 20px; }
.pro-accordion-item { border-bottom: 1px solid var(--pro-line); }
.pro-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 4px;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--pro-text);
    cursor: pointer;
}
.pro-accordion-header:hover { color: var(--pro-primary); }
.pro-accordion-icon {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--pro-primary);
    color: var(--pro-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.25s ease, background 0.15s ease, color 0.15s ease;
}
.pro-accordion-item.is-open .pro-accordion-icon {
    transform: rotate(135deg);
    background: var(--pro-primary);
    color: #fff;
}
.pro-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.pro-accordion-item.is-open .pro-accordion-body { max-height: 1400px; }
.pro-accordion-body p { margin: 0 0 16px 4px; color: var(--pro-text-muted); font-size: 0.92rem; line-height: 1.6; }

/* =========================================================================
   History and Background - flowing two-column text (About page)
   ========================================================================= */
.pro-history-columns {
    columns: 2;
    column-gap: 56px;
    max-width: 1080px;
    margin: 0 auto;
}
.pro-history-columns p {
    margin: 0 0 1.3em;
    line-height: 1.8;
    color: var(--pro-text);
    font-size: 0.98rem;
}

@media (max-width: 800px) {
    .pro-history-columns { columns: 1; }
}

/* International Engagement - deliberately continuous with the section
   above (same background, no hard divider) so it reads as "part of the
   same story" rather than a new, separate topic. */
.pro-intl-section {
    max-width: 820px;
    margin: 56px auto 0;
    padding-top: 44px;
    border-top: 1px solid var(--pro-line);
}
.pro-intl-heading {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--pro-primary);
    margin-bottom: 16px;
}
.pro-intl-section p { line-height: 1.75; margin-bottom: 1em; }

.pro-wfsa-list {
    margin: 20px 0 0;
    padding-left: 1.4em;
    counter-reset: none;
}
.pro-wfsa-list li {
    margin-bottom: 14px;
    line-height: 1.6;
    color: var(--pro-text);
}
.pro-wfsa-list li strong { color: var(--pro-primary); }

/* =========================================================================
   Media page - tile grid, one tile per real photo/video, each labeled
   by type with its own title and description
   ========================================================================= */
.pro-media-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.pro-media-tile-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.pro-media-tile {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pro-media-tile-btn:hover .pro-media-tile { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.1); }

.pro-media-tile-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--pro-primary);
}
.pro-media-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.pro-media-tile-btn:hover .pro-media-tile-image img { transform: scale(1.05); }

.pro-media-type-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(14,20,16,0.75);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    backdrop-filter: blur(3px);
}
.pro-media-type-badge svg { width: 12px; height: 12px; }

.pro-media-tile-body { padding: 18px 20px 22px; }
.pro-media-tile-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--pro-text);
    margin-bottom: 6px;
    line-height: 1.35;
}
.pro-media-tile-desc {
    font-size: 0.88rem;
    color: var(--pro-text-muted);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 900px) {
    .pro-media-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .pro-media-tiles { grid-template-columns: 1fr; }
}

/* =========================================================================
   Advert banner - a horizontal strip shown right under the header, and
   again just before the Events section. Rotates automatically between
   configured ads if more than one is set. Can be turned off entirely
   from Homepage Settings without losing the configured ads.
   ========================================================================= */
.pro-advert-banner-wrap {
    text-align: center;
    padding: 18px 20px;
    background: var(--pro-paper-deep, #f2f3ef);
    border-bottom: 1px solid var(--pro-line);
}

.pro-advert-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pro-text-muted);
    margin-bottom: 12px;
}

.pro-advert-banner {
    position: relative;
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
    aspect-ratio: 970 / 120; /* matches the recommended 970x120 ad image - scales
                                proportionally at any width instead of using a
                                fixed height that would distort the crop at
                                different screen sizes */
}

.pro-advert-banner-item {
    display: block;
    position: absolute;
    inset: 0;
    text-decoration: none;
    border-radius: 6px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease;
}
.pro-advert-banner-item.is-active { opacity: 1; visibility: visible; }

.pro-advert-banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 600px) {
    .pro-advert-banner-wrap { padding: 14px 16px; }
}

/* =========================================================================
   Registration page - Dues / Events Registration tabs
   ========================================================================= */
.pro-tabs { max-width: 640px; margin: 0 auto; }

.pro-tab-nav { display: flex; gap: 8px; border-bottom: 2px solid var(--pro-line); margin-bottom: 32px; }
.pro-tab-btn {
    padding: 14px 24px;
    border: none;
    background: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--pro-text-muted);
    cursor: pointer;
    position: relative;
    top: 2px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.pro-tab-btn:hover { color: var(--pro-primary); }
.pro-tab-btn.is-active { color: var(--pro-primary); border-color: var(--pro-primary); }

.pro-tab-panel { display: none; }
.pro-tab-panel.is-active { display: block; }

/* Dues card */
.pro-dues-card {
    background: var(--pro-primary);
    color: #fff;
    border-radius: 12px;
    padding: 36px 32px;
    text-align: center;
}
.pro-dues-heading { color: #fff; font-size: 1.3rem; letter-spacing: 0.02em; margin-bottom: 6px; }
.pro-dues-subheading { color: var(--pro-accent); font-weight: 700; font-size: 1.05rem; margin-bottom: 28px; }

.pro-dues-list { list-style: none; margin: 0 0 30px; padding: 0; text-align: left; max-width: 380px; margin-left: auto; margin-right: auto; }
.pro-dues-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.pro-dues-list li:last-child { border-bottom: none; }
.pro-dues-label { color: rgba(255,255,255,0.9); }
.pro-dues-amount { color: var(--pro-accent); font-weight: 700; white-space: nowrap; }

.pro-dues-payment,
.pro-dues-contacts {
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 18px 20px;
    margin-top: 16px;
    text-align: left;
}
.pro-dues-payment-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pro-accent);
    margin-bottom: 8px;
}
.pro-dues-payment p { color: rgba(255,255,255,0.92); margin: 0; }
.pro-dues-contact { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: rgba(255,255,255,0.92); margin: 0 0 6px; }
.pro-dues-contact:last-child { margin-bottom: 0; }
.pro-dues-contact a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pro-dues-contact a:hover { color: var(--pro-accent); }

.pro-event-meta { color: var(--pro-primary); font-weight: 600; font-size: 0.9rem; }

.pro-event-categories { list-style: none; margin: 12px 0; padding: 0; }
.pro-event-categories li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--pro-line);
    font-size: 0.92rem;
}
.pro-event-categories li:last-child { border-bottom: none; }
.pro-event-categories li span { color: var(--pro-text-muted); }
.pro-event-categories li strong { color: var(--pro-primary); white-space: nowrap; }

.pro-event-inline-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--pro-line); }

@media (max-width: 560px) {
    .pro-tab-nav { gap: 0; }
    .pro-tab-btn { flex: 1; padding: 12px 10px; font-size: 0.92rem; }
    .pro-dues-card { padding: 28px 22px; }
    .pro-dues-contact { flex-direction: column; gap: 2px; }
}

/* Signup / Login call-to-action buttons on the Membership page, replacing
   the embedded signup form now that it lives on its own dedicated page.
   Given its own clear breathing room and a divider above it, so it reads
   as a distinct section rather than sitting cramped against the dues
   card right above it. */
.pro-membership-cta {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 90px;
    padding-top: 40px;
    border-top: 1px solid var(--pro-line);
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .pro-membership-cta { margin-top: 64px; padding-top: 28px; flex-direction: column; align-items: stretch; }
    .pro-membership-cta .pro-btn { text-align: center; }
}

/* =========================================================================
   Sub-Specialty & Affiliates - partner/sister organization cards, each
   showing the logo in its normal colors, the organization's name, and a
   "More Info" button linking out to their website.
   ========================================================================= */
.pro-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    align-items: stretch;
}

.pro-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    padding: 28px 20px 24px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pro-logo-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.1);
}

.pro-logo-item img {
    max-width: 100%;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 16px;
}

.pro-logo-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--pro-text);
    margin-bottom: 16px;
}

.pro-logo-btn {
    margin-top: auto;
    display: inline-block;
    padding: 9px 22px;
    border-radius: 999px;
    border: 1.5px solid var(--pro-primary);
    color: var(--pro-primary);
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.pro-logo-btn:hover { background: var(--pro-primary); color: #fff; }

@media (max-width: 900px) {
    .pro-logo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .pro-logo-grid { grid-template-columns: 1fr; gap: 18px; }
    .pro-logo-item { padding: 22px 18px 20px; }
    .pro-logo-item img { max-height: 52px; }
}

/* =========================================================================
   Preloader - shows the site logo full-screen while a page is loading,
   on every page. Fades out once the page has fully loaded, with a safety
   timeout so it can never get stuck showing indefinitely if something
   takes unusually long.
   ========================================================================= */
.pro-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.pro-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.pro-preloader-logo {
    animation: pro-preloader-pulse 1.6s ease-in-out infinite;
}
.pro-preloader-logo img {
    max-height: 90px;
    max-width: 260px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.pro-preloader-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--pro-primary);
}

@keyframes pro-preloader-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
    .pro-preloader-logo { animation: none; }
}

/* =========================================================================
   Single Event page - meta pills, quick facts card, hero actions,
   registration/gallery section headers, back link
   ========================================================================= */
.pro-event-meta-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.pro-event-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.92);
    font-size: 0.88rem;
    font-weight: 500;
    position: relative;
    z-index: 1;
}
.pro-event-pill svg { width: 15px; height: 15px; flex-shrink: 0; }

.pro-event-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 22px; position: relative; z-index: 1; }

.pro-btn-outline-light {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.6);
}
.pro-btn-outline-light:hover { background: rgba(255,255,255,0.15); border-color: #fff; }

.pro-event-quickfacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
    background: var(--pro-paper-deep, #f2f3ef);
    border-radius: 10px;
    padding: 24px 28px;
    margin: 0 0 36px;
}
.pro-quickfact { display: flex; flex-direction: column; gap: 4px; }
.pro-quickfact-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pro-text-muted); }
.pro-quickfact-value { font-family: var(--font-display); font-weight: 700; color: var(--pro-primary); font-size: 1.05rem; }

.pro-event-register-section,
.pro-event-gallery-section {
    margin-top: 56px;
    padding-top: 44px;
    border-top: 1px solid var(--pro-line);
}
.pro-event-register-section .pro-section-head,
.pro-event-gallery-section .pro-section-head { margin-bottom: 24px; }

.pro-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    color: var(--pro-primary);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
}
.pro-back-link:hover { text-decoration: underline; }
.pro-back-link svg { flex-shrink: 0; }

@media (max-width: 560px) {
    .pro-event-quickfacts { grid-template-columns: repeat(2, 1fr); padding: 20px; gap: 18px; }
    .pro-event-hero-actions { flex-direction: column; align-items: center; }
    .pro-event-hero-actions .pro-btn { width: 100%; text-align: center; }
}

/* =========================================================================
   Membership page - categories, fees, how to join, event registration list
   ========================================================================= */
.pro-form-panel-wide { max-width: 900px; }
.pro-tabs { max-width: 1080px; }
.pro-tab-nav { max-width: 640px; margin-left: auto; margin-right: auto; }

.pro-mship-head { text-align: center; margin: 0 0 32px; }
.pro-mship-head h2, .pro-mship-intro h2 { margin: 6px 0 0; font-size: 1.9rem; color: var(--pro-deep-green); line-height: 1.25; }
.pro-mship-intro { text-align: center; max-width: 720px; margin: 8px auto 44px; }
.pro-mship-intro p { margin: 14px 0 0; color: var(--pro-text-muted); font-size: 1.05rem; line-height: 1.75; }

/* categories: three across, then two - never one orphaned card */
.pro-mship-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; margin: 0 0 80px; }
.pro-mcat { grid-column: span 2; position: relative; background: #fff; border: 1px solid var(--pro-line); border-radius: 16px; padding: 26px 26px 24px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pro-mcat:nth-child(n+4) { grid-column: span 3; }
.pro-mcat::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--pro-line); transition: background .2s ease; }
.pro-mcat.is-open::before { background: var(--pro-primary); }
.pro-mcat:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(11,68,40,.10); border-color: transparent; }
.pro-mcat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pro-mcat-num { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--pro-primary); background: #e8f5ee; border-radius: 999px; padding: 4px 12px; }
.pro-mcat-tag { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pro-text-muted); }
.pro-mcat.is-open .pro-mcat-tag { color: var(--pro-primary); }
.pro-mcat h3 { margin: 0 0 10px; font-size: 1.2rem; color: var(--pro-deep-green); }
.pro-mcat p { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--pro-text-muted); }

/* fees - on a light panel, so text is always readable */
.pro-mship-fees { background: var(--pro-paper-deep, #f2f3ef); border-radius: 24px; padding: 56px 48px 52px; margin: 0 0 80px; }
.pro-fee-reg { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: nowrap; text-align: left; background: #fff; border: 1px solid var(--pro-line); border-radius: 16px; padding: 22px 30px; max-width: 680px; margin: 0 auto 40px; }
.pro-fee-reg-amt { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; color: var(--pro-primary); line-height: 1; }
.pro-fee-reg > div { min-width: 0; }
.pro-fee-reg-amt { flex: 0 0 auto; }
.pro-fee-reg strong { display: block; color: var(--pro-deep-green); font-size: 1.02rem; }
.pro-fee-reg p { margin: 4px 0 0; font-size: .92rem; color: var(--pro-text-muted); line-height: 1.55; }
.pro-fee-sub { text-align: center; margin: 0 0 20px; font-size: 1.05rem; color: var(--pro-deep-green); }
.pro-fee-sub small { display: block; margin-top: 4px; font-weight: 400; font-size: .82rem; color: var(--pro-text-muted); }
.pro-fee-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin: 0 0 40px; }
.pro-fee-tiles:last-child { margin-bottom: 0; }
.pro-fee-tiles-lifetime { max-width: 620px; margin-left: auto; margin-right: auto; }
.pro-fee-tile { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border: 1px solid var(--pro-line); border-radius: 16px; padding: 26px 18px 22px; transition: transform .2s ease, box-shadow .2s ease; }
.pro-fee-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(11,68,40,.09); }
.pro-fee-name { font-size: .9rem; font-weight: 600; color: var(--pro-text-muted); line-height: 1.4; min-height: 2.9em; display: flex; align-items: center; justify-content: center; }
.pro-fee-amt { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--pro-primary); margin: 6px 0 2px; line-height: 1.2; }
.pro-fee-per { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pro-text-muted); }

/* line up name / amount / caption across tiles in the same row, however long the names are */
@supports (grid-template-rows: subgrid) {
    .pro-fee-tile { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; justify-items: center; align-items: center; }
    .pro-fee-name { min-height: 0; }
    .pro-fee-amt { margin: 6px 0 2px; }
}

/* how to join - two clear paths */
.pro-join-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 900px; margin: 0 auto; }
.pro-join-path { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid var(--pro-line); border-radius: 20px; padding: 36px 34px 32px; }
.pro-join-path h3 { margin: 0 0 10px; font-size: 1.35rem; color: var(--pro-deep-green); }
.pro-join-path p { margin: 0 0 24px; color: var(--pro-text-muted); line-height: 1.7; flex: 1; }
.pro-join-path p { order: 1; }
.pro-join-path small { order: 2; margin: -14px 0 22px; font-size: .82rem; color: var(--pro-text-muted); }
.pro-join-path .pro-btn { order: 3; }
.pro-join-path .pro-btn { width: 100%; text-align: center; padding-left: 18px; padding-right: 18px; line-height: 1.4; }
.pro-join-path.is-primary { background: var(--pro-deep-green); border-color: var(--pro-deep-green); }
.pro-join-path.is-primary h3 { color: #fff; }
.pro-join-path.is-primary p { color: rgba(255,255,255,.82); }
.pro-join-path.is-primary .pro-btn { background: var(--pro-accent); border-color: var(--pro-accent); color: var(--pro-deep-green); }
.pro-join-path.is-primary .pro-btn:hover { background: #fff; border-color: #fff; }
.pro-join-login { text-align: center; margin: 28px 0 0; font-size: .95rem; color: var(--pro-text-muted); }
.pro-join-login a { color: var(--pro-primary); font-weight: 600; }

/* events registration list */
.pro-tab-panel[data-tab-panel="events"] .pro-accordion { max-width: 820px; margin: 0 auto; }
.pro-tab-panel[data-tab-panel="events"] .pro-accordion-item { border: 1px solid var(--pro-line); border-radius: 16px; background: #fff; margin-bottom: 16px; overflow: hidden; transition: box-shadow .2s ease; }
.pro-tab-panel[data-tab-panel="events"] .pro-accordion-item:hover, .pro-tab-panel[data-tab-panel="events"] .pro-accordion-item.is-open { box-shadow: 0 14px 32px rgba(11,68,40,.09); }
.pro-ev-header { display: flex; align-items: center; gap: 18px; padding: 18px 22px; text-align: left; }
.pro-ev-date { flex: 0 0 auto; width: 58px; height: 62px; border-radius: 12px; background: var(--pro-primary); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.pro-ev-date b { font-family: var(--font-display); font-size: 1.5rem; }
.pro-ev-date i { font-style: normal; font-size: .7rem; letter-spacing: .08em; margin-top: 4px; opacity: .9; }
.pro-ev-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pro-ev-title strong { font-size: 1.05rem; color: var(--pro-deep-green); line-height: 1.35; }
.pro-ev-title small { font-size: .85rem; color: var(--pro-text-muted); font-weight: 400; }
.pro-ev-open { flex: 0 0 auto; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pro-primary); background: #e8f5ee; border-radius: 999px; padding: 5px 12px; }
.pro-tab-panel[data-tab-panel="events"] .pro-accordion-body { padding-left: 22px; padding-right: 22px; }

@media (max-width: 900px) {
    .pro-mship-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pro-mcat, .pro-mcat:nth-child(n+4) { grid-column: span 1; }
    .pro-mcat:last-child { grid-column: 1 / -1; }
    .pro-mship-fees { padding: 40px 24px 36px; }
    .pro-join-paths { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .pro-mship-cats { grid-template-columns: 1fr; gap: 16px; margin-bottom: 56px; }
    .pro-mship-head h2, .pro-mship-intro h2 { font-size: 1.55rem; }
    .pro-mship-fees { border-radius: 18px; margin-bottom: 56px; padding: 32px 16px 28px; }
    .pro-fee-reg { flex-direction: column; text-align: center; gap: 10px; padding: 20px; }
    .pro-fee-tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
    .pro-fee-tile { padding: 20px 10px 18px; }
    .pro-fee-amt { font-size: 1.45rem; }
    .pro-join-path { padding: 28px 22px 26px; }
    .pro-ev-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "date title icon" "date open icon"; gap: 6px 14px; align-items: center; padding: 16px; }
    .pro-ev-date { grid-area: date; width: 52px; height: 56px; }
    .pro-ev-title { grid-area: title; }
    .pro-ev-open { grid-area: open; justify-self: start; }
    .pro-ev-header .pro-accordion-icon { grid-area: icon; }
}