/*
Theme Name: Strand Brewers Club
Template: kadence
Description: Custom child theme for the Strand Brewers Club website. Built on Kadence Free.
Version: 4.6.4
Author: Strand Brewers Club Dev Team
Text Domain: strand-brewers
*/

/* Google Fonts loaded via functions.php wp_enqueue_style — no @import needed */


/* ======================================================================
   1. RESET & BASE
   Minimal reset, box-sizing, body defaults.
   Kadence's component CSS is fully dequeued — we own everything now.
   ====================================================================== */

:root {
    /* -- Brand Colors -- */
    --sb-navy: #0B1D2E;
    --sb-amber: #D4920B;
    --sb-amber-hover: #B07808;
    --sb-amber-accessible: #B8860B; /* Rich gold for links — more vibrant than brown */
    --sb-golden: #E8A817;
    --sb-cream: #F5F0E8;
    --sb-background: #FAFAF5;
    --sb-white: #FFFFFF;
    --sb-text: #2C2C2C;
    --sb-slate: #5E6E7E;
    --sb-border: #E8E4DD;
    --sb-footer-bottom: #091828;

    /* -- Typography -- */
    --sb-font-display: 'Playfair Display', Georgia, serif;
    --sb-font-heading: 'Bebas Neue', 'Arial Narrow', sans-serif;
    --sb-font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;

    /* -- Spacing -- */
    --sb-section-pad: 80px;
    --sb-content-max: 1100px;
    --sb-content-narrow: 800px;
    --sb-content-pad: 40px;
    --sb-card-radius: 16px;
    --sb-radius: 8px;

    /* -- Surfaces -- */
    --sb-shadow: 0 2px 12px rgba(11, 29, 46, 0.08);
    --sb-shadow-hover: 0 8px 30px rgba(11, 29, 46, 0.14);
    --sb-transition: 0.25s ease;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--sb-font-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--sb-text);
    background-color: var(--sb-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Remove default margins on common elements */
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
    margin-top: 0;
}


/* ======================================================================
   2. TYPOGRAPHY
   Headings (h1-h6), body, links, lists, blockquotes
   ====================================================================== */

/* -- Display headings: Playfair Display -- */
h1,
.entry-title,
.page-title {
    font-family: var(--sb-font-display);
    font-weight: 700;
    color: var(--sb-navy);
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: none;
    margin-bottom: 0.5em;
}

h2 {
    font-family: var(--sb-font-display);
    font-weight: 700;
    color: var(--sb-navy);
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
    margin-bottom: 0.5em;
}

/* -- Subheadings: Bebas Neue -- */
h3 {
    font-family: var(--sb-font-heading);
    font-size: 1.5rem;
    letter-spacing: 2px;
    color: var(--sb-navy);
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h4 {
    font-family: var(--sb-font-heading);
    font-size: 1.25rem;
    letter-spacing: 1.5px;
    color: var(--sb-navy);
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h5, h6 {
    font-family: var(--sb-font-heading);
    letter-spacing: 1px;
    color: var(--sb-navy);
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

.site-title {
    font-family: var(--sb-font-heading);
    letter-spacing: 3px;
    color: var(--sb-navy);
    text-transform: uppercase;
}

/* -- Body text -- */
p, li, td, th, label, input, textarea, select {
    font-family: var(--sb-font-body);
    color: var(--sb-text);
}

p {
    margin-bottom: 1.5em;
    line-height: 1.75;
}

/* -- Section labels (small uppercase amber text) -- */
.strand-section-label,
.section-label {
    font-family: var(--sb-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--sb-amber);
    margin-bottom: 16px;
    display: block;
}

/* -- Text links (light backgrounds) -- */
a {
    color: var(--sb-amber-accessible);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--sb-transition);
}

a:hover,
a:focus {
    color: var(--sb-navy);
    text-decoration: none;
}

/* -- Text links (dark backgrounds) -- */
.strand-hero a,
.strand-section-dark a,
.sb-bg-navy a,
[class*="dark"] a {
    color: var(--sb-golden);
    font-weight: 600;
}

.strand-hero a:hover,
.strand-section-dark a:hover,
.sb-bg-navy a:hover {
    color: var(--sb-white);
}

/* -- Blockquotes -- */
blockquote {
    background-color: var(--sb-cream);
    border-left: 4px solid var(--sb-amber);
    border-radius: 0 var(--sb-radius) var(--sb-radius) 0;
    padding: 24px 30px;
    margin: 2em 0;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--sb-navy);
}

blockquote p:last-child {
    margin-bottom: 0;
}

blockquote cite {
    font-family: var(--sb-font-body);
    font-style: normal;
    font-size: 0.85rem;
    color: var(--sb-slate);
    display: block;
    margin-top: 12px;
}

/* -- Horizontal rules -- */
hr {
    border: none;
    height: 1px;
    background-color: var(--sb-border);
    margin: 3em auto;
    max-width: var(--sb-content-max);
}

/* -- List markers -- */
ul li::marker {
    color: var(--sb-amber);
}

ol li::marker {
    color: var(--sb-amber);
    font-weight: 600;
}


/* ======================================================================
   3. LAYOUT & CONTAINERS
   Site wrapper, content containers, max-widths.
   Replaces Kadence's content.min.css layout rules.
   ====================================================================== */

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

.site-container {
    max-width: var(--sb-content-max);
    margin: 0 auto;
    padding-left: var(--sb-content-pad);
    padding-right: var(--sb-content-pad);
    width: 100%;
}

.content-wrap {
    flex: 1;
}

.content-container {
    width: 100%;
}

/* Main content area */
#main {
    width: 100%;
}

.entry-content-wrap {
    padding: var(--sb-content-pad);
}

/* For pages with full-width sections, remove ALL container constraints */
body.page .site-container.content-container,
body.page .content-container.site-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.page .entry-content-wrap,
body.sb-home .entry-content-wrap,
body.sb-membership .entry-content-wrap {
    padding: 0 !important;
    max-width: 100% !important;
}

body.page .content-container,
body.page .entry-content {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Generic entry content spacing */
.entry-content > * {
    margin-bottom: 1.75em;
}

.entry-content p {
    font-size: 17px;
    line-height: 1.8;
}

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

.entry-content li {
    margin-bottom: 0.5em;
    line-height: 1.7;
}


/* ======================================================================
   4. HEADER & NAVIGATION
   Replaces Kadence's header.min.css.
   Solid white, non-transparent, non-sticky.
   ====================================================================== */

#masthead,
.site-header {
    background: var(--sb-white);
    position: relative;
    z-index: 100;
    border-bottom: 1px solid var(--sb-border);
    box-shadow: 0 1px 4px rgba(11, 29, 46, 0.04);
}

/* Header row layout */
.site-header-wrap {
    width: 100%;
}

.site-header-inner-wrap {
    width: 100%;
}

.site-header-upper-wrap {
    width: 100%;
}

.site-header-row-container-inner {
    width: 100%;
}

.site-main-header-inner-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
    padding: 16px 0;
}

.site-header-main-section-left {
    display: flex;
    align-items: center;
}

.site-header-main-section-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Logo / site branding */
.site-branding {
    display: flex;
    align-items: center;
    padding: 0;
}

.site-branding a.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-branding a.brand img {
    max-width: 200px;
    height: auto;
}

.site-branding a.brand img.svg-logo-image {
    width: 200px;
}

/* Desktop navigation */
.main-navigation,
.header-navigation {
    display: flex;
    align-items: center;
}

.primary-menu-container,
.header-menu-container {
    display: flex;
    align-items: center;
}

.primary-menu-container > ul,
.header-menu-container > ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.primary-menu-container > ul > li,
.header-menu-container > ul > li {
    position: relative;
}

/* Nav link styling */
.header-navigation .menu > li > a,
.header-menu-container .menu > li > a,
.main-navigation .menu > li > a,
.main-navigation .primary-menu-container > ul > li.menu-item > a,
.main-navigation .primary-menu-container > ul li.menu-item > a {
    font-family: var(--sb-font-body);
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--sb-navy);
    transition: color var(--sb-transition);
    position: relative;
    padding: 0.6em 0.9em;
    display: block;
    text-decoration: none;
}

/* Amber underline animation on hover */
.header-navigation .menu > li > a::after,
.header-menu-container .menu > li > a::after,
.main-navigation .menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: calc(1.2em / 2);
    width: 0;
    height: 2px;
    background-color: var(--sb-amber);
    transition: width var(--sb-transition);
}

.header-navigation .menu > li > a:hover::after,
.header-menu-container .menu > li > a:hover::after,
.main-navigation .menu > li > a:hover::after,
.header-navigation .menu > li.current-menu-item > a::after,
.header-menu-container .menu > li.current-menu-item > a::after {
    width: calc(100% - 1.2em);
}

.header-navigation .menu > li:not(.strand-nav-login):not(.strand-nav-account):not(.strand-clubhouse-menu) > a:hover,
.header-menu-container .menu > li:not(.strand-nav-login):not(.strand-nav-account):not(.strand-clubhouse-menu) > a:hover,
.main-navigation .menu > li:not(.strand-nav-login):not(.strand-nav-account):not(.strand-clubhouse-menu) > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item:not(.strand-nav-login):not(.strand-nav-account):not(.strand-clubhouse-menu) > a:hover {
    color: var(--sb-amber);
}

/* Current page nav highlight */
.header-navigation .menu > li.current-menu-item > a,
.header-menu-container .menu > li.current-menu-item > a,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
    color: var(--sb-amber);
}

/* Dropdown toggle arrow */
.nav-drop-title-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dropdown-nav-toggle {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
}
/* Hide the dropdown toggle square completely on desktop — dropdown shows on hover */
.dropdown-nav-special-toggle {
    display: none;
}

.dropdown-nav-toggle .kadence-svg-iconset {
    display: inline-flex;
    line-height: 1;
}

.dropdown-nav-toggle svg {
    width: 16px;
    height: 16px;
}

/* Dropdown menus */
.header-navigation .sub-menu,
.header-menu-container .sub-menu,
.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--sb-white);
    border-top: none;
    box-shadow: var(--sb-shadow-hover);
    border-radius: 0 0 var(--sb-radius) var(--sb-radius);
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 200px;
    display: none;
    z-index: 200;
}

/* Show dropdown on hover (Kadence hover-to-open) */
.header-navigation .menu > li:hover > .sub-menu,
.header-menu-container .menu > li:hover > .sub-menu,
.nav--toggle-sub .menu > li:hover > .sub-menu {
    display: block;
}

.header-navigation .sub-menu li,
.header-menu-container .sub-menu li {
    border-bottom: 1px solid var(--sb-border);
}

.header-navigation .sub-menu li:last-child,
.header-menu-container .sub-menu li:last-child {
    border-bottom: none;
}

.header-navigation .sub-menu a,
.header-menu-container .sub-menu a,
.header-navigation .header-menu-container ul ul li.menu-item > a {
    font-family: var(--sb-font-body);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.9rem;
    color: var(--sb-text);
    padding: 1em 20px;
    display: block;
    width: 200px;
    transition: color var(--sb-transition), background-color var(--sb-transition);
}

.header-navigation .sub-menu a:hover,
.header-menu-container .sub-menu a:hover,
.header-navigation .header-menu-container ul ul li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
    color: var(--sb-amber);
    background-color: var(--sb-cream);
}

/* Header button ("Join the Club") — compact primary button */
.header-button a,
.header-mobile-button a {
    background-color: var(--sb-amber);
    color: #000000;
    font-family: var(--sb-font-heading);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 2px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 400;
    display: inline-block;
    transition: background-color var(--sb-transition), color var(--sb-transition), border-color var(--sb-transition), box-shadow var(--sb-transition), transform var(--sb-transition);
}

.header-button a:hover,
.header-mobile-button a:hover {
    background-color: var(--sb-navy);
    color: var(--sb-white);
    border-color: var(--sb-navy);
    box-shadow: var(--sb-shadow);
    transform: translateY(-1px);
}

/* Search toggle */
.search-toggle-open-container {
    display: flex;
    align-items: center;
}

/* Mobile header hidden on desktop */
#mobile-header {
    display: none;
}


/* ======================================================================
   5. MOBILE NAVIGATION
   Replaces Kadence's mobile drawer/toggle styles.
   ====================================================================== */

/* Hamburger toggle */
.mobile-toggle-open-container {
    display: flex;
    align-items: center;
}

.mobile-toggle-open-container .menu-toggle-open {
    background: none;
    border: none;
    color: var(--sb-navy);
    padding: 0.4em 0.6em;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color var(--sb-transition);
}

.mobile-toggle-open-container .menu-toggle-open:hover,
.mobile-toggle-open-container .menu-toggle-open:focus-visible {
    color: var(--sb-amber);
}

.mobile-toggle-open-container .menu-toggle-open .menu-toggle-icon {
    font-size: 20px;
    display: inline-flex;
}

.mobile-toggle-open-container .menu-toggle-open .menu-toggle-icon svg {
    width: 24px;
    height: 24px;
}

/* Mobile drawer (slide-in panel) */
#mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    visibility: hidden;
    transition: visibility 0s 0.3s;
}

body.showing-popup-drawer-from-right #mobile-drawer {
    visibility: visible;
    transition: visibility 0s 0s;
}

/* Overlay backdrop — click to close */
#mobile-drawer .drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    cursor: pointer;
}

body.showing-popup-drawer-from-right #mobile-drawer .drawer-overlay {
    background: rgba(0, 0, 0, 0.5);
}

/* Drawer inner panel */
#mobile-drawer .drawer-inner {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background: var(--sb-navy);
    padding: 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

body.showing-popup-drawer-from-right #mobile-drawer .drawer-inner {
    transform: translateX(0);
}

/* Drawer header with close button */
#mobile-drawer .drawer-header {
    display: flex;
    justify-content: flex-end;
    padding: 16px;
}

#mobile-drawer .drawer-header .drawer-toggle {
    background: none;
    border: none;
    color: var(--sb-cream);
    padding: 8px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mobile-drawer .drawer-header .drawer-toggle:hover,
#mobile-drawer .drawer-header .drawer-toggle:focus-visible {
    color: var(--sb-amber);
}

/* X icon from toggle-close-bar spans */
#mobile-drawer .drawer-header .drawer-toggle .toggle-close-bar {
    display: block;
    position: absolute;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

#mobile-drawer .drawer-header .drawer-toggle .toggle-close-bar:first-child {
    transform: rotate(45deg);
}

#mobile-drawer .drawer-header .drawer-toggle .toggle-close-bar:last-child {
    transform: rotate(-45deg);
}

/* Mobile navigation menu */
.mobile-navigation {
    background-color: var(--sb-navy);
}

.mobile-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-navigation ul li {
    font-size: 14px;
}

.mobile-navigation ul li > a,
.mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
    color: var(--sb-cream);
    font-family: var(--sb-font-body);
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 1em 20px;
    text-decoration: none;
    transition: color var(--sb-transition);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-navigation ul li > a:hover {
    color: var(--sb-amber);
}

.mobile-navigation ul li.current-menu-item > a,
.mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap {
    color: var(--sb-amber);
}

/* Drawer nav drop toggle button (submenu expand arrow) */
.mobile-navigation .drawer-nav-drop-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.mobile-navigation .drawer-nav-drop-wrap a {
    color: var(--sb-cream);
    flex: 1;
    padding: 0;
    border: none;
}

.mobile-navigation .drawer-nav-drop-wrap button {
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--sb-cream);
    padding: 0 16px;
    cursor: pointer;
}

/* Sub-menu inside drawer */
.mobile-navigation ul ul {
    padding-left: 16px;
}

/* Mobile branding in drawer */
.mobile-site-branding {
    display: flex;
    align-items: center;
}


/* ======================================================================
   6. FOOTER
   Replaces Kadence's footer.min.css.
   Navy top section, darker navy bottom section.
   ====================================================================== */

#colophon,
.site-footer {
    background-color: var(--sb-navy);
    color: var(--sb-cream);
    border-top: 3px solid var(--sb-amber);
}

/* Footer row layout */
.site-footer-wrap {
    width: 100%;
}

.site-footer-row-container-inner {
    width: 100%;
}

/* Top footer: 3-column widget area */
.site-top-footer-wrap {
    background: var(--sb-navy);
}

.site-top-footer-wrap .site-footer-row-container-inner {
    background: var(--sb-navy);
    color: var(--sb-cream);
}

/* Reset ALL footer containers to be transparent wrappers */
.site-top-footer-wrap .site-footer-row-container-inner,
.site-top-footer-wrap .site-container,
.site-bottom-footer-wrap .site-footer-row-container-inner,
.site-bottom-footer-wrap .site-container {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.site-top-footer-inner-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 48px var(--sb-content-pad) 24px;
    max-width: var(--sb-content-max);
    margin: 0 auto;
    text-align: center;
}

.site-top-footer-inner-wrap .widget {
    margin-bottom: 16px;
}

/* Footer widget titles */
.site-top-footer-inner-wrap .widget-title,
.site-footer h2.widget-title,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title {
    color: var(--sb-amber);
    font-family: var(--sb-font-heading);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    line-height: 1.4;
    margin-bottom: 16px;
}

/* Footer text */
.site-footer p,
.site-footer li,
.site-top-footer-inner-wrap,
.site-top-footer-inner-wrap * {
    color: rgba(245, 240, 232, 0.8);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Footer links — cream default, golden hover, no underline */
.site-footer a,
.site-top-footer-inner-wrap a,
.site-top-footer-inner-wrap .widget a,
.site-top-footer-inner-wrap .widget li a,
.site-top-footer-inner-wrap .widget_nav_menu a,
.site-footer-wrap .footer-widget-area a {
    color: var(--sb-cream);
    text-decoration: none;
    font-weight: 400;
    transition: color var(--sb-transition);
}

.site-footer a:hover,
.site-top-footer-inner-wrap a:hover,
.site-top-footer-inner-wrap .widget a:hover,
.site-footer-wrap .footer-widget-area a:hover {
    color: var(--sb-golden);
    text-decoration: none;
}

/* Footer widget area navigation menus */
.footer-widget-area ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-widget-area ul li {
    padding: 4px 0;
}

/* Footer widget area */
.footer-widget-area {
    padding: 0;
}

.footer-widget-area-inner {
    width: 100%;
}

/* Footer branding */
.site-footer .footer-branding,
.site-footer .site-title {
    font-family: var(--sb-font-heading);
    font-size: 1.8rem;
    letter-spacing: 4px;
    color: var(--sb-white);
}

/* Bottom footer: copyright bar */
.site-bottom-footer-wrap {
    background: var(--sb-footer-bottom);
}

.site-bottom-footer-wrap .site-footer-row-container-inner {
    background: var(--sb-footer-bottom);
}

.site-bottom-footer-inner-wrap {
    max-width: var(--sb-content-max);
    margin: 0 auto;
    padding: 20px var(--sb-content-pad);
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-bottom-footer-inner-wrap .widget {
    margin-bottom: 0;
}

.site-bottom-footer-wrap,
.site-bottom-footer-wrap *,
.site-bottom-footer-wrap a,
.site-bottom-footer-wrap p,
.site-bottom-footer-wrap .footer-html {
    color: rgba(245, 240, 232, 0.5);
    font-size: 0.85rem;
}

/* Footer section containers */
.site-footer-section {
    width: 100%;
}

.footer-section-inner-items-1 {
    width: 100%;
}

/* Footer bottom section layout */
.site-bottom-footer-inner-wrap.site-footer-row {
    display: flex;
}

.site-footer-bottom-section-1 {
    width: 100%;
    text-align: center;
}


/* ======================================================================
   7. HOMEPAGE SECTIONS
   Hero, alternating sections, benefits grid, proof grid
   ====================================================================== */

/* -- Hero -- */
.strand-hero,
.wp-block-cover.strand-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 100px var(--sb-content-pad);
    background-color: var(--sb-navy);
}

.strand-hero-inner {
    max-width: 700px;
    margin: 0 auto;
}

.strand-hero h1,
.strand-hero h1.entry-title,
.strand-hero .strand-hero-inner h1 {
    font-family: var(--sb-font-display);
    font-size: 52px;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    text-transform: none;
    margin-bottom: 0.5em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    line-height: 1.1;
}

.strand-hero p,
.hero-subtitle {
    font-family: var(--sb-font-body);
    font-size: 1.15rem;
    color: rgba(245, 240, 232, 0.85);
    max-width: 560px;
    margin: 0 auto 2em;
    line-height: 1.7;
}

.strand-hero .section-label,
.strand-hero .strand-section-label {
    color: var(--sb-golden);
    margin-bottom: 24px;
}

.hero-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.hero-cta a {
    flex-shrink: 0;
}

.strand-hero .wp-block-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.strand-hero .wp-block-button__link {
    font-size: 1rem;
    padding: 16px 40px;
    display: inline-block;
    white-space: nowrap;
}

/* ══ DARK BG BUTTON OVERRIDES ══ */

/* Type 1 Primary on dark: hover → white bg, black text */
.strand-hero .btn-primary:hover,
.strand-hero .btn:hover,
.strand-section-dark .btn-primary:hover,
.sb-bg-navy .btn-primary:hover {
    background-color: #FFFFFF;
    color: #000000;
    border-color: #FFFFFF;
}

/* Type 2 Secondary on dark: default → white filled, navy text */
.strand-hero .btn-secondary,
.strand-section-dark .btn-secondary,
.sb-bg-navy .btn-secondary {
    background-color: #FFFFFF;
    color: #0B1D2E;
    border-color: #FFFFFF;
}
/* Type 2 Secondary on dark: hover → amber filled, black text */
.strand-hero .btn-secondary:hover,
.strand-section-dark .btn-secondary:hover,
.sb-bg-navy .btn-secondary:hover {
    background-color: #D4920B;
    color: #000000;
    border-color: #D4920B;
}

/* Type 3 Outline on dark: default → transparent, white text/border */
.strand-hero .btn-outline,
.strand-section-dark .btn-outline,
.sb-bg-navy .btn-outline {
    background-color: transparent;
    color: #FFFFFF;
    border-color: #FFFFFF;
}
/* Type 3 Outline on dark: hover → white filled, navy text */
.strand-hero .btn-outline:hover,
.strand-section-dark .btn-outline:hover,
.sb-bg-navy .btn-outline:hover {
    background-color: #FFFFFF;
    color: #0B1D2E;
    border-color: #FFFFFF;
}

/* Specificity boost for buttons inside hero (beats .strand-hero a link color) */
.strand-hero .btn,
.strand-hero .btn-primary,
.strand-hero a.btn,
.strand-hero a.btn-primary {
    color: #000000;
    font-weight: 400;
}
.strand-hero .btn-secondary,
.strand-hero a.btn-secondary {
    color: #0B1D2E;
    font-weight: 400;
}
.strand-hero .btn-outline,
.strand-hero a.btn-outline {
    color: #FFFFFF;
    font-weight: 400;
}

/* -- Alternating section backgrounds -- */
.strand-section,
.strand-section-white {
    background-color: var(--sb-white);
    padding: 0;
}

.strand-section-cream {
    background-color: var(--sb-cream);
    padding: 0;
}

.strand-section-dark {
    background-color: var(--sb-navy);
    color: var(--sb-cream);
    padding: 0;
}

.strand-section-dark h1,
.strand-section-dark h2,
.strand-section-dark h3,
.strand-section-dark h4,
.strand-section-dark p,
.strand-section-dark li,
.strand-section-dark span {
    color: var(--sb-cream);
}

/* Officer cards inside dark sections — restore dark text on white cards */
.strand-section-dark .officer-card h3,
.strand-section-dark .officer-card .officer-name {
    color: #0B1D2E;
}
.strand-section-dark .officer-card .officer-title {
    color: #D4920B;
}
.strand-section-dark .officer-card p,
.strand-section-dark .officer-card .officer-bio {
    color: #2C2C2C;
}
.strand-section-dark .officer-card .officer-since {
    color: #5E6E7E;
}
.strand-section-dark .officer-card a {
    color: #B8860B;
}

.strand-section-dark a {
    color: var(--sb-amber);
}

.strand-section-dark .section-label,
.strand-section-dark .strand-section-label {
    color: var(--sb-golden);
}

/* Section inner container handles max-width and padding */
.strand-section-inner {
    max-width: var(--sb-content-max);
    margin: 0 auto;
    padding: var(--sb-section-pad) var(--sb-content-pad);
}

/* Remove amber ::before bars on sections (keep only on cards) */
.strand-section::before {
    display: none;
}

/* -- Benefits grid (4-card grid) -- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 40px;
}

/* -- Proof bar section: tighter vertical padding than regular sections -- */
.strand-section-dark:has(.proof-grid) .strand-section-inner,
.strand-section-dark .strand-section-inner:has(.proof-grid) {
    padding-top: 48px;
    padding-bottom: 48px;
}

/* -- Proof grid (stats bar) -- */
.proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
    justify-items: center;
}

.proof-item {
    text-align: center;
}

.proof-stat {
    font-family: var(--sb-font-heading);
    font-size: 3rem;
    color: var(--sb-amber);
    letter-spacing: 2px;
    line-height: 1;
}

.proof-label {
    font-family: var(--sb-font-heading);
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sb-white);
    margin-top: 8px;
}

.proof-detail {
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.45);
    margin-top: 4px;
}

/* -- Section dividers -- */
.strand-divider {
    height: 1px;
    background: var(--sb-border);
    max-width: var(--sb-content-max);
    margin: 0 auto;
}

/* -- Cards -- */
.strand-card {
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
    padding: 36px;
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
}

.strand-card:hover {
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-3px);
}

/* Featured card -- amber left border */
.strand-card-featured,
.strand-card.strand-card-featured {
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-amber);
    box-shadow: var(--sb-shadow);
    padding: 36px;
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
}

.strand-card-featured:hover {
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-3px);
}

/* Dark card */
.strand-card-dark {
    background: var(--sb-navy);
    border-radius: var(--sb-card-radius);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--sb-shadow);
    padding: 36px;
    color: var(--sb-white);
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
}

.strand-card-dark:hover {
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-3px);
}

.strand-card-dark h2,
.strand-card-dark h3,
.strand-card-dark h4 {
    color: var(--sb-white);
}

.strand-card-dark p {
    color: rgba(255, 255, 255, 0.7);
}

/* Cream card */
.strand-card-cream {
    background: var(--sb-cream);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
    padding: 36px;
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
}

/* Note/callout card */
.strand-note {
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.strand-note h3 {
    font-family: var(--sb-font-heading);
    font-size: 16px;
    letter-spacing: 3px;
    color: var(--sb-amber);
    margin-bottom: 6px;
}

.strand-note p {
    font-size: 14px;
    color: var(--sb-slate);
    line-height: 1.6;
    margin-bottom: 0;
}

.strand-section-dark .strand-note {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    border-left-color: var(--sb-amber);
}

.strand-section-dark .strand-note p {
    color: rgba(255, 255, 255, 0.55);
}

/* Tags / labels */
.strand-tag {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sb-slate);
    opacity: 0.5;
}

/* -- Homepage named sections (older markup) -- */
.strand-intro {
    background-color: var(--sb-white);
    padding: var(--sb-section-pad) var(--sb-content-pad);
    text-align: center;
}

.strand-intro .strand-section-inner {
    max-width: 780px;
}

.strand-intro h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.strand-intro p {
    font-size: 17px;
    line-height: 1.8;
}

/* Next meeting section */
.strand-next-meeting {
    background-color: var(--sb-cream);
    padding: var(--sb-section-pad) var(--sb-content-pad);
}

.strand-next-meeting .meeting-card {
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
    padding: 40px;
    max-width: 700px;
    margin: 0 auto;
}

/* Why join / benefits section */
.strand-why-join {
    background-color: var(--sb-white);
    padding: var(--sb-section-pad) var(--sb-content-pad);
}

.strand-why-join .benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 40px;
}

.strand-why-join .benefit-card {
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
    border-top: 4px solid var(--sb-amber);
    box-shadow: var(--sb-shadow);
    padding: 36px 32px;
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
    position: relative;
}

.strand-why-join .benefit-card:nth-child(even) {
    background: var(--sb-cream);
}

.strand-why-join .benefit-card::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--sb-amber);
    border-radius: 2px;
    margin-bottom: 20px;
}

.strand-why-join .benefit-card:hover {
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-3px);
}

.strand-why-join .benefit-card h3 {
    font-family: var(--sb-font-heading);
    font-size: 28px;
    color: var(--sb-navy);
    margin-bottom: 14px;
    letter-spacing: 2px;
}

.strand-why-join .benefit-card p {
    font-size: 15px;
    line-height: 1.7;
}

/* Proof bar section */
.strand-proof-bar {
    background-color: var(--sb-navy);
    color: var(--sb-white);
    padding: var(--sb-section-pad) var(--sb-content-pad);
    text-align: center;
}

.strand-proof-bar h2 {
    color: var(--sb-white);
    font-size: 32px;
    margin-bottom: 16px;
}

.strand-proof-bar p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 15px;
    line-height: 1.7;
}

.strand-proof-bar .stat {
    font-family: var(--sb-font-heading);
    font-size: 3rem;
    color: var(--sb-amber);
    letter-spacing: 2px;
}

.strand-proof-bar .stat-label {
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

/* Newsletter section */
.strand-newsletter {
    background-color: var(--sb-cream);
    padding: var(--sb-section-pad) var(--sb-content-pad);
    text-align: center;
}

.strand-newsletter .strand-section-inner {
    max-width: 600px;
}

.strand-newsletter h2 {
    font-size: 32px;
    margin-bottom: 16px;
}

/* MC4WP form inside newsletter section */
.strand-newsletter .mc4wp-form-fields p {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 24px auto 0;
    max-width: 480px;
}

.strand-newsletter .mc4wp-form-fields input[type="email"] {
    flex: 1 1 260px;
    padding: 12px 16px;
    font-size: 16px;
    border: 2px solid var(--sb-navy);
    border-radius: 4px;
    background: #fff;
    font-family: var(--sb-font-body, sans-serif);
}

.strand-newsletter .mc4wp-form-fields input[type="email"]:focus {
    outline: none;
    border-color: var(--sb-amber);
    box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.25);
}

.strand-newsletter .mc4wp-form-fields input[type="submit"] {
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--sb-font-display, sans-serif);
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: var(--sb-amber);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.strand-newsletter .mc4wp-form-fields input[type="submit"]:hover {
    background-color: var(--sb-amber-dark, #c48d1a);
}

.strand-newsletter .mc4wp-alert {
    margin-top: 12px;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 14px;
}

.strand-newsletter .mc4wp-success {
    background-color: rgba(76, 175, 80, 0.12);
    color: #2e7d32;
}

.strand-newsletter .mc4wp-error {
    background-color: rgba(244, 67, 54, 0.10);
    color: #c62828;
}

@media (max-width: 600px) {
    .strand-newsletter .mc4wp-form-fields p {
        flex-direction: column;
    }
    .strand-newsletter .mc4wp-form-fields input[type="email"],
    .strand-newsletter .mc4wp-form-fields input[type="submit"] {
        width: 100%;
        flex: none;
    }
}


/* Footer Social Icons */
.strand-footer-social {
    background-color: #0B1D2E;
    text-align: center;
    padding: 24px 16px 8px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.strand-footer-social a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.strand-footer-social a:hover {
    color: #D4920B;
}

.strand-footer-social svg {
    width: 24px;
    height: 24px;
}

/* ======================================================================
   8. CONTENT PAGES
   Page titles, entry-content styling, narrow text pages
   ====================================================================== */

/* Page hero top padding — keeps title away from the nav bar */
body:not(.sb-home) .entry-hero {
    padding-top: 48px;
}

/* Page title styling (all pages except homepage)
   NOTE: .page-title lives on the <header> wrapper in Kadence,
         .entry-title lives on the <h1>. Only style the h1. */
body:not(.sb-home) h1.entry-title,
body:not(.sb-home) .entry-header h1.entry-title {
    font-family: var(--sb-font-display);
    font-size: 42px;
    color: var(--sb-navy);
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 0;
    position: relative;
}

/* Single amber underline divider below page title (only on the h1) */
body:not(.sb-home) h1.entry-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--sb-amber);
    margin: 16px auto 0;
    border-radius: 2px;
}

/* Suppress ::after on the wrapper <header class="page-title"> to prevent double bar */
body:not(.sb-home) header.page-title::after,
body:not(.sb-home) .entry-header.page-title::after {
    content: none;
}

/* Spacing below page title area — 24px between amber bar and content */
body:not(.sb-home) .entry-header,
body:not(.sb-home) .page-header {
    margin-bottom: 24px;
    padding-bottom: 24px;
    text-align: center;
}

/* Homepage hides the page title (hero handles it) */
body.sb-home .entry-title,
body.sb-home .page-title,
body.sb-home .entry-header .entry-title {
    display: none;
}

/* Text-heavy pages: keep font sizing but allow full-width sections */
body.sb-about .entry-content,
body.page-template-default:not(.sb-home):not(.sb-membership):not(.sb-contact):not(.sb-events):not(.sb-account) .entry-content,
body.single-post .entry-content {
    max-width: 100%;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.8;
}

/* Narrow text within sections for readability on text-heavy pages */
body.sb-about .strand-section-inner,
body.page-template-default:not(.sb-home):not(.sb-membership):not(.sb-contact):not(.sb-events):not(.sb-account):not(.sb-shop):not(.page-id-911) .strand-section-inner,
body.single-post .entry-content-wrap {
    max-width: var(--sb-content-narrow);
    margin: 0 auto;
}

body.sb-about .entry-content p,
body.page-template-default:not(.sb-home):not(.sb-membership):not(.sb-contact):not(.sb-events):not(.sb-account) .entry-content p,
body.single-post .entry-content p {
    margin-bottom: 1.5em;
}

body.sb-about .entry-content h2,
body.page-template-default:not(.sb-home):not(.sb-membership):not(.sb-contact):not(.sb-events):not(.sb-account) .entry-content h2,
body.single-post .entry-content h2 {
    margin-top: 2.5em;
    margin-bottom: 0.8em;
}

