/*
Theme Name: Finger Lakes Daily News Theme
Theme URI: https://fingerlakesdailynews.com
Author: TOTIB Media
Author URI: https://totib.com
Description: Local news and radio theme for Finger Lakes Daily News.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: Proprietary
License URI: https://totib.com
Text Domain: fldn-theme
*/


/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1. Custom Properties (Design Tokens)
   2. Reset & Base
   3. Typography
   4. Layout (Container, Grid)
   5. Top Bar
   6. Masthead (Header)
   7. Main Navigation
   8. Station Logos Bar
   9. Newsletter Bar
   10. News Cards (Latest Posts)
   11. Section Headers (Widget Titles)
   12. Sidebar & Widgets
   13. Weather Widget
   14. Obituary List
   15. Single Article
   16. Archive / Category Pages
   17. Search & 404
   18. Footer
   19. Buttons & Forms
   20. Pagination
   21. WordPress Core Overrides
   22. Utilities
   23. (Obituary & Funeral Home — appended)
   24. Station Page
   25. Contest Cards
   26. Contest Landing Page
   27. Contest Form
   28. iOS Form Input Zoom Fix
   29. Stream Player Bar
   30. Print Styles
   ========================================================================== */


/* ==========================================================================
   1. CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* Colors */
  --color-primary: #1E5B70;
  --color-nav: #316f98;
  --color-secondary: #2B7AB8;
  --color-ochre: #946E16;
  --color-footer: #272727;
  --color-body-text: #222;
  --color-white: #fff;
  --color-black: #000;
  --color-border: #efefef;
  --color-gray-light: #e8e8e8;
  --color-gray-mid: #767676;
  --color-gray-dark: #666;
  --color-success: #28a745;
  --color-error: #dc3545;
  --color-purple: #6B2FA0;
  --color-purple-dark: #5A2787;
  --color-purple-light: #8B4FC6;

  /* Typography */
  --font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 14px;
  --line-height-base: 22px;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Layout */
  --container-max: 1200px;
  --container-padding: 15px;
  --sidebar-width: 300px;
  --main-ratio: 75%;
  --sidebar-ratio: 25%;
  --grid-gap: 20px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 15px;
  --space-lg: 20px;
  --space-xl: 30px;
  --space-2xl: 40px;

  /* Borders */
  --border-thin: 1px solid var(--color-border);
  --border-medium: 2px solid var(--color-border);
  --radius-sm: 3px;
  --radius-md: 4px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Z-index layers */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-mobile-nav: 400;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

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

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-body-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--color-nav);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--color-secondary);
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure {
  margin: 0;
}

blockquote {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--color-nav);
  background: #f9f9f9;
  font-style: italic;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  text-align: left;
}

th {
  background: #f5f5f5;
  font-weight: var(--font-weight-semibold);
}

hr {
  border: 0;
  border-top: var(--border-thin);
  margin: var(--space-lg) 0;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
select,
textarea {
  font-size: max(16px, inherit);
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-body-text);
  line-height: 1.2;
}

h1 {
  font-size: 25px;
  line-height: 35px;
  letter-spacing: -2px;
}

h2 {
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -1px;
}

h3 {
  font-size: 19px;
  line-height: 24px;
  letter-spacing: -1px;
}

h4 {
  font-size: 19px;
  line-height: 19px;
  letter-spacing: -1px;
}

h5 {
  font-size: 17px;
  line-height: 17px;
  letter-spacing: -1px;
}

h6 {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

p {
  margin: 0 0 var(--space-md);
}

strong, b {
  font-weight: var(--font-weight-bold);
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* #content wrapper from header.php — not a grid itself */
.site-content {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-2xl);
}

/* Main content + sidebar grid (used in templates) */
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 992px) {
  .content-grid {
    grid-template-columns: 1fr var(--sidebar-width);
  }
}

.content-area,
.site-main {
  min-width: 0; /* Prevent grid blowout */
}

.sidebar,
.site-sidebar {
  min-width: 0;
}


/* ==========================================================================
   5. TOP BAR
   ========================================================================== */

.top-bar {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-base);
  line-height: 1;
}

.top-bar .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

.top-bar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.top-bar__link {
  color: var(--color-white);
  font-size: 13px;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.top-bar__link:hover,
.top-bar__link:focus {
  color: var(--color-white);
  opacity: 0.8;
}

.top-bar__date {
  margin-right: auto;
  font-size: 13px;
  opacity: 0.85;
}

/* Hide entire top bar on mobile — utility links move to drawer. */
@media (max-width: 991px) {
  .top-bar {
    display: none;
  }
}


/* ==========================================================================
   6. MASTHEAD (HEADER)
   ========================================================================== */

.site-header {
  background: var(--color-white);
  border-bottom: var(--border-medium);
}

.masthead {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  position: relative;
}

.masthead__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.masthead__divider {
  width: 1px;
  height: 40px;
  background: var(--color-border);
}

.masthead__station-logo-img {
  height: 60px;
  width: auto;
  border-radius: var(--radius-sm);
}

/* On mobile station pages: shrink both logos to fit on one line. */
@media (max-width: 767px) {
  .masthead--station .masthead__logo {
    gap: var(--space-sm);
  }

  .masthead--station .masthead__logo img {
    max-height: 32px;
  }

  .masthead--station .masthead__station-logo-img {
    height: 36px;
  }

  .masthead--station .masthead__divider {
    height: 28px;
  }
}

@media (min-width: 768px) {
  .masthead__station-logo-img {
    height: 80px;
  }
}

.masthead__logo img {
  max-height: 60px;
  width: auto;
}

.masthead__aside {
  flex-shrink: 0;
  display: none;
}

@media (min-width: 768px) {
  .masthead__logo img {
    max-height: 80px;
  }

  .masthead__aside {
    display: block;
  }
}

/* Mobile: merge hamburger + search into masthead row to save vertical space.
   The main menu is already hidden < 992px, so the nav bar only served these
   two buttons. We pull the nav bar up visually and make it transparent. */
@media (max-width: 991px) {
  .site-header {
    position: relative;
  }

  .masthead {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }

  .masthead__logo img {
    max-height: 40px;
  }

  /* Position action buttons over the masthead, right-aligned.
     Height matches masthead: padding-top + logo max-height + padding-bottom. */
  .main-nav:not(.is-sticky) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: auto;
    height: calc(var(--space-sm) * 2 + 40px);
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
  }

  .main-nav:not(.is-sticky) .container {
    padding: 0 var(--container-padding) 0 0;
  }

  /* Dark icon color on white masthead background. */
  .main-nav:not(.is-sticky) .main-nav__search-toggle,
  .main-nav:not(.is-sticky) .main-nav__hamburger {
    color: var(--color-nav);
  }

  .main-nav:not(.is-sticky) .hamburger-line {
    background-color: var(--color-nav);
  }
}


/* ==========================================================================
   7. MAIN NAVIGATION
   ========================================================================== */

.main-nav {
  background-color: var(--color-nav);
  position: relative;
}

.main-nav.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Spacer inserted by JS when nav becomes sticky */
.main-nav-spacer {
  display: none;
}

.main-nav.is-sticky + .main-nav-spacer {
  display: block;
}

.main-nav .container,
.main-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Desktop menu — wp_nav_menu outputs into <nav class="main-nav__menu"> with <ul class="main-nav__list"> */
.main-nav__menu {
  display: none;
  align-items: stretch;
}

.main-nav__list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 992px) {
  .main-nav__menu {
    display: flex;
  }
}

/* Nav action buttons (social, search, hamburger) */
.main-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
}

.main-nav__social {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 992px) {
  .main-nav__social {
    display: flex;
  }
}

.main-nav__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-white);
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.main-nav__social a:hover {
  opacity: 1;
  color: var(--color-white);
}

/* Search toggle button */
.main-nav__search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  padding: 0;
}

.main-nav__search-toggle:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Header search bar (hidden by default) */
.header-search {
  max-height: 0;
  overflow: hidden;
  background: var(--color-white);
  border-bottom: var(--border-thin);
  transition: max-height var(--transition-base);
}

.header-search.is-open {
  max-height: 80px;
  padding: var(--space-sm) 0;
}

/* WP menu items — wp_nav_menu outputs .menu-item, .sub-menu, etc. */
.main-nav__list > .menu-item {
  position: relative;
}

.main-nav__list > .menu-item > a {
  display: block;
  padding: 12px 14px;
  color: var(--color-white);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}

.main-nav__list > .menu-item > a:hover,
.main-nav__list > .menu-item > a:focus-visible,
.main-nav__list > .current-menu-item > a {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* Ancestor highlight — only on inner pages where a child is active */
body:not(.home) .main-nav__list > .current-menu-ancestor > a {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* Dropdown (sub-menu) */
.main-nav__list .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--color-nav);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: var(--z-dropdown);
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav__list .menu-item:hover > .sub-menu,
.main-nav__list .menu-item:focus-within > .sub-menu {
  display: block;
}

.main-nav__list .sub-menu a {
  display: block;
  padding: 10px 16px;
  color: var(--color-white);
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color var(--transition-fast);
}

.main-nav__list .sub-menu a:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* Nested dropdown (sub-sub menu) */
.main-nav__list .sub-menu .sub-menu {
  top: 0;
  left: 100%;
}

/* Hamburger toggle (3 span lines in header.php) */
.main-nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
}

@media (min-width: 992px) {
  .main-nav__hamburger {
    display: none;
  }
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

/* Mobile nav drawer */
.site-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background-color: var(--color-nav);
  z-index: var(--z-mobile-nav);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--transition-base);
}

.site-drawer.is-open {
  transform: translateX(0);
}

.site-drawer__header {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-md);
}

.site-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  padding: var(--space-xs);
}

.site-drawer__close:hover {
  opacity: 0.8;
}

.site-drawer__nav {
  padding: 0;
}

/* WP menu items inside drawer */
.site-drawer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-drawer__menu li a {
  display: block;
  padding: 12px var(--space-lg);
  color: var(--color-white);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-drawer__menu li a:hover,
.site-drawer__menu li a:focus {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.site-drawer__menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}

.site-drawer__menu .menu-item-has-children.is-open > .sub-menu {
  display: block;
}

.site-drawer__menu .sub-menu a {
  padding-left: var(--space-2xl);
  font-size: 14px;
  font-weight: var(--font-weight-normal);
}

/* Submenu toggle button injected by JS */
.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  position: absolute;
  right: var(--space-sm);
  top: 6px;
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
}

