/*
Theme Name: FLSSAR Classic
Description: Florida Society SAR custom theme with hamburger menu
Version: 1.0
*/

/* FLSSAR - Florida Society Sons of the American Revolution */
:root {
  --navy: #002868;
  --red: #BF0A30;
  --gold: #C5A55A;
  --cream: #FAF3E0;
  --dark: #1a1a2e;
  --white: #ffffff;
  --gray: #f5f5f5;
  --text: #333333;
}

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

body {
  font-family: "Georgia", "Times New Roman", serif;
  color: var(--text);
  background: var(--cream);
  line-height: 1.6;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--red); text-decoration: underline; }

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

/* Header */
.site-header {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 1rem 1rem 0;
}

.header-top {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
}

.header-top img { width: 100px; height: auto; }

.header-titles h1 {
  color: #fff;
  font-size: 1.8rem;
  font-family: "Georgia", serif;
  letter-spacing: 1px;
  margin: 0;
}

.header-titles p {
  font-size: 0.95rem;
  color: var(--gold);
  font-style: italic;
  margin: 0;
}

.join-btn {
  display: inline-block;
  background: var(--red);
  color: var(--white) !important;
  padding: 0.5rem 1.2rem;
  border-radius: 4px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
}
.join-btn:hover { background: #9b0826; color: var(--white) !important; text-decoration: none; }

/* Navigation Bar */
.nav-bar {
  background: var(--dark);
  border-top: 3px solid var(--gold);
  position: relative;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.top-nav > li > a {
  display: block;
  color: var(--white);
  padding: 0.75rem 1.2rem;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 3px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

.top-nav > li > a:hover,
.top-nav > li > a.active {
  border-bottom-color: var(--gold);
  color: var(--gold);
  text-decoration: none;
}

/* Hamburger button */
.hamburger {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.75rem 1.2rem;
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hamburger:hover { color: var(--gold); }

.hamburger-label {
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hamburger-icon span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s, opacity 0.3s;
}

.hamburger.open .hamburger-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open .hamburger-icon span:nth-child(2) { opacity: 0; }
.hamburger.open .hamburger-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Slide-out menu */
.side-menu {
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  height: 100%;
  background: var(--dark);
  z-index: 999;
  overflow-y: auto;
  transition: right 0.3s ease;
  box-shadow: -2px 0 8px rgba(0,0,0,0.3);
}

.side-menu.open { right: 0; }

.side-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 998;
}

.side-menu-overlay.open { display: block; }

.side-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  border-bottom: 2px solid var(--gold);
}

.side-menu-header h3 {
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.side-menu-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
}

.side-menu-close:hover { color: var(--gold); }

.side-menu-group { padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); }

.side-menu-group-title {
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.5rem 1.2rem;
}

.side-menu-group ul { list-style: none; margin: 0; padding: 0; }

.side-menu-group a {
  display: block;
  color: var(--white);
  padding: 0.5rem 1.2rem 0.5rem 1.8rem;
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  transition: background 0.2s;
}

.side-menu-group a:hover,
.side-menu-group a.active {
  background: rgba(255,255,255,0.08);
  color: var(--gold);
  text-decoration: none;
}

/* Main content */
main, .site-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  min-height: 60vh;
}

.page-title, .entry-title {
  font-family: "Georgia", serif;
  font-size: 1.8rem;
  color: var(--navy);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Home page - hide title */
.home .entry-title,
.home .page-title { display: none; }

/* Hero section */
.hero {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 3rem 1rem;
  margin: -2rem -1rem 2rem;
}

.hero h2 { font-size: 2rem; font-family: "Georgia", serif; margin-bottom: 0.5rem; }
.hero p { color: var(--gold); font-size: 1.1rem; margin: 0; }

/* Photo grid */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.photo-grid img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border: 3px solid var(--navy);
  border-radius: 4px;
}

/* Content sections */
.content-section {
  background: var(--white);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  border-left: 4px solid var(--navy);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.content-section h3 {
  color: var(--navy);
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
}

/* WordPress content styling */
.entry-content h2, .entry-content h3 {
  color: var(--navy);
  margin: 1.5rem 0 0.75rem;
}

.entry-content p { margin-bottom: 1rem; }

.entry-content ul, .entry-content ol {
  margin: 1rem 0 1rem 2rem;
}

/* Footer */
.site-footer {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 1.5rem 1rem;
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  margin-top: 2rem;
}

.site-footer p { margin: 0.25rem 0; }
.site-footer a { color: var(--gold); }
.site-footer a:hover { color: var(--white); }

/* Responsive */
@media (max-width: 768px) {
  .header-top { flex-direction: column; }
  .header-titles h1 {
  color: #fff; font-size: 1.3rem; }
  .top-nav { display: none; }
  .hamburger-label { display: none; }
  .nav-container { justify-content: flex-end; }
  .hero h2 { font-size: 1.5rem; }
}

/* ==========================================================================
   MEMBER LOGIN - Multiple Locations for Accessibility
   ========================================================================== */

/* Header buttons container */
.header-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Login button in header - styled prominently */
.login-btn {
  display: inline-block;
  background: var(--gold);
  color: var(--dark) !important;
  padding: 0.5rem 1.2rem;
  border-radius: 4px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  text-decoration: none !important;
}

.login-btn:hover {
  background: #d4b86a;
  color: var(--dark) !important;
  text-decoration: none !important;
}

/* Login link in nav bar - highlighted */
.top-nav .nav-login {
  background: var(--gold) !important;
  color: var(--dark) !important;
  border-radius: 3px;
  margin: 0.3rem 0;
}

.top-nav .nav-login:hover {
  background: #d4b86a !important;
  color: var(--dark) !important;
  border-bottom-color: transparent !important;
}

/* Side menu login section - very prominent */
.side-menu-login {
  background: var(--gold);
  padding: 0 !important;
  /* See the note on the later rule: this section is now first, so the absence of
     a bottom border no longer makes sense. */
  border-bottom: 2px solid rgba(201, 162, 39, 0.4) !important;
}

.side-menu-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--dark) !important;
  padding: 1rem 1.2rem !important;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none !important;
}

.side-menu-login-btn:hover {
  background: #d4b86a;
  color: var(--dark) !important;
  text-decoration: none !important;
}

.login-icon {
  font-size: 1.2rem;
}

/* Footer login link */
.footer-login {
  display: block;
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: bold;
}