body.sb-about .entry-content h3,
body.page-template-default:not(.sb-home):not(.sb-membership):not(.sb-contact):not(.sb-events):not(.sb-account) .entry-content h3,
body.single-post .entry-content h3 {
    margin-top: 2em;
    margin-bottom: 0.6em;
}

body.sb-about .entry-content ul,
body.sb-about .entry-content ol,
body.page-template-default:not(.sb-home):not(.sb-membership):not(.sb-contact):not(.sb-events):not(.sb-account) .entry-content ul,
body.page-template-default:not(.sb-home):not(.sb-membership):not(.sb-contact):not(.sb-events):not(.sb-account) .entry-content ol,
body.single-post .entry-content ul,
body.single-post .entry-content ol {
    margin-bottom: 1.5em;
    padding-left: 1.5em;
}

body.sb-about .entry-content li,
body.page-template-default:not(.sb-home):not(.sb-membership):not(.sb-contact):not(.sb-events):not(.sb-account) .entry-content li,
body.single-post .entry-content li {
    margin-bottom: 0.5em;
}

/* =====================================================================
   NUCLEAR FIX: Force full-width on membership and account pages.
   Targets EVERY container between <body> and content by both body class
   AND page ID so nothing can constrain width.
   ===================================================================== */
body.sb-membership .content-container.site-container,
body.sb-membership .hero-container.site-container,
body.sb-membership .content-container,
body.sb-membership .entry-content-wrap,
body.sb-membership .entry-content,
body.sb-membership #primary,
body.sb-membership .content-wrap,
body.sb-membership article.entry,
body.page-id-8 .content-container.site-container,
body.page-id-8 .hero-container.site-container,
body.page-id-8 .content-container,
body.page-id-8 .entry-content-wrap,
body.page-id-8 .entry-content,
body.page-id-8 #primary,
body.page-id-8 .content-wrap,
body.page-id-8 article.entry,
body.page-id-49 .content-container.site-container,
body.page-id-49 .hero-container.site-container,
body.page-id-49 .content-container,
body.page-id-49 .entry-content-wrap,
body.page-id-49 .entry-content,
body.page-id-49 #primary,
body.page-id-49 .content-wrap,
body.page-id-49 article.entry,
body.sb-account .content-container.site-container,
body.sb-account .hero-container.site-container,
body.sb-account .content-container,
body.sb-account .entry-content-wrap,
body.sb-account .entry-content,
body.sb-account #primary,
body.sb-account .content-wrap,
body.sb-account article.entry,
body.sb-checkout .content-container.site-container,
body.sb-checkout .hero-container.site-container,
body.sb-checkout .content-container,
body.sb-checkout .entry-content-wrap,
body.sb-checkout .entry-content,
body.sb-checkout #primary,
body.sb-checkout .content-wrap,
body.sb-checkout article.entry,
body.page-id-50 .content-container.site-container,
body.page-id-50 .hero-container.site-container,
body.page-id-50 .content-container,
body.page-id-50 .entry-content-wrap,
body.page-id-50 .entry-content,
body.page-id-50 #primary,
body.page-id-50 .content-wrap,
body.page-id-50 article.entry,
body.sb-confirmation .content-container.site-container,
body.sb-confirmation .hero-container.site-container,
body.sb-confirmation .content-container,
body.sb-confirmation .entry-content-wrap,
body.sb-confirmation .entry-content,
body.sb-confirmation #primary,
body.sb-confirmation .content-wrap,
body.sb-confirmation article.entry,
body.page-id-51 .content-container.site-container,
body.page-id-51 .hero-container.site-container,
body.page-id-51 .content-container,
body.page-id-51 .entry-content-wrap,
body.page-id-51 .entry-content,
body.page-id-51 #primary,
body.page-id-51 .content-wrap,
body.page-id-51 article.entry {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

body.sb-account .strand-section-inner,
body.page-id-49 .strand-section-inner {
    max-width: var(--sb-content-max) !important;
    margin: 0 auto;
    width: 100% !important;
}

body.sb-checkout .strand-section-inner,
body.page-id-50 .strand-section-inner {
    max-width: var(--sb-content-max) !important;
    margin: 0 auto;
    width: 100% !important;
}

body.sb-confirmation .strand-section-inner,
body.page-id-51 .strand-section-inner {
    max-width: var(--sb-content-max) !important;
    margin: 0 auto;
    width: 100% !important;
}

body.sb-membership .strand-section-inner {
    max-width: var(--sb-content-max);
    margin: 0 auto;
}

/* Content links — no underline, amber-accessible on light */
.entry-content a {
    color: var(--sb-amber-accessible);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--sb-transition);
}

.entry-content a:hover {
    color: var(--sb-navy);
    text-decoration: none;
}

/* ══ ENTRY-CONTENT BUTTON OVERRIDES (specificity 0,2,0 beats 0,1,1) ══ */

/* Type 1 Primary default */
.entry-content .btn,
.entry-content .btn-primary,
.entry-content a.btn,
.entry-content a.btn-primary {
    color: #000000;
    font-weight: 400;
}
/* Type 1 Primary hover */
.entry-content .btn:hover,
.entry-content .btn-primary:hover {
    color: #FFFFFF;
    background-color: #0B1D2E;
    border-color: #0B1D2E;
}

/* Type 2 Secondary default — navy filled, white text */
.entry-content .btn-secondary,
.entry-content a.btn-secondary {
    color: #FFFFFF;
    background-color: #0B1D2E;
    border-color: #0B1D2E;
    font-weight: 400;
}
/* Type 2 Secondary hover — amber filled, black text */
.entry-content .btn-secondary:hover {
    color: #000000;
    background-color: #D4920B;
    border-color: #D4920B;
}

/* Type 3 Outline default — transparent, navy */
.entry-content .btn-outline,
.entry-content a.btn-outline {
    color: #0B1D2E;
    font-weight: 400;
}
/* Type 3 Outline hover — navy filled, white text */
.entry-content .btn-outline:hover {
    color: #FFFFFF;
    background-color: #0B1D2E;
    border-color: #0B1D2E;
}

/* Dark section buttons inside entry-content */
.entry-content .strand-section-dark .btn,
.entry-content .strand-section-dark .btn-primary,
.entry-content .strand-hero .btn,
.entry-content .strand-hero .btn-primary {
    color: #000000;
}
.entry-content .strand-section-dark .btn-secondary,
.entry-content .strand-hero .btn-secondary {
    color: #0B1D2E;
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}
.entry-content .strand-section-dark .btn-outline,
.entry-content .strand-hero .btn-outline {
    color: #FFFFFF;
    background-color: transparent;
    border-color: #FFFFFF;
}

/* Dark section button hovers inside entry-content */
.entry-content .strand-section-dark .btn:hover,
.entry-content .strand-section-dark .btn-primary:hover,
.entry-content .strand-hero .btn:hover,
.entry-content .strand-hero .btn-primary:hover {
    color: #000000;
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}
.entry-content .strand-section-dark .btn-secondary:hover,
.entry-content .strand-hero .btn-secondary:hover {
    color: #000000;
    background-color: #D4920B;
    border-color: #D4920B;
}
.entry-content .strand-section-dark .btn-outline:hover,
.entry-content .strand-hero .btn-outline:hover {
    color: #0B1D2E;
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: var(--sb-navy);
}

/* Content blockquotes */
.entry-content blockquote {
    border-left: 4px solid var(--sb-amber);
    background: var(--sb-cream);
    padding: 24px 32px;
    margin: 2em 0;
    font-style: italic;
    font-family: var(--sb-font-display);
    font-size: 1.1em;
    border-radius: 0 var(--sb-radius) var(--sb-radius) 0;
}

.entry-content hr {
    border: none;
    height: 1px;
    background: var(--sb-border);
    margin: 3em 0;
}


/* ======================================================================
   9. BLOG & ARCHIVE
   Post cards, archive grid, pagination, single post
   ====================================================================== */

.loop-entry,
.entry.post {
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
    overflow: hidden;
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
}

.loop-entry:hover,
.entry.post:hover {
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-3px);
}

.loop-entry .post-thumbnail img,
.entry.post .post-thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

/* Ensure inner article element clips content */
.loop-entry article.entry,
.loop-entry .entry {
    overflow: hidden;
    border-radius: var(--sb-card-radius);
}

.loop-entry .entry-content-wrap {
    padding: 24px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Category label on blog cards */
.loop-entry .entry-taxonomies,
.entry.post .entry-taxonomies {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sb-amber);
    font-weight: 600;
    margin-bottom: 8px;
}

.loop-entry .entry-taxonomies a,
.entry.post .entry-taxonomies a {
    color: var(--sb-amber);
}

.loop-entry .entry-title {
    font-family: var(--sb-font-display);
    font-size: 1.2rem;
    margin-bottom: 0.5em;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.25;
}

.loop-entry .entry-title a {
    color: var(--sb-navy);
}

.loop-entry .entry-title a:hover {
    color: var(--sb-amber);
}

.loop-entry .entry-meta {
    font-size: 0.8rem;
    color: var(--sb-slate);
    margin-bottom: 0.75em;
}

.loop-entry .entry-summary p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9rem;
    color: var(--sb-text);
    line-height: 1.65;
}

/* Read More — full-width amber banner at card bottom */
.loop-entry .entry-summary {
    flex: 1;
}

.loop-entry .entry-footer {
    margin-top: auto;
    margin-left: -24px;
    margin-right: -24px;
}

.loop-entry .entry-actions {
    margin: 0;
}

.loop-entry .entry-actions .more-link-wrap {
    margin: 0;
}

.loop-entry .entry-actions .post-more-link {
    display: block;
    background: var(--sb-amber);
    color: #000;
    font-family: var(--sb-font-heading);
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 14px 24px;
    transition: background var(--sb-transition), color var(--sb-transition);
}

.loop-entry .entry-actions .post-more-link:hover,
.loop-entry .entry-actions .post-more-link:focus {
    background: var(--sb-navy);
    color: var(--sb-white);
}

/* Hide the Kadence SVG arrow icon inside the banner */
.loop-entry .entry-actions .post-more-link .kadence-svg-iconset {
    display: none;
}

/* Legacy more-link (in-content) keeps simple style */
.entry-content .more-link {
    color: var(--sb-amber-accessible);
    font-family: var(--sb-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}

.entry-content .more-link::after {
    content: ' \2192';
    transition: transform var(--sb-transition);
    display: inline-block;
}

.entry-content .more-link:hover::after {
    transform: translateX(4px);
}

/* --- Remove golden dots from post lists --- */
#archive-container,
ul.kadence-posts-list,
.kadence-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kadence-posts-list .entry-list-item {
    list-style: none;
}

/* --- Archive grid layout (replaces dequeued content.min.css) --- */
.grid-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.grid-cols::before,
.grid-cols::after {
    display: none;
}

@media (min-width: 769px) {
    .grid-sm-col-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1025px) {
    .grid-lg-col-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.kadence-posts-list .entry-list-item {
    display: flex;
    flex-direction: column;
}

.kadence-posts-list .entry-list-item article.entry {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* --- Hide sidebar on blog archive --- */
body.blog .content-container {
    display: block;
}

body.blog #secondary {
    display: none;
}

body.blog #primary {
    width: 100%;
}

body.blog .site-main {
    max-width: var(--sb-content-max);
    margin: 0 auto;
    padding: 0 var(--sb-content-pad);
    padding-top: 32px;
}

/* --- Featured image area --- */
.loop-entry .post-thumbnail {
    display: block;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

/* Placeholder for posts without featured images */
.loop-entry:not(.has-post-thumbnail)::before {
    content: '';
    display: block;
    height: auto;
    aspect-ratio: 16 / 9;
    background: url('assets/blog-placeholder.svg') center/cover no-repeat;
}
.loop-entry.category-brewing-tips:not(.has-post-thumbnail)::before {
    background-image: url('assets/blog-placeholder-brewing-tips.svg');
}
.loop-entry.category-club-news:not(.has-post-thumbnail)::before {
    background-image: url('assets/blog-placeholder-club-news.svg');
}
.loop-entry.category-events:not(.has-post-thumbnail)::before {
    background-image: url('assets/blog-placeholder-events.svg');
}
.loop-entry.category-meeting-recaps:not(.has-post-thumbnail)::before {
    background-image: url('assets/blog-placeholder-meeting-recaps.svg');
}

/* --- Pagination styling --- */
.navigation.pagination {
    margin-top: 48px;
    margin-bottom: 48px;
}

.navigation.pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--sb-radius);
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sb-navy);
    background: var(--sb-cream);
    text-decoration: none;
    transition: all var(--sb-transition);
}

.navigation.pagination .page-numbers:hover {
    background: var(--sb-amber);
    color: #FFFFFF;
}

.navigation.pagination .page-numbers.current {
    background: var(--sb-amber);
    color: #FFFFFF;
    cursor: default;
}

.navigation.pagination .page-numbers.next,
.navigation.pagination .page-numbers.prev {
    background: transparent;
    color: var(--sb-navy);
}

.navigation.pagination .page-numbers.next:hover,
.navigation.pagination .page-numbers.prev:hover {
    background: var(--sb-cream);
}

/* --- Blog hero section --- */
body.blog .entry-hero {
    background: var(--sb-cream);
    padding-bottom: 32px;
    text-align: center;
}

body.blog .entry-hero .page-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--sb-amber);
    margin: 16px auto 0;
}

/* --- Single post enhancements --- */
body.single-post .post-thumbnail {
    margin-bottom: 32px;
    border-radius: 0 0 var(--sb-card-radius) var(--sb-card-radius);
    overflow: hidden;
}

body.single-post .post-thumbnail img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}

body.single-post .entry-meta {
    font-size: 0.88rem;
    color: var(--sb-slate);
    margin-bottom: 2em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid var(--sb-border);
}

/* --- Post Navigation (Prev/Next article cards) --- */
.post-navigation {
    margin-top: 48px;
    margin-bottom: 48px;
    padding-top: 0;
    border-top: none;
}

.post-navigation .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Remove Kadence's default vertical divider between prev/next */
.post-navigation .nav-previous::after {
    display: none;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    position: relative;
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 28px;
    background: var(--sb-white, #FFFFFF);
    border: 1px solid var(--sb-border, #E8E4DD);
    border-radius: 14px;
    box-shadow: var(--sb-shadow, 0 2px 8px rgba(11,29,46,0.06));
    text-decoration: none;
    color: var(--sb-navy, #0B1D2E);
    min-height: 100px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(11,29,46,0.10);
    border-color: var(--sb-amber, #D4920B);
    color: var(--sb-navy, #0B1D2E);
}

/* Label: "Previous Article" / "Next Article" */
.post-navigation .post-navigation-sub {
    margin-bottom: 8px;
}

.post-navigation .post-navigation-sub small {
    font-family: var(--sb-font-heading, 'Bebas Neue', sans-serif);
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sb-amber-accessible, var(--sb-amber, #D4920B));
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Post title styling */
.post-navigation a {
    font-family: var(--sb-font-body, 'DM Sans', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sb-navy, #0B1D2E);
    text-decoration: none;
}

/* Post title truncation (limit to 2 lines) */
.post-navigation .post-nav-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Alignment: previous left-aligned, next right-aligned */
.post-navigation .nav-next {
    text-align: right;
}

.post-navigation .nav-next a {
    align-items: flex-end;
}

.post-navigation .nav-previous a {
    align-items: flex-start;
}

/* Arrow icons inside the sub labels */
.post-navigation .nav-previous .kadence-svg-iconset,
.post-navigation .nav-next .kadence-svg-iconset {
    width: 16px;
    height: 16px;
    color: var(--sb-amber-accessible, var(--sb-amber, #D4920B));
}

/* When only one direction exists — single card takes full width gracefully */
.post-navigation .nav-links:has(.nav-previous:only-child),
.post-navigation .nav-links:has(.nav-next:only-child) {
    grid-template-columns: 1fr;
    max-width: 50%;
}

.post-navigation .nav-links:has(.nav-next:only-child) {
    margin-left: auto;
}

/* Mobile: stack vertically */
@media (max-width: 767px) {
    .post-navigation .nav-links {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .post-navigation .nav-next {
        grid-column-start: auto;
        text-align: right;
    }

    .post-navigation .nav-previous a,
    .post-navigation .nav-next a {
        padding: 20px 22px;
        min-height: auto;
    }

    .post-navigation .nav-links:has(.nav-previous:only-child),
    .post-navigation .nav-links:has(.nav-next:only-child) {
        max-width: 100%;
    }
}


/* ======================================================================
   10. MEMBERSHIP (PMPro)
   Level cards, checkout form, account page, confirmation, cancel
   ====================================================================== */

/* Honeypot anti-spam field — must be hidden from users */
.pmpro_hidden {
    display: none;
}

/* Level cards grid — custom template (.pmpro_levels_cards) */
#pmpro_levels_cards,
.pmpro_levels_cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 24px 0;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Each card */
.pmpro_level_card {
    background: var(--sb-white);
    border-radius: 16px;
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
    padding: 36px 28px;
    text-align: center;
    border-top: 4px solid var(--sb-amber);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
}

.pmpro_level_card:hover {
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-3px);
}

/* Card — level name (min-height aligns prices across cards) */
.pmpro_level_card-name {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 0 8px 0;
    text-transform: none;
    letter-spacing: 0;
    min-height: 3.2em;
    display: flex;
    align-items: flex-start;
}

/* Card — price (large dollar amount) */
.pmpro_level_card-price {
    font-family: var(--sb-font-heading);
    font-size: 2.8rem;
    color: var(--sb-amber);
    letter-spacing: 1px;
    line-height: 1;
    margin: 8px 0 4px;
}

/* Card — billing period ("per Year") */
.pmpro_level_card-period {
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    color: var(--sb-slate);
    margin-bottom: 4px;
    text-transform: lowercase;
}

/* Level cards on dark background — keep white cards, remove border */
.strand-section-dark .pmpro_level_card {
    border-color: transparent;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.strand-section-dark .pmpro_level_card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* Card — expiration notice */
.pmpro_level_card-expiration {
    font-family: var(--sb-font-body);
    font-size: 0.8rem;
    color: var(--sb-slate);
    opacity: 0.7;
    margin-bottom: 20px;
}

/* Card — button container */
.pmpro_level_card-action {
    width: 100%;
    margin-top: auto;
    padding-top: 8px;
}

/* PMPro Select/Renew buttons — polished amber style */
.pmpro_level_card .pmpro_btn,
.pmpro_levels_cards .pmpro_btn {
    background-color: var(--sb-amber);
    color: #000000;
    font-family: var(--sb-font-heading);
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 2px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    padding: 14px 28px;
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color var(--sb-transition), color var(--sb-transition), border-color var(--sb-transition), box-shadow var(--sb-transition), transform var(--sb-transition);
    text-decoration: none;
}

.pmpro_level_card .pmpro_btn:hover,
.pmpro_levels_cards .pmpro_btn:hover {
    background-color: var(--sb-navy);
    color: var(--sb-white);
    border-color: var(--sb-navy);
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-1px);
}

/* "Your Level" / current membership button — muted style */
.pmpro_level_card .pmpro_btn-current,
.pmpro_levels_cards .pmpro_btn-current {
    background-color: var(--sb-cream);
    color: var(--sb-slate);
    border-color: var(--sb-border);
    cursor: default;
}

.pmpro_level_card .pmpro_btn-current:hover {
    transform: none;
    box-shadow: var(--sb-shadow);
    background-color: var(--sb-cream);
    color: var(--sb-slate);
    border-color: var(--sb-border);
}

/* Active card gets a subtle highlight */
.pmpro_level_card--active {
    border-top-color: var(--sb-navy);
}

/* Hide the "Return to Home/Account" nav — template no longer outputs it,
   but keep this for safety in case default template is used */
.strand-membership-levels .pmpro_actions_nav,
.strand-membership-levels p.pmpro_actions_nav {
    display: none;
}

/* ---- Table fallback (in case default PMPro template renders) ---- */
#pmpro_levels_table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 24px 0;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    border: none;
}

#pmpro_levels_table thead {
    display: none;
}

#pmpro_levels_table tbody {
    display: contents;
}

#pmpro_levels_table tbody tr {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--sb-white);
    border-radius: 16px;
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
    padding: 36px 28px;
    text-align: center;
    border-top: 4px solid var(--sb-amber);
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
}

#pmpro_levels_table tbody tr:hover {
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-3px);
}

#pmpro_levels_table tbody td {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
}

#pmpro_levels_table tbody td:first-child {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
    font-size: 1.5rem;
    margin-bottom: 12px;
}

#pmpro_levels_table tbody td:first-child strong {
    font-weight: 400;
}

#pmpro_levels_table tbody td:nth-child(2) {
    font-family: var(--sb-font-heading);
    font-size: 1.6rem;
    color: var(--sb-amber);
    letter-spacing: 1px;
    margin-bottom: 20px;
}

#pmpro_levels_table tbody td:nth-child(3) {
    margin-top: auto;
}

#pmpro_levels_table .pmpro_btn {
    background-color: var(--sb-amber);
    color: #000000;
    font-family: var(--sb-font-heading);
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 2px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    padding: 14px 28px;
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
    transition: background-color var(--sb-transition), color var(--sb-transition), border-color var(--sb-transition);
}

#pmpro_levels_table .pmpro_btn:hover {
    background-color: var(--sb-navy);
    color: var(--sb-white);
    border-color: var(--sb-navy);
}

#pmpro_levels_table + .pmpro_actions_nav {
    display: none;
}

/* Membership levels page container */
.strand-membership-levels {
    text-align: center;
    margin-bottom: 48px;
}

.strand-membership-levels h2 {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
    font-size: 36px;
    letter-spacing: 0;
    margin-bottom: 8px;
    text-transform: none;
}

/* Checkout page */
.pmpro_checkout,
#pmpro_form,
.pmpro-checkout {
    max-width: 100%;
    margin: 0 auto;
}

.pmpro_checkout .pmpro_checkout-fields,
.pmpro-checkout .pmpro_checkout-fields {
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
    padding: 40px;
    box-shadow: var(--sb-shadow);
}

/* Checkout section headings */
.pmpro_checkout h3,
.pmpro_checkout .pmpro_checkout-field-header,
#pmpro_form h3,
.pmpro_checkout legend,
.pmpro-checkout h3 {
    font-family: var(--sb-font-heading);
    color: var(--sb-navy);
    font-size: 1.4rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--sb-border);
    padding-bottom: 12px;
    margin-top: 36px;
    margin-bottom: 20px;
}

.pmpro_checkout h3:first-child,
#pmpro_form h3:first-child,
.pmpro-checkout h3:first-child {
    margin-top: 0;
}

/* Checkout form fields */
.pmpro_checkout input[type="text"],
.pmpro_checkout input[type="email"],
.pmpro_checkout input[type="tel"],
.pmpro_checkout input[type="password"],
.pmpro_checkout input[type="number"],
.pmpro_checkout textarea,
.pmpro_checkout select,
#pmpro_form input[type="text"],
#pmpro_form input[type="email"],
#pmpro_form input[type="tel"],
#pmpro_form input[type="password"],
#pmpro_form input[type="number"],
#pmpro_form textarea,
#pmpro_form select {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 12px 16px;
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    color: var(--sb-text);
    background-color: var(--sb-white);
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--sb-transition), box-shadow var(--sb-transition);
}

.pmpro_checkout input:focus,
.pmpro_checkout textarea:focus,
.pmpro_checkout select:focus,
#pmpro_form input:focus,
#pmpro_form textarea:focus,
#pmpro_form select:focus {
    border-color: var(--sb-amber);
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.12);
    outline: none;
}

/* Checkout labels */
.pmpro_checkout label,
#pmpro_form label {
    font-family: var(--sb-font-body);
    font-weight: 600;
    color: var(--sb-navy);
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

/* Checkout field rows */
.pmpro_checkout .pmpro_checkout-field,
#pmpro_form .pmpro_checkout-field {
    margin-bottom: 24px;
}

/* PMPro checkout submit button — follow primary button pattern */
.pmpro_checkout .pmpro_btn,
.pmpro_checkout input[type="submit"],
#pmpro_form .pmpro_btn,
#pmpro_form input[type="submit"],
.pmpro_btn-submit,
#pmpro_btn-submit {
    background-color: var(--sb-amber);
    color: #000000;
    font-family: var(--sb-font-heading);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 2px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    padding: 16px 40px;
    font-size: 1.1rem;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin-top: 28px;
    transition: background-color var(--sb-transition), color var(--sb-transition), border-color var(--sb-transition), box-shadow var(--sb-transition), transform var(--sb-transition);
}

.pmpro_checkout .pmpro_btn:hover,
.pmpro_checkout input[type="submit"]:hover,
#pmpro_form .pmpro_btn:hover,
#pmpro_form input[type="submit"]:hover,
.pmpro_btn-submit:hover,
#pmpro_btn-submit:hover {
    background-color: var(--sb-navy);
    color: var(--sb-white);
    border-color: var(--sb-navy);
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-1px);
}

/* Error and status messages */
.pmpro_message,
.pmpro_error,
#pmpro_message,
#login_error,
.login-error,
.pmpro_checkout .pmpro_message {
    border-radius: var(--sb-radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    line-height: 1.6;
}

.pmpro_error,
.pmpro_message.pmpro_error,
.pmpro_message.pmpro_alert,
#login_error,
.login-error {
    background: #FFF0F0;
    color: #8B2020;
    border: 1px solid #E8C4C4;
    border-left: 4px solid #C44;
}

/* Success messages */
.pmpro_success,
.pmpro_message.pmpro_success,
.login-success {
    background: #F0FFF0;
    color: #1A5E32;
    border: 1px solid #C4E8C4;
    border-left: 4px solid #2D8A4E;
}

/* Terms of service */
.pmpro_checkout .pmpro_checkout-field-tos,
#pmpro_form .pmpro_checkout-field-tos,
.pmpro_checkout #pmpro_tos_fields {
    background-color: var(--sb-cream);
    border-radius: var(--sb-radius);
    padding: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.pmpro_checkout .pmpro_checkout-field-tos label,
#pmpro_form .pmpro_checkout-field-tos label {
    display: inline;
    font-weight: 400;
}

/* Level cost summary */
.pmpro_checkout #pmpro_level_cost,
#pmpro_level_cost {
    background-color: var(--sb-cream);
    border-radius: var(--sb-radius);
    padding: 20px 24px;
    margin-bottom: 28px;
    font-size: 1.05rem;
}

.pmpro_checkout #pmpro_level_cost strong,
#pmpro_level_cost strong {
    color: var(--sb-amber);
}

/* Remove extra spacing inside level cost box (wpautop wraps cost/expiration in <p> tags) */
#pmpro_level_cost p:last-child {
    margin-bottom: 0;
}

/* Hide empty <p> tags wpautop may generate inside the level cost box */
#pmpro_level_cost p:empty {
    display: none;
}

/* Remove extra bottom space in the pricing checkout-fields card */
#pmpro_pricing_fields .pmpro_checkout-fields {
    padding-bottom: 24px;
}

#pmpro_pricing_fields .pmpro_checkout-fields > p:first-child {
    margin-bottom: 0;
}

/* Collapse the discount-code prompt so it doesn't add trailing whitespace */
#pmpro_pricing_fields #other_discount_code_p {
    margin-bottom: 0;
}

/* Tighten level cost box bottom margin inside pricing card */
#pmpro_pricing_fields #pmpro_level_cost {
    margin-bottom: 16px;
}

/* Checkout — "About You" custom profile fields */
.pmpro_checkout_box-about-you {
    margin-top: 28px;
}

.sb-checkout-profile-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 768px) {
    .sb-checkout-profile-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Account page — #pmpro_account targets the PMPro container div.
   .pmpro-account was removed: it matched the <body> class, constraining the entire page to 1100px. */
#pmpro_account {
    max-width: var(--sb-content-max);
    margin: 0 auto;
}

#pmpro_account .pmpro_box,
.pmpro-account .pmpro_box,
#pmpro_account-membership,
#pmpro_account-profile,
#pmpro_account-invoices,
#pmpro_account-links {
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
    padding: 32px;
    margin-bottom: 24px;
}

#pmpro_account .pmpro_box h3,
.pmpro-account .pmpro_box h3,
#pmpro_account h3 {
    font-family: var(--sb-font-heading);
    color: var(--sb-navy);
    font-size: 1.4rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sb-border);
}

/* Active membership badge */
#pmpro_account .pmpro_tag,
.pmpro_member_badge,
.pmpro-account-membership-levelname .pmpro_tag,
#pmpro_account .pmpro_label-active,
.pmpro_account-membership-type .pmpro_label {
    display: inline-block;
    background-color: #16A34A;
    color: var(--sb-white);
    font-family: var(--sb-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 8px;
}

/* Renewal date */
#pmpro_account .pmpro_account-membership-expiration,
.pmpro_account-membership-expiration {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sb-navy);
    margin-top: 8px;
}

/* Invoice table */
#pmpro_account table,
.pmpro-account table,
#pmpro_invoices_table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
}

#pmpro_account table thead th,
.pmpro-account table thead th,
#pmpro_invoices_table thead th {
    background-color: var(--sb-navy);
    color: var(--sb-white);
    font-family: var(--sb-font-body);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 16px;
    text-align: left;
}

#pmpro_account table tbody td,
.pmpro-account table tbody td,
#pmpro_invoices_table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sb-border);
}

#pmpro_account table tbody tr:nth-child(even),
.pmpro-account table tbody tr:nth-child(even),
#pmpro_invoices_table tbody tr:nth-child(even) {
    background-color: var(--sb-cream);
}

/* Account action links */
#pmpro_account .pmpro_actionlinks a,
.pmpro-account .pmpro_actionlinks a,
#pmpro_account a.pmpro_btn {
    color: var(--sb-amber-accessible);
    font-weight: 600;
    transition: color var(--sb-transition);
}

#pmpro_account .pmpro_actionlinks a:hover,
.pmpro-account .pmpro_actionlinks a:hover,
#pmpro_account a.pmpro_btn:hover {
    color: var(--sb-navy);
}

/* Confirmation page */
.pmpro_confirmation_message,
.pmpro-confirmation,
#pmpro_confirmation_message {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    padding: 60px 24px;
}

.pmpro_confirmation_message::before,
.pmpro-confirmation::before,
#pmpro_confirmation_message::before {
    content: "\2713";
    display: block;
    width: 72px;
    height: 72px;
    line-height: 72px;
    font-size: 2rem;
    color: var(--sb-white);
    background-color: #16A34A;
    border-radius: 50%;
    margin: 0 auto 28px;
}

.pmpro_confirmation_message h2,
.pmpro-confirmation h2,
#pmpro_confirmation_message h2 {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
    font-size: 2rem;
    margin-bottom: 16px;
    text-transform: none;
    letter-spacing: 0;
}

.pmpro_confirmation_message p,
.pmpro-confirmation p,
#pmpro_confirmation_message p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--sb-text);
    margin-bottom: 1em;
}

.pmpro_confirmation_message a.pmpro_btn,
.pmpro-confirmation a.pmpro_btn {
    display: inline-block;
    margin: 8px;
}

/* Cancel page */
.pmpro_cancel,
.pmpro-cancel,
#pmpro_cancel {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 24px;
}

.pmpro_cancel .pmpro_message,
.pmpro-cancel .pmpro_message,
#pmpro_cancel .pmpro_message {
    background-color: #FFFBEB;
    color: #92400E;
    border: 1px solid #FDE68A;
    border-radius: var(--sb-radius);
    padding: 24px;
    margin-bottom: 28px;
    font-size: 1rem;
}

.pmpro_cancel h2,
.pmpro-cancel h2,
#pmpro_cancel h2 {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
    font-size: 1.8rem;
    margin-bottom: 16px;
    text-transform: none;
    letter-spacing: 0;
}

.pmpro_cancel p,
.pmpro-cancel p,
#pmpro_cancel p {
    font-size: 1rem;
    color: var(--sb-text);
    margin-bottom: 1em;
}

.pmpro_cancel .pmpro_btn,
.pmpro-cancel .pmpro_btn,
#pmpro_cancel .pmpro_btn {
    background-color: var(--sb-navy);
    color: var(--sb-white);
    font-family: var(--sb-font-heading);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: none;
    border-radius: var(--sb-radius);
    padding: 14px 32px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color var(--sb-transition);
    text-decoration: none;
    display: inline-block;
}

.pmpro_cancel .pmpro_btn:hover,
.pmpro-cancel .pmpro_btn:hover,
#pmpro_cancel .pmpro_btn:hover {
    background-color: var(--sb-amber);
    color: var(--sb-white);
}

.pmpro_cancel a[href*="contact"],
.pmpro-cancel a[href*="contact"],
#pmpro_cancel a[href*="contact"] {
    display: inline-block;
    margin-top: 16px;
    font-weight: 600;
    color: var(--sb-amber-accessible);
}

/* PMPro utilities */

/*
 * Required-field indicators
 * -------------------------
 * PMPro JS appends  <span class="pmpro_asterisk"><abbr title="Required Field">*</abbr></span>
 * AFTER every input that carries the .pmpro_required class.
 *
 * Problems with the default rendering:
 *   1. The asterisk sits after the input, not the label — looks odd.
 *   2. The <abbr> has a browser-default dotted underline that shows as ".."
 *      (the plugin's own CSS fixes this, but we dequeue pmpro_frontend).
 *
 * Fix:
 *   - Remove the <abbr> dotted underline (the ".." artifact).
 *   - Re-position the asterisk to sit beside the label using CSS flex
 *     ordering on the checkout-field wrapper.
 *   - Style consistently with the manual asterisks already in the
 *     "Who Are You?" name fields.
 *   - Red border on .pmpro_error inputs for clear inline validation.
 */

/* 1. Kill the <abbr> dotted underline — this is the ".." fix */
.pmpro_asterisk abbr,
form.pmpro_form .pmpro_asterisk abbr {
    border: none;
    text-decoration: none;
}

/* 2. Base asterisk style — muted red, visible */
.pmpro_asterisk,
.pmpro_checkout .pmpro_asterisk {
    color: #C0392B;
    font-weight: 700;
    font-size: 1em;
}