.site-drawer__menu .menu-item-has-children {
  position: relative;
}

.site-drawer__footer {
  padding: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-drawer__social {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
}

.site-drawer__social a {
  color: var(--color-white);
  opacity: 0.8;
}

.site-drawer__social a:hover {
  opacity: 1;
  color: var(--color-white);
}

/* Utility links section (top-bar menu items in drawer) */
.site-drawer__utility {
  list-style: none;
  margin: 0;
  padding: var(--space-sm) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-drawer__utility li a {
  display: block;
  padding: 10px var(--space-lg);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: var(--font-weight-normal);
}

.site-drawer__utility li a:hover,
.site-drawer__utility li a:focus {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.05);
}

/* Newsletter form inside drawer */
.site-drawer__newsletter {
  padding: var(--space-lg);
  padding-top: 0;
}

.site-drawer__newsletter .newsletter-form {
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.site-drawer__newsletter .newsletter-form__heading {
  color: var(--color-white);
  font-size: 14px;
  margin: 0 0 var(--space-xs);
}

.site-drawer__newsletter .newsletter-form__description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  margin: 0 0 var(--space-sm);
}

.site-drawer__newsletter .newsletter-form__input {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.50);
  color: var(--color-white);
  font-size: 13px;
  padding: 8px 10px;
}

.site-drawer__newsletter .newsletter-form__input::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

.site-drawer__newsletter .newsletter-form__input:focus {
  border-color: var(--color-secondary);
  background: rgba(255, 255, 255, 0.24);
}

.site-drawer__newsletter .newsletter-form__submit {
  font-size: 13px;
  padding: 8px 16px;
}

/* Overlay behind drawer */
.site-drawer__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-mobile-nav) - 1);
}

.site-drawer__overlay.is-visible {
  display: block;
}

/* Body lock when drawer is open */
body.drawer-open {
  overflow: hidden;
}


/* ==========================================================================
   8. STATION LOGOS BAR
   ========================================================================== */

.station-logos {
  background-color: var(--color-gray-light);
  padding: var(--space-sm) 0;
  overflow-x: auto;
}

.station-logos .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  min-width: max-content;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.station-logos__link {
  flex-shrink: 0;
}

.station-logos__link img {
  height: 35px;
  width: auto;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}

.station-logos__link:hover img {
  opacity: 1;
}

@media (min-width: 768px) {
  .station-logos__link img {
    height: 45px;
  }
}


/* ==========================================================================
   9. NEWSLETTER BAR (mcbar)
   ========================================================================== */

.newsletter-bar {
  background: var(--color-white);
  border-bottom: var(--border-thin);
  padding: var(--space-md) 0;
}

.newsletter-bar .container {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.newsletter-bar__label {
  font-weight: var(--font-weight-bold);
  font-size: 13px;
  white-space: nowrap;
  margin-right: var(--space-sm);
  display: none;
}

@media (min-width: 768px) {
  .newsletter-bar__label {
    display: block;
  }
}

.newsletter-bar__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
}

.newsletter-bar__input {
  flex: 1 1 140px;
  min-width: 0;
  padding: var(--space-sm) 10px;
  border: 1px solid #ccc;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.4;
}

.newsletter-bar__input:focus {
  outline: none;
  border-color: var(--color-nav);
  box-shadow: 0 0 0 2px rgba(49, 111, 152, 0.2);
}

.newsletter-bar__submit {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-success);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  white-space: nowrap;
}

.newsletter-bar__submit:hover {
  background-color: #218838;
}


/* ==========================================================================
   10. NEWS CARDS (LATEST POSTS)
   ========================================================================== */

.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 576px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.news-card {
  position: relative;
  height: 300px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-gray-light);
  background-size: cover;
  background-position: center;
}

.news-card__link {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: var(--space-lg);
  color: var(--color-white);
  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(0, 0, 0, 0.7) 100%
  );
  transition: background var(--transition-base);
}

.news-card__link:hover,
.news-card__link:focus {
  color: var(--color-white);
  background: linear-gradient(
    to bottom,
    transparent 15%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

.news-card__category {
  display: inline-block;
  margin-bottom: var(--space-xs);
  padding: 2px 8px;
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 2px;
  align-self: flex-start;
}

.news-card__title {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  letter-spacing: -0.5px;
}

.news-card__meta {
  margin-top: var(--space-xs);
  font-size: 12px;
  opacity: 0.8;
}

/* Featured card — spans full width, taller */
.news-card--featured {
  height: 400px;
}

@media (min-width: 992px) {
  .news-card--featured {
    grid-column: 1 / -1;
    height: 450px;
  }

  .news-card--featured .news-card__title {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -1.5px;
  }
}


/* ==========================================================================
   11. SECTION HEADERS (WIDGET TITLES)
   ========================================================================== */

.section-header,
.section-title,
.widget-title {
  background-color: var(--color-nav);
  color: var(--color-white);
  padding: 5px 10px;
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

/* Icons inside section headings */
.section-title i,
.widget-title i {
  color: var(--color-white);
  margin-right: 0.35em;
}

/* Variant: with bottom accent border */
.section-header--accent {
  border-bottom: 3px solid var(--color-secondary);
}


/* ==========================================================================
   12. SIDEBAR & WIDGETS
   ========================================================================== */

.sidebar .widget,
.site-sidebar .widget {
  margin-bottom: var(--space-xl);
}

.sidebar .widget:last-child,
.site-sidebar .widget:last-child {
  margin-bottom: 0;
}

/* Ad widgets */
.widget--ad {
  max-width: var(--sidebar-width);
  text-align: center;
}

.widget--ad img {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Text/HTML widgets */
.widget--text ul {
  list-style: disc;
  padding-left: var(--space-lg);
}

.widget--text li {
  margin-bottom: var(--space-xs);
  line-height: 1.5;
}

/* Recent posts widget */
.widget-recent-posts__item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: var(--border-thin);
}

.widget-recent-posts__item:last-child {
  border-bottom: none;
}

.widget-recent-posts__thumb {
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.widget-recent-posts__title {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

.widget-recent-posts__date {
  font-size: 12px;
  color: var(--color-gray-mid);
  margin-top: 2px;
}


/* ==========================================================================
   13. WEATHER WIDGET
   ========================================================================== */

.weather-widget {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--color-white);
  min-height: 200px;
}

.weather-widget__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.6)
  );
}

.weather-widget__current {
  position: relative;
  z-index: 1;
  padding: var(--space-lg);
  text-align: center;
}

.weather-widget__temp {
  font-size: 56px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -2px;
}

.weather-widget__condition {
  font-size: 16px;
  margin-top: var(--space-xs);
  opacity: 0.9;
}

.weather-widget__location {
  font-size: 13px;
  margin-top: var(--space-xs);
  opacity: 0.75;
}

/* 5-day forecast bar */
.weather-widget__forecast {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.4);
  padding: var(--space-sm) 0;
}

.weather-widget__day {
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
}

.weather-widget__day-label {
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: 11px;
}

.weather-widget__day-icon {
  width: 28px;
  height: 28px;
  margin: 2px auto;
}

.weather-widget__day-temp {
  font-weight: var(--font-weight-semibold);
}


/* ==========================================================================
   13b. WEATHER PAGE
   ========================================================================== */

.weather-page {
  max-width: 800px;
}

/* Current conditions hero */
.weather-page__current {
  background: linear-gradient(135deg, var(--color-primary) 0%, #2a7a94 100%);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.weather-page__current-main {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.weather-page__icon {
  font-size: 4rem;
  opacity: 0.9;
}

.weather-page__temp {
  display: block;
  font-size: 3.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -2px;
}

.weather-page__temp small {
  font-size: 0.5em;
  font-weight: var(--font-weight-normal);
  opacity: 0.8;
}

.weather-page__condition {
  display: block;
  font-size: 1.125rem;
  margin-top: 4px;
  opacity: 0.9;
}

.weather-page__location {
  display: block;
  font-size: 0.8125rem;
  opacity: 0.7;
  margin-top: 2px;
}

.weather-page__details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: var(--space-md);
}

.weather-page__detail {
  text-align: center;
}

.weather-page__detail-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-bottom: 2px;
}

.weather-page__detail-value {
  display: block;
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
}

/* 7-day forecast */
.weather-page__forecast {
  margin-bottom: var(--space-lg);
}

.weather-page__section-title {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-primary);
}

.weather-page__forecast-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-xs);
}

.weather-page__day {
  text-align: center;
  padding: var(--space-sm) var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  transition: border-color 0.15s, background-color 0.15s;
}

.weather-page__day:hover {
  border-color: var(--color-primary);
  background: #f8fbfc;
}

.weather-page__day--active {
  border-color: var(--color-primary);
  background: #f0f7f9;
  box-shadow: 0 0 0 2px rgba(30, 91, 112, 0.15);
}

.weather-page__day-name {
  display: block;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-primary);
}

.weather-page__day-date {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-gray-mid);
  margin-bottom: var(--space-xs);
}

.weather-page__day-icon {
  font-size: 1.75rem;
  color: var(--color-primary);
  margin: var(--space-xs) 0;
}

.weather-page__day-condition {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-gray-mid);
  min-height: 2em;
  line-height: 1.3;
  margin-bottom: var(--space-xs);
}

.weather-page__day-temps {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: 4px;
}

.weather-page__day-high {
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
}

.weather-page__day-low {
  color: var(--color-gray-mid);
  font-size: 1rem;
}

.weather-page__day-precip,
.weather-page__day-wind {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-gray-mid);
  margin-top: 2px;
}

.weather-page__day-precip i,
.weather-page__day-wind i {
  margin-right: 2px;
  color: var(--color-primary);
}

/* Hourly forecast chart */
.weather-page__hourly {
  margin-bottom: var(--space-lg);
}

.weather-page__chart-wrap {
  position: relative;
  height: 320px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: var(--space-sm) var(--space-xs) var(--space-xs);
}

.weather-page__chart-legend {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-bottom: var(--space-xs);
  font-size: 0.75rem;
  color: var(--color-gray-mid);
}

.weather-page__legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.weather-page__legend-swatch {
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: 2px;
}

.weather-page__legend-swatch--temp {
  background: #1E5B70;
  height: 3px;
}