.footer-login a {
  color: var(--gold) !important;
  text-decoration: underline;
}

.footer-login a:hover {
  color: var(--white) !important;
}

/* Responsive - ensure login visible on mobile */
@media (max-width: 768px) {
  .header-buttons {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .login-btn, .join-btn {
    width: 100%;
    text-align: center;
  }
  
  /* Make side menu login even more prominent on mobile */
  .side-menu-login-btn {
    font-size: 1.1rem;
    padding: 1.2rem 1.2rem !important;
  }
}

/* ==========================================================================
   CUSTOM MEMBER LOGIN FORM
   ========================================================================== */

.member-login-form {
  background: var(--white);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border-left: 4px solid var(--navy);
  max-width: 400px;
  margin: 2rem auto;
}

.member-login-form .login-field {
  margin-bottom: 1.5rem;
}

.member-login-form label {
  display: block;
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: var(--navy);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.member-login-form input.input {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-family: Arial, sans-serif;
}

.member-login-form input.input:focus {
  border-color: var(--navy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 40, 104, 0.1);
}

.member-login-form .login-submit {
  margin-top: 1.5rem;
}

.member-login-form input[type="submit"] {
  width: 100%;
  padding: 0.875rem;
  font-size: 1.1rem;
  font-weight: bold;
  font-family: Arial, sans-serif;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.member-login-form input[type="submit"]:hover {
  background: #9b0826;
}

/* Style the password reset links */
.entry-content a[href*="lostpassword"] {
  color: var(--navy);
  text-decoration: underline;
}

.entry-content a[href*="lostpassword"]:hover {
  color: var(--red);
}

/* ==========================================================================
   TYPOGRAPHY - Consistent sizing across all pages
   ========================================================================== */

/* Page titles */
.entry-title, .page-title {
  font-size: 2rem !important;
  font-family: "Georgia", serif;
  color: var(--navy);
  margin-bottom: 1.5rem;
}

/* Main headings */
h1, .wp-block-heading:where(h1) {
  font-size: 2rem;
  font-family: "Georgia", serif;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 1rem;
}

h2, .wp-block-heading:where(h2) {
  font-size: 1.5rem;
  font-family: "Georgia", serif;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
}

h3, .wp-block-heading:where(h3) {
  font-size: 1.25rem;
  font-family: "Georgia", serif;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

h4, .wp-block-heading:where(h4) {
  font-size: 1.1rem;
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

/* Body text */
p, .entry-content p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  font-family: "Georgia", serif;
}

/* Lists */
ul, ol {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   TABLE AND COLUMN FIXES - Prevent text overlap
   ========================================================================== */

/* WordPress columns - ensure proper spacing */
.wp-block-columns {
  gap: 2rem !important;
}

.wp-block-column {
  min-width: 0; /* Prevent flex items from overflowing */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Tables */
table, .wp-block-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

table td, table th,
.wp-block-table td, .wp-block-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #ddd;
}

table td:first-child,
.wp-block-table td:first-child {
  padding-right: 2rem; /* Extra spacing between columns */
  max-width: 50%;
}

/* Two-column lists (like officers/committees) */
.wp-block-columns.is-layout-flex {
  flex-wrap: wrap;
}

.wp-block-columns .wp-block-column {
  padding-right: 1.5rem;
}

/* Responsive columns - stack on mobile */
@media (max-width: 768px) {
  .wp-block-columns {
    flex-direction: column !important;
  }
  
  .wp-block-column {
    flex-basis: 100% !important;
    padding-right: 0;
  }
  
  table td:first-child {
    max-width: 100%;
  }
}

/* ==========================================================================
   HERO SECTION STYLES
   ========================================================================== */

.hero-banner {
  background-image: url(/wp-content/uploads/2026/08/fl-ribbon-cuttting.jpg);
  background-size: cover;
  background-position: center;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: -2rem -1rem 2rem -1rem;
}

.hero-banner::before {
  content: ;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 40, 104, 0.6);
}

.hero-banner .hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
  padding: 2rem;
}

.hero-banner h1 {
  color: white !important;
  font-size: 2.5rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* ==========================================================================
   BUTTON STYLES
   ========================================================================== */

.wp-block-button__link {
  font-family: Arial, sans-serif;
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.9rem;
}

/* Red buttons */
.wp-block-button__link.has-vivid-red-background-color {
  background-color: var(--red) !important;
}

.wp-block-button__link.has-vivid-red-background-color:hover {
  background-color: #9b0826 !important;
}

/* ==========================================================================
   CONTENT SECTIONS
   ========================================================================== */

.content-box {
  background: var(--white);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  border-left: 4px solid var(--navy);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Feature cards on homepage */
.wp-block-column .wp-block-image + h3 {
  margin-top: 1rem;
}

/* Links */
.entry-content a {
  color: var(--navy);
  text-decoration: underline;
}

.entry-content a:hover {
  color: var(--red);
}

/* ==========================================================================
   CHAPTER DIRECTORY - Fix columns
   ========================================================================== */

.chapter-list {
  columns: 2;
  column-gap: 3rem;
}

.chapter-list li {
  break-inside: avoid;
  padding: 0.25rem 0;
}

@media (max-width: 768px) {
  .chapter-list {
    columns: 1;
  }
}

  background-color: #002868 !important;
  color: #ffffff !important;
}

/* Header with coin on right */
.header-logo-left,
.header-logo-right {
  width: 80px;
  height: auto;
}

.header-logo-right {
  border-radius: 50%;
}

/* Header icons row - social + search */
.header-icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
}

.social-icons {
  display: flex;
  gap: 0.75rem;
}

.social-icons a {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  transition: background 0.2s;
}

.social-icons a:hover {
  background: var(--gold);
  color: var(--dark);
}

/* Header search */
.header-search {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  overflow: hidden;
}

.header-search input[type="search"] {
  border: none;
  background: transparent;
  color: #fff;
  padding: 0.5rem 1rem;
  width: 150px;
  outline: none;
}

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

.header-search button {
  background: transparent !important;
  border: none;
  color: #fff;
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.header-search button:hover {
  color: var(--gold);
  background: transparent !important;
}

/* Footer social icons */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.footer-social a {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  transition: background 0.2s;
}

.footer-social a:hover {
  background: var(--gold);
  color: var(--dark);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .header-icons {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .header-search input[type="search"] {
    width: 120px;
  }
  
  .header-logo-left,
  .header-logo-right {
    width: 60px;
  }
}

/* Button styling for 508 accessibility compliance - content buttons only */
.wp-block-button__link,
.wp-element-button,
.site-main button:not(.hamburger):not(.side-menu-close),
.site-main input[type="submit"],
.site-main input[type="button"] {
  background-color: #002868 !important;
  color: #ffffff !important;
  border: none;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.site-main button:not(.hamburger):not(.side-menu-close):hover,
.site-main input[type="submit"]:hover,
.site-main input[type="button"]:hover {
  background-color: #001a4d !important;
  color: #ffffff !important;
}

/* Hamburger button - reset and style properly */
.hamburger {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hamburger:hover {
  background: transparent !important;
  color: var(--gold) !important;
}

/* Side menu close button */
.side-menu-close {
  background: transparent !important;
  border: none !important;
  color: #333 !important;
  font-size: 2rem;
  padding: 0.5rem;
  cursor: pointer;
}

.side-menu-close:hover {
  background: transparent !important;
  color: #000 !important;
}

/* Search button in header */
.header-search button {
  background: transparent !important;
  color: #fff !important;
  padding: 0.5rem !important;
}

.header-search button:hover {
  background: transparent !important;
  color: var(--gold) !important;
}

/* Nav link styling - direct anchors in top-nav div */
.top-nav a {
  display: block;
  color: #fff;
  padding: 0.75rem 1rem;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

.top-nav a:hover,
.top-nav a.active {
  border-bottom-color: var(--gold);
  color: var(--gold);
  text-decoration: none;
}

.top-nav a.nav-login {
  background: var(--gold);
  color: var(--dark);
  border-radius: 4px;
  margin-left: 0.5rem;
}

.top-nav a.nav-login:hover {
  background: #d4b86a;
  color: var(--dark);
  border-bottom-color: transparent;
}

/* Side menu section styling - ensure proper contrast */
.side-menu-section {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.side-menu-section h3 {
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 0.75rem 0;
}

.side-menu-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.side-menu-section li {
  margin: 0;
  padding: 0;
}

.side-menu-section a {
  display: block;
  color: #ffffff;
  padding: 0.5rem 0;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.2s;
}

.side-menu-section a:hover {
  color: var(--gold);
  text-decoration: none;
}

/* Side menu login button - gold with dark text */
.side-menu-login {
  background: transparent;
  /* Now the first section rather than the last, so it needs a rule beneath it to
     separate it from the navigation below. It previously carried
     border-bottom: none because nothing followed it. */
  border-bottom: 2px solid rgba(201, 162, 39, 0.4);
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
}

.side-menu-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--gold) !important;
  color: #1a1a2e !important;
  padding: 1rem !important;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
}

.side-menu-login-btn:hover {
  background: #d4b86a !important;
  color: #1a1a2e !important;
  text-decoration: none;
}

.side-menu-login-btn svg {
  fill: #1a1a2e;
}

/* Side menu close button styling */
.side-menu-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
}

.side-menu-close:hover {
  color: var(--gold) !important;
  background: transparent !important;
}

/* White button on colored backgrounds - override default navy */
.wp-block-button__link[style*="background-color:#ffffff"],
.wp-block-button__link[style*="background-color: #ffffff"] {
  background-color: #ffffff !important;
  color: #BF0A30 !important;
}

.wp-block-button__link[style*="background-color:#ffffff"]:hover,
.wp-block-button__link[style*="background-color: #ffffff"]:hover {
  background-color: #f0f0f0 !important;
  color: #BF0A30 !important;
}

/* Accessibility - Visible Focus Indicators */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 3px solid var(--gold) !important;
  outline-offset: 2px !important;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--navy);
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* ============================================
   THE EVENTS CALENDAR - CUSTOM STYLES
   ============================================ */

/* Force sans-serif font throughout events */
.tribe-events,
.tribe-events *,
.tribe-common,
.tribe-common *,
#tribe-events,
#tribe-events * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* --- Toolbar: Search and View Toggles --- */
.tribe-events-header,
.tribe-events-c-top-bar,
.tribe-events-header__top-bar {
  background: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- "Upcoming" Dropdown Button - Reduce Size --- */
.tribe-events-c-top-bar__datepicker-button,
.tribe-events-header__datepicker-button,
.tribe-events-c-events-bar__search-button,
button.tribe-events-c-top-bar__datepicker-button {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 4px !important;
  background: var(--navy) !important;
  color: #fff !important;
  text-transform: none !important;
  min-height: auto !important;
  line-height: 1.4 !important;
}

.tribe-events-c-top-bar__datepicker-button:hover,
.tribe-events-header__datepicker-button:hover {
  background: #001a4d !important;
}

/* Hide the oversized dropdown container styling */
.tribe-events-c-top-bar__datepicker {
  flex: 0 0 auto !important;
}

/* --- Prev/Next Navigation Icons Fix --- */
.tribe-events-c-nav__prev,
.tribe-events-c-nav__next,
.tribe-events-calendar-list-nav__prev,
.tribe-events-calendar-list-nav__next,
a.tribe-events-c-nav__prev,
a.tribe-events-c-nav__next {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: var(--navy) !important;
  border-radius: 4px !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 0 !important;
}

.tribe-events-c-nav__prev::before,
.tribe-events-c-nav__next::before {
  font-size: 16px !important;
  color: #fff !important;
  content: "‹" !important;
  font-family: -apple-system, sans-serif !important;
  line-height: 1 !important;
}

.tribe-events-c-nav__next::before {
  content: "›" !important;
}

.tribe-events-c-nav__prev:hover,
.tribe-events-c-nav__next:hover {
  background: #001a4d !important;
}

/* Hide broken SVG icons */
.tribe-events-c-nav__prev svg,
.tribe-events-c-nav__next svg,
.tribe-events-c-nav__prev .tribe-common-svgicon,
.tribe-events-c-nav__next .tribe-common-svgicon {
  display: none !important;
}

/* Today button */
.tribe-events-c-nav__today,
.tribe-events-c-top-bar__today-button {
  font-size: 13px !important;
  padding: 8px 14px !important;
  background: transparent !important;
  border: 1px solid var(--navy) !important;
  color: var(--navy) !important;
  border-radius: 4px !important;
}

.tribe-events-c-nav__today:hover,
.tribe-events-c-top-bar__today-button:hover {
  background: var(--navy) !important;
  color: #fff !important;
}

/* --- Event Cards --- */
.tribe-events-calendar-list__event,
.tribe-events-calendar-list__event-row,
.tribe-common-g-row,
article.tribe-events-calendar-list__event {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

/* --- Date Badge --- */
.tribe-events-calendar-list__event-date-tag,
.tribe-events-calendar-list__event-date {
  flex: 0 0 70px !important;
  text-align: center !important;
  background: var(--navy) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 12px 8px !important;
  margin-right: 8px !important;
}

.tribe-events-calendar-list__event-date-tag-weekday,
.tribe-events-calendar-list__event-datetime {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  letter-spacing: 0.5px !important;
  opacity: 0.9 !important;
}

.tribe-events-calendar-list__event-date-tag-daynum,
time.tribe-events-calendar-list__event-date-tag-daynum {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.1 !important;
  display: block !important;
}

/* Month under day number */
.tribe-events-calendar-list__event-date-tag-month {
  font-size: 11px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  opacity: 0.85 !important;
}

/* --- Event Content --- */
.tribe-events-calendar-list__event-details {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Event Title */
.tribe-events-calendar-list__event-title,
h3.tribe-events-calendar-list__event-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
}

.tribe-events-calendar-list__event-title a,
.tribe-events-calendar-list__event-title-link {
  color: var(--navy) !important;
  text-decoration: none !important;
}

.tribe-events-calendar-list__event-title a:hover {
  color: var(--gold) !important;
}

/* Event Description - Reduce size, hide field labels */
.tribe-events-calendar-list__event-description,
.tribe-events-calendar-list__event-description p {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #444 !important;
  margin: 0 !important;
}

/* Hide "What:" and "Why:" field labels */
.tribe-events-calendar-list__event-description p:first-child {
  display: none !important;
}

/* Or if theyre inline, hide via CSS content replacement cdk/ docs/ scripts/ wordpress-content/ wordpress-theme/

/* ============================================
   THE EVENTS CALENDAR - CUSTOM STYLES
   ============================================ */

/* Force sans-serif font throughout events */
.tribe-events,
.tribe-events *,
.tribe-common,
.tribe-common *,
#tribe-events,
#tribe-events * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* --- Toolbar: Search and View Toggles --- */
.tribe-events-header,
.tribe-events-c-top-bar,
.tribe-events-header__top-bar {
  background: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- "Upcoming" Dropdown Button - Reduce Size --- */
.tribe-events-c-top-bar__datepicker-button,
.tribe-events-header__datepicker-button,
.tribe-events-c-events-bar__search-button,
button.tribe-events-c-top-bar__datepicker-button {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 4px !important;
  background: #002868 !important;
  color: #fff !important;
  text-transform: none !important;
  min-height: auto !important;
  line-height: 1.4 !important;
}

.tribe-events-c-top-bar__datepicker-button:hover,
.tribe-events-header__datepicker-button:hover {
  background: #001a4d !important;
}

/* Hide the oversized dropdown container styling */
.tribe-events-c-top-bar__datepicker {
  flex: 0 0 auto !important;
}

/* --- Prev/Next Navigation Icons Fix --- */
.tribe-events-c-nav__prev,
.tribe-events-c-nav__next,
.tribe-events-calendar-list-nav__prev,
.tribe-events-calendar-list-nav__next,
a.tribe-events-c-nav__prev,
a.tribe-events-c-nav__next {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: #002868 !important;
  border-radius: 4px !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 18px !important;
}

.tribe-events-c-nav__prev::after {
  content: "\2039" !important;
  font-size: 24px !important;
  color: #fff !important;
  line-height: 1 !important;
}

.tribe-events-c-nav__next::after {
  content: "\203A" !important;
  font-size: 24px !important;
  color: #fff !important;
  line-height: 1 !important;
}

.tribe-events-c-nav__prev:hover,
.tribe-events-c-nav__next:hover {
  background: #001a4d !important;
}

/* Hide broken SVG icons */
.tribe-events-c-nav__prev svg,
.tribe-events-c-nav__next svg,
.tribe-events-c-nav__prev .tribe-common-svgicon,
.tribe-events-c-nav__next .tribe-common-svgicon {
  display: none !important;
}

/* Today button */
.tribe-events-c-nav__today,
.tribe-events-c-top-bar__today-button {
  font-size: 13px !important;
  padding: 8px 14px !important;
  background: transparent !important;
  border: 1px solid #002868 !important;
  color: #002868 !important;
  border-radius: 4px !important;
}

.tribe-events-c-nav__today:hover,
.tribe-events-c-top-bar__today-button:hover {
  background: #002868 !important;
  color: #fff !important;
}

/* --- Event Cards --- */
.tribe-events-calendar-list__event,
.tribe-events-calendar-list__event-row,
article.tribe-events-calendar-list__event {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

/* Ensure the inner row doesn't double up styles */
.tribe-events-calendar-list__event .tribe-common-g-row {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Date Badge --- */
.tribe-events-calendar-list__event-date-tag,
.tribe-events-calendar-list__event-date {
  flex: 0 0 70px !important;
  text-align: center !important;
  background: #002868 !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 12px 8px !important;
  margin-right: 8px !important;
}

.tribe-events-calendar-list__event-date-tag-weekday,
.tribe-events-calendar-list__event-date-tag span.tribe-common-b3 {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  letter-spacing: 0.5px !important;
  opacity: 0.9 !important;
  display: block !important;
}

.tribe-events-calendar-list__event-date-tag-daynum,
time.tribe-events-calendar-list__event-date-tag-daynum {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.2 !important;
  display: block !important;
}

/* Month under day number */
.tribe-events-calendar-list__event-date-tag-month {
  font-size: 11px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  opacity: 0.85 !important;
}

/* --- Event Content --- */
.tribe-events-calendar-list__event-details {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Event Title */
.tribe-events-calendar-list__event-title,
h3.tribe-events-calendar-list__event-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #002868 !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
}

.tribe-events-calendar-list__event-title a,
.tribe-events-calendar-list__event-title-link {
  color: #002868 !important;
  text-decoration: none !important;
}

.tribe-events-calendar-list__event-title a:hover {
  color: #C5A55A !important;
}

/* Event Description - Reduce size */
.tribe-events-calendar-list__event-description,
.tribe-events-calendar-list__event-description p,
.tribe-events-calendar-list__event-description .tribe-common-b2 {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #444 !important;
  margin: 0 !important;
}

/* Venue/Location styling */
.tribe-events-calendar-list__event-venue,
.tribe-events-calendar-list__event-venue-title {
  font-size: 13px !important;
  color: #666 !important;
  margin-top: 8px !important;
}

/* --- Time Display --- */
.tribe-events-calendar-list__event-datetime,
.tribe-events-calendar-list__event-datetime-wrapper {
  font-size: 13px !important;
  color: #666 !important;
  margin-bottom: 6px !important;
}

/* --- View Tabs (List/Month/Day) --- */
.tribe-events-c-view-selector,
.tribe-events-c-view-selector__list {
  display: flex !important;
  gap: 4px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tribe-events-c-view-selector__list-item-link,
.tribe-events-view-selector__list-item-link {
  font-size: 13px !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  color: #002868 !important;
  text-decoration: none !important;
  background: transparent !important;
  display: inline-block !important;
}

.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link,
.tribe-events-c-view-selector__list-item-link:hover {
  background: #002868 !important;
  color: #fff !important;
}

/* --- Search Bar --- */
.tribe-events-c-search,
.tribe-events-c-events-bar__search-container {
  flex: 1 !important;
  max-width: 300px !important;
}

.tribe-events-c-search__input,
.tribe-events-c-events-bar__search-input {
  font-size: 14px !important;
  padding: 8px 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  width: 100% !important;
}

.tribe-events-c-search__input:focus {
  border-color: #002868 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,40,104,0.2) !important;
}

/* --- Month View Calendar --- */
.tribe-events-calendar-month__calendar-event {
  background: #002868 !important;
  color: #fff !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
}

/* --- Nav container --- */
.tribe-events-c-nav,
.tribe-events-calendar-list-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .tribe-events-calendar-list__event,
  article.tribe-events-calendar-list__event {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .tribe-events-calendar-list__event-date-tag {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
  }
  
  .tribe-events-calendar-list__event-date-tag-daynum {
    font-size: 22px !important;
  }
}

/* --- No Events Message --- */
.tribe-events-c-messages__message,
.tribe-events-calendar-list__event--no-events {
  background: #fff !important;
  padding: 40px !important;
  text-align: center !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  font-size: 16px !important;
  color: #666 !important;
}

/* --- Event Featured Image --- */
.tribe-events-calendar-list__event-featured-image {
  border-radius: 6px !important;
  overflow: hidden !important;
  max-width: 150px !important;
}

.tribe-events-calendar-list__event-featured-image img {
  width: 100% !important;
  height: auto !important;
}

/* Hide any field labels like "What:" and "Why:" that may leak through */
.tribe-events-calendar-list__event-description strong:first-child {
  display: none !important;
}

/* ============================================
   EVENTS PAGE FIXES - September 2, 2026
   ============================================ */

/* --- Fix Footer Link Contrast (gold on navy failing WCAG) --- */
.site-footer a {
  color: #fff !important;
}
.site-footer a:hover {
  color: #C5A55A !important;
  text-decoration: underline !important;
}

/* --- Remove Top Prev/Next Buttons (keep only bottom) --- */
.tribe-events-header .tribe-events-c-nav,
.tribe-events-c-top-bar .tribe-events-c-nav,
.tribe-events-header__top-bar .tribe-events-c-nav {
  display: none !important;
}

/* --- Fix Prev/Next Buttons - Pill Style with Labels --- */
.tribe-events-c-nav__list {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tribe-events-c-nav__list-item {
  display: inline-block !important;
}

.tribe-events-c-nav__prev,
.tribe-events-c-nav__next,
a.tribe-events-c-nav__prev,
a.tribe-events-c-nav__next {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: #002868 !important;
  color: #fff !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  min-width: auto !important;
  width: auto !important;
  height: auto !important;
}

.tribe-events-c-nav__prev:hover,
.tribe-events-c-nav__next:hover {
  background: #001a4d !important;
}

/* Show text labels and chevrons */
.tribe-events-c-nav__prev::before {
  content: "\2039" !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.tribe-events-c-nav__prev::after {
  content: "Previous" !important;
}

.tribe-events-c-nav__next::before {
  content: "Next" !important;
}

.tribe-events-c-nav__next::after {
  content: "\203A" !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Hide the external text labels that appear separately */
.tribe-events-c-nav__prev-label,
.tribe-events-c-nav__next-label,
.tribe-events-c-nav__prev .tribe-events-c-nav__prev-label,
.tribe-events-c-nav__next .tribe-events-c-nav__next-label {
  display: none !important;
}

/* Hide broken SVGs */
.tribe-events-c-nav__prev svg,
.tribe-events-c-nav__next svg {
  display: none !important;
}

/* --- Fix "Subscribe to Calendar" Button --- */
.tribe-events-c-subscribe-dropdown__button,
.tribe-events-c-ical__link {
  background: transparent !important;
  border: 2px solid #002868 !important;
  color: #002868 !important;
  padding: 8px 14px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.tribe-events-c-subscribe-dropdown__button:hover,
.tribe-events-c-ical__link:hover {
  background: #002868 !important;
  color: #fff !important;
}

/* --- Fix View Tabs (List/Month/Day) - Make them look like a toggle group --- */
.tribe-events-c-view-selector__list {
  display: flex !important;
  background: #f0f0f0 !important;
  border-radius: 6px !important;
  padding: 4px !important;
  gap: 2px !important;
}

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

.tribe-events-c-view-selector__list-item-link {
  display: block !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #444 !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
}

.tribe-events-c-view-selector__list-item-link:hover {
  background: #e0e0e0 !important;
  color: #002868 !important;
}

.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
  background: #002868 !important;
  color: #fff !important;
}

/* --- Remove Excessive Whitespace Before Footer --- */
.tribe-events,
#tribe-events,
.tribe-events-calendar-list {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.tribe-events-footer,
.tribe-events-calendar-list__footer {
  padding-bottom: 20px !important;
  margin-bottom: 0 !important;
}

/* Reduce spacing after last event */
.tribe-events-calendar-list__event:last-child {
  margin-bottom: 20px !important;
}

/* Events container */
.tribe-common {
  padding-bottom: 20px !important;
}

/* --- Unified Toolbar Container --- */
.tribe-events-header,
.tribe-events-c-events-bar {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

/* --- Bottom Navigation Spacing --- */
.tribe-events-calendar-list-nav {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin-top: 10px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Today button in bottom nav */
.tribe-events-c-nav__today {
  padding: 8px 16px !important;
  border-radius: 20px !important;
  background: transparent !important;
  border: 2px solid #002868 !important;
  color: #002868 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.tribe-events-c-nav__today:hover {
  background: #002868 !important;
  color: #fff !important;
}

/* ============================================
   EVENTS PAGE FIXES v2 - September 2, 2026
   Targeting actual TEC class names
   ============================================ */

/* --- Fix Search Bar Icon Overlap --- */
.tribe-events-c-search__input-control {
  position: relative !important;
}

.tribe-events-c-search__input-control-icon-svg,
.tribe-events-c-search__input-control .tribe-common-c-svgicon--search {
  position: absolute !important;
  right: 12px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
}

.tribe-events-c-search__input {
  padding-left: 12px !important;
  padding-right: 40px !important;
}

/* --- Hide Top Bar Prev/Next Buttons (keep only bottom) --- */
.tribe-events-c-top-bar__nav-link--prev,
.tribe-events-c-top-bar__nav-link--next,
.tribe-events-c-top-bar__nav-link {
  display: none !important;
}

/* --- Fix Bottom Prev/Next Buttons --- */
.tribe-events-c-nav__prev,
.tribe-events-c-nav__next,
a.tribe-events-c-nav__prev,
a.tribe-events-c-nav__next {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 18px !important;
  background: #002868 !important;
  color: #fff !important;
  border-radius: 25px !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: none !important;
}

.tribe-events-c-nav__prev:hover,
.tribe-events-c-nav__next:hover {
  background: #001a4d !important;
  color: #fff !important;
}

/* Show the label text */
.tribe-events-c-nav__prev-label,
.tribe-events-c-nav__next-label {
  display: inline !important;
  position: static !important;
  clip: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* Hide "Events" text after Previous/Next */
.tribe-events-c-nav__prev-label-plural,
.tribe-events-c-nav__next-label-plural {
  display: none !important;
}

/* Style the SVG icons inside nav buttons */
.tribe-events-c-nav__prev-icon-svg,
.tribe-events-c-nav__next-icon-svg {
  fill: #fff !important;
  width: 12px !important;
  height: 12px !important;
}

/* --- Today Button Styling --- */
.tribe-events-c-nav__today {
  padding: 10px 18px !important;
  border-radius: 25px !important;
  background: transparent !important;
  border: 2px solid #002868 !important;
  color: #002868 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.tribe-events-c-nav__today:hover {
  background: #002868 !important;
  color: #fff !important;
}

/* --- Bottom Navigation Container --- */
.tribe-events-calendar-list-nav {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 16px 24px !important;
  margin: 20px 0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.tribe-events-c-nav__list {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Fix View Selector (List/Month/Day) --- */
.tribe-events-c-view-selector__list {
  display: flex !important;
  background: #e8e8e8 !important;
  border-radius: 8px !important;
  padding: 4px !important;
  gap: 4px !important;
  list-style: none !important;
  margin: 0 !important;
}

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

.tribe-events-c-view-selector__list-item-link {
  display: block !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #333 !important;
  text-decoration: none !important;
  background: transparent !important;
}

.tribe-events-c-view-selector__list-item-link:hover {
  background: #ddd !important;
}

.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
  background: #002868 !important;
  color: #fff !important;
}

/* Hide SVG icons in view selector */
.tribe-events-c-view-selector__list-item-icon {
  display: none !important;
}

/* --- Upcoming Dropdown Button --- */
.tribe-events-c-top-bar__datepicker-button {
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  background: #002868 !important;
  color: #fff !important;
}

/* --- Find Events Button --- */
.tribe-events-c-search__button {
  background: #002868 !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.tribe-events-c-search__button:hover {
  background: #001a4d !important;
}

/* --- Reduce Whitespace Before Footer --- */
.tribe-events-calendar-list {
  padding-bottom: 0 !important;
}

.tribe-common {
  padding-bottom: 10px !important;
}

/* --- Events Header/Toolbar Container --- */
.tribe-events-header {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}

/* --- Footer Link Contrast Fix --- */
.site-footer a {
  color: #fff !important;
}

.site-footer a:hover {
  color: #FFD700 !important;
  text-decoration: underline !important;
}

/* --- Fix Active View Tab Text Color --- */
.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link,
.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text {
  color: #fff !important;
}

/* Ensure the text span inside is also white */
.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link * {
  color: #fff !important;
}

/* --- Remove Underline Indicator from View Tabs --- */
.tribe-events-c-view-selector__list-item-link::after,
.tribe-events-c-view-selector__list-item-link::before,
.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link::after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: none !important;
}

.tribe-events-c-view-selector__list-item-link {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ============================================
   MONTH VIEW CALENDAR FIXES
   ============================================ */

/* Equal width columns */
.tribe-events-calendar-month__header-column,
.tribe-events-calendar-month__day {
  width: calc(100% / 7) !important;
  flex: 1 1 calc(100% / 7) !important;
  min-width: 0 !important;
}

/* Center day-of-week headers */
.tribe-events-calendar-month__header-column-title,
.tribe-events-calendar-month__header-column {
  text-align: center !important;
  justify-content: center !important;
}

.tribe-events-calendar-month__header-column-title-desktop {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

/* Calendar grid layout */
.tribe-events-calendar-month__header-row,
.tribe-events-calendar-month__week {
  display: flex !important;
  width: 100% !important;
}

/* Day cells */
.tribe-events-calendar-month__day-cell {
  text-align: center !important;
}

.tribe-events-calendar-month__day-date {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

/* --- Center Day-of-Week Headers (M T W T F S S) --- */
.tribe-events-calendar-month__header-column {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.tribe-events-calendar-month__header-column-title {
  text-align: center !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

/* --- Simple Fix: Center Day Headers Only --- */
.tribe-events-calendar-month__header-column-title {
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

.tribe-events-calendar-month__header-column-title-desktop {
  text-align: center !important;
}

/* Keep calendar borders */
.tribe-events-calendar-month__day {
  border: 1px solid #e0e0e0 !important;
}

/* --- Day Numbers: Top Right --- */
.tribe-events-calendar-month__day-cell {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding: 8px !important;
}

.tribe-events-calendar-month__day-date,
.tribe-events-calendar-month__day-date-link {
  text-align: right !important;
}

/* --- M T W T F S S Headers: Centered --- */
.tribe-events-calendar-month__header-column {
  padding-left: 14.28% !important;
  box-sizing: border-box !important;
}

.tribe-events-calendar-month__header-column:first-child {
  padding-left: calc(14.28% / 2) !important;
}

/* --- Fix TH Headers for Calendar (M T W T F S S) --- */
th.tribe-events-calendar-month__header-column {
  text-align: center !important;
  padding: 10px 0 !important;
}

th.tribe-events-calendar-month__header-column .tribe-events-calendar-month__header-column-title {
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
}

th.tribe-events-calendar-month__header-column span[aria-hidden="true"] {
  text-align: center !important;
}

/* --- HIGH SPECIFICITY: Center Calendar Day Headers --- */
.tribe-common table.tribe-events-calendar-month__grid th.tribe-events-calendar-month__header-column,
table.tribe-events-calendar-month__grid th.tribe-events-calendar-month__header-column,
.tribe-events-calendar-month__grid th,
.tribe-events th.tribe-events-calendar-month__header-column {
  text-align: center !important;
}

.tribe-events-calendar-month__grid thead th {
  text-align: center !important;
}

/* Target the actual visible text */
.tribe-events-calendar-month__header-column span[aria-hidden="true"],
th span[aria-hidden="true"] {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
}

/* --- FORCE Center: Target thead th div structure --- */
.tribe-events-calendar-month__header thead tr th {
  text-align: center !important;
}

.tribe-events-calendar-month__header thead tr th div,
.tribe-events-calendar-month__header thead tr th div.tribe-events-calendar-month__header-column-title,
.tribe-events-calendar-month__header thead tr th .tribe-events-calendar-month__header-column-title {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

/* The div has tribe-common-b3 class too */
.tribe-events-calendar-month__header .tribe-common-b3 {
  text-align: center !important;
}

/* Also try on the direct table thead */
thead.tribe-events-calendar-month__header th {
  text-align: center !important;
}

thead.tribe-events-calendar-month__header th div {
  text-align: center !important;
  margin: 0 auto !important;
}

/* --- OVERRIDE PLUGIN: Center calendar day headers --- */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__header tr,
.tribe-events .tribe-events-calendar-month__header tr {
  justify-items: center !important;
}

/* Also fix Monday column to match others */
.tribe-events-calendar-month__day:first-child {
  justify-content: flex-end !important;
}

.tribe-events-calendar-month__day:first-child .tribe-events-calendar-month__day-cell {
  justify-content: flex-end !important;
  align-items: flex-start !important;
}

/* --- Fix First Column (Monday) Date Position --- */
.tribe-events-calendar-month__week .tribe-events-calendar-month__day:first-child .tribe-events-calendar-month__day-date,
.tribe-events-calendar-month__day:first-child .tribe-events-calendar-month__day-date {
  text-align: right !important;
  width: 100% !important;
  display: block !important;
  padding-right: 8px !important;
}

.tribe-events-calendar-month__day:first-child .tribe-events-calendar-month__day-cell--desktop {
  align-items: flex-start !important;
  justify-content: flex-end !important;
}

/* --- Remove stray underlines/borders from calendar cells --- */
.tribe-events-calendar-month__day-cell--desktop::after,
.tribe-events-calendar-month__day-cell::after,
.tribe-events-calendar-month__day::after {
  display: none !important;
  border: none !important;
}

.tribe-events-calendar-month__day-date-link {
  text-decoration: none !important;
  border-bottom: none !important;
}

.tribe-events-calendar-month__day-date-link:hover,
.tribe-events-calendar-month__day-date-link:focus {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* --- FORCE ALL Calendar Day Cells to Top-Right --- */
.tribe-events-calendar-month__day .tribe-events-calendar-month__day-cell--desktop,
.tribe-events-calendar-month__day-cell--desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
}

.tribe-events-calendar-month__day .tribe-events-calendar-month__day-date,
.tribe-events-calendar-month__day-date {
  text-align: right !important;
  padding: 8px 12px !important;
}

/* Also target the week start days specifically */
.tribe-events-calendar-month__week > .tribe-events-calendar-month__day:first-child .tribe-events-calendar-month__day-cell--desktop {
  align-items: flex-end !important;
}

.tribe-events-calendar-month__week > .tribe-events-calendar-month__day:first-child .tribe-events-calendar-month__day-date {
  text-align: right !important;
}

/* --- Fix Other Month / Past Month Day Cells --- */
.tribe-events-calendar-month__day--other-month .tribe-events-calendar-month__day-cell--desktop,
.tribe-events-calendar-month__day--past-month .tribe-events-calendar-month__day-cell--desktop,
.tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-cell--desktop {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
}

.tribe-events-calendar-month__day--other-month .tribe-events-calendar-month__day-date,
.tribe-events-calendar-month__day--past-month .tribe-events-calendar-month__day-date,
.tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date {
  text-align: right !important;
  width: auto !important;
}

/* --- Fix Mobile Day Cell (button element) --- */
.tribe-events-calendar-month__day-cell--mobile {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  text-align: right !important;
}

.tribe-events-calendar-month__day-cell--mobile .tribe-events-calendar-month__day-date {
  text-align: right !important;
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  padding: 8px 12px !important;
}

/* Target the button directly */
button.tribe-events-calendar-month__day-cell {
  align-items: flex-end !important;
  justify-content: flex-start !important;
}

/* === NUCLEAR OPTION: Force ALL day numbers top-right === */
.tribe-events-calendar-month__day-date {
  text-align: right !important;
  width: 100% !important;
  display: block !important;
  padding: 8px 12px 0 0 !important;
}

.tribe-events-calendar-month__day-date-daynum {
  text-align: right !important;
  display: block !important;
  width: 100% !important;
}

/* Override the mobile cell centering */
.tribe-events .tribe-events-calendar-month__day-cell--mobile {
  align-items: flex-end !important;
  text-align: right !important;
}

/* Ensure desktop cell is also right-aligned */
.tribe-events-calendar-month__day-cell--desktop {
  align-items: flex-end !important;
}

/* Target the time element directly */
time.tribe-events-calendar-month__day-date-daynum {
  text-align: right !important;
  display: block !important;
  width: 100% !important;
  padding-right: 12px !important;
}

/* ==========================================================================
   HAMBURGER ICON
   ==========================================================================
   header.php renders the button as:

       <button class="hamburger">
         <span class="hamburger-box"><span class="hamburger-inner"></span></span>
         <span class="hamburger-label">More</span>
       </button>

   The stylesheet previously only defined `.hamburger-icon span`, a class that
   does not appear in the markup, so `.hamburger-box` and `.hamburger-inner`
   were unstyled and rendered nothing.

   At desktop widths this went unnoticed because the "More" label supplied the
   visible affordance. Below 768px `.hamburger-label` is hidden, which left an
   entirely empty button and no way to reach the navigation on a phone.

   `.hamburger-inner` is the middle bar; its ::before and ::after are the top
   and bottom bars. Three elements from one span, which is why the markup only
   needs one.
   ========================================================================== */

.hamburger-box {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 18px;
  flex-shrink: 0;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.2s ease;
}

.hamburger-inner { top: 8px; }

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
}

.hamburger-inner::before { top: -8px; }
.hamburger-inner::after  { top: 8px; }

/* The open state. JS adds `.open` to the button, so the icon becomes an X to
   signal that the same control closes the menu. */
.hamburger.open .hamburger-inner {
  transform: rotate(45deg);
}

.hamburger.open .hamburger-inner::before {
  top: 0;
  opacity: 0;
}

.hamburger.open .hamburger-inner::after {
  top: 0;
  transform: rotate(-90deg);
}

/* Touch target. 44px is the minimum comfortable size on a phone; the icon
   itself is only 24x18, which is accurate to hit with a mouse but not a thumb. */
@media (max-width: 768px) {
  .hamburger {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
}

/* ==========================================================================
   EVENTS BAR — NARROW SCREENS
   ==========================================================================
   The Events Calendar renders its toolbar as a flex row: an "Upcoming" date
   picker, a keyword input, a submit button, and a "Find Events" button.

   Our existing overrides give the input `flex: 1` with `max-width: 300px` and
   the buttons horizontal padding. Below roughly 600px the row can no longer
   accommodate all four, so the browser shrinks the flex items. "Find Events"
   collapses to its padding and clips its own label, rendering as a blank navy
   rectangle — a button that looks broken rather than one that looks small.

   Stacking the bar below 600px rather than 768px keeps the single-row layout
   on larger phones in landscape and small tablets, where it still fits.
   ========================================================================== */

@media (max-width: 600px) {

  /* Stack the toolbar. */
  .tribe-events-header__events-bar,
  .tribe-events-c-events-bar,
  .tribe-events-c-events-bar__search-container,
  .tribe-events-c-search__input-group {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* The keyword field spans the width instead of competing for space. */
  .tribe-events-c-search,
  .tribe-events-c-events-bar__search-container {
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  /* Buttons keep their labels. flex-shrink: 0 stops the browser compressing
     them below their text width, which is what produced the blank button. */
  .tribe-events-c-search__button,
  .tribe-events-c-events-bar__search-button,
  .tribe-events-c-top-bar__datepicker-button,
  .tribe-events-header__datepicker-button {
    width: 100% !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 44px !important;   /* comfortable touch target */
    justify-content: center !important;
  }

  /* The view selector (List / Month / Day) also needs room. */
  .tribe-events-c-view-selector,
  .tribe-events-c-view-selector__list {
    width: 100% !important;
  }

  .tribe-events-c-view-selector__list-item {
    flex: 1 1 auto !important;
  }

  /* Previous / Next are icon-only buttons; give them a real touch target so
     they are not a few pixels of caret. */
  .tribe-events-c-nav__prev,
  .tribe-events-c-nav__next {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* ==========================================================================
   SIDE MENU — PRIMARY SECTION
   ==========================================================================
   Home and Events Calendar sit in a section with no heading so they read as
   top-level destinations rather than members of a category. Slightly larger
   type and a heavier divider separate them from the grouped sections below.
   ========================================================================== */

.side-menu-primary {
  border-bottom: 2px solid rgba(201, 162, 39, 0.4);
}

.side-menu-primary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-menu-primary a {
  font-size: 1.05rem;
  font-weight: 600;
}

/* ==========================================================================
   ACCESSIBILITY — assessment report remediation
   ==========================================================================
   Addresses two Critical findings from the Website Assessment Report
   (2026-07-25). The rebuild already fixed the report's other Critical items:
   every homepage image carries alt text, and a global focus rule plus a skip
   link are in place.
   ========================================================================== */

/* Report finding: social icons were 14-18px against a 44x44 minimum.
   The rebuild improved these to 32px, still short of the guideline. Members
   with tremor or reduced fine motor control are the specific group affected,
   and that describes a meaningful share of this membership.

   The visual circle stays 32px; padding supplies the remaining hit area, so
   the target grows without the design changing. */
.social-icons a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Report finding: 14 of 15 interactive elements had no visible focus
   indicator. A global rule already covers this, but the events search input
   overrides it with `outline: none !important` later in the file and so wins
   on source order. Restored here with an inset shadow, which reads as a focus
   ring without altering layout. */
.tribe-events-c-search__input:focus,
.tribe-events-c-search__input:focus-visible {
  outline: 3px solid var(--gold) !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 1px var(--navy) inset !important;
}

/* :focus-visible was absent entirely. Modern browsers use it to show a ring
   for keyboard navigation while suppressing it for mouse clicks, which is the
   behaviour that makes visible focus acceptable to sighted mouse users. The
   :focus rules remain for older browsers. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold) !important;
  outline-offset: 2px !important;
}

/* Report recommendation: raise base font size to at least 16px. The
   stylesheet contains eleven declarations at 13px. Rather than rewrite each,
   a floor is set on body text; component styles that need to be smaller can
   still opt down explicitly. */
body {
  font-size: 16px;
}

/* ==========================================================================
   ACCOUNT LINKS — added 17 September
   ==========================================================================
   The navigation offered "Member Login" to signed-in members and gave them no
   way out; subscribers never see the WordPress admin bar, so there was no
   logout anywhere on the site for them. Log Out is styled more quietly than
   Member Login: it is a thing members occasionally need, not a call to action.
   ========================================================================== */

.nav-logout {
  opacity: 0.85;
}

.nav-logout:hover {
  opacity: 1;
}

.side-menu-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem !important;
  margin-top: 0.4rem;
  color: #ffffff !important;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  font-size: 0.9rem;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.side-menu-logout-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
  text-decoration: none !important;
}