/* 3. Reposition JS-injected asterisks from after-input to beside-label.
      PMPro JS appends .pmpro_asterisk after the <input>, but visually it
      should sit right after the <label>. We use CSS flex ordering on the
      field wrapper to reorder: label (1) → asterisk (2) → input (3). */
.pmpro_checkout-field {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}
.pmpro_checkout-field > label {
    order: 1;
    flex: 0 0 auto;
}
.pmpro_checkout-field > .pmpro_asterisk {
    order: 2;
    flex: 0 0 auto;
    margin-left: 3px;
}
.pmpro_checkout-field > input,
.pmpro_checkout-field > select,
.pmpro_checkout-field > textarea,
.pmpro_checkout-field > .input {
    order: 3;
    flex: 0 0 100%;
}
/* Anything else (hints, descriptions, lite text) flows after */
.pmpro_checkout-field > *:not(label):not(.pmpro_asterisk):not(input):not(select):not(textarea):not(.input) {
    order: 4;
    flex: 0 0 100%;
}

/* Checkbox fields (TOS, etc.) — don't apply flex reordering */
.pmpro_checkout-field-checkbox,
.pmpro_checkout-field-tos,
#pmpro_tos_fields {
    display: block;
}

/* 4. Manual asterisks inside labels (name fields) — same color */
label .pmpro_asterisk {
    color: #C0392B;
    font-weight: 700;
}

/* 5. Error states — red border on invalid fields */
input.pmpro_error,
select.pmpro_error,
textarea.pmpro_error,
.pmpro_checkout input.pmpro_error,
.pmpro_checkout select.pmpro_error,
.pmpro_checkout textarea.pmpro_error {
    border-color: #C0392B !important;
    background-color: #FDF2F2 !important;
    color: var(--sb-text, #2C2C2C) !important;
}

/* 6. Error messages */
.pmpro_message.pmpro_error,
#pmpro_message.pmpro_error {
    border-left: 4px solid #C0392B;
    background-color: #FDF2F2;
    color: #C0392B;
}

/* 7. "* Required" hint at top of form — added via PHP or JS */
.pmpro_required_hint {
    display: block;
    font-size: 0.85rem;
    color: var(--sb-slate, #5E6E7E);
    margin-bottom: 16px;
}
.pmpro_required_hint .pmpro_asterisk,
.pmpro_required_hint span {
    color: #C0392B;
    font-weight: 700;
}

.pmpro_checkout #pmpro_discount_code_area,
#pmpro_discount_code_area {
    background-color: var(--sb-cream);
    border-radius: var(--sb-radius);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.pmpro_checkout .pmpro_payment-method,
#pmpro_payment_method {
    margin-bottom: 24px;
}

.pmpro_checkout .pmpro_processing,
#pmpro_processing_message {
    text-align: center;
    padding: 28px;
    color: var(--sb-slate);
    font-style: italic;
}

/* Membership page benefits/pricing cards */
.strand-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 32px auto 0;
}

.strand-benefit-card {
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-amber);
    border-radius: 8px;
    padding: 28px 28px;
    box-shadow: var(--sb-shadow);
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
}

.strand-benefit-card:hover {
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-2px);
}

.strand-benefit-card h3 {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 8px;
}

.strand-benefit-card p {
    font-size: 15px;
    color: var(--sb-slate);
    line-height: 1.6;
    margin-bottom: 0;
}

.strand-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 700px;
    margin: 32px auto 0;
}

.strand-pricing-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--sb-card-radius);
    padding: 40px 32px;
    text-align: center;
}

.strand-pricing-card h3 {
    color: var(--sb-white);
    font-family: var(--sb-font-display);
    font-size: 22px;
    margin-bottom: 16px;
}

.strand-pricing-card .price {
    font-family: var(--sb-font-heading);
    font-size: 56px;
    color: var(--sb-amber);
    line-height: 1;
    letter-spacing: 2px;
}

.strand-pricing-card .price-period {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

.strand-pricing-card .price-note {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 12px;
}


/* ======================================================================
   11. EVENTS CALENDAR (TEC)
   List view, single event, month view, day view, nav bar
   ====================================================================== */

/* TEC CSS custom properties -- override to brand colors */
:root {
    --tec-color-accent-primary: var(--sb-amber);
    --tec-color-accent-primary-hover: var(--sb-golden);
    --tec-color-accent-primary-multiday: var(--sb-amber);
    --tec-color-accent-primary-multiday-hover: var(--sb-golden);
    --tec-color-accent-primary-active: var(--sb-golden);
    --tec-color-accent-primary-background: rgba(212, 146, 11, 0.08);
    --tec-color-background: var(--sb-background);
    --tec-color-background-events: transparent;
    --tec-color-text-primary: var(--sb-text);
    --tec-color-text-secondary: var(--sb-slate);
    --tec-color-icon-active: var(--sb-amber);
    --tec-color-link-primary: var(--sb-amber);
    --tec-color-link-accent: var(--sb-golden);
    --tec-color-day-marker-current-month: var(--sb-navy);
    --tec-color-day-marker-current-month-hover: var(--sb-amber);
    --tec-color-button-primary: var(--sb-amber);
    --tec-color-button-primary-hover: var(--sb-golden);
    --tec-color-border-active: var(--sb-amber);
}

/* General container & typography */
.tribe-events,
.tribe-common {
    font-family: var(--sb-font-body);
    color: var(--sb-text);
}

.tribe-events .tribe-events-header__title,
.tribe-events .tribe-events-c-top-bar__title,
.tribe-common h1 {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 700;
}

.tribe-common h2,
.tribe-common h3,
.tribe-common h4 {
    font-family: var(--sb-font-heading);
    color: var(--sb-navy);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* TEC links */
.tribe-events a,
.tribe-common a {
    color: var(--sb-amber-accessible);
    transition: color var(--sb-transition);
}

.tribe-events a:hover,
.tribe-events a:focus,
.tribe-common a:hover,
.tribe-common a:focus {
    color: var(--sb-navy);
}

/* View selector -- clean horizontal toggle row */
.tribe-events .tribe-events-c-events-bar__views {
    flex-shrink: 0;
}

/* -- View Toggle Buttons (List / Month / Day) -- */
body .tribe-events .tribe-events-c-view-selector {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    position: relative !important;
}

/* Hide the default dropdown toggle button (the "List" button with arrow) */
body .tribe-events .tribe-events-c-view-selector__button {
    display: none !important;
}

/* Force-show the dropdown content (TEC hides it by default as a dropdown) */
body .tribe-events .tribe-events-c-view-selector__content,
body .tribe-events .tribe-events-c-view-selector__list-container {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    transform: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

/* Make the list horizontal */
body .tribe-events .tribe-events-c-view-selector__list {
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .tribe-events .tribe-events-c-view-selector__list-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide the SVG icons inside list items */
body .tribe-events .tribe-events-c-view-selector__list-item-icon,
body .tribe-events .tribe-events-c-view-selector__button-icon {
    display: none !important;
}

/* Show text labels (override tribe-common-a11y-visual-hide) */
body .tribe-events .tribe-events-c-view-selector__list-item-text,
body .tribe-events .tribe-events-c-view-selector__button-text,
body .tribe-events .tribe-common-a11y-visual-hide.tribe-events-c-view-selector__list-item-text,
body .tribe-events .tribe-common-a11y-visual-hide.tribe-events-c-view-selector__button-text {
    position: static !important;
    clip: auto !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Ensure text span inside toggle inherits correct color (TEC sets its own color on the span) */
body .tribe-events .tribe-events-c-view-selector__list-item-text {
    color: var(--sb-navy) !important;
}

body .tribe-events .tribe-events-c-view-selector__list-item-link:hover .tribe-events-c-view-selector__list-item-text {
    color: var(--sb-white) !important;
}

body .tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text {
    color: var(--sb-white) !important;
}

/* Inactive toggle button (outline style) */
body .tribe-events .tribe-events-c-view-selector__list-item-link {
    display: block !important;
    padding: 8px 20px !important;
    font-family: var(--sb-font-heading) !important;
    font-size: 0.85rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 2px solid var(--sb-navy) !important;
    border-radius: var(--sb-radius) !important;
    color: var(--sb-navy) !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

/* Hover: navy fill */
body .tribe-events .tribe-events-c-view-selector__list-item-link:hover {
    background: var(--sb-navy) !important;
    color: var(--sb-white) !important;
    border-color: var(--sb-navy) !important;
}

/* Active toggle: amber fill, white text */
body .tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link,
body .tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link:hover {
    background: var(--sb-amber) !important;
    color: var(--sb-white) !important;
    border-color: var(--sb-amber) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Kill any borders/underlines TEC adds to list items */
body .tribe-events .tribe-events-c-view-selector__list-item,
body .tribe-events .tribe-events-c-view-selector__list-item--active {
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
}

body .tribe-events .tribe-events-c-view-selector__list-item-link {
    text-decoration: none !important;
}

/* Kill TEC pseudo-element underline on active view link */
body .tribe-events .tribe-events-c-view-selector__list-item-link::after,
body .tribe-events .tribe-events-c-view-selector__list-item-link::before {
    display: none !important;
    content: none !important;
    border: none !important;
    height: 0 !important;
}

/* Top bar -- date picker / nav area */
.tribe-events .tribe-events-c-top-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    margin-bottom: 8px;
}

.tribe-events .tribe-events-c-top-bar__nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tribe-events .tribe-events-c-top-bar__nav-link {
    color: var(--sb-navy);
    font-family: var(--sb-font-heading);
    letter-spacing: 1px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
}

.tribe-events .tribe-events-c-top-bar__nav-link:hover {
    color: var(--sb-amber);
}

/* Date picker title -- clean centered display */
.tribe-events .tribe-events-c-top-bar__datepicker,
.tribe-events .tribe-events-c-top-bar__date-picker {
    font-family: var(--sb-font-heading);
    font-size: 1.3rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sb-navy);
    white-space: nowrap;
}

.tribe-events .tribe-events-c-top-bar__today-button {
    background: transparent;
    border: 1px solid var(--sb-navy);
    border-radius: 6px;
    color: var(--sb-navy);
    font-family: var(--sb-font-heading);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    font-size: 0.8rem;
    line-height: 1.4;
    transition: all 0.2s ease;
}

.tribe-events .tribe-events-c-top-bar__today-button:hover {
    background: var(--sb-navy);
    color: var(--sb-white);
}

/* Nav arrows */
.tribe-events .tribe-events-c-top-bar__nav-link svg path,
.tribe-events .tribe-events-c-nav__prev svg path,
.tribe-events .tribe-events-c-nav__next svg path {
    fill: var(--sb-amber);
}

.tribe-events .tribe-events-c-top-bar__nav-link:hover svg path,
.tribe-events .tribe-events-c-nav__prev:hover svg path,
.tribe-events .tribe-events-c-nav__next:hover svg path {
    fill: var(--sb-navy);
}

/* Prev/Next event nav links */
.tribe-events .tribe-events-c-nav__prev,
.tribe-events .tribe-events-c-nav__next,
.tribe-events-calendar-list__event-row .tribe-events-c-nav__list-item a {
    color: var(--sb-amber-accessible);
    font-family: var(--sb-font-body);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tribe-events .tribe-events-c-nav__prev:hover,
.tribe-events .tribe-events-c-nav__next:hover {
    color: var(--sb-navy);
}

/* Bottom pagination nav — remove stray border/line */
body .tribe-events .tribe-events-c-nav,
body .tribe-events .tribe-events-calendar-list-nav {
    border-top: none !important;
    border: none !important;
    box-shadow: none !important;
}

body .tribe-events .tribe-events-c-nav::before,
body .tribe-events .tribe-events-c-nav::after {
    display: none !important;
    content: none !important;
}

/* Bottom nav — Today link */
.tribe-events .tribe-events-c-nav__today {
    color: var(--sb-amber-accessible);
    font-family: var(--sb-font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}

.tribe-events .tribe-events-c-nav__today:hover {
    text-decoration: underline;
    color: var(--sb-amber-accessible);
}

/* Bottom nav — Prev/Next disabled state */
.tribe-events .tribe-events-c-nav__prev[aria-disabled="true"],
.tribe-events .tribe-events-c-nav__next[aria-disabled="true"],
.tribe-events .tribe-events-c-nav__prev--disabled,
.tribe-events .tribe-events-c-nav__next--disabled {
    color: var(--sb-slate, #64748b) !important;
    opacity: 0.5;
    cursor: default;
}

.tribe-events .tribe-events-c-nav__prev[aria-disabled="true"] svg path,
.tribe-events .tribe-events-c-nav__next[aria-disabled="true"] svg path,
.tribe-events .tribe-events-c-nav__prev--disabled svg path,
.tribe-events .tribe-events-c-nav__next--disabled svg path {
    fill: var(--sb-slate, #64748b) !important;
    opacity: 0.5;
}

/* -- List View (Redesigned: meeting-card style) -- */
.tribe-events-calendar-list {
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Remove extra whitespace below events section */
.tribe-events .tribe-events-l-container {
    padding-bottom: 0 !important;
}

/* Month separators -- hidden since month is on each card badge */
.tribe-events-calendar-list__month-separator,
.tribe-events .tribe-events-calendar-list__month-separator {
    display: none;
}

/* ---- Event card (list view) ---- */
.tribe-events-calendar-list .strand-event-card {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tribe-events-calendar-list .strand-event-card article {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    background: #FFFFFF;
    border: 1px solid #E8E4DD;
    border-left: 4px solid #D4920B;
    border-radius: 8px;
    padding: 24px 28px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tribe-events-calendar-list .strand-event-card article:hover {
    box-shadow: 0 4px 16px rgba(11, 29, 46, 0.10);
    transform: translateY(-2px);
}

/* Featured event */
.tribe-events-calendar-list .strand-event-card--featured article {
    border-left-color: var(--sb-golden, #C8963E);
}

/* ---- Date badge (left) ---- */
.event-date-badge {
    text-align: center;
    flex-shrink: 0;
    min-width: 80px;
}

.event-date-badge time {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event-date-badge .event-month {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    color: #D4920B;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.2;
}

.event-date-badge .event-day-num {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.4rem;
    color: #0B1D2E;
    line-height: 1;
    letter-spacing: 1px;
}

.event-date-badge .event-weekday {
    display: block;
    font-size: 0.7rem;
    color: #5E6E7E;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

/* ---- Event details (right) ---- */
.event-details {
    flex: 1;
    min-width: 0;
}

.event-details .event-title {
    margin: 0 0 8px;
    font-size: 1.3rem;
    line-height: 1.3;
}

.event-details .event-title a {
    color: #0B1D2E;
    text-decoration: none;
}

.event-details .event-title a:hover {
    color: #D4920B;
}

.event-details .event-time {
    color: #0B1D2E;
    font-weight: 600;
    margin: 0 0 4px;
    font-size: 0.95rem;
}

.event-details .event-venue {
    color: #5E6E7E;
    font-size: 0.95rem;
    margin: 0 0 8px;
    line-height: 1.5;
}

.event-details .event-map-link {
    color: #5E6E7E;
    text-decoration: none;
    font-size: 0.9rem;
}

.event-details .event-map-link:hover {
    color: #D4920B;
}

.event-details .event-description {
    color: #4A5568;
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 12px;
}

.event-details .btn.btn-outline {
    margin-top: 4px;
    font-size: 0.85rem;
    padding: 10px 24px;
}

.event-details .btn.btn-outline:hover {
    background: var(--sb-navy) !important;
    color: var(--sb-white) !important;
    border-color: var(--sb-navy) !important;
    transform: none !important;
}

/* -- Single Event -- */
.tribe-events-single {
    max-width: 900px;
    margin: 0 auto;
}

.tribe-events-single-event-title,
.tribe-events .tribe-events-single-event-title {
    font-family: var(--sb-font-display);
    font-size: 2.8rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sb-navy);
    margin-bottom: 16px;
    line-height: 1.15;
}

.tribe-events-schedule,
.tribe-events .tribe-events-schedule,
.tribe-events-single .tribe-events-schedule {
    color: var(--sb-amber);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 28px;
}

.tribe-events-schedule h2,
.tribe-events-schedule .tribe-events-schedule__datetime {
    color: var(--sb-amber);
    font-family: var(--sb-font-heading);
    letter-spacing: 1px;
}

.tribe-events-single-section,
.tribe-events .tribe-events-single-section {
    margin-bottom: 36px;
}

/* Single event venue info */
.tribe-events-single .tribe-venue,
.tribe-venue,
.tribe-events-meta-group--venue {
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
    padding: 24px 28px;
    margin-bottom: 24px;
    border-left: 4px solid var(--sb-amber);
}

.tribe-venue-name,
.tribe-events-meta-group--venue .tribe-venue-name {
    font-family: var(--sb-font-heading);
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sb-navy);
    margin-bottom: 4px;
}

.tribe-venue-address,
.tribe-events-meta-group--venue address {
    color: var(--sb-slate);
    font-style: normal;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Venue address Google Maps link — map-pin icon + clean hover */
.tribe-venue-maps-link {
    color: var(--sb-slate);
    text-decoration: none;
    border-bottom: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}
.tribe-venue-maps-link::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: var(--sb-amber);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: relative;
    top: 2px;
}
.tribe-venue-maps-link:hover,
.tribe-venue-maps-link:focus {
    color: var(--sb-amber);
    text-decoration: none;
}

/* Single event organizer */
.tribe-events-meta-group--organizer {
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
    padding: 24px 28px;
    margin-bottom: 24px;
    border-left: 4px solid var(--sb-slate);
}

.tribe-organizer-name,
.tribe-events-meta-group--organizer .tribe-organizer {
    font-family: var(--sb-font-heading);
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sb-navy);
}

/* Event meta labels */
.tribe-events-meta-group .tribe-events-single-section-title,
.tribe-events .tribe-events-single-section-title {
    font-family: var(--sb-font-heading);
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sb-navy);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sb-border);
}

/* Cost display */
.tribe-events-cost,
.tribe-events .tribe-events-cost,
.tribe-events-event-cost {
    font-family: var(--sb-font-heading);
    font-size: 1.3rem;
    color: var(--sb-amber);
    letter-spacing: 1px;
    margin-bottom: 16px;
}

/* Single event image */
.tribe-events-single .tribe-events-event-image img,
.tribe-events-event-image img {
    border-radius: var(--sb-card-radius);
    width: 100%;
    height: auto;
}

/* Back to events link */
.tribe-events-back a,
.tribe-events .tribe-events-back a {
    color: var(--sb-amber-accessible);
    font-family: var(--sb-font-body);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.tribe-events-back a:hover,
.tribe-events .tribe-events-back a:hover {
    color: var(--sb-navy);
}

/* Single event sub-navigation */
.tribe-events-single .tribe-events-sub-nav a,
.tribe-events-sub-nav a {
    color: var(--sb-amber-accessible);
    font-family: var(--sb-font-body);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.tribe-events-single .tribe-events-sub-nav a:hover,
.tribe-events-sub-nav a:hover {
    color: var(--sb-navy);
}

/* Single event page — ensure all link hovers stay navy, not browser-default blue */
.single-tribe_events .entry-content a:hover,
.single-tribe_events .tribe-events-single a:hover {
    color: var(--sb-navy);
}
/* Preserve amber hover for the map link */
.single-tribe_events .tribe-venue-maps-link:hover,
.single-tribe_events .tribe-venue-maps-link:focus {
    color: var(--sb-amber);
}

/* Google Maps embed */
.tribe-events-venue-map iframe,
.tribe-venue-map iframe {
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
}

/* Event category badges */
.tribe-events-category-badge,
.tribe-events .tribe-events-category a,
.post-tag a[href*="tribe_events_cat"] {
    display: inline-block;
    font-family: var(--sb-font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 20px;
    vertical-align: middle;
    background-color: rgba(212, 146, 11, 0.1);
    color: var(--sb-amber);
    border: 1px solid rgba(212, 146, 11, 0.2);
}

.tribe-events .tribe-events-category a:hover,
.post-tag a[href*="tribe_events_cat"]:hover {
    background-color: var(--sb-amber);
    color: var(--sb-white);
}

/* Featured event -- handled by .strand-event-card--featured above */

.tribe-events .tribe-common-c-svgicon--featured {
    color: var(--sb-golden);
}

/* -- Month/Calendar View -- */
.tribe-events-calendar-month__header,
.tribe-events .tribe-events-calendar-month__header-column,
.tribe-events-calendar-month__header-column-title {
    background-color: var(--sb-navy);
    color: var(--sb-white);
    font-family: var(--sb-font-body);
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 12px 8px;
}

.tribe-events .tribe-events-calendar-month__header-column-title {
    color: var(--sb-white);
}

/* Day cells */
.tribe-events-calendar-month__day,
.tribe-events .tribe-events-calendar-month__day {
    border: 1px solid var(--sb-border);
    transition: background-color var(--sb-transition);
    min-height: 100px;
}

.tribe-events-calendar-month__day:hover {
    background-color: rgba(212, 146, 11, 0.04);
}

/* Day number */
.tribe-events-calendar-month__day-date,
.tribe-events .tribe-events-calendar-month__day-date,
.tribe-events-calendar-month__day-date-link {
    font-family: var(--sb-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--sb-navy);
}

.tribe-events-calendar-month__day-date-link:hover {
    color: var(--sb-amber);
}

/* Today highlight */
.tribe-events-calendar-month__day--current,
.tribe-events .tribe-events-calendar-month__day--current {
    background-color: rgba(212, 146, 11, 0.06);
}

.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date,
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date,
.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link {
    color: var(--sb-amber);
    font-weight: 700;
}

/* Events in day cells */
.tribe-events-calendar-month__calendar-event {
    margin-bottom: 2px;
}

.tribe-events-calendar-month__calendar-event-title,
.tribe-events .tribe-events-calendar-month__calendar-event-title {
    font-size: 0.75rem;
    color: var(--sb-amber);
    font-weight: 600;
}

.tribe-events-calendar-month__calendar-event-title a {
    color: var(--sb-amber);
}

.tribe-events-calendar-month__calendar-event-title a:hover {
    color: var(--sb-golden);
}

/* Multiday bar */
.tribe-events-calendar-month__multiday-event-bar-inner,
.tribe-events .tribe-events-calendar-month__multiday-event-bar-inner {
    background-color: var(--sb-amber);
    border-radius: var(--sb-radius);
}

.tribe-events-calendar-month__multiday-event-bar-inner:hover {
    background-color: var(--sb-golden);
}

/* More events link */
.tribe-events-calendar-month__more-events {
    color: var(--sb-amber);
    font-size: 0.8rem;
    font-weight: 600;
}

.tribe-events-calendar-month__more-events:hover {
    color: var(--sb-golden);
}

/* Past/other month days */
.tribe-events-calendar-month__day--past,
.tribe-events-calendar-month__day--other-month {
    opacity: 0.4;
}

/* Mobile month popover */
.tribe-events-calendar-month-mobile-events__mobile-event,
.tribe-events .tribe-events-calendar-month-mobile-events__mobile-event {
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
    border-left: 4px solid var(--sb-amber);
    padding: 16px;
    margin-bottom: 12px;
}

/* -- Day View -- */
.tribe-events-calendar-day__event,
.tribe-events .tribe-events-calendar-day__event {
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
    border-left: 4px solid var(--sb-amber);
    padding: 28px;
    margin-bottom: 20px;
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
}

.tribe-events-calendar-day__event:hover {
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-2px);
}

.tribe-events-calendar-day__event-title,
.tribe-events .tribe-events-calendar-day__event-title {
    font-family: var(--sb-font-display);
    font-size: 1.4rem;
    letter-spacing: 0;
    text-transform: none;
}

.tribe-events-calendar-day__event-title a {
    color: var(--sb-navy);
}

.tribe-events-calendar-day__event-title a:hover {
    color: var(--sb-amber);
}

.tribe-events-calendar-day__event-datetime,
.tribe-events .tribe-events-calendar-day__event-datetime {
    color: var(--sb-amber);
    font-weight: 600;
}

/* TEC buttons */
.tribe-events .tribe-events-c-ical__link,
.tribe-events .tribe-common-c-btn,
.tribe-common .tribe-common-c-btn,
.tribe-events-button,
.tribe-events .tribe-events-button {
    background-color: var(--sb-navy);
    color: var(--sb-white);
    font-family: var(--sb-font-heading);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: none;
    border-radius: var(--sb-radius);
    padding: 12px 28px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color var(--sb-transition), box-shadow var(--sb-transition);
}

.tribe-events .tribe-events-c-ical__link:hover,
.tribe-events .tribe-common-c-btn:hover,
.tribe-common .tribe-common-c-btn:hover,
.tribe-events-button:hover {
    background-color: var(--sb-amber);
    color: var(--sb-white);
    box-shadow: var(--sb-shadow);
}

/* Subscribe dropdown */
.tribe-events .tribe-events-c-subscribe-dropdown__button {
    color: var(--sb-amber-accessible);
    font-family: var(--sb-font-body);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.tribe-events .tribe-events-c-subscribe-dropdown__button:hover {
    color: var(--sb-navy);
}

.tribe-events .tribe-events-c-subscribe-dropdown__list {
    background: var(--sb-white);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow-hover);
    border-top: 3px solid var(--sb-amber);
}

.tribe-events .tribe-events-c-subscribe-dropdown__list-item a {
    color: var(--sb-navy);
    font-size: 0.9rem;
}

.tribe-events .tribe-events-c-subscribe-dropdown__list-item a:hover {
    color: var(--sb-amber);
    background-color: var(--sb-cream);
}

/* TEC events bar layout -- compact inline bar */
.tribe-events .tribe-events-c-events-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border: none !important;
    padding: 0;
    margin-bottom: 16px;
}

.tribe-events .tribe-events-c-events-bar--border {
    border: none !important;
}

.tribe-events .tribe-events-c-events-bar__search-container {
    flex: 0 1 auto;
    max-width: 520px;
}

.tribe-events .tribe-events-c-events-bar__search-button {
    display: none !important;
}

/* TEC search bar -- compact inline */
.tribe-events .tribe-events-c-search,
.tribe-events .tribe-events-c-events-bar__search-form {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    max-width: 520px;
}

.tribe-events .tribe-events-c-search:focus-within,
.tribe-events .tribe-events-c-events-bar__search-form:focus-within {
    border-color: var(--sb-amber);
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.15);
}

/* Search input group -- position icon inside */
.tribe-events .tribe-events-c-search__input-group {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
    min-width: 0;
}

/* Move the magnifying glass icon to the left, non-overlapping */
.tribe-events .tribe-events-c-search__input-control {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
    min-width: 0;
}

.tribe-events .tribe-events-c-search__input-control .tribe-events-c-search__input-control-icon-svg,
.tribe-events .tribe-events-c-search__input-control svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--sb-slate);
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}

.tribe-events .tribe-events-c-search__input,
.tribe-events .tribe-events-c-search input[type="text"],
.tribe-events .tribe-events-c-search input[type="search"] {
    border: none;
    border-radius: var(--sb-radius) 0 0 var(--sb-radius);
    padding: 8px 12px 8px 36px;
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    color: var(--sb-text);
    background: transparent;
    flex: 1;
    min-width: 0;
    height: 40px;
    box-sizing: border-box;
}

.tribe-events .tribe-events-c-search__input:focus,
.tribe-events .tribe-events-c-search input[type="text"]:focus,
.tribe-events .tribe-events-c-search input[type="search"]:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

.tribe-events .tribe-events-c-search__input::placeholder {
    color: var(--sb-slate);
    opacity: 0.6;
    font-size: 0.9rem;
}

/* Find Events button -- outside the input, inline */
.tribe-events .tribe-events-c-search__button,
.tribe-events .tribe-events-c-search button[type="submit"] {
    background: var(--sb-amber);
    color: var(--sb-white);
    border: none;
    border-radius: 0 6px 6px 0;
    padding: 8px 18px;
    font-family: var(--sb-font-heading);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    height: 40px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.tribe-events .tribe-events-c-search__button:hover,
.tribe-events .tribe-events-c-search button[type="submit"]:hover {
    background: var(--sb-navy);
    color: var(--sb-white);
    box-shadow: var(--sb-shadow);
}

/* Hide the label inside the search input control (screen-reader only) */
.tribe-events .tribe-common-form-control-text__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reduce whitespace below events header / above event list */
.tribe-events .tribe-events-header {
    margin-bottom: 8px;
}

.tribe-events .tribe-events-header--has-event-search {
    padding-bottom: 0;
}

/* Tighten the ical/subscribe links area */
.tribe-events .tribe-events-c-ical {
    margin-top: 8px;
    margin-bottom: 0;
}

/* TEC tooltip/popover */
.tribe-events .tribe-events-tooltip,
.tribe-events-tooltip,
.tribe-events .tribe-events-calendar-month__calendar-event-tooltip {
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    box-shadow: var(--sb-shadow-hover);
    border-top: 3px solid var(--sb-amber);
    padding: 20px;
}

.tribe-events-tooltip .tribe-events-tooltip__title,
.tribe-events .tribe-events-tooltip__title {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
    font-size: 1.1rem;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 6px;
}

.tribe-events-tooltip .tribe-events-tooltip__description {
    color: var(--sb-text);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* No events message */
.tribe-events .tribe-events-c-messages__message,
.tribe-events-c-messages__message {
    font-family: var(--sb-font-body);
    color: var(--sb-slate);
    font-size: 1.1rem;
    text-align: center;
    padding: 60px 24px;
}


/* Event category color coding */
.tribe-events-category-monthly-meeting {
    border-left: 3px solid #0B1D2E;
}
.tribe-events-category-social {
    border-left: 3px solid #D4920B;
}
.tribe-events-category-competition {
    border-left: 3px solid #E8A817;
}
.tribe-events-category-brew-day {
    border-left: 3px solid #B07808;
}
.tribe-events-category-festival {
    border-left: 3px solid #F5F0E8;
}

/* Upcoming events list (shortcode — scoped to .strand-events-list) */
.strand-events-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.strand-events-list .strand-event-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #FFFFFF;
    border: 1px solid #E8E4DD;
    border-left: 4px solid #D4920B;
    border-radius: 8px;
    padding: 16px 20px;
    text-decoration: none;
    color: #0B1D2E;
    transition: all 0.2s ease;
}

.strand-events-list .strand-event-card:hover {
    background: #0B1D2E;
    color: #FFFFFF;
    border-color: #0B1D2E;
    border-left-color: #D4920B;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.strand-events-list .strand-event-date {
    min-width: 70px;
    text-align: center;
    flex-shrink: 0;
}

.strand-events-list .strand-event-month-day {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 1px;
    color: #D4920B;
}

.strand-events-list .strand-event-card:hover .strand-event-month-day {
    color: #E8A817;
}

.strand-events-list .strand-event-day-name {
    display: block;
    font-size: 0.75rem;
    color: #5E6E7E;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.strand-events-list .strand-event-card:hover .strand-event-day-name {
    color: #F5F0E8;
}

.strand-events-list .strand-event-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    margin: 0;
    color: inherit;
}

.strand-events-list .strand-event-time,
.strand-events-list .strand-event-venue {
    font-size: 0.85rem;
    color: #5E6E7E;
}

.strand-events-list .strand-event-card:hover .strand-event-time,
.strand-events-list .strand-event-card:hover .strand-event-venue {
    color: #F5F0E8;
}

.strand-events-list .strand-event-cat {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #F5F0E8;
    color: #0B1D2E;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
}

.strand-events-list .strand-event-card:hover .strand-event-cat {
    background: rgba(255,255,255,0.15);
    color: #FFFFFF;
}

/* Override .entry-content a:hover which sets navy text on the dark hover bg */
.entry-content .strand-events-list a.strand-event-card:hover,
.entry-content .strand-events-list a.strand-event-card:hover h3,
.entry-content .strand-events-list a.strand-event-card:hover .strand-event-title,
.entry-content .strand-events-list a.strand-event-card:hover .strand-event-time,
.entry-content .strand-events-list a.strand-event-card:hover .strand-event-venue,
.entry-content .strand-events-list a.strand-event-card:hover .strand-event-day-name,
.entry-content .strand-events-list a.strand-event-card:hover .strand-event-cat {
    color: #FFFFFF;
}

/* ======================================================================
   12. CONTACT FORM (WPForms)
   Form layout, inputs, labels, submit button
   ====================================================================== */

.wpforms-container {
    max-width: 680px;
    margin: 0 auto;
}

.wpforms-container .wpforms-form .wpforms-field-label {
    font-family: var(--sb-font-body);
    font-weight: 600;
    color: var(--sb-navy);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form input[type="tel"],
.wpforms-container .wpforms-form textarea,
.wpforms-container .wpforms-form select {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 12px 16px;
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    color: var(--sb-text);
    background-color: var(--sb-white);
    transition: border-color var(--sb-transition), box-shadow var(--sb-transition);
}

.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form textarea:focus,
.wpforms-container .wpforms-form select:focus {
    border-color: var(--sb-amber);
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.12);
    outline: none;
}

/* WPForms submit button — follow primary button pattern */
.wpforms-container .wpforms-form button[type="submit"],
.wpforms-container .wpforms-form .wpforms-submit {
    background-color: var(--sb-amber);
    color: #000000;
    font-family: var(--sb-font-heading);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 2px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    padding: 14px 36px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color var(--sb-transition), color var(--sb-transition), border-color var(--sb-transition), box-shadow var(--sb-transition), transform var(--sb-transition);
}

.wpforms-container .wpforms-form button[type="submit"]:hover,
.wpforms-container .wpforms-form .wpforms-submit:hover {
    background-color: var(--sb-navy);
    color: var(--sb-white);
    border-color: var(--sb-navy);
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-1px);
}


/* ======================================================================
   13. DREGS ARCHIVE
   Filter bar, year sections, PDF links
   ====================================================================== */

.dregs-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 32px 0 40px;
    padding: 0;
}

.dregs-filter-btn {
    font-family: var(--sb-font-body);
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 10px 22px;
    border: 1px solid var(--sb-border);
    border-radius: 30px;
    background-color: var(--sb-white);
    color: var(--sb-navy);
    cursor: pointer;
    transition: background-color var(--sb-transition), color var(--sb-transition), border-color var(--sb-transition);
}

.dregs-filter-btn:hover {
    background-color: var(--sb-navy);
    color: var(--sb-white);
    border-color: var(--sb-navy);
}

.dregs-filter-btn--active {
    background-color: var(--sb-navy);
    color: var(--sb-white);
    border-color: var(--sb-navy);
}

.dregs-filter-btn--active:hover {
    background-color: var(--sb-amber);
    border-color: var(--sb-amber);
}

.dregs-year {
    scroll-margin-top: 80px;
}

.dregs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 20px 0 40px;
}

.dregs-card {
    display: block;
    background: #FFFFFF;
    border: 1px solid #E8E4DD;
    border-left: 3px solid #D4920B;
    border-radius: 8px;
    padding: 12px 16px;
    text-decoration: none;
    color: #0B1D2E;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dregs-card:hover {
    background: #0B1D2E;
    color: #FFFFFF;
    border-color: #0B1D2E;
    border-left-color: #D4920B;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    text-decoration: none;
}

.dregs-month {
    display: block;
    font-size: 1rem;
}

.dregs-year-label {
    display: block;
    font-size: 0.8rem;
    color: #7A8A99;
}

.dregs-card:hover .dregs-year-label {
    color: #F5F0E8;
}

/* Override .entry-content a:hover which sets navy text on the dark hover bg */
.entry-content a.dregs-card:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.entry-content a.dregs-card:hover .dregs-year-label {
    color: #F5F0E8;
}

/* Disabled dregs cards (PDF not available) */
.dregs-card-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    border-left-color: #E8E4DD;
}

.dregs-card-disabled .dregs-month::after {
    content: ' (unavailable)';
    font-size: 0.75rem;
    color: #5E6E7E;
    font-weight: 400;
}


/* ======================================================================
   14. PHOTO GALLERY (FooGallery)
   Grid, thumbnails, lightbox, captions
   ====================================================================== */

/* Gallery intro */
.strand-gallery-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

.strand-gallery-intro h2 {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
    font-size: 36px;
    letter-spacing: 0;
    margin-bottom: 16px;
    text-transform: none;
}

.strand-gallery-intro p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--sb-text);
}

.strand-gallery-placeholder {
    background-color: var(--sb-cream);
    border-left: 4px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    padding: 28px 32px;
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.strand-gallery-placeholder p {
    font-size: 1rem;
    color: var(--sb-text);
    line-height: 1.7;
    margin: 0;
}

.strand-gallery-placeholder a {
    color: var(--sb-amber-accessible);
    font-weight: 600;
}

.strand-gallery-placeholder a:hover {
    color: var(--sb-navy);
}

/* Gallery page category sections */
.gallery-category {
    margin-bottom: 56px;
}

.gallery-category > h2 {
    font-family: var(--sb-font-heading);
    font-size: 1.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sb-amber-accessible);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sb-amber);
}

.gallery-category h3 {
    font-family: var(--sb-font-display);
    font-size: 1.1rem;
    color: var(--sb-navy);
    margin: 24px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--sb-border);
}