.weather-page__legend-swatch--precip {
  background: rgba(74, 144, 217, 0.5);
  height: 8px;
  opacity: 0.6;
}

.weather-page__legend-swatch--wind {
  background: var(--color-gray-mid);
  border-top: 1px dashed var(--color-gray-mid);
  height: 0;
}

/* Radar map */
.weather-page__radar {
  margin-bottom: var(--space-lg);
}

.weather-page__radar-map {
  height: 450px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.weather-page__updated {
  font-size: 0.75rem;
  color: var(--color-gray-mid);
  text-align: right;
}

.weather-page__updated a {
  color: var(--color-primary);
}

/* Responsive: stack forecast on small screens */
@media (max-width: 768px) {
  .weather-page__forecast-grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--space-xs);
    padding-bottom: var(--space-xs);
  }
  .weather-page__day {
    flex: 0 0 auto;
    min-width: 80px;
    scroll-snap-align: start;
  }
  .weather-page__day-condition,
  .weather-page__day-precip,
  .weather-page__day-wind {
    display: none;
  }
  .weather-page__current {
    padding: var(--space-md);
  }
  .weather-page__icon {
    font-size: 2.5rem;
  }
  .weather-page__temp {
    font-size: 2.5rem;
  }
  .weather-page__details {
    grid-template-columns: repeat(3, 1fr);
  }
  .weather-page__detail-label {
    font-size: 0.625rem;
  }
  .weather-page__chart-wrap {
    height: 280px;
  }
  .weather-page__radar-map {
    height: 350px;
  }
}

@media (max-width: 480px) {
  .weather-page__chart-wrap {
    height: 240px;
  }
  .weather-page__radar-map {
    height: 280px;
  }
}


/* ==========================================================================
   14. OBITUARY LIST
   ========================================================================== */

.obituary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.obituary-list__item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-sm) 0;
  border-bottom: var(--border-thin);
}

.obituary-list__item:last-child {
  border-bottom: none;
}

.obituary-list__photo {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--color-gray-light);
}

.obituary-list__info {
  min-width: 0;
}

.obituary-list__name {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-body-text);
}

.obituary-list__name a {
  color: inherit;
}

.obituary-list__name a:hover {
  color: var(--color-secondary);
}

.obituary-list__location {
  font-size: 12px;
  color: var(--color-gray-mid);
  line-height: 1.3;
}

.obituary-list__dates {
  font-size: 12px;
  color: var(--color-gray-mid);
}

/* Sidebar obituary mini-cards */
.obit-mini {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-gray-light);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.obit-mini:last-of-type { border-bottom: none; }
.obit-mini:hover { background: var(--color-gray-light); border-radius: var(--radius-sm); }

.obit-mini__photo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}
.obit-mini__photo img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
}
.obit-mini__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-gray-light);
  color: var(--color-gray-mid);
  font-size: 20px;
}

.obit-mini__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.obit-mini__name {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.obit-mini__meta {
  font-size: 12px;
  color: var(--color-gray-mid);
  line-height: 1.3;
}

.widget--obituaries .widget-title i {
  margin-right: 0.3em;
  color: var(--color-white);
}

/* Full obituary listing page */
.obituary-archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 576px) {
  .obituary-archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .obituary-archive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.obituary-card {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-fast);
}

.obituary-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.obituary-card__photo {
  flex-shrink: 0;
  width: 80px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-gray-light);
}

.obituary-card__name {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xs);
}

.obituary-card__location {
  font-size: 13px;
  color: var(--color-gray-dark);
}

.obituary-card__dates {
  font-size: 13px;
  color: var(--color-gray-mid);
}

.obituary-card__funeral-home {
  font-size: 12px;
  color: var(--color-gray-mid);
  margin-top: var(--space-xs);
}


/* ==========================================================================
   15. SINGLE ARTICLE
   ========================================================================== */

.article-header {
  margin-bottom: var(--space-lg);
}

.article-header__category {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: 2px 8px;
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 2px;
}

.article-header__title {
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -1.5px;
  margin-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .article-header__title {
    font-size: 34px;
    line-height: 42px;
    letter-spacing: -2px;
  }
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  font-size: 13px;
  color: var(--color-gray-dark);
  padding-bottom: var(--space-md);
  border-bottom: var(--border-thin);
}

.article-meta__author {
  font-weight: var(--font-weight-semibold);
  color: var(--color-body-text);
}

.article-meta__date,
.article-meta__reading-time {
  color: var(--color-gray-mid);
}

/* Featured image */
.article-featured-image {
  margin-bottom: var(--space-lg);
}

.article-featured-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.article-featured-image figcaption {
  font-size: 12px;
  color: var(--color-gray-mid);
  padding-top: var(--space-xs);
  font-style: italic;
}

/* Article body */
.article-content {
  font-size: 16px;
  line-height: 28px;
}

.article-content p {
  margin-bottom: var(--space-lg);
}

.article-content h2 {
  margin-top: var(--space-xl);
}

.article-content h3 {
  margin-top: var(--space-lg);
}

.article-content ul,
.article-content ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.article-content ul {
  list-style: disc;
}

.article-content ol {
  list-style: decimal;
}

.article-content li {
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}

.article-content img {
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0;
}

.article-content a {
  text-decoration: underline;
  text-decoration-color: var(--color-secondary);
  text-underline-offset: 2px;
}

.article-content a:hover {
  text-decoration-color: var(--color-nav);
}


/* Related posts */
.related-posts {
  margin-top: var(--space-2xl);
}

.related-posts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 576px) {
  .related-posts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .related-posts__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.related-post {
  border: var(--border-thin);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

.related-post:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.related-post__image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.related-post__content {
  padding: var(--space-md);
}

.related-post__title {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  margin: 0;
}

.related-post__date {
  font-size: 12px;
  color: var(--color-gray-mid);
  margin-top: var(--space-xs);
}


/* ==========================================================================
   16. ARCHIVE / CATEGORY PAGES
   ========================================================================== */

.archive-header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: var(--border-medium);
}

.archive-header__title {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -1px;
  margin: 0;
}

.archive-header__description {
  font-size: 15px;
  color: var(--color-gray-dark);
  margin-top: var(--space-xs);
}

/* Standard post list for archives */
.post-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.post-list__item {
  display: flex;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: var(--border-thin);
}

.post-list__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.post-list__thumbnail {
  flex-shrink: 0;
  width: 200px;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-gray-light);
}

@media (max-width: 575px) {
  .post-list__item {
    flex-direction: column;
  }

  .post-list__thumbnail {
    width: 100%;
    height: 200px;
  }
}

.post-list__content {
  min-width: 0;
}

.post-list__category {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-secondary);
  letter-spacing: 0.5px;
}

.post-list__title {
  font-size: 19px;
  line-height: 24px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.5px;
  margin: var(--space-xs) 0;
}

.post-list__title a {
  color: var(--color-body-text);
}

.post-list__title a:hover {
  color: var(--color-secondary);
}

.post-list__excerpt {
  font-size: 14px;
  line-height: 22px;
  color: var(--color-gray-dark);
  margin-top: var(--space-xs);
}

.post-list__meta {
  font-size: 12px;
  color: var(--color-gray-mid);
  margin-top: var(--space-sm);
}

/* Events archive */
.event-list__item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: var(--space-md) 0;
  border-bottom: var(--border-thin);
}

.event-list__date-badge {
  flex-shrink: 0;
  width: 60px;
  text-align: center;
  background: var(--color-nav);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.event-list__date-month {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
}

.event-list__date-day {
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}

.event-list__title {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-xs);
}

.event-list__venue,
.event-list__time {
  font-size: 13px;
  color: var(--color-gray-dark);
}

/* Directory archive (Shop Local) */
.directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.directory-card {
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: box-shadow var(--transition-fast);
}

.directory-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.directory-card__name {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xs);
}

.directory-card__category {
  font-size: 12px;
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.directory-card__address,
.directory-card__phone {
  font-size: 13px;
  color: var(--color-gray-dark);
  margin-top: var(--space-xs);
}


/* ==========================================================================
   17. SEARCH & 404
   ========================================================================== */

.search-form {
  display: flex;
  max-width: 500px;
}

.search-form__input {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid #ccc;
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
}

.search-form__input:focus {
  outline: none;
  border-color: var(--color-nav);
}

.search-form__submit {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-nav);
  color: var(--color-white);
  border: 1px solid var(--color-nav);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.search-form__submit:hover {
  background-color: #3b93bf;
}

/* Search results */
.search-results__count {
  font-size: 15px;
  color: var(--color-gray-dark);
  margin-bottom: var(--space-lg);
}

/* 404 */
.error-404 {
  text-align: center;
  padding: var(--space-2xl) 0;
}

.error-404__title {
  font-size: 72px;
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-light);
  letter-spacing: -4px;
  margin-bottom: var(--space-md);
  line-height: 1;
}

.error-404__message {
  font-size: 18px;
  color: var(--color-gray-dark);
  margin-bottom: var(--space-lg);
}


/* ==========================================================================
   18. FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--color-footer);
  color: var(--color-white);
  font-size: 13px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transition-fast);
}

.site-footer a:hover {
  color: var(--color-white);
}

/* Footer widgets area */
.footer-widgets {
  padding: var(--space-2xl) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .footer-widgets {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .footer-widgets {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-widget__title {
  color: var(--color-white);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-nav);
}

.footer-widget ul li {
  margin-bottom: var(--space-sm);
}

/* Footer nav */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-nav__link {
  font-size: 13px;
}

/* Copyright bar */
.footer-copyright {
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.footer-copyright__text {
  opacity: 0.6;
  font-size: 12px;
}

/* Back to top */
.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-family);
  transition: color var(--transition-fast);
}

.back-to-top:hover {
  color: var(--color-white);
}


/* ==========================================================================
   19. BUTTONS & FORMS
   ========================================================================== */

.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

.btn--primary {
  background-color: var(--color-nav);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: #3b93bf;
  color: var(--color-white);
}

.btn--secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.btn--secondary:hover {
  background-color: #3a8ec5;
  color: var(--color-white);
}

.btn--cta {
  background-color: var(--color-ochre);
  color: var(--color-white);
}

.btn--cta:hover {
  background-color: #b07d22;
  color: var(--color-white);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-nav);
  border-color: var(--color-nav);
}

.btn--outline:hover {
  background-color: var(--color-nav);
  color: var(--color-white);
}

.btn--sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: 12px;
}

.btn--lg {
  padding: 12px 24px;
  font-size: 16px;
}

/* Form elements */
.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-body-text);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid #ccc;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-body-text);
  background-color: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-nav);
  box-shadow: 0 0 0 2px rgba(49, 111, 152, 0.2);
}

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

/* Submit forms (Submit News, Submit Event, etc.) */
.submit-form {
  max-width: 700px;
}

.submit-form .btn {
  margin-top: var(--space-sm);
}


/* ==========================================================================
   20. PAGINATION
   ========================================================================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xl) 0;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-sm);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-body-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.pagination a:hover {
  background-color: var(--color-nav);
  border-color: var(--color-nav);
  color: var(--color-white);
}

.pagination .current {
  background-color: var(--color-nav);
  border-color: var(--color-nav);
  color: var(--color-white);
}

.pagination .dots {
  border: none;
  background: none;
  color: var(--color-gray-mid);
}

/* WP-generated nav links */
.nav-links {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
}

.nav-links a {
  font-weight: var(--font-weight-semibold);
}


/* ==========================================================================
   21. WORDPRESS CORE OVERRIDES
   ========================================================================== */

/* WP block alignment */
.alignnone {
  margin: var(--space-md) 0;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-md);
}

.alignleft {
  float: left;
  margin: var(--space-xs) var(--space-md) var(--space-md) 0;
}

.alignright {
  float: right;
  margin: var(--space-xs) 0 var(--space-md) var(--space-md);
}

/* Captions */
.wp-caption {
  max-width: 100%;
  margin-bottom: var(--space-md);
}

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

.wp-caption-text {
  font-size: 12px;
  color: var(--color-gray-mid);
  padding-top: var(--space-xs);
  font-style: italic;
}

/* Galleries */
.gallery {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }

.gallery-item {
  margin: 0;
}

.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* WP admin bar spacing */
.admin-bar .main-nav.is-sticky {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .main-nav.is-sticky {
    top: 46px;
  }
}

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

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  height: auto;
  left: 5px;
  line-height: normal;
  padding: var(--space-md);
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* WP Gutenberg block widths */
.entry-content > .alignwide {
  max-width: calc(var(--container-max) + 100px);
  margin-left: auto;
  margin-right: auto;
}

.entry-content > .alignfull {
  max-width: none;
  margin-left: calc(-1 * var(--container-padding));
  margin-right: calc(-1 * var(--container-padding));
}

/* Comment form */
.comment-list {
  list-style: none;
  padding: 0;
}

.comment-body {
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  border: var(--border-thin);
  border-radius: var(--radius-md);
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: 13px;
}

.comment-author .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.comment-author .fn {
  font-weight: var(--font-weight-semibold);
}

.comment-metadata {
  font-size: 12px;
  color: var(--color-gray-mid);
}

.children {
  list-style: none;
  padding-left: var(--space-xl);
}


/* ==========================================================================
   TEMPLATE INTEGRATION — Styles for class names used in PHP templates
   ========================================================================== */

/* --- Post cards (from fldn_post_card() in template-tags.php) --- */
.post-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-gray-light);
  transition: box-shadow var(--transition-base);
}

.post-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.post-card__link {
  display: block;
  color: var(--color-white);
}

.post-card__image {
  height: 300px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-gray-light);
}

.post-card__overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: var(--space-lg);
  background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.7) 100%);
  transition: background var(--transition-base);
}

.post-card__link:hover .post-card__overlay,
.post-card__link:focus .post-card__overlay {
  background: linear-gradient(to bottom, transparent 15%, rgba(0, 0, 0, 0.8) 100%);
}

.post-card__title {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  letter-spacing: -0.3px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

.post-card__date {
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--color-white);
  opacity: 0.8;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 575px) {
  .post-card__title {
    font-size: 20px;
    line-height: 26px;
  }
}

/* --- Posts grid (used in archive, search, homepage) --- */
.posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 576px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .posts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.posts-grid--3col {
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .posts-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .posts-grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

.posts-grid--4col {
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .posts-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .posts-grid--4col {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- News section (homepage sections) --- */
.news-section {
  margin-bottom: var(--space-xl);
}

.news-section:last-child {
  margin-bottom: 0;
}

/* --- Section title links --- */
.section-title a {
  color: var(--color-white);
}

.section-title a:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Page header (archive, search) --- */
.page-header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: var(--border-medium);
}

.page-title {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -1px;
  margin: 0;
}

.archive-description {
  font-size: 15px;
  color: var(--color-gray-dark);
  margin-top: var(--space-xs);
}

/* --- Single article (entry-*) --- */
.single-article,
.single-page {
  max-width: 100%;
}

.entry-header {
  margin-bottom: var(--space-lg);
}

.entry-title {
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -1.5px;
  margin-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .entry-title {
    font-size: 34px;
    line-height: 40px;
    letter-spacing: -2px;
  }
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  font-size: 13px;
  color: var(--color-gray-dark);
}

.entry-meta .posted-on,
.entry-meta .byline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.entry-thumbnail {
  margin-bottom: var(--space-lg);
}

.entry-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.entry-thumbnail figcaption {
  font-size: 12px;
  color: var(--color-gray-mid);
  padding-top: var(--space-xs);
  font-style: italic;
}

.entry-content {
  font-size: 16px;
  line-height: 1.7;
}

.entry-content p {
  margin-bottom: var(--space-md);
}

.entry-content a {
  text-decoration: underline;
  text-decoration-color: var(--color-secondary);
  text-underline-offset: 2px;
}

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

.entry-content img {
  border-radius: var(--radius-md);
}

.entry-content ul,
.entry-content ol {
  list-style: revert;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-md);
}

.entry-content li {
  margin-bottom: var(--space-xs);
}

.article-newsletter-cta {
  text-align: center;
  padding: var(--space-xl) 0;
  margin-top: var(--space-xl);
  border-top: var(--border-thin);
}

.article-newsletter-cta__title {
  margin: 0 0 var(--space-xs);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.article-newsletter-cta__subtitle {
  margin: 0 0 var(--space-lg);
  font-size: 15px;
  color: var(--color-gray-mid);
}

.entry-footer {
  margin-top: var(--space-xl);
}

.entry-categories {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.entry-categories .label {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-dark);
}

.category-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  background: var(--color-gray-light);
  color: var(--color-body-text);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.category-badge:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* --- Entry badges (police blotter, community release) --- */
.entry-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-sm);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm);
}

.entry-badge--blotter {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.entry-badge--community {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

/* --- Legal disclaimer (police blotter) --- */
.legal-disclaimer {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-top: var(--space-lg);
}

.legal-disclaimer p {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: #92400e;
  line-height: 1.5;
}

/* --- Related posts --- */
.related-posts {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--border-thin);
}

.related-posts__title {
  font-size: 1.1rem;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-primary);
}

/* --- Post navigation --- */
.post-navigation {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--border-thin);
}

.post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
}

.post-navigation .nav-label {
  display: block;
  font-size: 12px;
  color: var(--color-gray-mid);
  margin-bottom: var(--space-xs);
}

.post-navigation .nav-title {
  display: block;
  font-weight: var(--font-weight-semibold);
}

/* --- Event cards (Community Calendar on homepage) --- */
.event-card {
  border: var(--border-thin);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

.event-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.event-card__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  color: var(--color-body-text);
}

.event-card__link:hover {
  color: var(--color-body-text);
}

.event-card__date {
  flex-shrink: 0;
  width: 56px;
  text-align: center;
  background: var(--color-nav);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.event-card__month {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
}

.event-card__day {
  display: block;
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}

.event-card__info {
  min-width: 0;
}

.event-card__title {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  margin: 0 0 var(--space-xs);
}

.event-card__venue,
.event-card__time {
  display: block;
  font-size: 12px;
  color: var(--color-gray-dark);
}

/* Newsletter widget wrapper — purple title bar to match form */
.widget--newsletter {
  border: none;
}

.widget-title--newsletter {
  background-color: var(--color-purple-dark);
  margin-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.widget-title--weather {
  background-color: #2E7D8C;
  margin-bottom: 0;
}

.widget-title--obituaries {
  background-color: #5C5C5C;
  margin-bottom: 0;
}

.widget-title--flx-finest {
  background-color: #B8860B;
  margin-bottom: 0;
}

.widget-title--careers {
  background-color: #2E6B62;
  margin-bottom: 0;
}

.widget__body {
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9rem;
  line-height: 1.5;
}

.widget__cta {
  display: inline-block;
  margin-top: var(--space-xs);
  font-weight: 600;
  color: var(--color-link);
}

/* --- Newsletter form (from fldn_newsletter_form()) --- */
.newsletter-form {
  background:
    url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0zM20 20h20v20H20z' fill='%23ffffff' fill-opacity='.03'/%3E%3C/svg%3E"),
    linear-gradient(160deg, var(--color-purple-light) 0%, var(--color-purple) 40%, var(--color-purple-dark) 100%);
  padding: var(--space-lg);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-white);
  box-shadow: 0 2px 8px rgba(90, 39, 135, 0.25);
}

.newsletter-form--sidebar {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.newsletter-form--inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-sm);
  background: none;
  color: var(--color-body-text);
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
}

.newsletter-form--inline .newsletter-form__form {
  flex-wrap: nowrap;
  align-items: center;
}

.newsletter-form__heading {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xs);
  color: var(--color-white);
}

.newsletter-form__description {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.newsletter-form__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  width: 100%;
}

.newsletter-form__input {
  flex: 1 1 200px;
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid #ccc;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
}

.newsletter-form__input:focus {
  outline: none;
  border-color: var(--color-nav);
  box-shadow: 0 0 0 2px rgba(49, 111, 152, 0.2);
}

.newsletter-form__submit {
  flex-shrink: 0;
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  background-color: #C7392A;
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color var(--transition-fast);
}

.newsletter-form__submit:hover {
  background-color: #A82E1F;
}

.newsletter-form__input--half {
  flex: 1 1 120px;
}

.newsletter-form__input--zip {
  flex: 0 0 100px;
}

.newsletter-form--inline .newsletter-form__input {
  flex: 0 1 auto;
  width: auto;
  min-width: 140px;
}

.newsletter-form--inline .newsletter-form__input--half {
  min-width: 100px;
}