.gallery-category p {
    color: var(--sb-slate);
    margin-bottom: 20px;
    font-size: 0.95rem;
}

/* Gallery: smaller thumbnails for denser grid */
.foogallery .fg-item img {
    height: 150px;
    object-fit: cover;
}

/* Member photo upload form */
.strand-photo-upload {
    max-width: 540px;
    margin: 48px auto 0;
    padding: 32px;
    background: var(--sb-cream);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
}

.strand-photo-upload h3 {
    font-family: var(--sb-font-display);
    font-size: 1.3rem;
    color: var(--sb-navy);
    margin-bottom: 8px;
}

.strand-photo-upload p {
    color: var(--sb-slate);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.strand-photo-upload label {
    display: block;
    font-weight: 600;
    color: var(--sb-navy);
    margin-bottom: 4px;
    margin-top: 16px;
    font-size: 0.9rem;
}

.strand-photo-upload input[type="text"],
.strand-photo-upload input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--sb-border);
    border-radius: 6px;
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
}

.strand-photo-upload input[type="text"]:focus {
    outline: none;
    border-color: var(--sb-amber);
    box-shadow: 0 0 0 3px rgba(200, 155, 18, 0.15);
}

/* Photo upload gate (non-members) */
.strand-photo-upload-gate {
    text-align: center;
    padding: 32px;
    background: var(--sb-cream);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
    margin-top: 32px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.strand-photo-upload-gate h3 {
    font-family: var(--sb-font-display);
    font-size: 1.3rem;
    color: var(--sb-navy);
    margin-bottom: 8px;
}

.strand-photo-upload-gate p {
    color: var(--sb-slate);
    font-size: 0.95rem;
}

.strand-photo-upload-gate a {
    color: var(--sb-amber);
    text-decoration: underline;
}

/* Album selection dropdown */
.upload-album-choice select,
.strand-photo-upload select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--sb-border);
    border-radius: 6px;
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    margin-bottom: 16px;
    background: #fff;
}

.upload-album-choice select:focus,
.strand-photo-upload select:focus {
    outline: none;
    border-color: var(--sb-amber);
    box-shadow: 0 0 0 3px rgba(200, 155, 18, 0.15);
}

#new-gallery-fields {
    padding: 16px;
    background: rgba(255,255,255,0.6);
    border: 1px dashed var(--sb-border);
    border-radius: 6px;
    margin-bottom: 16px;
}

/* FooGallery brand overrides */
.foogallery {
    margin: 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.foogallery .fg-item {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 12px;
}

.foogallery .fg-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Thumbnail hover overlay */
.foogallery .fg-item .fg-thumb {
    position: relative;
    border-radius: var(--sb-card-radius);
    overflow: hidden;
}

.foogallery .fg-item .fg-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(212, 146, 11, 0.2);
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 8px;
    pointer-events: none;
}

.foogallery .fg-item:hover .fg-thumb::after {
    opacity: 1;
}

/* Thumbnail amber overlay (via image-wrap) */
.foogallery .fg-item .fg-item-inner .fg-thumb .fg-image-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(212, 146, 11, 0.3);
    opacity: 0;
    transition: opacity var(--sb-transition);
    pointer-events: none;
}

.foogallery .fg-item:hover .fg-item-inner .fg-thumb .fg-image-wrap::after {
    opacity: 1;
}

/* Thumbnail zoom on hover */
.foogallery .fg-item .fg-thumb .fg-image {
    transition: transform var(--sb-transition);
}

.foogallery .fg-item:hover .fg-thumb .fg-image {
    transform: scale(1.04);
}

/* Captions */
.foogallery .fg-caption {
    font-family: var(--sb-font-body);
    color: var(--sb-navy);
    font-size: 0.85rem;
    padding: 8px 12px;
    background: var(--sb-white);
}

.foogallery .fg-item .fg-caption {
    background-color: var(--sb-navy);
    padding: 10px 14px;
}

.foogallery .fg-item .fg-caption .fg-caption-title {
    font-family: var(--sb-font-heading);
    color: var(--sb-cream);
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.foogallery .fg-item .fg-caption .fg-caption-desc {
    font-family: var(--sb-font-body);
    color: var(--sb-cream);
    font-size: 0.85rem;
    opacity: 0.85;
}

/* FooGallery lightbox */
.foogallery-lightbox .fbx-inner {
    background: rgba(11, 29, 46, 0.95);
}

.foogallery-lightbox .fbx-caption {
    font-family: var(--sb-font-body);
    color: var(--sb-cream);
}

/* Lightbox -- navy overlay */
.foogallery-lightbox .fg-lightbox-overlay,
.foogallery-lightbox .fgl-overlay,
.fg-lightbox .fg-lightbox-overlay {
    background-color: rgba(11, 29, 46, 0.92);
}

.foogallery-lightbox .fg-lightbox-caption,
.foogallery-lightbox .fgl-caption,
.fg-lightbox .fg-lightbox-caption {
    font-family: var(--sb-font-body);
    color: var(--sb-cream);
}

.foogallery-lightbox .fg-lightbox-caption-title,
.foogallery-lightbox .fgl-caption-title {
    font-family: var(--sb-font-heading);
    color: var(--sb-cream);
    letter-spacing: 1px;
}


/* ======================================================================
   15. OFFICERS / LEADERSHIP
   Officer cards grid, photos, bios
   ====================================================================== */

.leadership-page .content-container {
    max-width: var(--sb-content-max);
    margin: 0 auto;
    padding: 2rem 1.5rem 5rem;
}

.leadership-header .page-title {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    text-align: center;
    margin-bottom: 1rem;
    text-transform: none;
    letter-spacing: 0;
}

.leadership-intro {
    max-width: 720px;
    margin: 0 auto 3rem;
    text-align: center;
    font-family: var(--sb-font-body);
    color: var(--sb-text);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Officers grid -- 3 cols desktop, constrained to 90% width */
.officers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 90%;
    margin: 0 auto;
}

/* Officer card */
.officer-card {
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
    padding: 2.5rem 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.officer-card:hover {
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-3px);
}

/* Officer photo */
.officer-photo-wrapper {
    margin-bottom: 1.25rem;
}

.officer-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--sb-cream);
}

/* Photo placeholder */
.officer-photo-placeholder {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: var(--sb-navy);
    color: var(--sb-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.officer-photo-placeholder svg {
    width: 100px;
    height: 100px;
}

/* Officer avatar overrides — the unified member avatar system outputs
   mc-avatar-img / mc-avatar-initials at 80px default; restore 150px for
   the Leadership page cards. */
.officers-section .officer-card .mc-avatar-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--sb-cream);
}

.officers-section .officer-card .mc-avatar-initials {
    width: 150px;
    height: 150px;
    font-size: 3rem;
    line-height: 150px;
}

/* Officer name */
.officer-name {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 0.25rem;
    line-height: 1.2;
    text-transform: none;
    white-space: normal;
    word-wrap: break-word;
}

/* Officer title */
.officer-title {
    color: #D4920B;
    font-family: var(--sb-font-heading);
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0 0 1rem;
}

/* Officer bio */
.officer-bio {
    font-family: var(--sb-font-body);
    color: var(--sb-text);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 1rem;
    text-align: center;
    flex-grow: 1;
}

/* Officer/member contact button */
.officer-contact-btn {
    font-family: var(--sb-font-heading);
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: var(--sb-amber);
    color: var(--sb-navy);
    border: none;
    padding: 0.5em 1.6em;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 400;
    transition: background var(--sb-transition), color var(--sb-transition);
    margin: 0 auto 0.75rem;
    display: inline-block;
}

.officer-contact-btn:hover,
.officer-contact-btn:focus-visible {
    background: var(--sb-navy);
    color: var(--sb-white);
}

/* ---- Officer Contact Modal ---- */
.officer-contact-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10002;
    align-items: center;
    justify-content: center;
}

.officer-contact-modal.ocm-open {
    display: flex;
}

.ocm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 29, 46, 0.7);
}

.ocm-card {
    position: relative;
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    max-width: 500px;
    width: 90%;
    padding: 2.5rem 2rem 2rem;
    box-shadow: var(--sb-shadow-hover);
    z-index: 1;
    animation: ocm-slide-in 0.25s ease;
}

@keyframes ocm-slide-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ocm-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--sb-slate);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color var(--sb-transition);
}

.ocm-close:hover {
    color: var(--sb-white);
    background: var(--sb-navy);
    border-radius: 4px;
}

.ocm-heading {
    font-family: var(--sb-font-heading);
    font-size: 1.4rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sb-navy);
    margin: 0 0 0.25rem;
}

.ocm-officer-name {
    font-family: var(--sb-font-display);
    color: var(--sb-amber);
    font-size: 1.15rem;
    margin: 0 0 1.25rem;
}

.ocm-form label {
    display: block;
    font-family: var(--sb-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sb-slate);
    margin-bottom: 0.3rem;
}

/* Override dark-section color bleed into modal */
.strand-section-dark .ocm-close {
    color: var(--sb-slate);
}
.strand-section-dark .ocm-heading {
    color: var(--sb-navy);
}
.strand-section-dark .ocm-officer-name {
    color: var(--sb-amber);
}
.strand-section-dark .ocm-form label {
    color: var(--sb-slate);
}
.strand-section-dark .ocm-status {
    color: var(--sb-text);
}

.ocm-form input[type="text"],
.ocm-form input[type="email"],
.ocm-form textarea {
    display: block;
    width: 100%;
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    padding: 0.6em 0.8em;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-background);
    color: var(--sb-text);
    margin-bottom: 1rem;
    transition: border-color var(--sb-transition), box-shadow var(--sb-transition);
    box-sizing: border-box;
}

.ocm-form input:focus,
.ocm-form textarea:focus {
    outline: none;
    border-color: var(--sb-amber);
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.15);
}

.ocm-form textarea {
    min-height: 100px;
    resize: vertical;
}

.ocm-submit {
    font-family: var(--sb-font-heading);
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--sb-amber);
    color: var(--sb-navy);
    border: none;
    padding: 0.65em 2em;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 400;
    width: 100%;
    transition: background var(--sb-transition), color var(--sb-transition);
}

.ocm-submit:hover,
.ocm-submit:focus-visible {
    background: var(--sb-navy);
    color: var(--sb-white);
}

.ocm-submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

.ocm-status {
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    margin-top: 0.75rem;
    text-align: center;
    min-height: 1.2em;
}

.ocm-success {
    color: #2e7d32;
}

.ocm-error {
    color: #c62828;
}

/* Modal mobile */
@media (max-width: 600px) {
    .ocm-card {
        width: 100%;
        max-width: none;
        margin: 1rem;
        padding: 2rem 1.25rem 1.5rem;
    }
}

/* =====================================================================
   MEMBER PROFILE MODAL
   ===================================================================== */

/* Cards with data-member-id are clickable */
.member-card[data-member-id] {
    cursor: pointer;
}

/* Modal open body lock */
body.modal-open {
    overflow: hidden;
}

/* Modal shell */
.member-profile-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001;
    align-items: center;
    justify-content: center;
}

.member-profile-modal.mpm-open {
    display: flex;
}

.mpm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 29, 46, 0.7);
}

.mpm-card {
    position: relative;
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    max-width: 520px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 2.5rem 2rem 2rem;
    box-shadow: var(--sb-shadow-hover);
    z-index: 1;
    animation: mpm-slide-in 0.25s ease;
}

@keyframes mpm-slide-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Close button — matches ocm-close pattern */
.mpm-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--sb-slate);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color var(--sb-transition), background var(--sb-transition);
    z-index: 2;
}

.mpm-close:hover {
    color: var(--sb-white);
    background: var(--sb-navy);
    border-radius: 4px;
}

/* Header */
.mpm-header {
    text-align: center;
    margin-bottom: 1rem;
}

.mpm-avatar {
    width: 150px;
    height: 150px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    overflow: hidden;
}

.mpm-avatar .mc-avatar-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
}

.mpm-avatar .mc-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    font-size: 3rem;
    border-radius: 50%;
}

.mpm-name {
    font-family: var(--sb-font-display);
    font-size: 1.6rem;
    color: var(--sb-navy);
    margin: 0 0 0.15rem;
}

.mpm-officer-title {
    font-family: var(--sb-font-heading);
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sb-amber);
    margin: 0 0 0.25rem;
}

.mpm-location {
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    color: var(--sb-slate);
    margin: 0;
}

/* Badges */
.mpm-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.75rem 0;
}

/* Divider */
.mpm-divider {
    border: none;
    border-top: 1px solid var(--sb-border);
    margin: 1rem 0;
}

/* Section label */
.mpm-section-label {
    font-family: var(--sb-font-heading);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sb-slate);
    margin: 0 0 0.5rem;
}

/* Bio */
.mpm-bio {
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--sb-text);
    line-height: 1.6;
    margin: 0;
}

/* Brewing info list */
.mpm-brewing-info {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    color: var(--sb-text);
}

.mpm-brewing-info li {
    padding: 0.3em 0;
    line-height: 1.5;
}

.mpm-brewing-info .mc-style-pill {
    margin-left: 0.25rem;
}

/* Stats */
.mpm-stats {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.mpm-stat {
    flex: 1;
    text-align: center;
    background: var(--sb-background);
    border-radius: var(--sb-radius);
    padding: 0.75rem 0.5rem;
}

.mpm-stat-value {
    display: block;
    font-family: var(--sb-font-display);
    font-size: 1.4rem;
    color: var(--sb-navy);
    line-height: 1;
    margin-bottom: 0.2rem;
}

.mpm-stat-label {
    display: block;
    font-family: var(--sb-font-heading);
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sb-slate);
}

/* Brew buddy box */
.mpm-brew-buddy {
    background: #e8f5e9;
    border-radius: var(--sb-radius);
    padding: 1rem;
    margin: 1rem 0;
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    color: #2e7d32;
}

.mpm-brew-buddy p {
    margin: 0.4rem 0 0;
    color: var(--sb-text);
}

.mpm-buddy-system {
    font-size: 0.85rem;
    color: var(--sb-slate) !important;
}

/* Currently hosting box */
.mpm-hosting {
    display: block;
    background: #fff8e1;
    border-radius: var(--sb-radius);
    padding: 0.85rem 1rem;
    margin: 1rem 0;
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    color: #b8860b;
    text-decoration: none;
    text-align: center;
    transition: background var(--sb-transition);
}

.mpm-hosting:hover {
    background: #fff3cd;
    color: #8b6508;
}

/* Contact row */
.mpm-contact-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.mpm-contact-link {
    font-family: var(--sb-font-body);
    font-size: 0.85rem;
    color: var(--sb-amber-accessible);
    text-decoration: none;
}

.mpm-contact-link:hover {
    text-decoration: underline;
}

.mpm-btn {
    font-family: var(--sb-font-heading);
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: none;
    padding: 0.5em 1.6em;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 400;
    text-decoration: none;
    transition: background var(--sb-transition), color var(--sb-transition);
}

.mpm-btn--contact,
.mpm-btn--edit {
    background: var(--sb-amber);
    color: var(--sb-navy);
}

.mpm-btn--contact:hover,
.mpm-btn--edit:hover {
    background: var(--sb-navy);
    color: var(--sb-white);
}

/* Member since footer */
.mpm-member-since {
    font-family: var(--sb-font-body);
    font-size: 0.8rem;
    color: var(--sb-slate);
    text-align: center;
    margin: 1rem 0 0;
}

/* Spinner */
.mpm-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.mpm-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--sb-border);
    border-top-color: var(--sb-amber);
    border-radius: 50%;
    animation: mpm-spin 0.7s linear infinite;
}

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

/* Error */
.mpm-error {
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    color: #c62828;
    text-align: center;
    padding: 2rem 1rem;
}

/* Mobile: full-screen card */
@media (max-width: 600px) {
    .mpm-card {
        width: 100%;
        max-width: none;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
        margin: 0;
        padding: 2rem 1.25rem 1.5rem;
    }

    .mpm-avatar {
        width: 120px;
        height: 120px;
    }

    .mpm-avatar .mc-avatar-img {
        width: 120px;
        height: 120px;
    }

    .mpm-avatar .mc-avatar-initials {
        width: 120px;
        height: 120px;
        font-size: 2.5rem;
    }

    .mpm-name {
        font-size: 1.35rem;
    }
}

/* Since badge */
.officer-since {
    display: inline-block;
    font-family: var(--sb-font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sb-slate);
    background: var(--sb-cream);
    padding: 0.3em 0.85em;
    border-radius: 999px;
    margin-top: 0.5rem;
}

/* Empty state */
.officers-empty {
    text-align: center;
    padding: 4rem 1.5rem;
}

.officers-empty p {
    font-family: var(--sb-font-body);
    color: var(--sb-slate);
    font-size: 1.1rem;
    font-style: italic;
}


/* ======================================================================
   16. SHOP PAGE
   Embed container, info grid, placeholder
   ====================================================================== */

.strand-shop-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

.strand-shop-intro h2 {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
    font-size: 36px;
    margin-bottom: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
}

.strand-shop-intro p {
    font-size: 1.1rem;
    color: var(--sb-text);
    line-height: 1.7;
}

/* Hide Kadence page title hero on shop page — the compact intro replaces it */
body.sb-shop .entry-hero,
body.page-id-9 .entry-hero {
    display: none;
}

/* Shop page hero — matches recipe page format, zero extra spacing */
.strand-section.strand-shop-hero .strand-section-inner {
    padding: 0 var(--sb-content-pad);
    max-width: 640px;
}

.strand-shop-hero .section-label {
    margin-bottom: 4px;
    padding-top: 24px;
}

.strand-shop-hero h1 {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
    font-size: 42px;
    margin: 0 0 6px;
    text-transform: none;
    letter-spacing: 0;
}

.strand-shop-hero p {
    font-size: 0.95rem;
    color: var(--sb-slate);
    line-height: 1.4;
    margin: 0;
    padding-bottom: 20px;
}

.strand-shop-embed {
    min-height: 400px;
    max-width: 1200px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Shop page: wider content area for Spreadshop embed */
body.sb-shop .strand-shop-section {
    padding: 0;
}

body.sb-shop .strand-shop-section .strand-shop-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 24px 40px;
    background: var(--sb-white);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* Spreadshop embed styling */
#myShop {
    width: 100%;
    max-width: 100%;
    min-height: 600px;
    margin: 0 auto;
}

/* Try to override Spreadshop's internal width constraints */
#myShop > div,
#myShop iframe {
    width: 100% !important;
    max-width: 100% !important;
}

#myShop .sprd-shoparea {
    font-family: var(--sb-font-body) !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Strip Spreadshop chrome — header, footer promo, branding */
#myShop #sprd-header,
#myShop .sprd-header,
#myShop [class*="sprd-header"],
#myShop [id*="sprd-header"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/*
 * Mobile: instead of hiding the entire sprd-header (which also hides
 * the checkout button in the basket view), show the header but hide
 * only the branding/nav children. Desktop keeps display:none above.
 */
@media (max-width: 768px) {
    #myShop #sprd-header,
    #myShop .sprd-header,
    #myShop [class*="sprd-header"],
    #myShop [id*="sprd-header"] {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Hide the branding/nav children inside the header on mobile */
    #myShop [class*="sprd-header"] [class*="sprd-header__logo"],
    #myShop [class*="sprd-header"] [class*="sprd-header__title"],
    #myShop [class*="sprd-header"] [class*="sprd-header__nav"],
    #myShop [class*="sprd-header"] [class*="sprd-header__menu"],
    #myShop [class*="sprd-header"] [class*="sprd-header__search"],
    #myShop [class*="sprd-header"] [class*="sprd-nav"],
    #myShop [class*="sprd-header"] [class*="department-filter"] {
        display: none !important;
    }
}

#myShop .sprd-info-footer__open-shop,
#myShop #buttonSpreadshirt,
#myShop .sprd-footer-box--reviews,
#myShop [class*="sprd-info-footer"],
#myShop .sprd-service-footer,
#myShop [class*="sprd-service-footer"] {
    display: none !important;
}

#myShop a {
    color: var(--sb-amber-accessible);
}

#myShop a:hover {
    color: var(--sb-navy);
}

.strand-section-white #myShop {
    padding: 20px 0;
}

/* Loading state for Spreadshop embed */
#myShop:empty::after,
#myShop > a:only-child::after {
    content: 'Loading shop...';
    display: block;
    text-align: center;
    color: var(--sb-slate);
    padding: 80px 0;
    font-style: italic;
}

/* How It Works info section */
.strand-shop-info {
    max-width: 1000px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

.strand-shop-info > h3 {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
    font-size: 28px;
    text-align: center;
    margin-bottom: 2rem;
    text-transform: none;
    letter-spacing: 0;
}

/* 3-column grid */
.shop-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.shop-info-item {
    background: var(--sb-white);
    border-radius: var(--sb-card-radius);
    border: 1px solid var(--sb-border);
    padding: 2rem 1.5rem;
    box-shadow: var(--sb-shadow);
    text-align: center;
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
}

.shop-info-item:hover {
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-2px);
}

.shop-info-item h4 {
    font-family: var(--sb-font-heading);
    color: var(--sb-navy);
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.shop-info-item p {
    color: var(--sb-text);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Member callout bar */
.shop-member-note {
    background: var(--sb-navy);
    color: var(--sb-white);
    padding: 1.25rem 1.5rem;
    border-radius: var(--sb-radius);
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
}

.shop-member-note strong {
    color: var(--sb-amber);
}


/* ======================================================================
   17. 404 PAGE
   Custom 404 layout
   ====================================================================== */

.strand-404 {
    max-width: 680px;
    margin: 0 auto;
    padding: 80px 24px 100px;
    text-align: center;
}

.strand-404-number {
    font-family: var(--sb-font-heading);
    font-size: 160px;
    line-height: 1;
    color: var(--sb-amber);
    opacity: 0.2;
    margin: 0 0 -20px;
    letter-spacing: 4px;
}

.strand-404-heading {
    font-family: var(--sb-font-display);
    font-size: 2.4rem;
    color: var(--sb-navy);
    margin: 0 0 16px;
    letter-spacing: 0;
    text-transform: none;
}

.strand-404-description {
    font-family: var(--sb-font-body);
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--sb-slate);
    max-width: 500px;
    margin: 0 auto 48px;
}

/* Links section */
.strand-404-links {
    text-align: left;
    max-width: 460px;
    margin: 0 auto 48px;
}

.strand-404-links h3 {
    font-family: var(--sb-font-heading);
    font-size: 1.3rem;
    color: var(--sb-navy);
    margin: 0 0 16px;
    letter-spacing: 1px;
}

.strand-404-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.strand-404-links li {
    padding: 12px 0;
    border-bottom: 1px solid var(--sb-border);
    font-family: var(--sb-font-body);
    font-size: 1rem;
    color: var(--sb-text);
    line-height: 1.5;
}

.strand-404-links li:last-child {
    border-bottom: none;
}

.strand-404-links a {
    color: var(--sb-amber-accessible);
    font-weight: 600;
}

.strand-404-links a:hover,
.strand-404-links a:focus {
    color: var(--sb-navy);
    text-decoration: none;
}

/* Search section */
.strand-404-search {
    max-width: 460px;
    margin: 0 auto;
}

.strand-404-search p {
    font-family: var(--sb-font-body);
    font-size: 1rem;
    color: var(--sb-slate);
    margin: 0 0 12px;
}

.strand-404-search .search-form {
    display: flex;
    gap: 8px;
}

.strand-404-search .search-field {
    flex: 1;
    padding: 12px 16px;
    font-family: var(--sb-font-body);
    font-size: 1rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-white);
    color: var(--sb-text);
    transition: border-color 0.2s ease;
}

.strand-404-search .search-field:focus {
    outline: none;
    border-color: var(--sb-amber);
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.12);
}

.strand-404-search .search-submit {
    padding: 12px 24px;
    font-family: var(--sb-font-heading);
    font-size: 1.1rem;
    letter-spacing: 1px;
    background: var(--sb-navy);
    color: var(--sb-white);
    border: none;
    border-radius: var(--sb-radius);
    cursor: pointer;
    transition: background 0.2s ease;
}

.strand-404-search .search-submit:hover,
.strand-404-search .search-submit:focus {
    background: var(--sb-amber);
}


/* ======================================================================
   18. BUTTONS & FORMS (global)
   Primary, secondary, outline buttons. Input fields, select, textarea.
   ====================================================================== */

/* -- Primary button (all contexts) --
   Default: amber bg, navy text, amber border
   Hover on light bg: navy bg, white text, navy border */
.wp-block-button__link,
button,
input[type="submit"],
.btn,
.btn-primary,
.btn-amber,
.kadence-button,
.button {
    font-family: var(--sb-font-heading);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 1rem;
    background-color: var(--sb-amber);
    color: #000000;
    border: 2px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    padding: 14px 32px;
    cursor: pointer;
    transition: background-color var(--sb-transition), color var(--sb-transition), border-color var(--sb-transition), box-shadow var(--sb-transition), transform var(--sb-transition), opacity var(--sb-transition);
    text-decoration: none;
    display: inline-block;
}

.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover,
.btn:hover,
.btn-primary:hover,
.btn-amber:hover,
.kadence-button:hover,
.button:hover {
    background-color: var(--sb-navy);
    color: var(--sb-white);
    border-color: var(--sb-navy);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* -- Type 2: Secondary (navy filled on light bg) --
   Default: navy bg, white text, navy border
   Hover: amber bg, black text, amber border */
.btn-secondary {
    background-color: #0B1D2E;
    color: #FFFFFF;
    border: 2px solid #0B1D2E;
}

.btn-secondary:hover {
    background-color: #D4920B;
    color: #000000;
    border-color: #D4920B;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* -- Type 3: Outline/Tertiary (transparent on light bg) --
   Default: transparent bg, navy text, navy border
   Hover: navy bg, white text, navy border */
.wp-block-button.is-style-outline .wp-block-button__link,
.btn-outline {
    background-color: transparent;
    color: #0B1D2E;
    border: 2px solid #0B1D2E;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.btn-outline:hover {
    background-color: #0B1D2E;
    color: #FFFFFF;
    border-color: #0B1D2E;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Paired buttons: fade non-hovered sibling so the active button is obvious */
.hero-cta:hover .btn:not(:hover),
.hero-cta:hover a:not(:hover),
.wp-block-buttons:hover .wp-block-button__link:not(:hover) {
    opacity: 0.7;
    transition: opacity var(--sb-transition), background-color var(--sb-transition), color var(--sb-transition), border-color var(--sb-transition), box-shadow var(--sb-transition), transform var(--sb-transition);
}

/* Global form inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
select {
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    color: var(--sb-text);
    background-color: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 12px 16px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--sb-transition), box-shadow var(--sb-transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--sb-amber);
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.12);
    outline: none;
}

label {
    font-family: var(--sb-font-body);
    font-weight: 600;
    color: var(--sb-navy);
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
}


/* ======================================================================
   19. UTILITY CLASSES
   Text colors, backgrounds, spacing helpers
   ====================================================================== */

.sb-bg-navy { background-color: var(--sb-navy); }
.sb-bg-cream { background-color: var(--sb-cream); }
.sb-bg-amber { background-color: var(--sb-amber); }
.sb-bg-white { background-color: var(--sb-white); }
.sb-text-navy { color: var(--sb-navy); }
.sb-text-amber { color: var(--sb-amber); }
.sb-text-white { color: var(--sb-white); }
.sb-text-slate { color: var(--sb-slate); }
.sb-text-center { text-align: center; }
.sb-pad-section { padding: var(--sb-section-pad) var(--sb-content-pad); }
.sb-max-content { max-width: var(--sb-content-max); margin-left: auto; margin-right: auto; }

/* Kadence-specific utility: hide content title */
.content-title-style-hide .entry-header .entry-title {
    /* Allow page body class to override */
}


/* ======================================================================
   20. ACCESSIBILITY
   Focus indicators, skip links, screen-reader text
   ====================================================================== */

/* Focus indicators -- visible focus ring for keyboard navigation */
*:focus-visible {
    outline: 3px solid var(--sb-amber);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Override Kadence's hide-focus-outline class */
.hide-focus-outline *:focus-visible {
    outline: 3px solid var(--sb-amber);
    outline-offset: 2px;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--sb-navy);
    color: var(--sb-white);
    padding: 12px 24px;
    z-index: 10000;
    font-family: var(--sb-font-body);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}

/* Screen reader text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal;
}

.screen-reader-text:focus {
    clip: auto;
    background-color: var(--sb-white);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow);
    color: var(--sb-navy);
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Slate text -- darker variant for small text (AA compliance) */
.entry-meta,
.post-date,
.tribe-events-calendar-list__event-venue,
.card-tag,
figcaption,
.wp-caption-text {
    color: var(--sb-slate);
}


/* ══════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════ */
.strand-login-form-wrap {
    max-width: 480px;
    margin: 0 auto;
}

.strand-login-form-wrap .pmpro_login_wrap {
    background: #FFFFFF;
    border: 1px solid #E8E4DD;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.strand-login-form-wrap label {
    display: block;
    font-weight: 600;
    color: #0B1D2E;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.strand-login-form-wrap input[type="text"],
.strand-login-form-wrap input[type="password"],
.strand-login-form-wrap input[type="email"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #E8E4DD;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 16px;
    transition: border-color 0.2s ease;
}

.strand-login-form-wrap input:focus {
    border-color: #D4920B;
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.15);
}

.strand-login-form-wrap input[type="submit"] {
    width: 100%;
    padding: 14px 32px;
    background-color: #D4920B;
    color: #000000;
    border: 2px solid #D4920B;
    border-radius: 8px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.strand-login-form-wrap input[type="submit"]:hover {
    background-color: #0B1D2E;
    color: #FFFFFF;
    border-color: #0B1D2E;
}

.strand-login-form-wrap .pmpro_login_wrap p {
    margin-bottom: 16px;
}

.strand-login-form-wrap a {
    color: #B8860B;
    font-weight: 600;
    text-decoration: none;
}
.strand-login-form-wrap a:hover {
    color: #0B1D2E;
}

.strand-login-help {
    text-align: center;
    margin-top: 24px;
    color: #5E6E7E;
    font-size: 0.95rem;
}

/* Logged-out banner: reduce vertical padding (~50% of normal section padding) */
.strand-logged-out-banner .strand-section-inner {
    padding-top: 40px;
    padding-bottom: 24px;
}

/* Header login link (logged-out) */
.strand-nav-login > a {
    border: 1px solid #D4920B;
    border-radius: 6px;
    padding: 6px 16px;
    margin-left: 8px;
    color: #D4920B;
    font-weight: 600;
}
.strand-nav-login > a:hover,
.header-navigation .strand-nav-login > a:hover,
.main-navigation .strand-nav-login > a:hover,
.header-navigation .menu > li.strand-nav-login > a:hover,
.main-navigation .menu > li.strand-nav-login > a:hover {
    background-color: #D4920B;
    color: #000000;
    border-color: #D4920B;
}

/* ── The Clubhouse dropdown (logged-in) ── */
.strand-clubhouse-menu > a {
    border: 1px solid #D4920B;
    border-radius: 6px;
    padding: 6px 16px;
    margin-left: 8px;
    color: #D4920B;
    font-weight: 600;
}
.strand-clubhouse-menu > a:hover,
.header-navigation .menu > li.strand-clubhouse-menu > a:hover,
.main-navigation .menu > li.strand-clubhouse-menu > a:hover {
    background-color: #D4920B;
    color: #000000;
    border-color: #D4920B;
}

/* Clubhouse dropdown panel */
.strand-clubhouse-menu > .sub-menu {
    right: 0;
    left: auto;
    min-width: 220px;
}
.strand-clubhouse-menu > .sub-menu a {
    width: 220px;
}

/* Section labels in Clubhouse dropdown */
.strand-menu-section-label {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--sb-amber, #D4A03C) !important;
    padding: 14px 20px 4px !important;
    margin: 0 !important;
    border-top: 1px solid rgba(232, 228, 221, 0.6) !important;
    list-style: none !important;
    pointer-events: none !important;
    cursor: default !important;
    line-height: 1.2 !important;
}
/* No top border on the very first section label */
.strand-clubhouse-menu .sub-menu > .strand-menu-section-label:first-child,
.strand-menu-logout-sep + .strand-menu-section-label {
    border-top: none !important;
}
/* Thin line separator before Log Out */
.strand-menu-logout-sep {
    height: 0 !important;
    padding: 0 !important;
    margin: 4px 16px !important;
    border: none !important;
    border-top: 1px solid rgba(232, 228, 221, 0.6) !important;
    list-style: none !important;
    pointer-events: none;
}
.strand-menu-logout-sep + li {
    border-top: none !important;
}
/* Kill any Kadence border on dropdown items */
.strand-clubhouse-menu .sub-menu > li {
    border-top: none !important;
}

/* Log Out — muted styling */
.strand-menu-logout a {
    color: var(--sb-text-muted, #999);
    font-size: 0.85rem;
}
.strand-menu-logout a:hover {
    color: var(--sb-amber);
}

/* WP Dashboard — admin accent */
.strand-menu-admin a {
    color: var(--sb-amber);
    font-weight: 600;
}
.strand-menu-admin a::before {
    content: "\2699\00a0";
    font-size: 1.2em;
}

/* Mobile: Clubhouse dropdown in hamburger menu */
@media (max-width: 1024px) {
    .strand-clubhouse-menu > a {
        border: none;
        margin-left: 0;
        padding: 12px 20px;
    }
    .strand-clubhouse-menu > .sub-menu {
        position: static;
        right: auto;
        box-shadow: none;
        background: transparent;
        border: none;
    }
    .strand-clubhouse-menu > .sub-menu a {
        width: auto;
        padding-left: 32px;
    }
    .strand-clubhouse-menu .strand-menu-section-label {
        padding: 14px 20px 4px 20px !important;
    }
    .strand-clubhouse-menu .strand-menu-logout-sep {
        margin: 4px 20px !important;
    }
}

/* ══════════════════════════════════════
   INVOICE PAGE
   ══════════════════════════════════════ */
.pmpro_invoice_wrap {
    max-width: 720px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid #E8E4DD;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.pmpro_invoice_wrap h2 {
    font-family: 'Playfair Display', serif;
    color: #0B1D2E;
    margin-bottom: 24px;
}

.pmpro_invoice_wrap table {
    width: 100%;
    border-collapse: collapse;
}

.pmpro_invoice_wrap th {
    background: #0B1D2E;
    color: #FFFFFF;
    padding: 10px 16px;
    text-align: left;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pmpro_invoice_wrap td {
    padding: 10px 16px;
    border-bottom: 1px solid #E8E4DD;
}

.pmpro_invoice_wrap tr:nth-child(even) td {
    background: #FAFAF5;
}

/* ══════════════════════════════════════
   MEMBER ACCOUNT PAGE
   ══════════════════════════════════════ */
.strand-member-greeting {
    text-align: center;
    margin-bottom: 40px;
}

.strand-member-greeting h2 {
    font-family: 'Playfair Display', serif;
    color: #0B1D2E;
    font-size: 2rem;
}

/* Quick links grid */
.strand-member-quicklinks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 32px 0 48px;
}

.strand-member-quicklink {
    display: block;
    background: #FFFFFF;
    border: 1px solid #E8E4DD;
    border-left: 4px solid #D4920B;
    border-radius: 8px;
    padding: 20px;
    text-decoration: none;
    color: #0B1D2E;
    font-weight: 600;
    transition: all 0.2s ease;
}

.strand-member-quicklink:hover {
    background: #0B1D2E;
    color: #FFFFFF;
    border-color: #0B1D2E;
    border-left-color: #D4920B;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.strand-member-quicklink span {
    display: block;
    font-size: 0.85rem;
    color: #5E6E7E;
    font-weight: 400;
    margin-top: 4px;
}

.strand-member-quicklink:hover span {
    color: #F5F0E8;
}

/* Override .entry-content a:hover which sets navy text on the dark hover bg */
.entry-content a.strand-member-quicklink:hover {
    color: #FFFFFF;
}

/* Account page: reduce header padding */
body.page-id-49 .strand-section-cream:first-child .strand-section-inner,
body.page-id-49 .strand-section:first-child .strand-section-inner {
    padding-top: 40px;
    padding-bottom: 24px;
}

/* Logged-out state on account page */
.strand-account-logged-out {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
}

/* PMPro account sections — override any leftover PMPro CSS */
#pmpro_account .pmpro_box,
.pmpro_account_box {
    background: #FFFFFF;
    border: 1px solid #E8E4DD;
    border-radius: 12px;
    padding: 24px 32px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

#pmpro_account .pmpro_box h3,
.pmpro_account_box h3 {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0B1D2E;
    border-bottom: 2px solid #F5F0E8;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .strand-member-quicklinks {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .strand-member-quicklinks {
        grid-template-columns: 1fr;
    }
}

/* Fix: PMPro expiration selects should be inline */
.pmpro_checkout-field-expiration select {
    width: auto;
    display: inline-block;
    margin-right: 8px;
}

/* Trust signal below checkout submit */
.strand-checkout-trust {
    text-align: center;
    color: #5E6E7E;
    font-size: 0.9rem;
    margin-top: 16px;
}


/* ======================================================================
   21. RESPONSIVE
   Tablet (1024px), mobile (768px), small (480px)
   ====================================================================== */

/* Desktop: hide mobile header, show desktop header */
@media (min-width: 1025px) {
    #mobile-header {
        display: none;
    }
    #main-header {
        display: block;
    }
}

/* -- Tablet (1024px) -- */
@media (max-width: 1024px) {
    :root {
        --sb-section-pad: 64px;
        --sb-content-pad: 32px;
    }

    /* Show mobile header, hide desktop header */
    #main-header {
        display: none;
    }
    #mobile-header {
        display: block;
    }

    h1,
    .entry-title,
    .page-title {
        font-size: 36px;
    }

    h2 {
        font-size: 28px;
    }

    .strand-hero h1 {
        font-size: 42px;
    }

    .tribe-events-single-event-title,
    .tribe-events .tribe-events-single-event-title {
        font-size: 2.2rem;
    }

    .tribe-events-calendar-list__event-title,
    .tribe-events .tribe-events-calendar-list__event-title {
        font-size: 1.25rem;
    }

    #pmpro_levels_cards,
    .pmpro_levels_cards,
    #pmpro_levels_table {
        grid-template-columns: repeat(2, 1fr);
    }

    .officers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Logo responsive */
    .site-branding a.brand img {
        max-width: 150px;
    }
    .site-branding a.brand img.svg-logo-image {
        width: 150px;
    }

    /* Footer columns to 2 on tablet */
    .site-top-footer-inner-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -- Mobile (768px) -- */
@media (max-width: 768px) {
    :root {
        --sb-section-pad: 48px;
        --sb-content-pad: 24px;
    }

    h1,
    .entry-title,
    .page-title {
        font-size: 30px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 1.25rem;
    }

    .strand-hero,
    .wp-block-cover.strand-hero {
        min-height: 60vh;
        padding: 60px 24px;
    }

    .strand-hero h1 {
        font-size: 32px;
    }

    .strand-hero p {
        font-size: 1rem;
    }

    .loop-entry .entry-content-wrap {
        padding: 20px;
        padding-bottom: 0;
    }

    .loop-entry .entry-footer {
        margin-left: -20px;
        margin-right: -20px;
    }

    .footer-widget-area {
        padding: 40px 0 28px;
    }

    /* Footer single column on mobile */
    .site-top-footer-inner-wrap {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pmpro_level_card,
    #pmpro_levels_table tbody tr {
        padding: 28px 20px;
    }

    #pmpro_levels_cards,
    .pmpro_levels_cards,
    #pmpro_levels_table {
        grid-template-columns: 1fr;
    }

    .header-button a {
        padding: 8px 18px;
        font-size: 0.85rem;
    }

    /* PMPro checkout responsive — padding handled in checkout redesign block */

    #pmpro_account .pmpro_box,
    .pmpro-account .pmpro_box,
    #pmpro_account-membership,
    #pmpro_account-profile,
    #pmpro_account-invoices,
    #pmpro_account-links {
        padding: 24px 20px;
    }

    .pmpro_checkout .pmpro_btn,
    .pmpro_checkout input[type="submit"],
    #pmpro_form .pmpro_btn,
    #pmpro_form input[type="submit"],
    .pmpro_btn-submit,
    #pmpro_btn-submit {
        padding: 14px 24px;
        font-size: 1rem;
    }

    #pmpro_account table,
    .pmpro-account table,
    #pmpro_invoices_table {
        font-size: 0.8rem;
    }

    #pmpro_account table thead th,
    #pmpro_account table tbody td {
        padding: 8px 10px;
    }

    /* TEC responsive */
    .tribe-events-single-event-title,
    .tribe-events .tribe-events-single-event-title {
        font-size: 1.8rem;
    }

    .tribe-events-calendar-list__event-row,
    .tribe-events .tribe-events-calendar-list__event-row {
        padding: 20px;
    }

    .tribe-events-calendar-list__event-title,
    .tribe-events .tribe-events-calendar-list__event-title {
        font-size: 1.15rem;
    }

    .tribe-events-single .tribe-venue,
    .tribe-venue,
    .tribe-events-meta-group--venue,
    .tribe-events-meta-group--organizer {
        padding: 20px;
    }

    .tribe-events-calendar-month__day {
        min-height: 60px;
    }

    .tribe-events-calendar-month__header-column-title {
        font-size: 0.7rem;
        padding: 8px 4px;
    }

    .tribe-events-calendar-day__event,
    .tribe-events .tribe-events-calendar-day__event {
        padding: 20px;
    }

    .tribe-events-calendar-day__event-title,
    .tribe-events .tribe-events-calendar-day__event-title {
        font-size: 1.15rem;
    }

    /* Gallery responsive */
    .gallery-category {
        margin-bottom: 32px;
    }

    .strand-gallery-placeholder {
        padding: 20px;
        margin: 0 auto 32px;
    }

    .strand-gallery-intro {
        margin-bottom: 28px;
    }

    /* Shop responsive */
    .shop-info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Dregs responsive */
    .dregs-filter-bar {
        gap: 6px;
    }

    .dregs-filter-btn {
        font-size: 0.8rem;
        padding: 8px 16px;
    }

    .dregs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Benefits grid single column */
    .strand-why-join .benefits-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Hero buttons stack */
    .hero-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-cta .btn,
    .hero-cta a {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    /* Page title responsive */
    body:not(.sb-home) .entry-title,
    body:not(.sb-home) .page-title {
        font-size: 30px;
    }

    /* Card mobile spacing */
    .strand-card,
    .strand-card-featured,
    .strand-card-dark,
    .strand-card-cream {
        padding: 24px;
    }

    .strand-note {
        padding: 16px 20px;
    }

    /* Membership page responsive */
    .strand-benefits-grid,
    .strand-pricing-grid {
        grid-template-columns: 1fr;
    }

    .strand-pricing-card .price {
        font-size: 44px;
    }

    /* Logo mobile */
    .site-branding a.brand img {
        max-width: 120px;
    }
    .site-branding a.brand img.svg-logo-image {
        width: 120px;
    }
}

/* -- Small Mobile (480px) -- */
@media (max-width: 480px) {
    :root {
        --sb-section-pad: 40px;
        --sb-content-pad: 20px;
    }

    h1,
    .entry-title,
    .page-title {
        font-size: 26px;
    }

    h2 {
        font-size: 22px;
    }

    .dregs-grid {
        grid-template-columns: 1fr;
    }

    .strand-hero h1 {
        font-size: 28px;
    }

    .strand-hero .wp-block-button__link {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .wpforms-container .wpforms-form button[type="submit"],
    .wpforms-container .wpforms-form .wpforms-submit {
        width: 100%;
    }

    .tribe-events-single-event-title,
    .tribe-events .tribe-events-single-event-title {
        font-size: 1.4rem;
    }

    /* List view event cards -- stack on mobile */
    .strand-event-card article {
        flex-direction: column;
        gap: 12px;
        padding: 18px 16px;
    }

    .event-date-badge {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        min-width: auto;
    }

    .event-date-badge time {
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
    }

    .event-date-badge .event-day-num {
        font-size: 1.8rem;
    }

    .event-date-badge .event-month {
        font-size: 0.8rem;
    }

    /* View toggle compact on mobile */
    body .tribe-events .tribe-events-c-view-selector__list-item-link {
        padding: 6px 14px !important;
        font-size: 0.78rem !important;
    }

    /* Search bar responsive */
    .tribe-events .tribe-events-c-events-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .tribe-events .tribe-events-c-events-bar__search-container {
        max-width: 100%;
    }

    .tribe-events .tribe-events-c-search,
    .tribe-events .tribe-events-c-events-bar__search-form {
        max-width: 100%;
    }

    .tribe-events-calendar-day__event,
    .tribe-events .tribe-events-calendar-day__event,
    .tribe-events-calendar-month-mobile-events__mobile-event {
        padding: 16px;
        margin-bottom: 12px;
    }

    .tribe-events-calendar-list__event-title,
    .tribe-events .tribe-events-calendar-list__event-title,
    .tribe-events-calendar-day__event-title {
        font-size: 1.05rem;
    }

    .tribe-events .tribe-events-c-ical__link,
    .tribe-events .tribe-common-c-btn,
    .tribe-common .tribe-common-c-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    /* Officers mobile */
    .officers-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* 404 responsive */
    .strand-404 {
        padding: 48px 20px 60px;
    }

    .strand-404-number {
        font-size: 100px;
        margin-bottom: -12px;
    }

    .strand-404-heading {
        font-size: 1.6rem;
    }

    .strand-404-description {
        font-size: 1rem;
    }

    .strand-404-search .search-form {
        flex-direction: column;
    }

    .strand-404-search .search-submit {
        width: 100%;
    }

    /* Page title small mobile */
    body:not(.sb-home) .entry-title,
    body:not(.sb-home) .page-title {
        font-size: 26px;
    }

    /* Shortcode event cards responsive (scoped to shortcode) */
    .strand-events-list a.strand-event-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}


/* ======================================================================
   22. RECIPES
   Single recipe page, archive card grid, stats bar, tables, water, yeast
   ====================================================================== */

/* --- Archive: Filter Bar --- */

.recipe-filter-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 32px;
    padding: 20px 24px;
    background: #FFFFFF;
    border: 1px solid #E8E4DD;
    border-radius: 12px;
}

.recipe-filter-bar select,
.recipe-filter-bar input[type="text"] {
    padding: 10px 14px;
    border: 1px solid #E8E4DD;
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    color: #0B1D2E;
    flex: 1;
    min-width: 150px;
}

.recipe-filter-bar select:focus,
.recipe-filter-bar input:focus {
    border-color: #D4920B;
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.15);
}

.recipe-filter-bar .recipe-filter-clear {
    padding: 10px 20px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.recipe-no-results {
    text-align: center;
    color: #5E6E7E;
    grid-column: 1 / -1;
    padding: 40px;
}

@media (max-width: 768px) {
    .recipe-filter-bar {
        flex-direction: column;
    }
    .recipe-filter-bar select,
    .recipe-filter-bar input[type="text"] {
        width: 100%;
    }
}

/* --- Archive: Card Grid --- */

.recipe-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.recipe-card {
    display: block;
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-amber);
    border-radius: var(--sb-card-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--sb-text);
    box-shadow: var(--sb-shadow);
    transition: transform var(--sb-transition), box-shadow var(--sb-transition);
    min-width: 0;
}

.recipe-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sb-shadow-hover);
    text-decoration: none;
    color: var(--sb-text);
}

.recipe-card-image {
    width: 100%;
    height: 100px;
    overflow: hidden;
    background: var(--sb-cream);
}

.recipe-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipe-card-srm {
    /* background set inline from SRM value */
}

.recipe-card-placeholder {
    background: linear-gradient(135deg, var(--sb-cream) 0%, var(--sb-border) 100%);
}

.recipe-card-body {
    padding: 14px 16px;
    overflow: hidden;
}

.recipe-card-style {
    display: inline-block;
    font-family: var(--sb-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sb-amber);
    margin-bottom: 6px;
}

.recipe-card-title {
    font-family: var(--sb-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--sb-navy);
    margin: 0 0 4px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recipe-card-brewer {
    display: block;
    font-size: 0.88rem;
    color: var(--sb-slate);
    margin-bottom: 12px;
}

.recipe-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.recipe-card-stats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sb-slate);
    background: var(--sb-cream);
    padding: 3px 10px;
    border-radius: 20px;
}

/* SRM indicators */

.srm-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.srm-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* --- Single Recipe: Meta --- */

.recipe-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.recipe-meta span {
    display: inline-block;
    font-family: var(--sb-font-body);
    font-size: 0.88rem;
    padding: 5px 16px;
    border-radius: 20px;
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    color: var(--sb-slate);
}

.recipe-meta .recipe-brewer {
    font-weight: 600;
    color: var(--sb-navy);
}

.recipe-meta .recipe-style {
    color: var(--sb-amber);
    border-color: var(--sb-amber);
    font-weight: 600;
}

/* --- Single Recipe: Vital Stats Bar --- */

.recipe-stats-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    text-align: center;
    padding: 16px 0;
}

.recipe-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.recipe-stat-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--sb-font-heading);
    font-size: 1.8rem;
    letter-spacing: 1px;
    color: var(--sb-amber);
    line-height: 1.1;
}

.recipe-stat-label {
    font-family: var(--sb-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sb-cream);
    opacity: 0.8;
}

/* --- Single Recipe: Tables --- */

.recipe-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.recipe-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    margin: 16px 0;
}

.recipe-table thead th {
    background: var(--sb-navy);
    color: var(--sb-white);
    font-family: var(--sb-font-body);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 16px;
    text-align: left;
    white-space: nowrap;
}

.recipe-table thead th:first-child {
    border-radius: var(--sb-radius) 0 0 0;
}

.recipe-table thead th:last-child {
    border-radius: 0 var(--sb-radius) 0 0;
}

.recipe-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--sb-border);
    color: var(--sb-text);
}

.recipe-table tbody tr:nth-child(even) {
    background: var(--sb-cream);
}

.recipe-table tbody tr:hover {
    background: rgba(212, 146, 11, 0.08);
}

/* --- Single Recipe: Yeast --- */

.recipe-yeast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 16px 0;
}

.recipe-yeast-card {
    background: var(--sb-cream);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-card-radius);
    padding: 24px;
}

.recipe-yeast-card h3 {
    font-family: var(--sb-font-display);
    font-size: 1.15rem;
    color: var(--sb-navy);
    margin: 0 0 4px;
}

.yeast-lab {
    font-size: 0.88rem;
    color: var(--sb-amber);
    font-weight: 600;
    margin: 0 0 12px;
}

.yeast-details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.yeast-details span {
    font-size: 0.88rem;
    color: var(--sb-slate);
}

/* --- Single Recipe: Water Chemistry --- */

.water-profile-name {
    font-family: var(--sb-font-display);
    font-size: 1.1rem;
    color: var(--sb-navy);
    margin: 0 0 16px;
    text-align: center;
}

.recipe-water-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.water-ion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 8px;
    background: var(--sb-cream);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    text-align: center;
}

.water-value {
    font-family: var(--sb-font-heading);
    font-size: 1.5rem;
    letter-spacing: 0.5px;
    color: var(--sb-navy);
}

.water-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sb-slate);
}

.water-notes {
    font-size: 0.92rem;
    color: var(--sb-slate);
    font-style: italic;
    margin-top: 12px;
}

/* --- Single Recipe: Fermentation --- */

.recipe-fermentation {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 16px 0;
}

.fermentation-step {
    flex: 1 1 220px;
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    padding: 20px;
}

.fermentation-step h3 {
    font-family: var(--sb-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sb-amber);
    margin: 0 0 8px;
}

.fermentation-step p {
    font-size: 1rem;
    color: var(--sb-text);
    margin: 0;
}

.fermentation-notes {
    font-size: 0.88rem !important;
    color: var(--sb-slate) !important;
    font-style: italic;
    margin-top: 8px !important;
}

/* --- Single Recipe: Brewer Notes / Source --- */

.recipe-source {
    font-size: 0.88rem;
    color: var(--sb-slate);
    font-style: italic;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--sb-border);
}

/* --- Recipe Responsive --- */

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

    .recipe-stats-bar {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .recipe-water-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    .recipe-card-grid {
        grid-template-columns: 1fr;
    }

    .recipe-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .recipe-stat-value {
        font-size: 1.4rem;
    }

    .recipe-meta {
        flex-direction: column;
        align-items: center;
    }

    .recipe-table {
        font-size: 0.85rem;
    }

    .recipe-table thead th,
    .recipe-table tbody td {
        padding: 8px 10px;
    }

    .recipe-water-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .recipe-yeast-grid {
        grid-template-columns: 1fr;
    }

    .recipe-fermentation {
        flex-direction: column;
    }
}

/* --- Recipe Print Styles: see consolidated block in section 24 --- */


/* ======================================================================
   23. ROTATING QUOTES
   ====================================================================== */

/* Quote block — used on homepage, about page, and footer bar */
.strand-quote-block {
    text-align: center;
    padding: 48px 40px;
    max-width: 800px;
    margin: 0 auto;
}

.strand-quote {
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    position: relative;
}

.strand-quote::before {
    content: '\201C';
    font-family: 'Playfair Display', serif;
    font-size: 80px;
    color: #D4920B;
    opacity: 0.3;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
}

.strand-quote-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-style: italic;
    color: #0B1D2E;
    line-height: 1.6;
    margin-bottom: 16px;
}

.strand-quote-text p {
    margin: 0;
}

.strand-quote-author {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #D4920B;
    font-style: normal;
}

.strand-quote-role {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    color: #5E6E7E;
    letter-spacing: 0;
    text-transform: none;
    margin-top: 4px;
}

.strand-quote-context {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    color: #5E6E7E;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.7;
    margin-top: 2px;
}

/* Footer quote bar — cream background strip above footer */
footer#colophon .strand-quote-block,
.site-footer .strand-quote-block {
    background: #F5F0E8;
    max-width: 100%;
    padding: 40px;
}

footer#colophon .strand-quote-text,
.site-footer .strand-quote-text {
    font-size: 1.1rem;
}

/* Dark section quotes */
.strand-section-dark .strand-quote-text {
    color: #F5F0E8;
}
.strand-section-dark .strand-quote::before {
    color: #E8A817;
}


/* ======================================================================
   24. PRINT — see consolidated block at end of file
   ====================================================================== */

/* ======================================================================
   RECIPE SUBMISSION FORM
   ====================================================================== */

.strand-recipe-form label {
    display: block;
    font-weight: 600;
    color: var(--sb-navy);
    margin: 16px 0 6px;
    font-size: 0.9rem;
}

.strand-recipe-form input[type="text"],
.strand-recipe-form input[type="number"],
.strand-recipe-form select,
.strand-recipe-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    font-family: var(--sb-font-body);
    font-size: 1rem;
    background: var(--sb-white);
    color: var(--sb-text);
    transition: border-color var(--sb-transition), box-shadow var(--sb-transition);
}

.strand-recipe-form input:focus,
.strand-recipe-form select:focus,
.strand-recipe-form textarea:focus {
    border-color: var(--sb-amber);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.15);
}

.recipe-file-input {
    display: block;
    margin: 12px 0;
    padding: 16px;
    border: 2px dashed var(--sb-border);
    border-radius: var(--sb-radius);
    width: 100%;
    cursor: pointer;
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    color: var(--sb-slate);
    transition: border-color var(--sb-transition);
}

.recipe-file-input:hover {
    border-color: var(--sb-amber);
}

.strand-recipe-form h3 {
    font-family: var(--sb-font-heading);
    font-size: 1.6rem;
    letter-spacing: 1px;
    color: var(--sb-navy);
    margin-bottom: 8px;
}