.newsletter-form--inline .newsletter-form__input--zip {
  min-width: 80px;
  flex: 0 0 80px;
}

.newsletter-form--inline .newsletter-form__submit {
  width: auto;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .newsletter-form--inline,
  .newsletter-form--inline .newsletter-form__form {
    flex-wrap: wrap;
  }

  .newsletter-form--inline .newsletter-form__input,
  .newsletter-form--inline .newsletter-form__input--half,
  .newsletter-form--inline .newsletter-form__input--zip {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }

  .newsletter-form--inline .newsletter-form__submit {
    width: 100%;
  }
}

/* --- Alerts form (obituary / event CTAs) --- */
.alerts-form {
  background: var(--color-bg-alt, #f8f9fa);
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: var(--space-md, 1rem);
  margin: var(--space-lg, 2rem) 0;
}

.alerts-form__heading {
  font-size: 1rem;
  margin: 0 0 var(--space-xs, 0.5rem);
}

.alerts-form__heading i {
  color: var(--color-primary);
  margin-right: 0.3em;
}

.alerts-form__description {
  font-size: 0.85rem;
  color: #555;
  margin: 0 0 var(--space-md, 1rem);
}

.alerts-form__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 0.75rem);
}

.alerts-form__input {
  flex: 1 1 200px;
  min-width: 0;
  padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
  border: 1px solid #ccc;
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-family);
  font-size: var(--font-size-base, 14px);
}

.alerts-form__input--half {
  flex: 1 1 120px;
}

.alerts-form__input:focus {
  outline: none;
  border-color: var(--color-nav, #316f98);
  box-shadow: 0 0 0 2px rgba(49, 111, 152, 0.2);
}

.alerts-form__submit {
  flex-shrink: 0;
  padding: var(--space-sm, 0.75rem) var(--space-lg, 2rem);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-family);
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color 0.2s;
}

.alerts-form__submit:hover {
  background: #164a5c;
}

/* --- Obituary filter submit button --- */
.obituary-filters__submit {
  padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-family);
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.obituary-filters__submit:hover {
  background: #164a5c;
}

/* --- Pagination prev/next variant --- */
.pagination__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm, 4px);
  transition: background-color 0.2s, color 0.2s;
}

.pagination__link:hover {
  background: var(--color-primary);
  color: #fff;
}

.pagination__info {
  font-size: 14px;
  color: #555;
  padding: 0 var(--space-sm, 0.75rem);
}

/* --- No results / empty state --- */
.no-results {
  text-align: center;
  padding: var(--space-2xl) 0;
}

.no-results .page-title {
  margin-bottom: var(--space-md);
}

.no-results .search-form {
  margin: var(--space-lg) auto 0;
}

/* --- Search form (searchform.php) --- */
.search-form {
  display: flex;
  max-width: 500px;
}

.search-field {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid #ccc;
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
}

.search-field:focus {
  outline: none;
  border-color: var(--color-nav);
}

.search-submit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-nav);
  color: var(--color-white);
  border: 1px solid var(--color-nav);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.search-submit:hover {
  background-color: #3b93bf;
}

/* --- Share buttons (from fldn_share_buttons()) --- */
.share-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.share-button--facebook {
  background: #1877f2;
  color: var(--color-white);
}

.share-button--facebook:hover {
  background: #166fe5;
  color: var(--color-white);
}

.share-button__label {
  font-size: 13px;
}

.share-button--x,
.share-button--email,
.share-button--native {
  background: var(--color-gray-light);
  color: var(--color-body-text);
  padding: var(--space-sm);
}

.share-button--x:hover,
.share-button--email:hover,
.share-button--native:hover {
  background: var(--color-nav);
  color: var(--color-white);
}

/* --- Button variants (used in templates) --- */
.btn--more {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-nav);
}

.btn--more:hover {
  color: var(--color-secondary);
}

/* --- Masthead inner (header.php) --- */
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

/* --- Top bar menu (wp_nav_menu output) --- */
.top-bar__menu {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-bar__menu li a {
  color: var(--color-white);
  font-size: 13px;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.top-bar__menu li a:hover {
  color: var(--color-white);
  opacity: 0.8;
}

/* --- Footer nav menu (wp_nav_menu output) --- */
.footer-nav__menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav__menu li a {
  font-size: 13px;
}

/* --- Footer widget grid (footer.php) --- */
.footer-widgets__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .footer-widgets__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .footer-widgets__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ==========================================================================
   22. UTILITIES
   ========================================================================== */

.text-center { text-align: center; }
.text-right  { text-align: right; }

.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mb-sm { margin-bottom: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mb-md { margin-bottom: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-lg { margin-bottom: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-xl { margin-bottom: var(--space-xl); }

.visually-hidden {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Clearfix for floated WP content */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* Content zone placeholder / loading state */
.content-zone {
  text-align: center;
  min-height: 50px;
}

.content-zone img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Section spacing between homepage blocks */
.home-section {
  margin-bottom: var(--space-xl);
}

.home-section:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   23. CPT TEMPLATES — Events, Directory, On-Air, Obituaries
   ========================================================================== */

/* --- Breadcrumbs --- */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--color-text-light, #666);
  margin-bottom: var(--space-sm);
}
.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb span[aria-hidden] {
  margin: 0 0.35em;
  color: var(--color-gray-mid);
}

/* --- Event Details (single-event) --- */
.event-details {
  background: var(--color-bg-alt, #f8f9fa);
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}
.event-details__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}
.event-details__row + .event-details__row {
  border-top: 1px solid #eee;
}
.event-details__row i {
  color: var(--color-primary);
  min-width: 20px;
  text-align: center;
  margin-top: 3px;
}
.event-details__row a {
  color: var(--color-primary);
  text-decoration: none;
}
.event-details__row a:hover {
  text-decoration: underline;
}
.event-map {
  margin: var(--space-lg) 0;
  border-radius: 6px;
  overflow: hidden;
}
.event-map iframe {
  width: 100%;
  height: 350px;
  border: 0;
}
.event-actions {
  margin: var(--space-md) 0;
}
.btn--calendar {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--color-primary);
  color: #fff;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  font-size: 0.9rem;
}
.btn--calendar:hover {
  background: var(--color-primary-dark, #164a5c);
  color: #fff;
}

/* --- Event Archive List --- */
.events-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.event-list-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: var(--space-md);
  padding: var(--space-md);
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  align-items: start;
}
.event-list-item__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: 6px;
  padding: var(--space-xs);
  text-align: center;
  line-height: 1.2;
}
.event-list-item__month {
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
}
.event-list-item__day {
  font-size: 1.6rem;
  font-weight: var(--font-weight-bold);
}
.event-list-item__weekday {
  font-size: 0.7rem;
  opacity: 0.85;
}
.event-list-item__title {
  font-size: 1.1rem;
  margin: 0 0 var(--space-xs);
}
.event-list-item__title a {
  color: var(--color-text);
  text-decoration: none;
}
.event-list-item__title a:hover {
  color: var(--color-primary);
}
.event-list-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: 0.85rem;
  color: #666;
}
.event-list-item__meta i {
  color: var(--color-primary);
  margin-right: 0.2em;
}
.event-list-item__excerpt {
  font-size: 0.9rem;
  color: #555;
  margin: var(--space-xs) 0 0;
}
.event-list-item__thumb {
  display: none;
}
@media (min-width: 768px) {
  .event-list-item {
    grid-template-columns: 70px 1fr 120px;
  }
  .event-list-item__thumb {
    display: block;
  }
  .event-list-item__thumb img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
  }
}

/* --- Directory (Shop Local) --- */
.directory-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid #e5e5e5;
}
.directory-filter {
  display: inline-block;
  padding: 0.35em 0.8em;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.directory-filter:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.directory-filter--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.directory-filter__count {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-left: 0.2em;
}
.directory-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 576px) {
  .directory-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .directory-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.directory-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  overflow: hidden;
}
.directory-card__thumb img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.directory-card__body {
  padding: var(--space-sm);
}
.directory-card__title {
  font-size: 1rem;
  margin: 0 0 var(--space-xs);
}
.directory-card__title a {
  color: var(--color-text);
  text-decoration: none;
}
.directory-card__title a:hover {
  color: var(--color-primary);
}
.directory-card__address,
.directory-card__phone {
  font-size: 0.85rem;
  color: #666;
  margin: 0 0 0.3em;
}
.directory-card__address i,
.directory-card__phone i {
  color: var(--color-primary);
  margin-right: 0.3em;
  width: 16px;
  text-align: center;
}
.directory-card__categories {
  margin-top: var(--space-xs);
}
.category-badge--small {
  font-size: 0.7rem;
  padding: 0.15em 0.5em;
}

/* --- Single Directory --- */
.directory-info {
  background: var(--color-bg-alt, #f8f9fa);
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}
.directory-info__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}
.directory-info__row + .directory-info__row {
  border-top: 1px solid #eee;
}
.directory-info__row i {
  color: var(--color-primary);
  min-width: 20px;
  text-align: center;
}
.directory-info__row a {
  color: var(--color-primary);
  text-decoration: none;
}
.directory-info__row a:hover {
  text-decoration: underline;
}
.directory-social {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) 0 0;
}
.directory-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}
.directory-social__link:hover {
  background: var(--color-primary-dark, #164a5c);
  color: #fff;
}
.directory-map {
  margin: var(--space-lg) 0;
  border-radius: 6px;
  overflow: hidden;
}
.directory-map iframe {
  width: 100%;
  height: 350px;
  border: 0;
}
.directory-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

/* --- On-Air Personalities --- */
.onair-station-section {
  margin-bottom: var(--space-xl);
}
.onair-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (min-width: 576px) {
  .onair-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 992px) {
  .onair-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.onair-card {
  text-align: center;
}
.onair-card__link {
  display: block;
  text-decoration: none;
  color: var(--color-text);
}
.onair-card__link:hover {
  color: var(--color-primary);
}
.onair-card__photo {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
  margin: 0 auto var(--space-sm);
  max-width: 160px;
}
.onair-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.onair-card__photo--placeholder {
  background: var(--color-bg-alt, #f0f0f0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #ccc;
}
.onair-card__name {
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

/* --- Single On-Air Profile --- */
.onair-profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
@media (min-width: 768px) {
  .onair-profile {
    grid-template-columns: 280px 1fr;
  }
}
.onair-profile__photo img {
  width: 100%;
  border-radius: 8px;
}
.onair-contact__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  font-size: 0.9rem;
}
.onair-contact__row i {
  color: var(--color-primary);
  min-width: 20px;
  text-align: center;
}
.onair-contact__row a {
  color: var(--color-primary);
  text-decoration: none;
}
.onair-contact__row a:hover {
  text-decoration: underline;
}
.onair-social {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
}
.onair-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}
.onair-social__link:hover {
  background: var(--color-primary-dark, #164a5c);
  color: #fff;
}
.onair-schedule {
  margin-top: var(--space-md);
  background: var(--color-bg-alt, #f8f9fa);
  border-radius: 6px;
  padding: var(--space-md);
}
.onair-schedule__title {
  font-size: 1rem;
  margin: 0 0 var(--space-sm);
  color: var(--color-primary);
}
.onair-schedule__list {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 4px 16px;
  font-size: 0.9rem;
}
.onair-schedule__list dt {
  font-weight: var(--font-weight-semibold);
}
.onair-schedule__list dd {
  margin: 0;
  color: #555;
}
.onair-station-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

/* --- Single Obituary --- */
.obituary-vitals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs, 0.5rem) var(--space-md, 1rem);
  color: #555;
  font-size: 0.9rem;
  margin-top: var(--space-xs, 0.5rem);
}
.obituary-vitals__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.obituary-vitals__item i {
  color: var(--color-primary);
  font-size: 0.85em;
}
.obituary-body {
  margin-bottom: var(--space-lg, 2rem);
}
@media (min-width: 768px) {
  .obituary-body {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-lg, 2rem);
  }
}
.obituary-photo__img {
  width: 100%;
  max-width: 280px;
  border-radius: 6px;
  margin-bottom: var(--space-md, 1rem);
}
@media (min-width: 768px) {
  .obituary-photo__img {
    margin-bottom: 0;
  }
}
.obituary-service,
.obituary-funeral-home {
  background: var(--color-bg-alt, #f8f9fa);
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: var(--space-md, 1rem);
  margin-bottom: var(--space-md, 1rem);
}
.obituary-service h3,
.obituary-funeral-home h3 {
  font-size: 1rem;
  margin: 0 0 var(--space-sm, 0.75rem);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.obituary-service__row,
.obituary-funeral-home__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm, 0.75rem);
  padding: var(--space-xs, 0.5rem) 0;
}
.obituary-service__row + .obituary-service__row,
.obituary-funeral-home__row + .obituary-funeral-home__row {
  border-top: 1px solid #eee;
}
.obituary-service__row i,
.obituary-funeral-home__row i {
  color: var(--color-primary);
  min-width: 20px;
  text-align: center;
  margin-top: 3px;
}
.obituary-funeral-home__row a {
  color: var(--color-primary);
  text-decoration: none;
}
.obituary-funeral-home__row a:hover {
  text-decoration: underline;
}

/* Share buttons (for non-WP-post pages like obituaries) */
.share-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.75rem);
  margin-bottom: var(--space-md, 1rem);
}
.share-buttons__label {
  font-size: 0.85rem;
  color: #666;
  font-weight: var(--font-weight-semibold);
}
.share-buttons__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.15s;
}
.share-buttons__link:hover {
  background: var(--color-secondary, #2B7AB8);
}

/* --- Obituary Archive --- */
.obituary-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 0.75rem);
  margin-bottom: var(--space-lg, 2rem);
  align-items: center;
}
.obituary-filters__select {
  padding: 0.5em 0.8em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
}
.obituary-filters__search {
  padding: 0.5em 0.8em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
  flex: 1;
  min-width: 200px;
}
.obituary-filters__count {
  font-size: 0.85rem;
  color: var(--color-gray-mid);
}

/* Archive card list */
.obit-list {
  display: flex;
  flex-direction: column;
}
.obit-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-md, 1rem);
  padding: var(--space-md, 1rem) 0;
  border-bottom: 1px solid #eee;
  align-items: start;
}
@media (min-width: 576px) {
  .obit-card {
    grid-template-columns: 100px 1fr;
  }
}
.obit-card__photo {
  display: block;
}
.obit-card__photo img {
  width: 80px;
  height: 100px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}
@media (min-width: 576px) {
  .obit-card__photo img {
    width: 100px;
    height: 120px;
  }
}
.obit-card__photo-placeholder {
  width: 80px;
  height: 100px;
  border-radius: 6px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 1.8rem;
}
@media (min-width: 576px) {
  .obit-card__photo-placeholder {
    width: 100px;
    height: 120px;
  }
}
.obit-card__name {
  font-size: 1rem;
  margin: 0 0 0.15em;
  line-height: 1.3;
}
.obit-card__name a {
  color: var(--color-text, #333);
  text-decoration: none;
}
.obit-card__name a:hover {
  color: var(--color-primary);
}
.obit-card__dates {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 0.2em;
}
.obit-card__age {
  margin-left: 0.6em;
  padding-left: 0.6em;
  border-left: 1px solid #ddd;
}
.obit-card__location {
  font-size: 0.8rem;
  color: #767676;
  margin-bottom: 0.15em;
}
.obit-card__location i {
  color: var(--color-primary);
  margin-right: 0.25em;
  font-size: 0.75rem;
}
.obit-card__home {
  font-size: 0.8rem;
  color: #666;
}
.obit-card__home a {
  color: var(--color-primary);
  text-decoration: none;
}
.obit-card__home a:hover {
  text-decoration: underline;
}

/* Sentinel / infinite scroll loader */
.obituary-sentinel {
  text-align: center;
  padding: var(--space-lg, 2rem);
  color: var(--color-gray-mid);
  font-size: 0.9rem;
}

/* --- Funeral Home Pages --- */
.funeral-home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md, 1rem);
}
@media (min-width: 576px) {
  .funeral-home-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .funeral-home-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.funeral-home-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: var(--space-md, 1rem);
}
.funeral-home-card__name {
  font-size: 1rem;
  margin: 0 0 var(--space-xs, 0.5rem);
}
.funeral-home-card__name a {
  color: var(--color-text, #333);
  text-decoration: none;
}
.funeral-home-card__name a:hover {
  color: var(--color-primary);
}
.funeral-home-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 0.75rem);
  font-size: 0.85rem;
  color: #555;
  margin-bottom: var(--space-xs, 0.5rem);
}
.funeral-home-card__meta i {
  color: var(--color-primary);
  margin-right: 0.2em;
}
.funeral-home-card__link {
  font-size: 0.8rem;
  color: var(--color-primary);
  text-decoration: none;
}
.funeral-home-card__link:hover {
  text-decoration: underline;
}
.funeral-home-info {
  background: var(--color-bg-alt, #f8f9fa);
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: var(--space-md, 1rem);
  margin-bottom: var(--space-lg, 2rem);
}
.funeral-home-info__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.75rem);
  padding: var(--space-xs, 0.5rem) 0;
}
.funeral-home-info__row + .funeral-home-info__row {
  border-top: 1px solid #eee;
}
.funeral-home-info__row i {
  color: var(--color-primary);
  min-width: 20px;
  text-align: center;
}
.funeral-home-info__row a {
  color: var(--color-primary);
  text-decoration: none;
}
.funeral-home-info__row a:hover {
  text-decoration: underline;
}
.funeral-home-obits__title {
  font-size: 1.1rem;
  margin: var(--space-lg, 2rem) 0 var(--space-md, 1rem);
  padding-bottom: var(--space-sm, 0.75rem);
  border-bottom: 2px solid var(--color-primary);
}

/* --- Shared Button Styles --- */
.btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--color-primary);
  color: #fff;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  font-size: 0.9rem;
}
.btn--primary:hover {
  background: var(--color-primary-dark, #164a5c);
  color: #fff;
}

/* ==========================================================================
   24. STATION PAGE
   ========================================================================== */

.station-page {
  --station-color: var(--color-nav);
  --station-color-secondary: var(--station-color);
}

/* -- Station Layout — Two-column grid -- */
.station-layout {
  background: var(--color-white);
  padding: var(--space-xl) 0;
  border-bottom: var(--border-thin);
}

@media (max-width: 767px) {
  .station-layout {
    padding: var(--space-md) 0;
  }
}

.station-layout__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .station-layout__grid {
    grid-template-columns: 1fr 280px;
    grid-template-rows: auto auto;
    gap: var(--grid-gap);
  }

  .station-layout__top    { grid-column: 1; grid-row: 1; }
  .station-layout__sidebar { grid-column: 2; grid-row: 1 / -1; }
  .station-layout__bottom  { grid-column: 1; grid-row: 2; }
}

@media (min-width: 992px) {
  .station-layout__grid {
    grid-template-columns: 1fr 320px;
    gap: var(--space-2xl);
  }
}

/* Main content — top (now-playing, listen live, on-air) */
.station-layout__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0; /* Prevent grid blowout from scrollable content */
}

/* Main content — bottom (recently played, schedule) */
.station-layout__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

/* Station welcome content (non-music stations) */
.station-welcome {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-gray-dark);
  padding: var(--space-md);
  background: #f8f9fa;
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--station-color);
}

.station-welcome p:last-child {
  margin-bottom: 0;
}

/* Sidebar features */
.sidebar-feature {
  text-align: center;
}

.sidebar-feature__img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

@media (max-width: 767px) {
  .sidebar-feature__img {
    width: 100%;
  }
}

/* Contest sidebar column */
.station-layout__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

@media (min-width: 768px) {
  .station-layout__sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
  }
}

/* Inline section headers within the main column */
.station-section {
  padding-top: var(--space-lg);
  border-top: var(--border-thin);
}

.station-section__title {
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-dark);
  margin-bottom: var(--space-md);
}

.now-playing {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.now-playing__art {
  position: relative;
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-gray-light);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.now-playing__art img,
.now-playing__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.now-playing__placeholder-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  color: var(--color-gray-mid);
  z-index: 0;
}

/* Hide empty-src cover image, show placeholder icon instead */
.now-playing__cover[src=""] {
  display: none;
}

/* Hide placeholder icon once cover image has a real src */
.now-playing__cover:not([src=""]) ~ .now-playing__placeholder-icon {
  display: none;
}

.now-playing__live-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #b71c1c;
  color: #fff;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 1;
}

.now-playing__live-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.now-playing__info {
  flex: 1;
  min-width: 0;
}