@media (max-width: 600px) {
    .strand-recipe-form div[style*="grid-template-columns"] {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* --- Recipe Form Sections (fieldsets, repeater rows) --- */

.recipe-form-section {
    border: 1px solid var(--sb-border, #E8E4DD);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.recipe-form-section legend {
    font-family: 'Bebas Neue', var(--sb-font-heading), sans-serif;
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sb-navy, #0B1D2E);
    padding: 0 8px;
}

.recipe-form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.recipe-form-row-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.ingredient-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.ingredient-row input,
.ingredient-row select {
    padding: 8px 10px;
    border: 1px solid var(--sb-border, #E8E4DD);
    border-radius: 6px;
    font-size: 0.9rem;
    flex: 1;
    min-width: 80px;
    font-family: var(--sb-font-body, inherit);
    color: var(--sb-text, #333);
    background: var(--sb-white, #fff);
}

.ingredient-row input:focus,
.ingredient-row select:focus {
    border-color: var(--sb-amber, #D4920B);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.15);
}

.remove-row {
    background: none;
    border: none;
    color: #C44;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
    line-height: 1;
}

.remove-row:hover {
    color: #A00;
}

.add-row-btn {
    background: none;
    border: 1px dashed var(--sb-amber, #D4920B);
    border-radius: 6px;
    color: var(--sb-amber, #D4920B);
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 4px;
    font-family: var(--sb-font-body, inherit);
}

.add-row-btn:hover,
.entry-content .add-row-btn:hover {
    background: #FFF8F0;
    color: #D4920B;
    border-color: #D4920B;
}

@media (max-width: 768px) {
    .recipe-form-row-3,
    .recipe-form-row-4 {
        grid-template-columns: 1fr;
    }
    .ingredient-row {
        flex-direction: column;
        align-items: stretch;
    }
    .ingredient-row input,
    .ingredient-row select {
        width: 100%;
        min-width: 0;
    }
    .recipe-form-section {
        padding: 16px;
    }
}


/* ======================================================================
   RECIPE SCALER — compact, collapsible
   Scaling calculator widget for single recipe pages
   ====================================================================== */

/* Recipe actions bar — favorite + scaler side by side */
.recipe-actions-bar {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.recipe-actions-bar .recipe-favorite-btn {
    font-size: 1.1rem;
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: #CC3333;
    background: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.recipe-actions-bar .recipe-favorite-btn:hover {
    border-color: #CC3333;
    background: rgba(204,51,51,0.1);
}

.recipe-actions-bar .recipe-favorite-btn.is-saved {
    color: #CC3333;
    border-color: #CC3333;
}

.recipe-scaler-bar {
    max-width: 500px;
    margin: 0;
    text-align: center;
}

.scaler-toggle {
    background: none;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: #F5F0E8;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    padding: 8px 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.scaler-toggle:hover,
.scaler-toggle.is-open {
    background: rgba(255,255,255,0.1);
    border-color: #D4920B;
}

.scaler-toggle-icon {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.scaler-panel {
    margin-top: 16px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
}

.scaler-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.scaler-original {
    color: #F5F0E8;
    font-size: 0.85rem;
    margin-right: 8px;
}

.scaler-original strong {
    color: #D4920B;
}

.scaler-controls label {
    color: #F5F0E8;
    font-size: 0.85rem;
    white-space: nowrap;
}

.scaler-controls input[type="number"] {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    color: #FFFFFF;
    font-size: 0.9rem;
    text-align: center;
}

.scaler-controls select {
    padding: 6px 8px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    color: #FFFFFF;
    font-size: 0.85rem;
}

.scaler-controls input:focus,
.scaler-controls select:focus {
    border-color: #D4920B;
    outline: none;
}

.scaler-controls .btn {
    padding: 6px 16px;
    font-size: 0.8rem;
}

.scaler-note {
    color: #F5F0E8;
    font-size: 0.8rem;
    margin-top: 10px;
    opacity: 0.7;
}

/* Highlight scaled values */
td.scaled,
span.scaled {
    color: #D4920B;
    font-weight: 600;
}

/* Scaled batch indicator on stats bar */
.recipe-stat-scaled {
    display: block;
    font-size: 0.7rem;
    color: #D4920B;
    margin-top: 2px;
}

/* Print: scaled values — see consolidated print block at end of file */

@media (max-width: 480px) {
    .scaler-controls { flex-direction: column; }
    .scaler-controls input, .scaler-controls select { width: 100%; }
}

/* ======================================================================
   PHASE 7: RATINGS, BREW NOTES & FAVORITES
   ====================================================================== */

/* Star rating input */
.star-rating-input .star { cursor: pointer; font-size: 1.5rem; color: #E8E4DD; transition: color 0.15s; }
.star-rating-input .star.active, .star-rating-input .star.hover { color: #D4920B; }
.recipe-rating-field { margin-bottom: 16px; }
.recipe-brewed-field { margin-bottom: 16px; }
.recipe-brewed-field label { font-weight: 400; cursor: pointer; }

/* Rating display */
.recipe-rating-display { margin-top: 12px; }
.recipe-rating-display .stars { color: #D4920B; font-size: 1.2rem; }
.recipe-rating-display .rating-text { color: #5E6E7E; font-size: 0.9rem; margin-left: 8px; }
.brewed-badge { display: inline-block; background: #F5F0E8; color: #0B1D2E; padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; margin-left: 8px; }
.recipe-card-rating { display: block; color: #D4920B; font-size: 0.85rem; margin-top: 4px; }

/* Favorite button */
.recipe-favorite-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #CC3333; transition: color 0.2s, transform 0.2s; padding: 4px; line-height: 1; }
.recipe-favorite-btn:hover { color: #E03030; transform: scale(1.2); }
.recipe-favorite-btn.is-saved { color: #CC3333; transform: scale(1.1); }
.recipe-favorite-btn.is-saved:hover { color: #E03030; transform: scale(1.2); }

/* Archive card wrap for favorite button positioning */
.recipe-card-wrap { position: relative; }
.recipe-card-wrap .recipe-favorite-btn { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(255,255,255,0.85); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; }

/* Comment form overrides for recipe brew notes */
.sbc_recipe .comment-form-comment textarea,
.recipe-page .comment-form-comment textarea { border: 1px solid #E8E4DD; border-radius: 8px; padding: 12px; font-family: 'DM Sans', sans-serif; width: 100%; }
.sbc_recipe .comment-form-comment textarea:focus,
.recipe-page .comment-form-comment textarea:focus { border-color: #D4920B; outline: none; box-shadow: 0 0 0 3px rgba(212,146,11,0.15); }

/* Dynamic next meeting card */
.strand-next-meeting-card {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    background: #FFFFFF;
    border: 1px solid #E8E4DD;
    border-left: 4px solid #D4920B;
    border-radius: 8px;
    padding: 24px 28px;
    max-width: 600px;
    margin: 24px auto;
}

.meeting-date-badge {
    text-align: center;
    flex-shrink: 0;
    min-width: 70px;
}

.meeting-date-badge .meeting-day {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    color: #D4920B;
    letter-spacing: 1px;
}

.meeting-date-badge .meeting-weekday {
    display: block;
    font-size: 0.7rem;
    color: #5E6E7E;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.meeting-details h3 {
    margin: 0 0 8px;
    font-size: 1.2rem;
}

.meeting-details .meeting-time {
    color: #0B1D2E;
    font-weight: 600;
    margin-bottom: 4px;
}

.meeting-details .meeting-venue {
    color: #5E6E7E;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

@media (max-width: 480px) {
    .strand-next-meeting-card {
        flex-direction: column;
        gap: 12px;
    }
}


/* ======================================================================
   CONSOLIDATED PRINT STYLESHEET
   All print rules in one block — compact, professional, printer-friendly
   Version 4.6.0
   ====================================================================== */

@media print {
    /* Page setup */
    @page {
        margin: 0.75in;
        size: letter;
    }

    /* Hide everything non-essential */
    #masthead,
    .site-footer,
    #colophon,
    .header-navigation,
    .mobile-navigation,
    .header-button,
    .strand-quote-block,
    .recipe-scaler-bar,
    .recipe-favorite-btn,
    .comment-respond,
    .comments-area,
    .post-navigation,
    .recipe-share-section,
    #mobile-drawer,
    #mobile-header,
    .btn,
    .recipe-rating-display,
    .strand-newsletter,
    .strand-proof-bar,
    nav { display: none !important; }

    /* Reset all backgrounds and colors for ink-saving */
    body, .site, .content-wrap, .content-container,
    .strand-section, .strand-section-white, .strand-section-cream, .strand-section-dark,
    .strand-section-inner, .entry-content-wrap, .entry-content,
    .recipe-stats-bar, article.entry {
        background: #fff !important;
        color: #000 !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* General print body */
    body {
        font-size: 10pt;
    }

    /* Cards — clean for non-recipe pages */
    .strand-card,
    .strand-card-featured,
    .strand-card-dark {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    /* Print header — Strand Brewers Club branding */
    .recipe-page .strand-section-cream:first-of-type::before {
        content: 'STRAND BREWERS CLUB \2014  RECIPE';
        display: block;
        font-family: 'Bebas Neue', Arial Narrow, sans-serif;
        font-size: 11pt;
        letter-spacing: 3px;
        color: #666;
        border-bottom: 2px solid #333;
        padding-bottom: 4px;
        margin-bottom: 8px;
    }

    /* Recipe title */
    .recipe-page h1 {
        font-size: 16pt !important;
        margin: 4px 0 2px !important;
        color: #000 !important;
    }

    /* Recipe meta (brewer, style, method) */
    .recipe-meta {
        font-size: 9pt !important;
        margin-bottom: 8px !important;
    }

    /* Stats bar — centered, evenly spaced */
    .recipe-stats-bar {
        display: flex !important;
        justify-content: center !important;
        gap: 24px !important;
        padding: 10px 0 !important;
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
        margin: 8px 0 12px !important;
    }

    .recipe-stat {
        text-align: center !important;
        flex: none !important;
        min-width: 60px;
    }

    .recipe-stat-value {
        font-size: 10pt !important;
        color: #000 !important;
        font-weight: 700;
    }

    .recipe-stat-label {
        font-size: 7pt !important;
        color: #666 !important;
        text-transform: uppercase;
        margin-left: 2px;
    }

    .srm-swatch {
        width: 12px !important;
        height: 12px !important;
        display: inline-block;
        border: 1px solid #999;
        vertical-align: middle;
        margin-right: 2px;
        border-radius: 2px !important;
    }

    /* Section headings */
    .recipe-page h2 {
        font-size: 11pt !important;
        margin: 10px 0 4px !important;
        padding: 0 !important;
        border-bottom: 1px solid #ccc;
        page-break-after: avoid;
    }

    /* Tables — compact */
    .recipe-table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 9pt !important;
        margin: 4px 0 10px !important;
    }

    .recipe-table th {
        background: #eee !important;
        color: #000 !important;
        font-size: 8pt !important;
        padding: 3px 6px !important;
        text-align: left;
        border: 1px solid #ccc !important;
        font-weight: 700;
    }

    .recipe-table td {
        padding: 3px 6px !important;
        border: 1px solid #ddd !important;
        border-bottom: 1px solid #ddd !important;
    }

    .recipe-table tr:nth-child(even) td {
        background: #f7f7f7 !important;
    }

    .recipe-table-wrap {
        overflow: visible !important;
    }

    /* Yeast cards — inline */
    .recipe-yeast-grid {
        display: block !important;
    }

    .recipe-yeast-card {
        background: none !important;
        border: none !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        font-size: 9pt !important;
    }

    .recipe-yeast-card h3 {
        font-size: 10pt !important;
        display: inline !important;
        margin: 0 !important;
    }

    .yeast-details span {
        font-size: 8pt !important;
    }

    /* Water chemistry — compact inline */
    .recipe-water-grid {
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px 12px !important;
        border: 1px solid #ddd !important;
        border-radius: 0 !important;
        padding: 4px 8px !important;
    }

    .water-ion {
        min-width: auto !important;
    }

    .water-value {
        font-size: 10pt !important;
        color: #000 !important;
    }

    .water-label {
        font-size: 7pt !important;
        color: #666 !important;
    }

    .water-profile-name {
        font-size: 9pt !important;
        margin: 2px 0 !important;
    }

    /* Fermentation steps — compact */
    .recipe-fermentation {
        font-size: 9pt !important;
    }

    .fermentation-step {
        border-left: 2px solid #999 !important;
        padding: 2px 0 2px 8px !important;
        margin: 4px 0 !important;
    }

    .fermentation-step h3 {
        font-size: 10pt !important;
        margin: 0 !important;
    }

    .fermentation-step p {
        margin: 0 !important;
        font-size: 9pt !important;
    }

    /* Brewer's notes */
    .recipe-page .entry-content p,
    .recipe-page .brewer-notes p {
        font-size: 9pt !important;
        line-height: 1.4 !important;
        margin-bottom: 4px !important;
    }

    .recipe-source {
        font-size: 8pt !important;
        margin-top: 6px !important;
    }

    /* Scaled values */
    td.scaled::after {
        content: ' (scaled)';
        font-size: 7pt;
        color: #666;
    }

    .recipe-stat.has-scaled .recipe-stat-original {
        font-size: 0.7em;
        text-decoration: line-through;
        opacity: 0.5;
        display: block;
    }

    /* Footer */
    .recipe-page::after {
        content: 'Printed from strandbrewersclub.org';
        display: block;
        text-align: center;
        font-size: 8pt;
        color: #999;
        margin-top: 12px;
        padding-top: 6px;
        border-top: 1px solid #ddd;
    }

    /* Prevent page breaks inside tables and sections */
    .recipe-table, .recipe-yeast-grid, .recipe-water-grid,
    .fermentation-step {
        page-break-inside: avoid;
    }

    /* Links — no underlines in print, just black text */
    a {
        color: #000 !important;
        text-decoration: none !important;
    }

    /* Content frame — subtle border within page margins */
    .recipe-page .content-container {
        border: 2px solid #ccc !important;
        padding: 12px !important;
    }
}


/* =====================================================================
   PARTNER DISCOUNT DIRECTORY
   ===================================================================== */

.partner-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.partner-card {
    background: #fff;
    border: 1px solid #E8E4DD;
    border-left: 4px solid #D4920B;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 20px;
}
.partner-logo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}
.partner-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.partner-type-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #D4920B;
    font-weight: 600;
}
.partner-name {
    font-family: 'Playfair Display', serif;
    color: #0B1D2E;
    margin: 4px 0 8px;
    font-size: 1.2rem;
}
.partner-discount {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    color: #D4920B;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.partner-details {
    font-size: 0.9rem;
    color: #5E6E7E;
    line-height: 1.5;
    margin-bottom: 8px;
}
.partner-address a {
    color: #B8860B;
    font-size: 0.85rem;
}
.partner-website-link {
    color: #B8860B;
    font-weight: 600;
    font-size: 0.85rem;
}
@media (max-width: 768px) {
    .partner-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   MEMBER DIRECTORY
   ========================================================================== */

/* Search input */
.member-directory-search {
    margin-bottom: 32px;
}

.member-search-input {
    width: 100%;
    padding: 12px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    border: 2px solid #E8E4DD;
    border-radius: 8px;
    background: #FAFAF5;
    color: #0B1D2E;
    transition: border-color 0.2s;
}

.member-search-input:focus {
    outline: none;
    border-color: #D4920B;
}

.member-search-input::placeholder {
    color: #8A9BAE;
}

/* Directory wrapper — center on page */
.member-directory {
    max-width: var(--sb-content-max);
    margin: 0 auto;
}

/* Grid layout */
.member-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    justify-content: center;
}

@media (max-width: 960px) {
    .member-directory-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 600px) {
    .member-directory-grid {
        grid-template-columns: 1fr;
    }
}

/* Directory section labels */
.directory-section-label {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #D4920B;
    font-size: 1rem;
    margin: 32px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E8E4DD;
}

.directory-section:first-child .directory-section-label {
    margin-top: 0;
}

/* Basic member grid — more compact, 4 columns */
.basic-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.basic-grid .member-card {
    padding: 12px 16px;
    min-width: 0;
    min-height: 80px;
}

@media (max-width: 960px) {
    .basic-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .basic-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Member card — base styles inherited by all card variants */
.member-card {
    background: #FFFFFF;
    border: 1px solid #E8E4DD;
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

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

.member-directory-grid .member-card {
    min-height: 120px;
}

/* Name */
.member-name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #0B1D2E;
    margin: 0 0 6px;
}

/* Neighborhood */
.member-neighborhood {
    color: #5E6E7E;
    font-size: 0.88rem;
    margin: 0 0 8px;
}

/* Experience badge */
.member-experience-badge {
    display: inline-block;
    background: #D4920B;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Brewing since */
.member-brewing-since {
    color: #5E6E7E;
    font-size: 0.85rem;
    margin: 0 0 6px;
}

/* Favorite styles */
.member-styles {
    color: #5E6E7E;
    font-style: italic;
    font-size: 0.9rem;
    margin: 0 0 8px;
}

/* Bio */
.member-bio {
    font-size: 0.88rem;
    color: #3A4A5C;
    line-height: 1.5;
    margin: 0 0 12px;
}

/* Brew day stats */
.member-brew-stats {
    display: block;
    font-size: 0.8rem;
    color: #5E6E7E;
    margin: 4px 0 8px;
}

/* Contact area */
.member-contact {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #E8E4DD;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

/* Contact links */
.member-contact-link {
    color: #0B1D2E;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    word-break: break-all;
}

.member-contact-link:hover {
    color: #D4920B;
}

.member-contact-icon {
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.member-edit-link {
    margin-top: auto;
    padding-top: 12px;
    display: block;
    text-align: center;
    font-size: 0.85rem;
    color: #B8860B;
    font-weight: 600;
    text-decoration: none;
}

/* Contact preview (own card) */
.member-contact-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 0.82rem;
    font-style: italic;
    text-decoration: none;
}

.member-contact-preview:hover {
    color: #D4920B;
}

/* Connect button */
.member-connect-btn {
    font-size: 0.82rem;
    padding: 6px 14px;
    cursor: pointer;
    align-self: center;
}

.member-connect-btn.sent {
    color: #2E7D32;
    border-color: #2E7D32;
    cursor: default;
    opacity: 0.8;
}

.member-connect-btn:disabled {
    cursor: wait;
}

/* Inactive Members section — muting handled by .member-card--inactive */
.directory-section-inactive {
    /* opacity removed: card-level opacity on .member-card--inactive handles this */
}

.inactive-section-label {
    color: #8A7A66;
}

.directory-section-subtext {
    font-size: 0.85rem;
    color: #8A8A8A;
    margin: -10px 0 18px;
    font-style: italic;
}

.inactive-grid .member-card {
    background: #FAFAF8;
    border-color: #E8E4DD;
    min-height: 60px;
}

.inactive-grid .member-card:hover {
    /* opacity handled by .member-card--inactive:hover (0.75) */
}

/* ==========================================================================
   EDIT PROFILE FORM
   ========================================================================== */

.strand-profile-saved {
    background: #E8F5E9;
    color: #2E7D32;
    padding: 14px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-weight: 500;
}

.strand-profile-saved a {
    color: #2E7D32;
    font-weight: 600;
    text-decoration: underline;
}

.strand-edit-profile-form {
    max-width: 640px;
}

/* Profile Photo Upload */
.profile-photo-section {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E8E4DD;
}

.profile-photo-label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #0B1D2E;
    margin-bottom: 10px;
}

.profile-photo-preview-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
}

.profile-photo-preview {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #F0EDE6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-photo-preview img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.profile-photo-preview .mc-avatar-img {
    width: 150px;
    height: 150px;
}

.profile-photo-preview .mc-avatar-initials {
    width: 150px;
    height: 150px;
    font-size: 3rem;
}

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

.profile-photo-change-btn {
    cursor: pointer;
    display: inline-block;
    font-size: 0.85rem;
    padding: 6px 14px;
}

.profile-photo-input {
    display: none;
}

/* Remove photo button */
.profile-photo-remove-btn {
    background: none;
    border: 1px solid #8896A6;
    padding: 6px 16px;
    font-size: 0.82rem;
    color: #8896A6;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.profile-photo-remove-btn:hover {
    color: #FFFFFF;
    background: #B91C1C;
    border-color: #B91C1C;
}

/* Photo removed confirmation */
.profile-photo-removed-msg {
    font-size: 0.82rem;
    color: #15803D;
    margin-top: 2px;
}

/* Upload/Change tooltip */
.photo-tooltip-wrap {
    position: relative;
    display: inline-block;
}

.photo-tooltip {
    display: none;
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%);
    background: #FAF8F4;
    color: #5E6E7E;
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #E8E4DD;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.photo-tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #E8E4DD;
}

.photo-tooltip::after {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #FAF8F4;
}

.photo-tooltip-wrap:hover .photo-tooltip {
    display: block;
}

/* Brew Day History stats on Edit Profile */
.brew-day-stat-label {
    color: var(--sb-text);
}

.brew-day-stat-number {
    color: var(--sb-amber);
}

.profile-photo-error {
    margin-top: 10px;
    padding: 8px 14px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 6px;
    color: #991B1B;
    font-size: 0.85rem;
}

.profile-field-help {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: #8896A6;
    line-height: 1.4;
}

.profile-field-row {
    display: flex;
    gap: 16px;
}

.profile-field-row-half .profile-field {
    flex: 1;
}

@media (max-width: 600px) {
    .profile-field-row {
        flex-direction: column;
        gap: 0;
    }

    .profile-photo-preview-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .photo-tooltip {
        white-space: normal;
        min-width: 200px;
    }
}

/* Photo crop UI (Cropper.js) */
.photo-crop-container {
    margin-top: 16px;
    border: 1px solid #E8E4DD;
    border-radius: 8px;
    padding: 16px;
    background: #FAFAF7;
}

.photo-crop-preview {
    max-width: 100%;
    max-height: 400px;
    overflow: hidden;
    border-radius: 6px;
    background: #1a1a1a;
}

.photo-crop-preview img {
    display: block;
    max-width: 100%;
    max-height: 400px;
}

.photo-crop-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.photo-crop-confirm {
    font-size: 0.9rem !important;
    padding: 8px 20px !important;
}

.photo-crop-cancel {
    font-size: 0.9rem !important;
    padding: 8px 20px !important;
}

/* Cropper.js overrides for theme consistency */
.cropper-view-box,
.cropper-face {
    border-radius: 0;
}

.cropper-point {
    background-color: #D4920B;
}

.cropper-line {
    background-color: #D4920B;
}

@media (max-width: 600px) {
    .photo-crop-preview {
        max-height: 280px;
    }

    .photo-crop-preview img {
        max-height: 280px;
    }

    .photo-crop-actions {
        flex-direction: column;
    }
}

.profile-field {
    margin-bottom: 20px;
}

.profile-field label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #0B1D2E;
    margin-bottom: 6px;
}

.profile-field input[type="text"],
.profile-field input[type="tel"],
.profile-field select,
.profile-field textarea {
    width: 100%;
    padding: 10px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    border: 2px solid #E8E4DD;
    border-radius: 8px;
    background: #FAFAF5;
    color: #0B1D2E;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.profile-field input:focus,
.profile-field select:focus,
.profile-field textarea:focus {
    outline: none;
    border-color: #D4920B;
}

.profile-field-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
    cursor: pointer;
}

.profile-field-checkbox input[type="checkbox"] {
    margin-top: 3px;
    accent-color: #D4920B;
}

.profile-section-heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #0B1D2E;
    margin: 28px 0 6px;
    padding-top: 20px;
    border-top: 1px solid #E8E4DD;
}

.profile-section-desc {
    color: #5E6E7E;
    font-size: 0.9rem;
    margin: 0 0 16px;
    line-height: 1.5;
}

.profile-submit {
    margin-top: 8px;
    display: flex;
    align-items: center;
}

/* Brew Day History on profile edit page */
.brew-day-history-stats {
    display: flex;
    gap: 24px;
    margin: 12px 0 16px;
}

.brew-day-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #F8F6F2;
    border: 1px solid #E8E4DD;
    border-radius: 8px;
    padding: 12px 20px;
    min-width: 100px;
}

.brew-day-stat-number {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #D4920B;
    line-height: 1;
}

.brew-day-stat-label {
    font-size: 0.8rem;
    color: #5E6E7E;
    margin-top: 4px;
}

.brew-day-history-list h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0B1D2E;
    margin: 0 0 8px;
}

.brew-day-history-list ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.brew-day-history-list li {
    padding: 6px 0;
    border-bottom: 1px solid #F0EDE8;
    font-size: 0.9rem;
}

.brew-day-history-list li:last-child {
    border-bottom: none;
}

.brew-day-history-list a {
    color: #0B1D2E;
    font-weight: 600;
    text-decoration: none;
}

.brew-day-history-list a:hover {
    color: #D4920B;
}

.brew-day-history-meta {
    color: #5E6E7E;
    font-size: 0.8rem;
}

/* ─── Latest News Section (Homepage) ─── */

.latest-news-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.news-card {
    display: flex;
    gap: 20px;
    background: #FFFFFF;
    border: 1px solid #E8E4DD;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: #2C2C2C;
    transition: all 0.2s ease;
}

.news-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.news-card-image {
    flex-shrink: 0;
    width: 200px;
    min-height: 140px;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card-placeholder {
    background: url('assets/blog-placeholder.svg') center/cover no-repeat;
}
.news-card-placeholder-brewing-tips {
    background: url('assets/blog-placeholder-brewing-tips.svg') center/cover no-repeat;
}
.news-card-placeholder-club-news {
    background: url('assets/blog-placeholder-club-news.svg') center/cover no-repeat;
}
.news-card-placeholder-events {
    background: url('assets/blog-placeholder-events.svg') center/cover no-repeat;
}
.news-card-placeholder-meeting-recaps {
    background: url('assets/blog-placeholder-meeting-recaps.svg') center/cover no-repeat;
}

.news-card-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-card-cat {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #D4920B;
    font-weight: 600;
    margin-bottom: 4px;
}

.news-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #0B1D2E;
    margin: 0 0 6px;
    line-height: 1.3;
}

.news-card-excerpt {
    font-size: 0.88rem;
    color: #5E6E7E;
    line-height: 1.5;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-date {
    font-size: 0.75rem;
    color: #7A8A99;
}

/* Prevent entry-content link styles from overriding news card colors */
.entry-content a.news-card:hover,
.entry-content a.news-card:hover .news-card-title {
    color: #0B1D2E;
}

@media (max-width: 600px) {
    .news-card {
        flex-direction: column;
    }
    .news-card-image {
        width: 100%;
        height: 160px;
    }
}

/* ======================================================================
   GALLERY TILE GRID
   ====================================================================== */

.gallery-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.gallery-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--sb-card-radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-tile:hover {
    transform: scale(1.02);
    box-shadow: var(--sb-shadow-hover);
}

.gallery-tile-overlay {
    width: 100%;
    padding: 20px;
    background: linear-gradient(transparent, rgba(11, 29, 46, 0.8));
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gallery-tile-title {
    font-family: var(--sb-font-display);
    font-size: 1.2rem;
    color: #FFFFFF;
    font-weight: 700;
}

.gallery-tile-count {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
}

/* Back link on single gallery view */
.gallery-back-link {
    display: inline-block;
    color: var(--sb-amber-accessible);
    font-weight: 600;
    margin-bottom: 16px;
    text-decoration: none;
}

.gallery-back-link:hover {
    color: var(--sb-navy);
}

.gallery-event-title {
    font-family: var(--sb-font-display);
    font-size: 2rem;
    color: var(--sb-navy);
    margin-bottom: 4px;
}

.gallery-event-count {
    color: var(--sb-slate);
    margin-bottom: 24px;
}

@media (max-width: 1024px) {
    .gallery-tile-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .gallery-tile-grid { grid-template-columns: 1fr; }
    .gallery-tile-title { font-size: 1rem; }
}

/* ── Custom Gallery Lightbox ───────────────────────────── */
.sbc-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 29, 46, 0.95);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.sbc-lightbox.active {
    display: flex;
}

.sbc-lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
}

.sbc-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    color: #FFFFFF;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 10001;
    line-height: 1;
    transition: color 0.2s;
}

.sbc-lightbox-close:hover {
    color: #D4920B;
}

.sbc-lightbox-prev,
.sbc-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #FFFFFF;
    font-size: 3rem;
    cursor: pointer;
    padding: 20px;
    z-index: 10001;
    transition: color 0.2s;
    user-select: none;
}

.sbc-lightbox-prev { left: 16px; }
.sbc-lightbox-next { right: 16px; }

.sbc-lightbox-prev:hover,
.sbc-lightbox-next:hover {
    color: #D4920B;
}


/* ======================================================================
   SHOP CART BADGE — header indicator for Spreadshop cart items
   ====================================================================== */

/* Desktop cart badge — inline in the nav, hidden by default */
.strand-cart-badge {
    display: none; /* JS reveals when cart has items */
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    color: var(--sb-amber);
    font-family: var(--sb-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--sb-transition), color var(--sb-transition);
    white-space: nowrap;
    margin-left: 12px;
}

.strand-cart-badge:hover {
    background: var(--sb-amber);
    color: var(--sb-navy);
    text-decoration: none;
}

.strand-cart-badge .cart-icon {
    flex-shrink: 0;
}

.strand-cart-badge .cart-count {
    background: var(--sb-amber);
    color: var(--sb-white);
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.strand-cart-badge:hover .cart-count {
    background: var(--sb-navy);
    color: var(--sb-white);
}

/* Mobile cart badge — hidden on desktop, shown next to hamburger */
.strand-cart-badge-mobile {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 110;
}

/* Hide mobile badge on desktop, hide desktop badge on mobile */
@media (min-width: 1025px) {
    .strand-cart-badge-mobile {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    /* Hide the desktop badge when nav collapses */
    .site-header-main-section-right .strand-cart-badge {
        display: none !important;
    }

    /* Mobile badge: compact styling */
    .strand-cart-badge-mobile {
        padding: 4px 10px;
        font-size: 0.8rem;
    }

    .strand-cart-badge-mobile .cart-count {
        min-width: 16px;
        height: 16px;
        font-size: 0.65rem;
    }
}

/* =====================================================================
   CHECKOUT PAGE REDESIGN — Multi-column form layout
   ===================================================================== */

/* --- HR spacing inside checkout form --- */
#pmpro_form hr {
    margin: 24px 0;
}

/* --- Billing Address: flex layout for field pairing --- */
#pmpro_billing_address_fields .pmpro_checkout-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

#pmpro_billing_address_fields .pmpro_checkout-fields > h3,
#pmpro_billing_address_fields .pmpro_checkout-fields > legend,
#pmpro_billing_address_fields .pmpro_checkout-fields > .pmpro_checkout-field-header {
    flex: 0 0 100%;
}

/* Paired fields: First/Last name */
#pmpro_billing_address_fields .pmpro_checkout-field-bfirstname,
#pmpro_billing_address_fields .pmpro_checkout-field-blastname {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
    margin-bottom: 0;
}

/* Full-width fields: Address 1, Address 2, Phone */
#pmpro_billing_address_fields .pmpro_checkout-field-baddress1,
#pmpro_billing_address_fields .pmpro_checkout-field-baddress2,
#pmpro_billing_address_fields .pmpro_checkout-field-bphone {
    flex: 0 0 100%;
    margin-bottom: 0;
}

/* Paired fields: City (wider) + State (narrower) */
#pmpro_billing_address_fields .pmpro_checkout-field-bcity {
    flex: 2 1 calc(60% - 8px);
    min-width: 200px;
    margin-bottom: 0;
}

#pmpro_billing_address_fields .pmpro_checkout-field-bstate {
    flex: 1 1 calc(40% - 8px);
    min-width: 140px;
    margin-bottom: 0;
}

/* Paired fields: Zip + Country */
#pmpro_billing_address_fields .pmpro_checkout-field-bzipcode,
#pmpro_billing_address_fields .pmpro_checkout-field-bcountry {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
    margin-bottom: 0;
}

/* Paired fields: Email + Confirm Email (when in billing section) */
#pmpro_billing_address_fields .pmpro_checkout-field-bemail,
#pmpro_billing_address_fields .pmpro_checkout-field-bconfirmemail {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
    margin-bottom: 0;
}

/* --- Account Information: flex layout for field pairing --- */
#pmpro_user_fields .pmpro_checkout-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

#pmpro_user_fields .pmpro_checkout-fields > h3,
#pmpro_user_fields .pmpro_checkout-fields > legend,
#pmpro_user_fields .pmpro_checkout-fields > .pmpro_checkout-field-header,
#pmpro_user_fields .pmpro_checkout-fields > .pmpro_message {
    flex: 0 0 100%;
}

/* Username: full width */
#pmpro_user_fields .pmpro_checkout-field-username {
    flex: 0 0 100%;
    margin-bottom: 0;
}

/* Password + Confirm Password: paired */
#pmpro_user_fields .pmpro_checkout-field-password,
#pmpro_user_fields .pmpro_checkout-field-password2 {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
    margin-bottom: 0;
}

/* Email + Confirm Email: paired */
#pmpro_user_fields .pmpro_checkout-field-bemail,
#pmpro_user_fields .pmpro_checkout-field-bconfirmemail {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
    margin-bottom: 0;
}

/* Honeypot field: hidden, don't affect layout */
#pmpro_user_fields .pmpro_checkout-field [style*="display: none"],
#pmpro_user_fields .pmpro_checkout-field [style*="display:none"] {
    flex: 0 0 0;
}

/* Hide "We Accept Visa, Mastercard..." text from Payment Information header */
#pmpro_payment_information_fields .pmpro_checkout-h3-msg {
    display: none;
}

/* Add card types inline with Card Number label */
#pmpro_payment_information_fields .pmpro_payment-account-number label::after {
    content: " (Visa, Mastercard, Amex, Discover)";
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--sb-slate);
}

/* --- Payment Information: flex layout --- */
#pmpro_payment_information_fields .pmpro_checkout-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

#pmpro_payment_information_fields .pmpro_checkout-fields > h3,
#pmpro_payment_information_fields .pmpro_checkout-fields > legend,
#pmpro_payment_information_fields .pmpro_checkout-fields > .pmpro_checkout-field-header {
    flex: 0 0 100%;
}

/* Card Number: full width */
#pmpro_payment_information_fields .pmpro_checkout-field-account-number,
#pmpro_payment_information_fields .pmpro_payment-account-number {
    flex: 0 0 100%;
    margin-bottom: 0;
}

/* Expiration + CVV: shared row */
#pmpro_payment_information_fields .pmpro_checkout-field-expiration,
#pmpro_payment_information_fields .pmpro_payment-expiration {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
    margin-bottom: 0;
}

#pmpro_payment_information_fields .pmpro_checkout-field-cvv,
#pmpro_payment_information_fields .pmpro_payment-cvv {
    flex: 0 1 calc(30% - 8px);
    min-width: 140px;
    margin-bottom: 0;
}

/* Discount code: full width */
#pmpro_payment_information_fields .pmpro_checkout-field-discount_code {
    flex: 0 0 100%;
    margin-bottom: 0;
}

/* --- Stripe Elements container styling --- */
.pmpro_checkout .StripeElement,
#pmpro_form .StripeElement {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 12px 16px;
    background-color: var(--sb-white);
    transition: border-color var(--sb-transition), box-shadow var(--sb-transition);
}

.pmpro_checkout .StripeElement--focus,
#pmpro_form .StripeElement--focus {
    border-color: var(--sb-amber);
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.15);
    outline: none;
}

.pmpro_checkout .StripeElement--invalid,
#pmpro_form .StripeElement--invalid {
    border-color: #e74c3c;
}

/* --- Input focus: amber glow (ensure 0.15 opacity per brand spec) --- */
body.sb-checkout .pmpro_checkout input:focus,
body.sb-checkout .pmpro_checkout textarea:focus,
body.sb-checkout .pmpro_checkout select:focus,
body.sb-checkout #pmpro_form input:focus,
body.sb-checkout #pmpro_form textarea:focus,
body.sb-checkout #pmpro_form select:focus {
    border-color: var(--sb-amber);
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.15);
    outline: none;
}

/* --- Confirmation page: remove narrow constraint --- */
body.sb-confirmation .pmpro_confirmation_message,
body.sb-confirmation .pmpro-confirmation,
body.sb-confirmation .pmpro_confirmation_wrap,
body.sb-confirmation #pmpro_confirmation_message {
    max-width: none;
}

/* --- Responsive: collapse to single column on mobile --- */
@media (max-width: 768px) {
    #pmpro_billing_address_fields .pmpro_checkout-field-bfirstname,
    #pmpro_billing_address_fields .pmpro_checkout-field-blastname,
    #pmpro_billing_address_fields .pmpro_checkout-field-bcity,
    #pmpro_billing_address_fields .pmpro_checkout-field-bstate,
    #pmpro_billing_address_fields .pmpro_checkout-field-bzipcode,
    #pmpro_billing_address_fields .pmpro_checkout-field-bcountry,
    #pmpro_billing_address_fields .pmpro_checkout-field-bemail,
    #pmpro_billing_address_fields .pmpro_checkout-field-bconfirmemail,
    #pmpro_user_fields .pmpro_checkout-field-password,
    #pmpro_user_fields .pmpro_checkout-field-password2,
    #pmpro_user_fields .pmpro_checkout-field-bemail,
    #pmpro_user_fields .pmpro_checkout-field-bconfirmemail,
    #pmpro_payment_information_fields .pmpro_checkout-field-expiration,
    #pmpro_payment_information_fields .pmpro_payment-expiration,
    #pmpro_payment_information_fields .pmpro_checkout-field-cvv,
    #pmpro_payment_information_fields .pmpro_payment-cvv {
        flex: 0 0 100%;
        min-width: 0;
    }

    .pmpro_checkout .pmpro_checkout-fields,
    .pmpro-checkout .pmpro_checkout-fields {
        padding: 24px;
    }

    .strand-checkout-profile-row--half {
        flex-direction: column;
    }

    .strand-checkout-profile-row--half .strand-checkout-profile-field {
        flex: 0 0 100%;
        min-width: 0;
    }
}

/* --- Checkout: Custom Brewer Profile Fields Section --- */
#strand_checkout_profile_fields {
    margin-top: 12px;
}

#strand_checkout_profile_fields h3 {
    font-family: var(--sb-font-heading);
    color: var(--sb-navy);
    font-size: 1.4rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--sb-border);
    padding-bottom: 12px;
    margin-top: 36px;
    margin-bottom: 12px;
}

.strand-checkout-profile-intro {
    color: var(--sb-text-light);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.strand-checkout-profile-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.strand-checkout-profile-row--half .strand-checkout-profile-field {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
}

.strand-checkout-profile-field label {
    font-family: var(--sb-font-body);
    font-weight: 600;
    color: var(--sb-navy);
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.strand-checkout-profile-field label .strand-optional {
    font-weight: 400;
    color: var(--sb-text-light);
    font-size: 0.85rem;
}

.strand-checkout-profile-field input[type="text"],
.strand-checkout-profile-field input[type="tel"],
.strand-checkout-profile-field select {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 12px 16px;
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    color: var(--sb-text);
    background-color: var(--sb-white);
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--sb-transition), box-shadow var(--sb-transition);
}

.strand-checkout-profile-field input:focus,
.strand-checkout-profile-field select:focus {
    border-color: var(--sb-amber);
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.15);
    outline: none;
}

.strand-checkout-profile-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.strand-checkout-profile-field--full {
    margin-bottom: 16px;
}

/* =============================================
   Checkout: Your Name Fields (First / Last)
   ============================================= */
.strand-checkout-name-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.strand-checkout-name-field {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
}

.strand-checkout-name-field label {
    font-family: var(--sb-font-body);
    font-weight: 600;
    color: var(--sb-navy);
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.strand-checkout-name-field input[type="text"] {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 12px 16px;
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    color: var(--sb-text);
    background-color: var(--sb-white);
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--sb-transition), box-shadow var(--sb-transition);
}

.strand-checkout-name-field input[type="text"]:focus {
    border-color: var(--sb-amber);
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.15);
    outline: none;
}

@media (max-width: 600px) {
    .strand-checkout-name-field {
        flex: 1 1 100%;
    }
}

/* =============================================
   Checkout: Merge "Who Are You?" + Account Info
   into one visual card/section.
   ============================================= */

/* Name fields card: remove bottom rounding + border so it flows into Account Info */
#strand_checkout_name_fields .pmpro_checkout-fields {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    padding-bottom: 8px;
    margin-bottom: 0;
    box-shadow: none;
}

/* Account Info section: hide the <hr> and <h3> heading (login link relocated above) */
#pmpro_user_fields > hr {
    display: none;
}

/*
 * Visually hide the Account Info heading but keep it accessible to screen readers.
 * For logged-in users the "Who Are You?" combined heading won't render, so this
 * heading must remain in the accessibility tree as the section landmark.
 */
#pmpro_user_fields > h3 {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Account Info card: remove top rounding + border so it connects to name fields */
#pmpro_user_fields .pmpro_checkout-fields {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
    padding-top: 8px;
}

/* Remove the gap between the two sibling divs */
#strand_checkout_name_fields {
    margin-bottom: 0;
}

#pmpro_user_fields {
    margin-top: 0;
}

/* ======================================================================
   23. CLUB BREW — Brew Days
   Archive listing, single page, RSVP box, attendees, cards
   ====================================================================== */

/* --- Archive: Filter Bar --- */

.brew-day-filter-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 32px;
    padding: 20px 24px;
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-radius: 12px;
}

.brew-day-filter-bar select,
.brew-day-filter-bar input[type="text"] {
    padding: 10px 14px;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    color: var(--sb-navy);
    flex: 1;
    min-width: 150px;
}

.brew-day-filter-bar select:focus,
.brew-day-filter-bar input:focus {
    border-color: var(--sb-amber);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.15);
}

.brew-day-filter-bar .brew-day-filter-clear {
    padding: 10px 20px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .brew-day-filter-bar {
        flex-direction: column;
    }
    .brew-day-filter-bar select,
    .brew-day-filter-bar input[type="text"] {
        width: 100%;
    }
}

/* --- Archive: Card Grid --- */

.brew-day-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (max-width: 960px) {
    .brew-day-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .brew-day-card-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Archive: Brew Day Card --- */

.brew-day-card {
    display: flex;
    flex-direction: column;
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-amber);
    border-radius: var(--sb-card-radius);
    padding: 20px 22px;
    box-shadow: var(--sb-shadow);
    transition: transform var(--sb-transition), box-shadow var(--sb-transition);
}

.brew-day-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sb-shadow-hover);
}

.brew-day-card.brew-day-cancelled {
    opacity: 0.6;
    border-left-color: var(--sb-slate);
}

/* --- Type Badges --- */