.now-playing__label {
  display: block;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--station-color);
  margin-bottom: 4px;
}

.now-playing__title {
  display: block;
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin-bottom: 4px;
}

.now-playing__artist {
  display: block;
  font-size: 15px;
  color: var(--color-gray-dark);
}

/* Listen Live Button */
.listen-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--station-color, var(--color-primary));
  color: #fff;
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 28px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast), filter var(--transition-fast);
  align-self: flex-start;
}

.listen-btn:hover {
  background: var(--station-color, var(--color-primary));
  filter: brightness(0.85);
  color: #fff;
}

.listen-btn i {
  font-size: 18px;
}

/* On Air Now */
.on-air-now {
  padding: var(--space-lg);
  background: #f8f9fa;
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--station-color);
}

.on-air-now__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.on-air-now__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
}

.on-air-now__photo.placeholder-img {
  background: var(--color-gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-mid);
  font-size: 20px;
}

.on-air-now__details {
  flex: 1;
  min-width: 0;
}

.on-air-now__label {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--station-color);
}

.on-air-now__name {
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.on-air-now__name a {
  color: var(--color-body-text);
}

.on-air-now__name a:hover {
  color: var(--station-color);
}

.on-air-now__show {
  font-size: 13px;
  color: var(--color-gray-dark);
}

.on-air-now__bio {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-gray-dark);
  margin-bottom: var(--space-md);
}

.on-air-now__more {
  color: var(--station-color, var(--color-primary));
  font-weight: 600;
  margin-left: 4px;
  white-space: nowrap;
}

.on-air-now__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: 12px;
  color: var(--color-gray-dark);
}

.on-air-now__contact a {
  color: var(--color-gray-dark);
  display: flex;
  align-items: center;
  gap: 4px;
}

.on-air-now__contact a:hover {
  color: var(--station-color);
}

.on-air-now__socials {
  display: flex;
  gap: var(--space-sm);
}

.on-air-now__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-white);
  border: var(--border-thin);
  color: var(--color-gray-dark);
  font-size: 14px;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.on-air-now__social:hover {
  border-color: var(--station-color);
  color: var(--station-color);
}

/* -- Featured Contest Column -- */
.featured-contest {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

.featured-contest:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.featured-contest__image {
  height: 200px;
  background: linear-gradient(135deg, #78909c, #546e7a);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.2);
  font-size: 48px;
}

.featured-contest__prize-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--color-ochre);
  color: #fff;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 6px;
}

.featured-contest__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.featured-contest__title {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  margin-bottom: var(--space-sm);
}

.featured-contest__title a {
  color: var(--color-body-text);
}

.featured-contest__title a:hover {
  color: var(--station-color);
}

.featured-contest__desc {
  font-size: 14px;
  color: var(--color-gray-dark);
  line-height: 1.5;
  margin-bottom: var(--space-md);
  flex: 1;
}

.featured-contest__deadline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-gray-mid);
  margin-bottom: var(--space-md);
}

.featured-contest__deadline i {
  color: var(--color-ochre);
}

.featured-contest__more {
  text-align: center;
  margin-top: var(--space-md);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
}

/* Contest form inside featured contest */
.featured-contest__body .contest-form {
  background: transparent;
  border: none;
  padding: 0;
  border-top: var(--border-thin);
  padding-top: var(--space-md);
  margin-top: var(--space-sm);
}

.featured-contest__body .contest-form__heading {
  font-size: 14px;
}

.featured-contest__body .contest-form__form {
  gap: var(--space-sm);
}

.featured-contest__body .contest-form__row {
  width: 100%;
}

/* -- Contest Strip Cards (stacked in sidebar) -- */
.contest-strip__card {
  background: var(--color-white);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.contest-strip__card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.contest-strip__card-img {
  height: 120px;
  background: var(--color-gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-mid);
  font-size: 32px;
  position: relative;
}

.contest-strip__card-prize {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: var(--color-ochre);
  color: #fff;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

.contest-strip__card-body {
  padding: var(--space-md);
}

.contest-strip__card-title {
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  margin-bottom: var(--space-sm);
}

.contest-strip__card-deadline {
  font-size: 11px;
  color: var(--color-gray-mid);
  margin-bottom: var(--space-sm);
}

.contest-strip__card-cta {
  display: block;
  text-align: center;
  background: var(--station-color);
  color: #fff;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-fast);
}

.contest-strip__card-cta:hover {
  opacity: 0.9;
  color: #fff;
}

/* -- Full-width sections below the grid -- */
.station-page .section {
  padding: var(--space-xl) 0;
  border-bottom: var(--border-thin);
  background: var(--color-white);
}

@media (max-width: 767px) {
  .station-page .section {
    padding: var(--space-lg) 0;
  }
}

.station-page .section--alt {
  background: #f8f9fa;
}

.station-page .section__title {
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-dark);
  margin-bottom: var(--space-lg);
}

/* -- Recently Played Tiles -- */

.recent-scroll {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-sm);
}

.recent-scroll::-webkit-scrollbar {
  height: 4px;
}

.recent-scroll::-webkit-scrollbar-thumb {
  background: var(--color-gray-light);
  border-radius: 2px;
}

.recent-tile {
  flex: 0 0 120px;
  scroll-snap-align: start;
  text-align: center;
}

.recent-tile__art {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-md);
  background: var(--color-gray-light);
  margin-bottom: var(--space-xs);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-mid);
  font-size: 24px;
}

.recent-tile__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recent-tile__title {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recent-tile__artist {
  font-size: 11px;
  color: var(--color-gray-mid);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- App Banner -- */
.app-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  text-align: center;
}

.app-banner__text {
  font-size: 15px;
  color: var(--color-gray-dark);
}

.app-banner__badges {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.app-banner__badges .station-app__badge img {
  display: block;
  height: 44px;
  width: auto;
}

/* -- On-Air Schedule Grid -- */
.schedule-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .schedule-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.schedule-day {
  background: #f8f9fa;
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-sm);
  border: var(--border-thin);
}

.schedule-day--today {
  border-color: var(--station-color);
  border-width: 2px;
}

.schedule-day__name {
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-mid);
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: var(--border-thin);
}

.schedule-day--today .schedule-day__name {
  color: var(--station-color);
}

.schedule-slot {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 4px 0;
  border-bottom: 1px solid var(--color-border);
}

.schedule-slot:last-child {
  border-bottom: none;
}

.schedule-slot__photo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-gray-light);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--color-gray-mid);
}

.schedule-slot__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.schedule-slot__time {
  font-size: 11px;
  color: var(--color-gray-mid);
  white-space: nowrap;
  min-width: 70px;
}

.schedule-slot__name {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  flex: 1;
  min-width: 0;
}

.schedule-slot__name a {
  color: var(--color-body-text);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
}

.schedule-slot__name a:hover {
  color: var(--station-color);
  text-decoration-color: var(--station-color);
}

.schedule-slot--active {
  background: rgba(194, 24, 91, 0.04);
  border-radius: var(--radius-sm);
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

.schedule-slot--active .schedule-slot__name,
.schedule-slot--active .schedule-slot__name a {
  color: var(--station-color);
}

/* -- Station Page Responsive -- */
@media (max-width: 767px) {
  .now-playing__art {
    width: 80px;
    height: 80px;
  }
  .now-playing__title {
    font-size: 16px;
  }
  .now-playing__artist {
    font-size: 13px;
  }
  .now-playing__label {
    font-size: 10px;
  }

  .listen-btn {
    width: 100%;
    justify-content: center;
  }

  .on-air-now {
    padding: var(--space-md);
  }
  .on-air-now__photo {
    width: 48px;
    height: 48px;
  }
  .on-air-now__name {
    font-size: 15px;
  }
  .on-air-now__bio {
    font-size: 12px;
    margin-bottom: var(--space-sm);
  }
  .on-air-now__contact {
    flex-direction: column;
    gap: var(--space-xs);
    font-size: 11px;
    margin-bottom: var(--space-sm);
  }
  .on-air-now__social {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .featured-contest__image {
    height: 120px;
  }
  .featured-contest__title {
    font-size: 17px;
  }
  .featured-contest__body {
    padding: var(--space-md);
  }

  .contest-strip__card-img {
    height: 100px;
  }

  .schedule-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .schedule-day {
    padding: var(--space-sm) var(--space-md);
  }
  .schedule-day__name {
    font-size: 11px;
    margin-bottom: var(--space-xs);
    padding-bottom: var(--space-xs);
  }
  .schedule-slot {
    padding: var(--space-xs) 0;
  }
  .schedule-slot__photo {
    display: none;
  }
  .schedule-slot__time {
    min-width: 60px;
    font-size: 11px;
  }
  .schedule-slot__name {
    font-size: 12px;
  }

  .recent-tile {
    flex: 0 0 100px;
  }
  .recent-tile__art {
    width: 100px;
    height: 100px;
  }

  .app-banner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 400px) {
  .now-playing {
    gap: var(--space-sm);
  }
  .now-playing__art {
    width: 64px;
    height: 64px;
  }
  .now-playing__title {
    font-size: 15px;
  }

  .recent-tile {
    flex: 0 0 80px;
  }
  .recent-tile__art {
    width: 80px;
    height: 80px;
  }
  .recent-tile__title {
    font-size: 11px;
  }
  .recent-tile__artist {
    font-size: 10px;
  }
}


/* ==========================================================================
   25. CONTEST CARDS
   ========================================================================== */

.contest-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  border: var(--border-thin);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

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

.contest-card__link {
  display: block;
  color: var(--color-body-text);
  text-decoration: none;
}

.contest-card__link:hover {
  color: var(--color-body-text);
}

.contest-card__image {
  height: 180px;
  background-color: var(--color-gray-light);
  background-size: cover;
  background-position: center;
  position: relative;
}

.contest-card__prize {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  background: var(--color-ochre);
  color: var(--color-white);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.contest-card__body {
  padding: var(--space-md);
}

.contest-card__title {
  font-size: 16px;
  margin: 0 0 var(--space-xs);
  line-height: 1.3;
}

.contest-card__deadline {
  display: block;
  font-size: 12px;
  color: var(--color-gray-mid);
  margin-bottom: var(--space-sm);
}

.contest-card__stations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.contest-card__station-badge {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  background: var(--color-gray-light);
  color: var(--color-gray-dark);
  padding: 2px 8px;
  border-radius: 12px;
}


/* ==========================================================================
   26. CONTEST LANDING PAGE
   ========================================================================== */

.contest-landing {
  background: #f8f9fa;
}

.contest-landing .site-header,
.contest-landing .site-footer,
.contest-landing .site-drawer,
.contest-landing .site-drawer__overlay {
  display: none;
}

.contest-landing__header {
  background: var(--color-white);
  border-bottom: var(--border-thin);
  padding: var(--space-md) 0;
}

.contest-landing__header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contest-landing__logo img {
  max-height: 50px;
  width: auto;
}

.contest-landing__back {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
}

.contest-landing__body {
  padding: var(--space-xl) 0 var(--space-2xl);
}

.contest-landing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .contest-landing__grid {
    grid-template-columns: 1fr 380px;
    align-items: start;
  }
}

.contest-landing__title {
  font-size: 28px;
  margin-bottom: var(--space-md);
}

.contest-landing__prize,
.contest-landing__deadline {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: 15px;
  color: var(--color-gray-dark);
}

.contest-landing__prize i,
.contest-landing__deadline i {
  color: var(--color-ochre);
}

.contest-landing__image {
  margin-top: var(--space-lg);
}

.contest-landing__image img {
  border-radius: var(--radius-md);
}

.contest-landing__sidebar {
  position: sticky;
  top: var(--space-lg);
}

.contest-landing__footer {
  background: var(--color-footer);
  color: var(--color-white);
  padding: var(--space-md) 0;
  text-align: center;
  font-size: 13px;
}

.contest-landing__footer p {
  margin: 0;
  opacity: 0.7;
}


/* ==========================================================================
   27. CONTEST FORM
   ========================================================================== */

.contest-form {
  background: var(--color-white);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.contest-form__heading {
  font-size: 18px;
  margin: 0 0 var(--space-md);
}

.contest-form__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.contest-form__row {
  width: 100%;
}

.contest-form__row--half {
  width: 100%;
}

@media (min-width: 480px) {
  .contest-form__row--half {
    width: calc(50% - var(--space-md) / 2);
  }
}

.contest-form__label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-body-text);
}

.contest-form__label--checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 13px;
  font-weight: var(--font-weight-normal);
  cursor: pointer;
}

.contest-form__label--checkbox input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.contest-form__input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid #ccc;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-body-text);
  background: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contest-form__input:focus {
  outline: none;
  border-color: var(--color-nav);
  box-shadow: 0 0 0 2px rgba(49, 111, 152, 0.2);
}

.contest-form__submit {
  width: 100%;
  margin-top: var(--space-sm);
}

.contest-form__status {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.contest-form__status--success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.contest-form__status--error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.contest-form__status--ended {
  background: var(--color-gray-light);
  color: var(--color-gray-dark);
  border: 1px solid var(--color-border);
}


/* ==========================================================================
   28. CONTACT FORM
   ========================================================================== */

.contact-form__intro {
  color: var(--color-gray-dark);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.contact-form__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.contact-form__row {
  width: 100%;
}

.contact-form__row--half {
  width: 100%;
}

@media (min-width: 768px) {
  .contact-form__row--half {
    width: calc(50% - var(--space-sm) / 2);
  }
}

.contact-form__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.25rem;
  color: var(--color-text);
}

.contact-form__input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  background: #fff;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-form__input:focus {
  outline: none;
  border-color: var(--station-color, var(--color-primary));
  box-shadow: 0 0 0 2px rgba(30, 91, 112, 0.15);
}

.contact-form__submit {
  margin-top: var(--space-sm);
}

.contact-form__status {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  font-size: 0.9375rem;
}

.contact-form__status--success {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.contact-form__status--error {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

/* Honeypot — hidden from users */
.contact-form__alt {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}


/* ==========================================================================
   29. IOS FORM INPUT ZOOM FIX
   ========================================================================== */

@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
  }
}


/* ==========================================================================
   29. STREAM PLAYER BAR
   ========================================================================== */

.stream-player {
  --sp-color: var(--color-nav);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: #1a1a1a;
  color: var(--color-white);
  transform: translateY(100%);
  transition: transform var(--transition-base);
}

.stream-player.is-visible {
  transform: translateY(0);
}

.stream-player__inner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--container-padding);
  max-width: var(--container-max);
  margin: 0 auto;
}

.stream-player__logo {
  height: 32px;
  width: auto;
  border-radius: 2px;
  flex-shrink: 0;
}

.stream-player__controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  margin-left: auto;
}

.stream-player__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-white);
  transition: background-color var(--transition-fast);
  padding: 0;
  font-size: 16px;
}

.stream-player__btn--play {
  background: rgba(255, 255, 255, 0.15);
}

.stream-player[data-state="paused"] .stream-player__btn--play {
  background: var(--sp-color, rgba(255, 255, 255, 0.3));
}

.stream-player__btn--play:hover {
  background: rgba(255, 255, 255, 0.25);
}

.stream-player[data-state="paused"] .stream-player__btn--play:hover {
  background: var(--sp-color, rgba(255, 255, 255, 0.4));
  filter: brightness(1.15);
}

.stream-player__btn--play:disabled {
  opacity: 0.7;
  cursor: wait;
}

.stream-player__btn--popout {
  background: transparent;
  opacity: 0.5;
  font-size: 12px;
}
.stream-player__btn--popout:hover { opacity: 1; }

.stream-player__btn--stop {
  background: transparent;
  opacity: 0.6;
  font-size: 16px;
}

.stream-player__btn--stop:hover {
  opacity: 1;
}

.stream-player__picker {
  background: transparent;
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 4px 4px 4px 0;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  min-width: 0;
  flex: 0 1 auto;
}

.stream-player__picker option {
  background: #1a1a1a;
  color: var(--color-white);
}

.stream-player__volume {
  width: 70px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.stream-player__volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-white);
  cursor: pointer;
}

.stream-player__volume::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-white);
  border: none;
  cursor: pointer;
}

/* Hide volume on small/medium screens — touch devices use hardware volume */
@media (max-width: 767px) {
  .stream-player__volume {
    display: none;
  }
  .stream-player__picker {
    max-width: none;
  }
}

/* Pad bottom of page so player bar doesn't cover content */
body.stream-playing {
  padding-bottom: 56px;
}


/* ==========================================================================
   30. PRINT STYLES
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: transparent;
    color: #000;
    box-shadow: none;
    text-shadow: none;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  img {
    page-break-inside: avoid;
  }

  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }

  h2, h3 {
    page-break-after: avoid;
  }

  .top-bar,
  .main-nav,
  .station-logos,
  .newsletter-bar,
  .newsletter-form,
  .sidebar,
  .site-sidebar,
  .share-buttons,
  .back-to-top,
  .site-drawer,
  .site-drawer__overlay,
  .content-zone,
  .contest-form,
  .contest-landing__header,
  .contest-landing__footer,
  .station-listen,
  .stream-player {
    display: none;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .entry-content {
    font-size: 12pt;
    line-height: 1.5;
  }
}

/* ==========================================================================
   31. PJAX Navigation
   ========================================================================== */

#pjax-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--color-secondary);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: none;
}

#pjax-progress.is-loading {
  width: 85%;
  opacity: 1;
  transition: width 8s cubic-bezier(0.1, 0.5, 0.3, 1), opacity 0.2s;
}

#pjax-progress.is-done {
  width: 100%;
  opacity: 0;
  transition: width 0.2s, opacity 0.4s 0.2s;
}

/* Hide station logos bar on station page templates (replaces PHP conditional). */
.page-template-station-page .station-logos {
  display: none;
}

/* ==========================================================================
   32. Stream Player Song Display
   ========================================================================== */

/* Album art in stream player bar */
.stream-player__cover {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

/* Now-playing song in stream player bar */
.stream-player__song {
  display: none;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.stream-player[data-state="playing"] .stream-player__song,
.stream-player[data-state="paused"] .stream-player__song {
  display: block;
}

@media (max-width: 640px) {
  .stream-player__song {
    display: none !important;
  }
}

/* ==========================================================================
   RADIO HUB PAGE
   ========================================================================== */

.radio-hub {
  padding: var(--space-xl) 0;
}

.radio-hub__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.radio-hub__title {
  font-size: 2rem;
  margin: 0 0 var(--space-xs);
}

.radio-hub__subtitle {
  color: var(--color-gray);
  font-size: 1.1rem;
  margin: 0;
}

.radio-hub__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xxl);
}

@media (max-width: 991px) {
  .radio-hub__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .radio-hub__grid {
    grid-template-columns: 1fr;
  }
}

.station-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border-left: 4px solid var(--station-color, var(--color-nav));
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.station-card__logo {
  margin-bottom: var(--space-sm);
}

.station-card__logo img {
  max-width: 120px;
  height: auto;
  border-radius: var(--radius-sm);
}

.station-card__name {
  font-size: 1.15rem;
  margin: 0 0 var(--space-xs);
  line-height: 1.3;
}

.station-card__call {
  font-weight: 400;
  color: var(--color-gray);
  font-size: 0.9rem;
}

.station-card__tagline {
  color: var(--color-gray);
  font-size: 0.9rem;
  margin: 0 0 var(--space-sm);
  line-height: 1.4;
}

.station-card__nowplaying {
  font-size: 0.85rem;
  color: var(--color-gray-dark);
  margin-bottom: var(--space-sm);
  min-height: 1.5em;
}

.station-card__nowplaying i {
  color: var(--station-color, var(--color-nav));
  margin-right: 0.3em;
}

.station-card__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
}

.station-card__listen {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: var(--space-xs) var(--space-md);
  background: var(--station-color, var(--color-nav));
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

.station-card__listen:hover {
  opacity: 0.85;
}

.station-card__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-link);
}

/* On Air Right Now */
.radio-hub__onair {
  margin-top: var(--space-xl);
}

.radio-hub__onair-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.onair-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s;
}

.onair-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.onair-card__photo img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
}

.onair-card__placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray);
  font-size: 1.25rem;
}

.onair-card__info {
  display: flex;
  flex-direction: column;
}

.onair-card__name {
  font-weight: 600;
  font-size: 0.95rem;
}

.onair-card__station {
  font-size: 0.8rem;
  color: var(--color-gray);
}

.onair-card__time {
  font-size: 0.8rem;
  color: var(--color-gray);
}