.brew-type-badge {
    display: inline-block;
    font-family: var(--sb-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    line-height: 1.4;
    width: fit-content;
    margin-bottom: 10px;
}

.brew-badge-amber {
    background: rgba(212, 146, 11, 0.12);
    color: var(--sb-amber);
}

.brew-badge-navy {
    background: rgba(11, 29, 46, 0.1);
    color: var(--sb-navy);
}

.brew-badge-golden {
    background: rgba(232, 168, 23, 0.15);
    color: #9A7200;
}

/* --- Card Content --- */

.brew-day-card-title {
    font-family: var(--sb-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sb-navy);
    margin: 0 0 10px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.brew-day-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
    flex-grow: 1;
}

.brew-day-card-meta span {
    font-family: var(--sb-font-body);
    font-size: 0.85rem;
    color: var(--sb-slate);
    line-height: 1.4;
}

.brew-day-card-date {
    font-weight: 600;
    color: var(--sb-navy) !important;
}

.brew-day-card-host {
    font-size: 0.82rem !important;
}

/* --- Card Footer (spots + fee) --- */

.brew-day-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.brew-day-spots {
    display: inline-block;
    font-family: var(--sb-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sb-slate);
    background: var(--sb-cream);
    padding: 4px 12px;
    border-radius: 20px;
}

.brew-day-spots-full {
    background: rgba(212, 146, 11, 0.12);
    color: var(--sb-amber);
}

.brew-day-spots-cancelled {
    background: rgba(180, 40, 40, 0.08);
    color: #8B2020;
}

.brew-day-fee {
    display: inline-block;
    font-family: var(--sb-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sb-navy);
    background: var(--sb-cream);
    padding: 4px 12px;
    border-radius: 20px;
}

/* --- Card Button --- */

.brew-day-card-btn {
    padding: 8px 20px;
    font-size: 0.8rem;
    text-align: center;
    width: 100%;
    margin-top: auto;
}

/* --- Archive: Pagination --- */

.brew-day-pagination {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
}

.brew-day-pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 4px;
    border-radius: var(--sb-radius);
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    color: var(--sb-navy);
    border: 1px solid var(--sb-border);
    text-decoration: none;
    transition: all var(--sb-transition);
}

.brew-day-pagination .page-numbers.current,
.brew-day-pagination .page-numbers:hover {
    background: var(--sb-amber);
    color: #000;
    border-color: var(--sb-amber);
}

.brew-day-no-results {
    text-align: center;
    color: var(--sb-slate);
    padding: 60px 20px;
    font-size: 1.05rem;
}

/* ======================================================================
   23b. CLUB BREW — Single Brew Day Page
   ====================================================================== */

/* --- Hero Meta --- */

.brew-day-hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-family: var(--sb-font-body);
    font-size: 1rem;
    color: var(--sb-slate);
}

.brew-day-hero-meta strong {
    color: var(--sb-navy);
}

.brew-day-cancelled-banner {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 24px;
    background: rgba(180, 40, 40, 0.08);
    color: #8B2020;
    font-family: var(--sb-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--sb-radius);
    border: 1px solid rgba(180, 40, 40, 0.2);
}

/* --- Single Hero: Badge Override (center it) --- */

.brew-day-page .strand-section-cream .brew-type-badge {
    margin: 0 auto 16px;
}

/* --- Stats Bar --- */

.brew-day-page .strand-section-dark {
    background-color: var(--sb-navy);
}

.brew-day-stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    text-align: center;
    padding: 16px 0;
}

.brew-day-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.brew-day-stat-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--sb-font-heading);
    font-size: 1.5rem;
    letter-spacing: 1px;
    color: var(--sb-amber);
    line-height: 1.2;
}

.brew-day-stat-label {
    font-family: var(--sb-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sb-cream);
    opacity: 0.8;
}

/* Override .strand-section-dark span blanket rule for stats bar */
.strand-section-dark .brew-day-stat-value {
    color: var(--sb-amber);
}

.strand-section-dark .brew-day-stat-label {
    color: var(--sb-cream);
}

/* --- Content Grid (two-column layout) --- */

.brew-day-content-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    align-items: start;
}

@media (max-width: 900px) {
    .brew-day-content-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* --- Details (left column) --- */

.brew-day-details h2 {
    font-family: var(--sb-font-display);
    font-size: 1.5rem;
    color: var(--sb-navy);
    margin: 0 0 12px;
}

.brew-day-details h3 {
    font-family: var(--sb-font-heading);
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sb-navy);
    margin: 28px 0 10px;
}

.brew-day-details > div:first-child h2,
.brew-day-details > div:first-child h3 {
    margin-top: 0;
}

/* --- Linked Recipe Card --- */

.brew-day-recipe-card {
    display: block;
    background: var(--sb-cream);
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    padding: 16px 20px;
    text-decoration: none;
    color: var(--sb-text);
    transition: transform var(--sb-transition), box-shadow var(--sb-transition);
    margin-top: 8px;
}

.brew-day-recipe-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sb-shadow);
    color: var(--sb-text);
    text-decoration: none;
}

.brew-day-recipe-card-title {
    display: block;
    font-family: var(--sb-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sb-navy);
    margin-bottom: 4px;
}

.brew-day-recipe-card-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.brew-day-recipe-card-meta span {
    font-size: 0.82rem;
    color: var(--sb-slate);
    background: var(--sb-white);
    padding: 2px 10px;
    border-radius: 20px;
}

.brew-day-recipe-card-arrow {
    display: block;
    margin-top: 8px;
    font-family: var(--sb-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sb-amber);
}

/* --- Host Notes & Bring Text --- */

.brew-day-notes-text,
.brew-day-bring-text {
    background: var(--sb-cream);
    border-radius: var(--sb-radius);
    padding: 16px 20px;
    font-size: 0.95rem;
    line-height: 1.7;
}

.brew-day-notes-text p:last-child,
.brew-day-bring-text p:last-child {
    margin-bottom: 0;
}

.brew-day-fee-note {
    font-size: 0.85rem;
    color: var(--sb-slate);
    font-style: italic;
}

/* --- Sidebar (right column) --- */

.brew-day-sidebar > div {
    margin-bottom: 24px;
}

.brew-day-sidebar > div:last-child {
    margin-bottom: 0;
}

/* --- RSVP Box --- */

.brew-day-rsvp-box {
    background: var(--sb-white);
    border: 2px solid var(--sb-border);
    border-radius: var(--sb-card-radius);
    padding: 24px;
}

.brew-day-rsvp-box h3 {
    font-family: var(--sb-font-heading);
    font-size: 1.2rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sb-navy);
    margin: 0 0 16px;
}

.brew-day-rsvp-status {
    text-align: center;
}

.brew-day-rsvp-status p {
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    color: var(--sb-text);
    margin-bottom: 12px;
}

.brew-day-rsvp-count {
    display: block;
    font-family: var(--sb-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sb-slate);
    margin-bottom: 16px;
}

.brew-day-rsvp-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    text-align: center;
}

.brew-day-rsvp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.brew-day-join {
    background: #2E8B57;
    border-color: #2E8B57;
    color: #FFFFFF;
}

.brew-day-join:hover {
    background: #246E45;
    border-color: #246E45;
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(46, 139, 87, 0.25);
}

.brew-day-cancel-rsvp {
    color: var(--sb-slate);
    border-color: var(--sb-border);
    background: transparent;
    font-size: 0.88rem;
    padding: 10px 20px;
}

.brew-day-cancel-rsvp:hover {
    color: #8B2020;
    border-color: #8B2020;
    background: rgba(180, 40, 40, 0.04);
}

.brew-day-rsvp-hosting p {
    color: var(--sb-amber);
    font-weight: 600;
}

.brew-day-rsvp-confirmed p {
    color: #2E8B57;
    font-weight: 600;
}

.brew-day-rsvp-pending p {
    color: var(--sb-amber);
    font-style: italic;
}

.brew-day-rsvp-cancelled p {
    color: #8B2020;
    font-weight: 600;
}

.brew-day-rsvp-login {
    text-align: center;
    font-size: 0.95rem;
    color: var(--sb-slate);
}

/* --- Who's Going --- */

.brew-day-whos-going {
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-card-radius);
    padding: 24px;
}

.brew-day-whos-going h3 {
    font-family: var(--sb-font-heading);
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sb-navy);
    margin: 0 0 16px;
}

.brew-day-attendee-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.brew-day-attendee {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sb-border);
}

.brew-day-attendee:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.brew-day-attendee-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sb-navy);
    color: var(--sb-white);
    font-family: var(--sb-font-heading);
    font-size: 0.75rem;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.brew-day-attendee-name {
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    color: var(--sb-text);
}

.brew-day-attendee-pending {
    font-size: 0.78rem;
    color: var(--sb-amber);
    font-style: italic;
}

.brew-day-no-attendees {
    font-size: 0.9rem;
    color: var(--sb-slate);
    text-align: center;
    margin: 0;
}

/* --- Location Box --- */

.brew-day-location-box {
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-card-radius);
    padding: 24px;
}

.brew-day-location-box h3 {
    font-family: var(--sb-font-heading);
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sb-navy);
    margin: 0 0 12px;
}

.brew-day-location-name {
    font-family: var(--sb-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--sb-navy);
    margin-bottom: 4px;
}

.brew-day-location-address {
    font-size: 0.9rem;
    color: var(--sb-slate);
    margin-bottom: 8px;
}

.brew-day-location-note {
    font-size: 0.85rem;
    color: var(--sb-slate);
    font-style: italic;
}

.brew-day-map-link {
    display: inline-block;
    font-family: var(--sb-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sb-amber);
}

.brew-day-map-link:hover {
    color: var(--sb-navy);
}

.brew-day-calendar-link-box {
    background: var(--sb-cream);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-card-radius);
    padding: 16px 24px;
    text-align: center;
}
.brew-day-calendar-link-box p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--sb-slate);
}
.brew-day-calendar-link-box a {
    color: var(--sb-amber);
    font-weight: 600;
}
.brew-day-calendar-link-box a:hover {
    color: var(--sb-navy);
}

/* --- Waiver --- */

.brew-day-waiver {
    margin-top: 40px;
    padding: 16px 24px;
    background: var(--sb-cream);
    border-radius: var(--sb-radius);
    border-left: 4px solid var(--sb-border);
}

.brew-day-waiver p {
    font-size: 0.82rem;
    color: var(--sb-slate);
    margin: 0;
    line-height: 1.6;
}

/* --- Batch Info --- */

.brew-day-batch-info p {
    font-size: 0.95rem;
    color: var(--sb-text);
}

.brew-day-batch-info strong {
    color: var(--sb-navy);
}

/* --- Responsive: Stats Bar --- */

@media (max-width: 600px) {
    .brew-day-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .brew-day-stat-value {
        font-size: 1.2rem;
    }
}

/* --- Responsive: Single Hero Badge on Dark Section --- */

.strand-section-dark .brew-type-badge {
    color: var(--sb-cream);
}

/* ======================================================================
   23c. CLUB BREW — Host Management Panel (Phase 2)
   ====================================================================== */

.brew-day-host-panel {
    margin-top: 40px;
    padding: 32px;
    background: var(--sb-white);
    border: 2px solid var(--sb-amber);
    border-radius: var(--sb-card-radius);
}

.brew-day-host-panel h2 {
    font-family: var(--sb-font-display);
    font-size: 1.4rem;
    color: var(--sb-navy);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--sb-border);
}

.brew-day-host-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.brew-day-host-action-btn {
    padding: 10px 20px;
    font-size: 0.88rem;
}

.brew-day-host-action-btn.brew-day-cancel-event {
    color: #8B2020;
    border-color: #8B2020;
}

.brew-day-host-action-btn.brew-day-cancel-event:hover {
    background: rgba(180, 40, 40, 0.08);
}

.brew-day-host-action-btn.brew-day-complete-event {
    color: #2E8B57;
    border-color: #2E8B57;
}

.brew-day-host-action-btn.brew-day-complete-event:hover {
    background: rgba(46, 139, 87, 0.08);
}

/* --- RSVP Management Table --- */

.brew-day-rsvp-management h3 {
    font-family: var(--sb-font-heading);
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sb-navy);
    margin: 0 0 16px;
}

.brew-day-rsvp-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
}

.brew-day-rsvp-table thead th {
    text-align: left;
    font-family: var(--sb-font-heading);
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sb-slate);
    padding: 10px 12px;
    border-bottom: 2px solid var(--sb-border);
}

.brew-day-rsvp-table tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--sb-border);
    vertical-align: middle;
}

.brew-day-rsvp-table tbody td small {
    color: var(--sb-slate);
    font-size: 0.82rem;
}

.brew-day-rsvp-status-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: capitalize;
}

.rsvp-status-confirmed .brew-day-rsvp-status-badge,
.brew-day-rsvp-status-badge.rsvp-status-confirmed {
    background: rgba(46, 139, 87, 0.1);
    color: #2E8B57;
}

.rsvp-status-pending .brew-day-rsvp-status-badge,
.brew-day-rsvp-status-badge.rsvp-status-pending {
    background: rgba(212, 146, 11, 0.12);
    color: var(--sb-amber);
}

.rsvp-status-denied .brew-day-rsvp-status-badge,
.brew-day-rsvp-status-badge.rsvp-status-denied {
    background: rgba(180, 40, 40, 0.08);
    color: #8B2020;
}

.brew-day-rsvp-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.brew-day-rsvp-actions .btn-sm {
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: var(--sb-radius);
    cursor: pointer;
    border: 1px solid;
    transition: all var(--sb-transition);
}

.brew-day-approve-rsvp {
    background: #2E8B57;
    border-color: #2E8B57;
    color: #fff;
}

.brew-day-approve-rsvp:hover {
    background: #246E45;
    border-color: #246E45;
}

.brew-day-deny-rsvp {
    background: transparent;
    border-color: #8B2020;
    color: #8B2020;
}

.brew-day-deny-rsvp:hover {
    background: rgba(180, 40, 40, 0.08);
}

.brew-day-rsvp-action-done {
    font-size: 0.82rem;
    color: var(--sb-slate);
    font-style: italic;
}

.brew-day-no-rsvps {
    color: var(--sb-slate);
    font-size: 0.95rem;
    text-align: center;
    padding: 20px;
}

@media (max-width: 768px) {
    .brew-day-host-panel {
        padding: 20px;
    }
    .brew-day-host-actions {
        flex-direction: column;
    }
    .brew-day-rsvp-table {
        font-size: 0.82rem;
    }
    .brew-day-rsvp-table thead th,
    .brew-day-rsvp-table tbody td {
        padding: 8px 6px;
    }
}

/* ======================================================================
   23d. CLUB BREW — Recipe Page Brew Day Cards (Phase 2)
   ====================================================================== */

.recipe-brew-days-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.recipe-brew-day-card {
    display: flex;
    flex-direction: column;
    background: var(--sb-cream);
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    padding: 16px 20px;
    text-decoration: none;
    color: var(--sb-text);
    transition: transform var(--sb-transition), box-shadow var(--sb-transition);
}

.recipe-brew-day-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sb-shadow);
    text-decoration: none;
    color: var(--sb-text);
}

.recipe-brew-day-card .brew-type-badge {
    margin-bottom: 8px;
}

.recipe-brew-day-title {
    display: block;
    font-family: var(--sb-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--sb-navy);
    margin-bottom: 6px;
}

.recipe-brew-day-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.recipe-brew-day-meta span {
    font-size: 0.85rem;
    color: var(--sb-slate);
}

.recipe-brew-day-spots {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sb-slate);
    background: var(--sb-white);
    padding: 3px 10px;
    border-radius: 20px;
    width: fit-content;
}

/* ======================================================================
   24. MONSTER BREW — Public Registration MVP
   Guest registration, tickets, validation, public RSVP
   ====================================================================== */

/* --- 24a. Public Monster Brew RSVP Box --- */

.brew-day-rsvp-public {
    border: 2px solid var(--sb-golden);
    background: linear-gradient(135deg, var(--sb-white) 0%, rgba(232, 168, 23, 0.04) 100%);
}

.brew-day-rsvp-public-cta {
    text-align: center;
}

.brew-day-rsvp-public-cta > p {
    font-size: 0.95rem;
    color: var(--sb-text);
    margin-bottom: 16px;
}

.brew-day-rsvp-public-cta .brew-day-rsvp-count {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sb-navy);
    margin-bottom: 8px;
}

.brew-day-register-btn {
    background: var(--sb-amber);
    border-color: var(--sb-amber);
    color: var(--sb-white);
    font-size: 1.05rem;
    padding: 16px 28px;
    width: 100%;
    text-align: center;
    display: block;
    margin-bottom: 16px;
}

.brew-day-register-btn:hover {
    background: var(--sb-amber-hover);
    border-color: var(--sb-amber-hover);
    color: var(--sb-white);
    box-shadow: 0 6px 20px rgba(212, 146, 11, 0.3);
}

.brew-day-login-link {
    font-size: 0.85rem;
    color: var(--sb-slate);
    margin-top: 8px;
}

.brew-day-login-link a {
    color: var(--sb-amber-accessible);
    font-weight: 600;
}

.brew-day-login-link a:hover {
    color: var(--sb-navy);
}

/* --- Members Only Gate --- */

.brew-day-members-only {
    max-width: 520px;
    margin: 0 auto;
    padding: 48px 32px;
}

.brew-day-members-only h1 {
    font-family: var(--sb-font-display);
    font-size: 2rem;
    color: var(--sb-navy);
    margin-bottom: 16px;
}

.brew-day-members-only p {
    font-size: 1rem;
    color: var(--sb-slate);
    line-height: 1.7;
    margin-bottom: 12px;
}

/* --- 24b. Guest Registration Form (/register/) --- */

.sbc-register-form-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 40px 0;
}

.sbc-register-form-wrap h1,
.sbc-register-form-wrap h2 {
    font-family: var(--sb-font-display);
    font-size: 1.8rem;
    color: var(--sb-navy);
    text-align: center;
    margin-bottom: 8px;
}

.sbc-register-form-wrap .sbc-register-subtitle {
    text-align: center;
    font-size: 0.95rem;
    color: var(--sb-slate);
    margin-bottom: 32px;
}

.sbc-register-form {
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-card-radius);
    padding: 32px;
    box-shadow: var(--sb-shadow);
}

.sbc-register-form .form-row {
    margin-bottom: 20px;
}

.sbc-register-form label {
    display: block;
    font-family: var(--sb-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sb-navy);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.sbc-register-form input[type="text"],
.sbc-register-form input[type="email"],
.sbc-register-form input[type="password"],
.sbc-register-form input[type="tel"],
.sbc-register-form select,
.sbc-register-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    color: var(--sb-navy);
    background: var(--sb-white);
    transition: border-color var(--sb-transition), box-shadow var(--sb-transition);
}

.sbc-register-form input:focus,
.sbc-register-form select:focus,
.sbc-register-form textarea:focus {
    border-color: var(--sb-amber);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.15);
}

.sbc-register-form .form-row-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 480px) {
    .sbc-register-form .form-row-half {
        grid-template-columns: 1fr;
    }
}

.sbc-register-form .sbc-register-submit {
    width: 100%;
    padding: 14px 28px;
    background: var(--sb-amber);
    border: 2px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    color: var(--sb-white);
    font-family: var(--sb-font-heading);
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--sb-transition), box-shadow var(--sb-transition);
    margin-top: 8px;
}

.sbc-register-form .sbc-register-submit:hover {
    background: var(--sb-amber-hover);
    border-color: var(--sb-amber-hover);
    box-shadow: 0 6px 20px rgba(212, 146, 11, 0.3);
}

.sbc-register-form .sbc-register-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sbc-register-form .form-error {
    color: #C0392B;
    font-size: 0.82rem;
    margin-top: 4px;
}

.sbc-register-form .form-success {
    color: #27AE60;
    font-size: 0.82rem;
    margin-top: 4px;
}

.sbc-register-form .sbc-register-login-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--sb-slate);
}

.sbc-register-form .sbc-register-login-link a {
    color: var(--sb-amber-accessible);
    font-weight: 600;
}

.sbc-register-alert {
    padding: 12px 20px;
    border-radius: var(--sb-radius);
    margin-bottom: 20px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.sbc-register-alert-error {
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid rgba(192, 57, 43, 0.2);
    color: #C0392B;
}

.sbc-register-alert-success {
    background: rgba(39, 174, 96, 0.08);
    border: 1px solid rgba(39, 174, 96, 0.2);
    color: #27AE60;
}

/* --- 24c. My Tickets Page --- */

.sbc-tickets-page {
    max-width: var(--sb-content-max);
    margin: 0 auto;
    padding: 40px var(--sb-content-pad);
}

.sbc-tickets-page h1 {
    font-family: var(--sb-font-display);
    font-size: 2rem;
    color: var(--sb-navy);
    margin-bottom: 24px;
}

.sbc-ticket-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .sbc-ticket-grid {
        grid-template-columns: 1fr;
    }
}

.sbc-ticket-card {
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-left: 5px solid var(--sb-amber);
    border-radius: var(--sb-card-radius);
    padding: 24px;
    box-shadow: var(--sb-shadow);
    transition: transform var(--sb-transition), box-shadow var(--sb-transition);
    position: relative;
}

.sbc-ticket-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sb-shadow-hover);
}

.sbc-ticket-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.sbc-ticket-number {
    font-family: var(--sb-font-heading);
    font-size: 1.4rem;
    letter-spacing: 1px;
    color: var(--sb-navy);
    line-height: 1.2;
}

.sbc-ticket-status {
    display: inline-block;
    font-family: var(--sb-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.sbc-ticket-status-confirmed {
    background: rgba(39, 174, 96, 0.12);
    color: #27AE60;
}

.sbc-ticket-status-pending {
    background: rgba(212, 146, 11, 0.12);
    color: var(--sb-amber);
}

.sbc-ticket-status-checked_in,
.sbc-ticket-status-checked-in {
    background: rgba(11, 29, 46, 0.1);
    color: var(--sb-navy);
}

.sbc-ticket-status-cancelled {
    background: rgba(94, 110, 126, 0.1);
    color: var(--sb-slate);
}

.sbc-ticket-event {
    font-family: var(--sb-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sb-navy);
    margin-bottom: 8px;
    line-height: 1.3;
}

.sbc-ticket-event a {
    color: var(--sb-navy);
    text-decoration: none;
}

.sbc-ticket-event a:hover {
    color: var(--sb-amber);
}

.sbc-ticket-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.88rem;
    color: var(--sb-slate);
    margin-bottom: 16px;
}

.sbc-ticket-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sbc-ticket-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sbc-ticket-actions .btn {
    font-size: 0.85rem;
    padding: 8px 18px;
}

.sbc-tickets-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--sb-slate);
}

.sbc-tickets-empty p {
    font-size: 1rem;
    margin-bottom: 16px;
}

/* --- 24d. Single Ticket View --- */

.sbc-ticket-detail {
    max-width: var(--sb-content-max);
    margin: 0 auto;
    padding: 40px var(--sb-content-pad);
}

.sbc-ticket-detail h1 {
    font-family: var(--sb-font-display);
    font-size: 1.8rem;
    color: var(--sb-navy);
    margin-bottom: 24px;
}

.sbc-ticket-detail-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 40px;
    align-items: start;
}

@media (max-width: 768px) {
    .sbc-ticket-detail-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.sbc-ticket-detail-info {
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-card-radius);
    padding: 28px;
    box-shadow: var(--sb-shadow);
}

.sbc-ticket-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--sb-border);
}

.sbc-ticket-detail-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sbc-ticket-detail-row:first-child {
    padding-top: 0;
}

.sbc-ticket-detail-label {
    font-family: var(--sb-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--sb-slate);
}

.sbc-ticket-detail-value {
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    color: var(--sb-navy);
    text-align: right;
    font-weight: 500;
}

.sbc-ticket-qr-panel {
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-card-radius);
    padding: 28px;
    box-shadow: var(--sb-shadow);
    text-align: center;
}

.sbc-ticket-qr-panel h3 {
    font-family: var(--sb-font-heading);
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sb-navy);
    margin: 0 0 16px;
}

.sbc-ticket-qr-code {
    width: 200px;
    height: 200px;
    margin: 0 auto 16px;
    display: block;
}

.sbc-ticket-qr-code img,
.sbc-ticket-qr-code canvas,
.sbc-ticket-qr-code svg {
    width: 200px;
    height: 200px;
    display: block;
    margin: 0 auto;
}

.sbc-ticket-qr-hint {
    font-size: 0.82rem;
    color: var(--sb-slate);
    margin: 0;
    line-height: 1.5;
}

.sbc-ticket-print-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 24px;
    background: var(--sb-navy);
    border: 2px solid var(--sb-navy);
    border-radius: var(--sb-radius);
    color: var(--sb-white);
    font-family: var(--sb-font-heading);
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--sb-transition), box-shadow var(--sb-transition);
}

.sbc-ticket-print-btn:hover {
    background: transparent;
    color: var(--sb-navy);
}

/* --- 24e. Ticket Validation Page --- */

.sbc-validate-page {
    max-width: 520px;
    margin: 0 auto;
    padding: 60px var(--sb-content-pad);
    text-align: center;
}

.sbc-validate-result {
    border-radius: var(--sb-card-radius);
    padding: 40px 32px;
    margin-bottom: 24px;
    box-shadow: var(--sb-shadow);
}

.sbc-validate-valid {
    background: rgba(39, 174, 96, 0.08);
    border: 2px solid #27AE60;
}

.sbc-validate-valid h2 {
    color: #27AE60;
    font-family: var(--sb-font-display);
    font-size: 1.6rem;
    margin-bottom: 12px;
}

.sbc-validate-invalid {
    background: rgba(192, 57, 43, 0.08);
    border: 2px solid #C0392B;
}

.sbc-validate-invalid h2 {
    color: #C0392B;
    font-family: var(--sb-font-display);
    font-size: 1.6rem;
    margin-bottom: 12px;
}

.sbc-validate-result p {
    font-size: 0.95rem;
    color: var(--sb-text);
    margin-bottom: 8px;
    line-height: 1.6;
}

.sbc-validate-details {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--sb-border);
    text-align: left;
}

.sbc-validate-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.9rem;
}

.sbc-validate-detail-row strong {
    color: var(--sb-navy);
}

.sbc-validate-checkin-btn {
    display: inline-block;
    margin-top: 24px;
    padding: 14px 32px;
    background: #27AE60;
    border: 2px solid #27AE60;
    border-radius: var(--sb-radius);
    color: var(--sb-white);
    font-family: var(--sb-font-heading);
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--sb-transition), box-shadow var(--sb-transition);
}

.sbc-validate-checkin-btn:hover {
    background: #219A52;
    border-color: #219A52;
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.25);
}

.sbc-validate-checkin-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sbc-validate-already-checked {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 20px;
    background: rgba(11, 29, 46, 0.08);
    border-radius: var(--sb-radius);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sb-navy);
}

/* --- 24f. Print Styles for Tickets --- */

@media print {
    /* Hide site chrome */
    .site-header,
    .site-footer,
    .site-nav,
    .kadence-header,
    .kadence-footer,
    .admin-bar #wpadminbar,
    .sbc-ticket-print-btn,
    .sbc-ticket-actions,
    .brew-day-rsvp-box,
    .brew-day-whos-going,
    .brew-day-host-panel,
    nav,
    .comments-area {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .sbc-ticket-detail {
        padding: 0;
        max-width: 100%;
    }

    .sbc-ticket-detail-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .sbc-ticket-detail-info {
        border: 1px solid #ccc;
        box-shadow: none;
        padding: 20px;
    }

    .sbc-ticket-qr-panel {
        border: 1px solid #ccc;
        box-shadow: none;
        padding: 20px;
    }

    .sbc-ticket-qr-code,
    .sbc-ticket-qr-code img,
    .sbc-ticket-qr-code canvas,
    .sbc-ticket-qr-code svg {
        width: 250px !important;
        height: 250px !important;
    }

    .sbc-ticket-detail h1 {
        font-size: 1.4rem;
        margin-bottom: 16px;
    }

    a {
        color: #000 !important;
        text-decoration: none !important;
    }
}

/* =========================================================================
   Brew Buddy
   ========================================================================= */

/* --- Brew Buddy Badge (on member cards) --- */

.brew-buddy-badge {
    display: inline-block;
    background: #f5e6c8;
    color: #8b6914;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    margin-top: 6px;
    letter-spacing: 0.02em;
}

/* --- Seeking Badge (on brew day cards) --- */

.brew-buddy-seeking-badge {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-top: 6px;
    letter-spacing: 0.02em;
}

/* --- Brew Buddy Callout (single brew day) --- */

.brew-buddy-callout {
    background: #fffbeb;
    border-left: 4px solid #c9a84c;
    border-radius: var(--sb-radius);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.brew-buddy-callout h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: #92400e;
}

.brew-buddy-callout p {
    margin: 0 0 6px;
    color: var(--sb-slate);
    font-size: 0.95rem;
}

.brew-buddy-callout-text p {
    margin: 0;
    font-style: italic;
    color: var(--sb-slate);
}

/* --- Brew Buddy Team (host + buddy side by side) --- */

.brew-buddy-team {
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.brew-buddy-team h3 {
    margin: 0 0 16px;
    font-size: 1.05rem;
}

.brew-buddy-team-members {
    display: flex;
    gap: 16px;
}

.brew-buddy-team-member {
    flex: 1;
    text-align: center;
    padding: 12px;
    background: var(--sb-cream);
    border-radius: var(--sb-radius);
}

.brew-buddy-team-member strong {
    display: block;
    margin-bottom: 4px;
}

.brew-buddy-team-role {
    display: block;
    font-size: 0.8rem;
    color: var(--sb-slate);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Brew Buddy Board --- */

.brew-buddy-board {
    padding: 40px 0 0;
    text-align: center;
}

.brew-buddy-board .section-label {
    font-family: var(--sb-font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sb-amber);
    margin-bottom: 8px;
}

.brew-buddy-board h2 {
    margin: 0 0 8px;
}

.brew-buddy-board .section-lead {
    color: var(--sb-slate);
    font-size: 1rem;
    margin-bottom: 32px;
}

.brew-buddy-board-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}

@media (max-width: 900px) {
    .brew-buddy-board-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .brew-buddy-board-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Brew Buddy Card --- */

.brew-buddy-card {
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: box-shadow var(--sb-transition);
}

.brew-buddy-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.brew-buddy-card .member-name {
    font-size: 1.1rem;
    margin: 0 0 4px;
}

.brew-buddy-card .member-neighborhood {
    font-size: 0.9rem;
    color: var(--sb-slate);
    margin: 0;
}

.brew-buddy-card .member-experience-badge {
    align-self: flex-start;
}

.brew-buddy-card .member-styles {
    font-size: 0.9rem;
    color: var(--sb-navy);
    margin: 2px 0;
}

.brew-buddy-card-system {
    font-size: 0.85rem;
    color: var(--sb-slate);
    margin: 2px 0;
}

.brew-buddy-card-notes {
    font-style: italic;
    font-size: 0.85rem;
    color: var(--sb-slate);
    margin: 4px 0;
}

.brew-buddy-card .member-brew-stats {
    font-size: 0.8rem;
    color: var(--sb-slate);
    margin-top: 4px;
}

.brew-buddy-card .member-contact {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--sb-border);
}

/* --- Brew Buddy Mobile: Team layout --- */

@media (max-width: 600px) {
    .brew-buddy-team-members {
        flex-direction: column;
    }
}


/* ======================================================================
   STRAND ADDRESS MAP LINK
   Used by [strand_address] shortcode on Meetings, New to Club, Contact.
   ====================================================================== */

.strand-map-link {
    color: var(--sb-slate);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.strand-map-link:hover,
.strand-map-link:focus {
    color: var(--sb-amber);
    text-decoration: none;
}

.strand-map-link .strand-map-pin {
    margin-right: 2px;
}


/* ======================================================================
   MEETING MINUTES
   Archive listing, single page, form, filter bar, members-only gate
   ====================================================================== */

/* --- Members-Only Gate --- */

.minutes-members-only {
    padding: 60px 20px;
}

.minutes-members-only h1 {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
    margin-bottom: 12px;
}

.minutes-members-only p {
    color: var(--sb-slate);
    max-width: 500px;
    margin: 0 auto 16px;
}

/* --- Archive: Filter Bar --- */

.minutes-filter-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 32px;
    padding: 20px 24px;
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-radius: 12px;
}

.minutes-filter-bar select,
.minutes-filter-bar input[type="text"] {
    padding: 10px 14px;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    color: var(--sb-navy);
    flex: 1;
    min-width: 150px;
}

.minutes-filter-bar select:focus,
.minutes-filter-bar input:focus {
    border-color: var(--sb-amber);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.15);
}

.minutes-filter-bar .minutes-filter-clear {
    padding: 10px 20px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .minutes-filter-bar {
        flex-direction: column;
    }
    .minutes-filter-bar select,
    .minutes-filter-bar input[type="text"] {
        width: 100%;
    }
}

/* --- Archive: Year Groups --- */

.minutes-year-group {
    margin-bottom: 40px;
}

.minutes-year-header {
    font-family: var(--sb-font-heading);
    font-size: 2rem;
    letter-spacing: 2px;
    color: var(--sb-navy);
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sb-border);
}

/* --- Archive: Minutes Card --- */

.minutes-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 20px;
    margin-bottom: 8px;
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    text-decoration: none;
    color: var(--sb-text);
    transition: transform var(--sb-transition), box-shadow var(--sb-transition), background var(--sb-transition);
}

.minutes-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sb-shadow-hover);
    text-decoration: none;
    color: var(--sb-text);
}

.minutes-card-latest {
    background: var(--sb-cream);
    border-left-color: var(--sb-navy);
}

/* Override .entry-content a styles */
.entry-content a.minutes-card,
.entry-content a.minutes-card:hover {
    text-decoration: none;
}

/* --- Date Badge --- */

.minutes-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 8px 6px;
    background: var(--sb-navy);
    color: var(--sb-white);
    border-radius: var(--sb-radius);
    text-align: center;
    flex-shrink: 0;
}

.minutes-date-month {
    font-family: var(--sb-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--sb-amber);
}

.minutes-date-day {
    font-family: var(--sb-font-heading);
    font-size: 1.4rem;
    line-height: 1.1;
    letter-spacing: 0;
}

/* --- Card Body --- */

.minutes-card-body {
    flex: 1;
    min-width: 0;
}

.minutes-card-title {
    font-family: var(--sb-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--sb-navy);
    margin: 0 0 4px;
    line-height: 1.3;
}

.minutes-latest-badge {
    display: inline-block;
    font-family: var(--sb-font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    background: var(--sb-navy);
    color: var(--sb-white);
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 6px;
}

.minutes-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
}

.minutes-card-attendance {
    font-family: var(--sb-font-body);
    font-size: 0.82rem;
    color: var(--sb-slate);
}

.minutes-card-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.minutes-topic-tag {
    display: inline-block;
    font-family: var(--sb-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    background: rgba(212, 146, 11, 0.1);
    color: var(--sb-amber);
    border-radius: 10px;
    letter-spacing: 0.5px;
}

.minutes-card-excerpt {
    font-size: 0.85rem;
    color: var(--sb-slate);
    margin: 4px 0 0;
    line-height: 1.4;
}

.minutes-no-results {
    color: var(--sb-slate);
    font-size: 1rem;
    padding: 40px 0;
}

/* --- Archive: Pagination --- */

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

.minutes-pagination a,
.minutes-pagination span.current {
    display: inline-block;
    padding: 8px 14px;
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    border-radius: var(--sb-radius);
    text-decoration: none;
    transition: background var(--sb-transition), color var(--sb-transition);
}

.minutes-pagination a {
    color: var(--sb-navy);
    border: 1px solid var(--sb-border);
    background: var(--sb-white);
}

.minutes-pagination a:hover {
    background: var(--sb-navy);
    color: var(--sb-white);
    border-color: var(--sb-navy);
}

.minutes-pagination span.current {
    background: var(--sb-navy);
    color: var(--sb-white);
    border: 1px solid var(--sb-navy);
}

/* --- Single: Hero Meta --- */

.minutes-hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin-top: 8px;
    color: var(--sb-slate);
    font-size: 0.95rem;
}

.minutes-hero-meta span {
    display: inline-flex;
    align-items: center;
}

.minutes-hero-meta span::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--sb-amber);
    border-radius: 50%;
    margin-right: 8px;
}

.minutes-hero-meta span:first-child::before {
    display: none;
}

/* --- Single: Content Blocks --- */

.minutes-content {
    max-width: var(--sb-content-narrow);
    margin: 0 auto;
}

.minutes-block {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--sb-border);
}

.minutes-block:last-child {
    border-bottom: none;
}

.minutes-block-heading {
    font-family: var(--sb-font-heading);
    font-size: 1.6rem;
    letter-spacing: 1.5px;
    color: var(--sb-navy);
    margin: 0 0 16px;
}

/* --- Agenda Items --- */

.minutes-agenda-item {
    margin-bottom: 24px;
    padding-left: 16px;
    border-left: 3px solid var(--sb-amber);
}

.minutes-agenda-topic {
    font-family: var(--sb-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sb-navy);
    margin: 0 0 6px;
}

.minutes-agenda-number {
    color: var(--sb-amber);
    margin-right: 4px;
}

.minutes-agenda-discussion {
    font-size: 0.95rem;
    color: var(--sb-text);
    line-height: 1.6;
    margin-bottom: 6px;
}

.minutes-agenda-decision {
    font-size: 0.9rem;
    padding: 8px 12px;
    background: var(--sb-cream);
    border-radius: var(--sb-radius);
    color: var(--sb-navy);
}

/* --- Tables (Votes, Actions, Beers) --- */

.minutes-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
}

.minutes-table th {
    background: var(--sb-cream);
    color: var(--sb-navy);
    font-weight: 600;
    text-align: left;
    padding: 10px 14px;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.minutes-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--sb-border);
    color: var(--sb-text);
}

.minutes-table tbody tr:last-child td {
    border-bottom: none;
}

.minutes-table tbody tr:hover {
    background: rgba(245, 240, 232, 0.5);
}

.minutes-vote-result {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.minutes-vote-passed {
    background: rgba(46, 125, 50, 0.1);
    color: #2E7D32;
}

.minutes-vote-failed {
    background: rgba(198, 40, 40, 0.1);
    color: #C62828;
}

.minutes-vote-tabled {
    background: rgba(212, 146, 11, 0.1);
    color: var(--sb-amber);
}

/* --- Iron Brewer Callout --- */

.minutes-iron-brewer-callout {
    background: var(--sb-cream);
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    padding: 20px 24px;
    border-bottom: none;
}

.minutes-iron-brewer-callout .minutes-block-heading {
    margin-bottom: 10px;
}

.minutes-iron-brewer-content p {
    margin: 4px 0;
    font-size: 0.95rem;
}

/* --- Announcements --- */

.minutes-announcements-content {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.minutes-new-members h3 {
    font-family: var(--sb-font-display);
    font-size: 1rem;
    color: var(--sb-navy);
    margin: 12px 0 6px;
}

/* --- Next Meeting Preview --- */

.minutes-next-meeting {
    background: var(--sb-cream);
    border-radius: var(--sb-radius);
    padding: 20px 24px;
    border-bottom: none;
}

.minutes-next-meeting p {
    font-size: 0.95rem;
    color: var(--sb-text);
    margin: 0;
}

/* --- Photo Gallery --- */

.minutes-photo-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.minutes-photo-thumb {
    display: block;
    border-radius: var(--sb-radius);
    overflow: hidden;
    aspect-ratio: 1;
}

.minutes-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--sb-transition);
}

.minutes-photo-thumb:hover img {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .minutes-photo-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .minutes-photo-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Officer-Only Section --- */

.minutes-officer-only {
    background: #FFF8E1;
    border: 1px solid #FFE082;
    border-left: 4px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    padding: 20px 24px;
    margin-top: 32px;
    border-bottom: none;
}

.minutes-officer-label {
    display: inline-block;
    font-family: var(--sb-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 10px;
    background: var(--sb-amber);
    color: var(--sb-white);
    border-radius: 10px;
    margin-bottom: 12px;
}

.minutes-officer-notes h3,
.minutes-treasurer-report h3 {
    font-family: var(--sb-font-display);
    font-size: 1rem;
    color: var(--sb-navy);
    margin: 12px 0 6px;
}

.minutes-treasurer-report {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #FFE082;
}

/* --- Single: Navigation --- */

.minutes-nav {
    margin-top: 32px;
    padding-top: 24px;
    text-align: center;
}

/* --- Clubhouse: Latest Minutes Widget --- */

.strand-latest-minutes {
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-amber);
    border-radius: var(--sb-card-radius);
    padding: 20px 24px;
    box-shadow: var(--sb-shadow);
}

.latest-minutes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.latest-minutes-date {
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    color: var(--sb-slate);
}

.latest-minutes-attendance {
    font-size: 0.88rem;
    color: var(--sb-slate);
    margin: 0 0 10px;
}

.latest-minutes-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

/* --- Form Styles --- */

.strand-minutes-form {
    max-width: var(--sb-content-narrow);
    margin: 0 auto;
}

.strand-minutes-form label {
    display: block;
    font-weight: 600;
    color: var(--sb-navy);
    margin: 12px 0 5px;
    font-size: 0.9rem;
}

.strand-minutes-form input[type="text"],
.strand-minutes-form input[type="number"],
.strand-minutes-form input[type="date"],
.strand-minutes-form select,
.strand-minutes-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    background: var(--sb-white);
    color: var(--sb-text);
    transition: border-color var(--sb-transition), box-shadow var(--sb-transition);
}

.strand-minutes-form input:focus,
.strand-minutes-form select:focus,
.strand-minutes-form textarea:focus {
    border-color: var(--sb-amber);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 146, 11, 0.15);
}

.minutes-form-section {
    border: 1px solid var(--sb-border);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.minutes-form-section legend {
    font-family: var(--sb-font-heading);
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sb-navy);
    padding: 0 8px;
}

.minutes-form-row-1 {
    margin-bottom: 12px;
}

.minutes-form-row-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.minutes-form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

@media (max-width: 600px) {
    .minutes-form-row-2,
    .minutes-form-row-3 {
        grid-template-columns: 1fr;
    }
}

/* --- Form: Toggle --- */

.minutes-form-toggle {
    margin-bottom: 20px;
    padding: 16px 20px;
    background: var(--sb-cream);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
}

.minutes-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--sb-navy);
    font-weight: 600;
    margin: 0 !important;
}

.minutes-toggle-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--sb-amber);
}

.minutes-toggle-label small {
    font-weight: 400;
    color: var(--sb-slate);
    font-size: 0.82rem;
}

/* --- Form: Repeater Rows --- */

.minutes-repeater-row {
    padding: 12px 16px;
    margin-bottom: 8px;
    background: rgba(245, 240, 232, 0.3);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
}

.minutes-remove-row {
    margin-top: 8px;
    font-size: 0.78rem !important;
    padding: 4px 12px !important;
    color: #C62828 !important;
    border-color: #C62828 !important;
}

.minutes-remove-row:hover {
    background: #C62828 !important;
    color: var(--sb-white) !important;
}

.minutes-add-row {
    margin-top: 8px;
    font-size: 0.82rem !important;
}

/* --- Form: Officer Section --- */

.minutes-officer-section {
    border-color: #FFE082;
    background: #FFFCF0;
}

.minutes-officer-notice {
    font-size: 0.82rem;
    color: var(--sb-amber);
    font-weight: 600;
    margin: 0 0 8px;
}

/* --- Form: File Input --- */

.minutes-file-input {
    display: block;
    margin: 6px 0;
    padding: 12px;
    border: 2px dashed var(--sb-border);
    border-radius: var(--sb-radius);
    width: 100%;
    cursor: pointer;
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    color: var(--sb-slate);
}

.minutes-file-input:hover {
    border-color: var(--sb-amber);
}

/* --- Form: Submit --- */

.minutes-form-submit {
    margin-top: 24px;
    text-align: center;
}

/* --- Form: Error --- */

.sbc-form-error {
    padding: 12px 16px;
    margin-bottom: 20px;
    background: rgba(198, 40, 40, 0.08);
    border: 1px solid rgba(198, 40, 40, 0.2);
    border-radius: var(--sb-radius);
    color: #C62828;
    font-size: 0.9rem;
}

/* --- Form: Gate --- */

.strand-form-gate {
    text-align: center;
    padding: 40px 20px;
    color: var(--sb-slate);
}

/* --- Responsive: Archive Cards --- */

@media (max-width: 600px) {
    .minutes-card {
        flex-direction: column;
        gap: 10px;
    }
    .minutes-date-badge {
        flex-direction: row;
        gap: 6px;
        min-width: auto;
        padding: 6px 12px;
    }
}

/* ======================================================================
   BREWING 101 PAGE
   Ingredient cards, process timeline steps, reason cards
   ====================================================================== */

/* -- Ingredient Cards (2x2 grid) -- */
.brewing101-ingredients-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 32px;
}

.brewing101-ingredient-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    color: var(--sb-amber);
}

.brewing101-ingredient-card {
    background: var(--sb-cream);
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-amber);
    border-radius: var(--sb-card-radius);
    padding: 24px 28px;
    box-shadow: var(--sb-shadow);
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.brewing101-ingredient-card .brewing101-ingredient-text h3 {
    margin-top: 0;
}

@media (max-width: 480px) {
    .brewing101-ingredient-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .brewing101-ingredient-icon {
        margin-bottom: 8px;
    }
}

.brewing101-ingredient-card:hover {
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-3px);
}

.brewing101-ingredient-card h3 {
    font-family: var(--sb-font-heading);
    font-size: 26px;
    color: var(--sb-navy);
    margin-top: 0;
    margin-bottom: 12px;
    letter-spacing: 1.5px;
}

.brewing101-ingredient-card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--sb-text);
    margin-bottom: 0;
}

/* -- Brewing Process Timeline Steps -- */
.brewing101-steps {
    margin-top: 32px;
}

.brewing101-step {
    display: flex;
    gap: 24px;
    margin-bottom: 28px;
    align-items: flex-start;
}

.brewing101-step:last-child {
    margin-bottom: 0;
}

.brewing101-step-number {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--sb-amber);
    color: var(--sb-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sb-font-heading);
    font-size: 1.4rem;
    letter-spacing: 0;
    line-height: 1;
    margin-top: 2px;
}

.brewing101-step-content {
    flex: 1;
}

.brewing101-step-content h3 {
    font-family: var(--sb-font-heading);
    font-size: 24px;
    color: var(--sb-navy);
    margin-top: 0;
    margin-bottom: 8px;
    letter-spacing: 1.5px;
}

.brewing101-step-content p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 0;
}

.brewing101-step-note {
    font-family: var(--sb-font-body);
    font-size: 13px;
    color: var(--sb-slate);
    font-weight: 400;
    letter-spacing: 0;
}

/* -- Why Homebrew Reason Cards (2-col grid) -- */
.brewing101-reasons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 32px;
}

.brewing101-reason-card {
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    padding: 28px 28px;
    box-shadow: var(--sb-shadow);
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
}

.brewing101-reason-card:hover {
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-2px);
}

.brewing101-reason-card h3 {
    font-family: var(--sb-font-heading);
    font-size: 22px;
    color: var(--sb-navy);
    margin-top: 0;
    margin-bottom: 8px;
    letter-spacing: 1.5px;
}

.brewing101-reason-card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--sb-text);
    margin-bottom: 0;
}

/* -- Brewing 101 Responsive -- */
@media (max-width: 900px) {
    .brewing101-ingredients-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .brewing101-ingredients-grid {
        grid-template-columns: 1fr;
    }
    .brewing101-reasons-grid {
        grid-template-columns: 1fr;
    }
    .brewing101-step {
        gap: 16px;
    }
    .brewing101-step-number {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }
    .brewing101-step-content h3 {
        font-size: 20px;
    }
}

/* ==========================================================================
   MEMBER DIRECTORY REDESIGN — mc- prefixed card styles (Phase 1-2)
   ========================================================================== */

/* ---- Full card base ---- */
.member-card--full {
    background: #FFFFFF;
    border: 1px solid #E8E4DD;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
    min-width: 0;
}

.member-card--full:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

/* ---- Officer modifier ---- */
.member-card--officer {
    border-top: 3px solid #D4920B;
}

.member-card--officer .mc-avatar {
    width: 96px;
    height: 96px;
}

.member-card--officer .mc-avatar-img {
    width: 96px;
    height: 96px;
}

.member-card--officer .mc-avatar-initials {
    width: 96px;
    height: 96px;
    font-size: 1.6rem;
    line-height: 96px;
}

/* ---- Self modifier — navy left border ---- */
.member-card--self {
    border-left: 3px solid #0B1D2E;
}

/* ---- Buddy modifier — subtle green left border ---- */
.member-card--buddy {
    border-left: 3px solid #2E7D32;
}

/* Self + buddy: navy takes priority (already has left border from self) */
.member-card--self.member-card--buddy {
    border-left: 3px solid #0B1D2E;
}

/* ---- Hosting modifier ---- */
.member-card--hosting {
    /* visual indicator via the hosting banner at bottom */
}

/* ---- Shadow card ---- */
.member-card--shadow {
    background: #F5F0E8;
    border: 2px dashed #D4C9B5;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

/* No hover lift for shadow cards */
.member-card--shadow:hover {
    box-shadow: none;
    transform: none;
}

/* ---- Minimal card ---- */
.member-card--minimal {
    background: #FFFFFF;
    border: 1px solid #E8E4DD;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.member-card--minimal:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.mc-minimal-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.member-card--minimal .mc-name {
    font-size: 1rem;
    margin: 0;
    text-align: left;
}

.member-card--minimal .officer-contact-btn {
    flex-shrink: 0;
}

/* ---- Inactive modifier ---- */
.member-card--inactive {
    opacity: 0.6;
    background: #FAFAF8;
    border: 1px solid #E8E4DD;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

.member-card--inactive:hover {
    opacity: 0.75;
    transform: none;
}

.member-card--inactive .mc-minimal-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.member-card--inactive .mc-name {
    font-size: 1rem;
    margin: 0;
    text-align: left;
}

/* ---- Header (avatar + name + location) ---- */
.mc-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

/* ---- Avatar ---- */
.mc-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 4px;
    flex-shrink: 0;
}

.mc-avatar--small {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.mc-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #E8E4DD;
}

.mc-avatar--small .mc-avatar-img {
    width: 36px;
    height: 36px;
    border-width: 1px;
}

.mc-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #0B1D2E;
    color: #FFFFFF;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 1px;
    line-height: 1;
}

.mc-avatar--small .mc-avatar-initials {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
}

/* Shadow avatar */
.mc-avatar-shadow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #3A4A5C;
    color: #FFFFFF;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    line-height: 1;
}

/* ---- Name ---- */
.mc-name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #0B1D2E;
    margin: 0 0 2px;
    line-height: 1.3;
}

/* ---- Officer ribbon ---- */
.mc-officer-ribbon {
    display: inline-block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: #D4920B;
    color: #FFFFFF;
    padding: 3px 14px;
    border-radius: 4px;
    margin: 4px 0 2px;
}

/* ---- Location ---- */
.mc-location {
    color: #5E6E7E;
    font-size: 0.85rem;
    margin: 0;
}

/* ---- Badges ---- */
.mc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: 8px 0;
}

.mc-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Experience level color coding */
.mc-badge--beginner {
    background: #E8F5E9;
    color: #2E7D32;
}

.mc-badge--intermediate {
    background: #FFF3E0;
    color: #E65100;
}

.mc-badge--advanced {
    background: #E3F2FD;
    color: #1565C0;
}

.mc-badge--expert {
    background: #F3E5F5;
    color: #7B1FA2;
}

.mc-badge--brew-buddy {
    background: #C8E6C9;
    color: #1B5E20;
    border: 1px solid #A5D6A7;
    font-weight: 700;
}

/* ---- Details section ---- */
.mc-details {
    margin: 8px 0;
    text-align: center;
}

.mc-brewing-since {
    color: #5E6E7E;
    font-size: 0.82rem;
    margin: 0 0 6px;
}

/* Style pills */
.mc-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin: 6px 0;
}

.mc-style-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 0.72rem;
    color: #D4920B;
    border: 1px solid #D4920B;
    border-radius: 12px;
    white-space: nowrap;
}

/* Bio — 3-line clamp */
.mc-bio {
    font-size: 0.85rem;
    color: #3A4A5C;
    line-height: 1.5;
    margin: 6px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Stats block ---- */
.mc-stats {
    display: flex;
    flex-direction: row;
    background: #FAF8F2;
    border-radius: 8px;
    padding: 10px 0;
    margin: 12px 0 8px;
    gap: 0;
}

.mc-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}

.mc-stat + .mc-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: #E8E4DD;
}

.mc-stat-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    color: #0B1D2E;
    line-height: 1;
}

.mc-stat-label {
    font-size: 0.68rem;
    color: #8A9BAE;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---- Hosting banner ---- */
a.mc-hosting-banner,
.entry-content a.mc-hosting-banner {
    display: block;
    width: calc(100% + 48px);
    margin: 16px -24px -28px;
    padding: 10px 24px;
    background: var(--sb-amber);
    color: var(--sb-navy) !important;
    font-family: var(--sb-font-heading);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s;
    border-radius: 0 0 12px 12px;
}

a.mc-hosting-banner:hover,
.entry-content a.mc-hosting-banner:hover {
    background: var(--sb-navy);
    color: var(--sb-amber) !important;
    filter: none;
    text-decoration: none;
}

/* ---- Contact area ---- */
.mc-contact {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #E8E4DD;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mc-contact-link {
    color: #0B1D2E;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    word-break: break-all;
}

.mc-contact-link:hover {
    color: #D4920B;
}

.mc-contact-icon {
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* Edit profile button (self card) */
.mc-edit-profile-btn {
    display: inline-block;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #D4920B;
    border: 2px solid #D4920B;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s, color 0.2s;
    margin-top: 4px;
}

.mc-edit-profile-btn:hover {
    background: #D4920B;
    color: #FFFFFF;
}

/* ---- Shadow card text ---- */
.mc-shadow-tagline {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-style: italic;
    color: #5E6E7E;
    margin: 0;
}

.mc-shadow-text {
    font-size: 0.82rem;
    color: #8A9BAE;
    margin: 0;
    line-height: 1.4;
}

/* ---- Shadow section label ---- */
.shadow-section-label {
    color: #5E6E7E;
}

/* ---- Shadow grid — denser ---- */
.shadow-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 1100px) {
    .shadow-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .shadow-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ---- Officer grid — wider cards, more gap ---- */
.officer-grid {
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    gap: 28px;
}

.officer-grid .member-card--full {
    padding: 32px 28px;
}

@media (max-width: 960px) {
    .officer-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width: 600px) {
    .officer-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* ---- Shadow section styling ---- */
.directory-section-shadow {
    margin-top: 24px;
}

/* ---- Inactive member label (Phase 3) ---- */
.mc-inactive-label {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    color: #8A9BAE;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---- Profile completion nudge (Phase 3) ---- */
.mc-profile-nudge {
    background: #FFF8E1;
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 8px;
    text-align: center;
}

.mc-profile-nudge a {
    color: #D4920B;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

.mc-profile-nudge a:hover {
    text-decoration: underline;
}

/* ---- Stats hover for linked values (Phase 3) ---- */
.mc-stat-value a {
    color: #0B1D2E;
    text-decoration: none;
    transition: color 0.2s;
}

.mc-stat-value a:hover {
    color: #D4920B;
}

/* ---- Minimal cards stay horizontal on mobile (Phase 3) ---- */
@media (max-width: 600px) {
    .member-card--minimal {
        flex-direction: row;
        padding: 10px 12px;
    }

    .member-card--inactive {
        flex-direction: row;
        padding: 10px 12px;
    }

    /* Stats wrap gracefully on narrow cards */
    .mc-stats {
        flex-wrap: wrap;
    }

    .mc-stat {
        min-width: 60px;
    }
}

/* ---- Responsive overrides for redesigned cards ---- */
@media (max-width: 600px) {
    .member-card--full {
        padding: 16px;
    }

    .mc-hosting-banner {
        width: calc(100% + 32px);
        margin: 12px -16px -16px;
        padding: 8px 16px;
    }

    .mc-stats {
        padding: 8px 0;
    }

    .mc-stat-value {
        font-size: 1rem;
    }
}


/* ======================================================================
   25. WATER PROFILES — South Bay Water Data Page
   Comparison table, city detail cards, data quality badges,
   action buttons, minerals grid, educational callouts.
   ====================================================================== */

/* Water page: wider content to fit comparison table without scrolling */
body.page-id-911 .strand-section-inner,
body.page-id-911 .entry-content-wrap,
body.page-id-911 .entry-content {
    max-width: 1400px;
}

/* --- 25a. Data Freshness Notice --- */

.water-data-notice {
    background-color: var(--sb-cream);
    border-left: 4px solid var(--sb-amber);
    padding: 12px 20px;
    margin-bottom: 32px;
    border-radius: 0 var(--sb-radius) var(--sb-radius) 0;
    font-size: 0.88rem;
    font-style: italic;
    color: var(--sb-slate);
    line-height: 1.5;
}

.water-data-notice strong {
    color: var(--sb-navy);
    font-style: normal;
}


/* --- 25b. Comparison Table --- */

.water-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 32px;
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow);
}

.water-comparison-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-family: var(--sb-font-body);
    font-size: 0.92rem;
    background: var(--sb-white);
}

.water-comparison-table thead th {
    background-color: var(--sb-navy);
    color: var(--sb-cream);
    font-family: var(--sb-font-heading);
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 14px 16px;
    text-align: center;
    white-space: nowrap;
    position: relative;
}

.water-comparison-table thead th:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--sb-navy);
}

.water-comparison-table tbody th {
    text-align: left;
    font-family: var(--sb-font-body);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--sb-navy);
    padding: 12px 16px;
    background: var(--sb-white);
    white-space: nowrap;
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 2px solid var(--sb-border);
}

.water-comparison-table tbody td {
    text-align: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sb-border);
    font-variant-numeric: tabular-nums;
}

.water-comparison-table tbody tr:nth-child(even) td,
.water-comparison-table tbody tr:nth-child(even) th {
    background-color: #FAFAF5;
}

.water-comparison-table tbody tr:nth-child(even) th {
    background-color: #F5F3EE;
}

.water-comparison-table tbody tr:hover td {
    background-color: #FFF8E7;
}

.water-comparison-table tbody tr:last-child td,
.water-comparison-table tbody tr:last-child th {
    border-bottom: none;
}

/* SO4:Cl ratio row */
.water-comparison-table .water-ratio-row td,
.water-comparison-table .water-ratio-row th {
    border-top: 2px solid var(--sb-amber);
    font-weight: 600;
}

.water-comparison-table .water-ratio-row td {
    font-size: 0.85rem;
}

/* Color-coded value cells */
.water-val-good {
    background-color: #E8F5E9 !important;
    color: #1B5E20;
}

.water-val-ok {
    background-color: #FFF3E0 !important;
    color: #E65100;
}

.water-val-high {
    background-color: #FFEBEE !important;
    color: #C0392B;
}

/* Ratio interpretation labels */
.water-ratio-malty {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6D4C41;
    background: #EFEBE9;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 2px;
}

.water-ratio-balanced {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1B5E20;
    background: #E8F5E9;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 2px;
}

.water-ratio-hoppy {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #E65100;
    background: #FFF3E0;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 2px;
}


/* --- 25c. City Detail Cards --- */

.water-city-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.water-city-card {
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-card-radius);
    box-shadow: var(--sb-shadow);
    overflow: hidden;
    transition: box-shadow var(--sb-transition);
}

.water-city-card:hover {
    box-shadow: var(--sb-shadow-hover);
}

.water-city-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--sb-transition);
}

.water-city-card-header:hover {
    background-color: #FAFAF5;
}

.water-city-card-header h3 {
    font-family: var(--sb-font-heading);
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    color: var(--sb-navy);
    margin: 0;
    flex: 1;
}

.water-city-card-header .water-quality-badge {
    margin-left: 12px;
    flex-shrink: 0;
}

.water-city-card-toggle {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    color: var(--sb-slate);
    transition: transform var(--sb-transition);
    flex-shrink: 0;
    font-size: 1.1rem;
}

.water-city-card.is-expanded .water-city-card-toggle {
    transform: rotate(180deg);
}

.water-city-card-summary {
    display: flex;
    gap: 16px;
    padding: 0 24px 16px;
    font-size: 0.85rem;
    color: var(--sb-slate);
}

.water-city-card-summary span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.water-city-card-summary strong {
    color: var(--sb-navy);
}

.water-city-card-details {
    display: none;
    padding: 0 24px 24px;
    border-top: 1px solid var(--sb-border);
}

.water-city-card.is-expanded .water-city-card-details {
    display: block;
}

.water-city-card-details .water-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #F0EDE6;
    font-size: 0.9rem;
}

.water-city-card-details .water-detail-row:last-child {
    border-bottom: none;
}

.water-detail-label {
    color: var(--sb-slate);
    font-weight: 500;
}

.water-detail-value {
    color: var(--sb-navy);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.water-city-card-details .water-detail-section {
    margin-top: 16px;
}

.water-city-card-details .water-detail-section h4 {
    font-family: var(--sb-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sb-amber);
    margin: 0 0 8px;
}

.water-city-card-ions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.water-city-card-ions .water-ion {
    padding: 12px 8px;
}

.water-city-card-notes {
    font-size: 0.88rem;
    color: var(--sb-slate);
    font-style: italic;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sb-border);
    line-height: 1.6;
}

.water-city-card-ccr {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--sb-amber-accessible);
    text-decoration: none;
    margin-top: 8px;
    font-weight: 500;
}

.water-city-card-ccr:hover {
    color: var(--sb-amber-hover);
    text-decoration: underline;
}

.water-city-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--sb-border);
}


/* --- 25d. Action Buttons --- */

.water-copy-btn,
.water-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-family: var(--sb-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sb-amber);
    background: transparent;
    border: 1.5px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    cursor: pointer;
    transition: all var(--sb-transition);
    white-space: nowrap;
}

.water-copy-btn:hover,
.water-download-btn:hover {
    background: var(--sb-amber);
    color: var(--sb-white);
}

.water-copy-btn:active,
.water-download-btn:active {
    transform: scale(0.97);
}

.water-copy-btn.is-copied {
    background: #27AE60;
    border-color: #27AE60;
    color: var(--sb-white);
    pointer-events: none;
}


/* --- 25e. Data Quality Badges --- */

.water-quality-badge {
    display: inline-block;
    font-family: var(--sb-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    line-height: 1.3;
}

.water-quality-complete {
    background-color: #E8F5E9;
    color: #27AE60;
}

.water-quality-partial {
    background-color: #FFF3E0;
    color: #E65100;
}

.water-quality-estimated {
    background-color: #ECEFF1;
    color: var(--sb-slate);
}


/* --- 25f. Minerals Education Grid --- */

.water-minerals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 32px 0;
}

.water-mineral-card {
    background: var(--sb-white);
    border: 1px solid var(--sb-border);
    border-left: 4px solid var(--sb-amber);
    border-radius: var(--sb-radius);
    padding: 24px;
    box-shadow: var(--sb-shadow);
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
}

.water-mineral-card:hover {
    box-shadow: var(--sb-shadow-hover);
    transform: translateY(-2px);
}

.water-mineral-card h3 {
    font-family: var(--sb-font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    color: var(--sb-navy);
    margin: 0 0 4px;
}

.water-mineral-card .water-mineral-range {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--sb-amber);
    margin: 0 0 12px;
    display: block;
}

.water-mineral-card p {
    font-size: 0.9rem;
    color: var(--sb-slate);
    line-height: 1.6;
    margin: 0;
}


/* --- 25g. Famous Water Profiles & Salts Tables --- */

.water-famous-table,
.water-salts-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    background: var(--sb-white);
    border-radius: var(--sb-radius);
    overflow: hidden;
    box-shadow: var(--sb-shadow);
    margin: 24px 0;
}

.water-famous-table thead th,
.water-salts-table thead th {
    background-color: var(--sb-navy);
    color: var(--sb-cream);
    font-family: var(--sb-font-heading);
    font-size: 0.92rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 12px 16px;
    text-align: center;
    white-space: nowrap;
}

.water-famous-table thead th:first-child,
.water-salts-table thead th:first-child {
    text-align: left;
}

.water-famous-table tbody td,
.water-salts-table tbody td {
    padding: 10px 16px;
    text-align: center;
    border-bottom: 1px solid var(--sb-border);
    font-variant-numeric: tabular-nums;
}

.water-famous-table tbody td:first-child,
.water-salts-table tbody td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--sb-navy);
}

.water-famous-table tbody tr:nth-child(even),
.water-salts-table tbody tr:nth-child(even) {
    background-color: #FAFAF5;
}

.water-famous-table tbody tr:hover,
.water-salts-table tbody tr:hover {
    background-color: #FFF8E7;
}

.water-famous-table tbody tr:last-child td,
.water-salts-table tbody tr:last-child td {
    border-bottom: none;
}


/* --- 25h. Chloramine Warning Callout --- */

.water-chloramine-callout {
    background: #FFF8E1;
    border: 1px solid #FFE082;
    border-left: 4px solid var(--sb-amber);
    border-radius: 0 var(--sb-radius) var(--sb-radius) 0;
    padding: 24px 28px;
    margin: 32px 0;
}

.water-chloramine-callout h3 {
    font-family: var(--sb-font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    color: #E65100;
    margin: 0 0 8px;
}

.water-chloramine-callout p {
    font-size: 0.92rem;
    color: var(--sb-text);
    line-height: 1.7;
    margin: 0 0 8px;
}

.water-chloramine-callout p:last-child {
    margin-bottom: 0;
}

.water-chloramine-callout strong {
    color: var(--sb-navy);
}


/* --- 25i. Ward Labs Test CTA --- */

.water-test-cta {
    background-color: var(--sb-cream);
    border-left: 4px solid var(--sb-amber);
    border-radius: 0 var(--sb-radius) var(--sb-radius) 0;
    padding: 28px 32px;
    margin: 40px 0;
}

.water-test-cta h3 {
    font-family: var(--sb-font-heading);
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    color: var(--sb-navy);
    margin: 0 0 8px;
}

.water-test-cta p {
    font-size: 0.92rem;
    color: var(--sb-text);
    line-height: 1.7;
    margin: 0 0 16px;
}

.water-test-cta .btn-primary,
.water-test-cta .btn-secondary {
    margin-top: 4px;
}


/* --- 25j. Water Profiles Responsive --- */

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

    .water-city-cards {
        grid-template-columns: 1fr;
    }

    .water-city-card-ions {
        grid-template-columns: repeat(4, 1fr);
    }

    .water-city-card-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .water-minerals-grid {
        grid-template-columns: 1fr;
    }

    .water-city-card-header {
        padding: 16px 18px;
    }

    .water-city-card-summary {
        flex-wrap: wrap;
        padding: 0 18px 12px;
        gap: 8px;
    }

    .water-city-card-details {
        padding: 0 18px 18px;
    }

    .water-city-card-ions {
        grid-template-columns: repeat(3, 1fr);
    }

    .water-city-card-actions {
        flex-direction: column;
    }

    .water-copy-btn,
    .water-download-btn {
        justify-content: center;
        width: 100%;
    }

    .water-comparison-table {
        font-size: 0.82rem;
    }

    .water-comparison-table thead th {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .water-comparison-table tbody td,
    .water-comparison-table tbody th {
        padding: 8px 12px;
    }

    .water-famous-table,
    .water-salts-table {
        font-size: 0.82rem;
    }

    .water-famous-table thead th,
    .water-salts-table thead th {
        padding: 10px 12px;
        font-size: 0.82rem;
    }

    .water-famous-table tbody td,
    .water-salts-table tbody td {
        padding: 8px 12px;
    }

    .water-data-notice {
        padding: 10px 16px;
        font-size: 0.82rem;
    }

    .water-chloramine-callout {
        padding: 18px 20px;
    }

    .water-test-cta {
        padding: 20px 22px;
    }
}