/*
Theme Name: Wealden Sailability
Theme URI: https://wealdensailability.org
Author: Wealden Sailability
Description: Custom theme for Wealden Sailability with full-width header, hero slideshow, and customizable donate button.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wealden-sailability
*/

/* ==========================================================================
   CSS Variables (Custom Properties)
   ========================================================================== */
/* 
 * These CSS variables are dynamically updated via inline CSS from functions.php
 * based on Customizer settings. Default values are defined here as fallbacks.
 * 
 * Variables can be overridden in the WordPress Customizer:
 * - Appearance → Customize → Theme Colors & Settings
 */
:root {
  --ws-background: #f5f5f5;        /* General background color */
  --ws-primary: #ffffff;           /* Primary color (site title) */
  --ws-primary-dark: #0d3d4d;      /* Dark primary (reserved) */
  --ws-blue: #0981D1;              /* Royal blue (header, menu, footer background) */
  --ws-accent: #e8a838;             /* Accent color (footer links) */
  --ws-cream: #FFF8DC;              /* Cream (page background) */
  --ws-off-white: #E7E6E4;          /* Off-white (text on blue backgrounds) */
  --ws-text: #333333;               /* Main text color */
  --ws-text-light: #666666;         /* Secondary/lighter text color */
  --ws-header-height: 100px;        /* Header height (default: 320px via Customizer) */
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
/* 
 * Box-sizing reset ensures padding/borders are included in element width
 * This prevents layout issues with padding calculations
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 
 * HTML element setup
 * overflow-x: hidden prevents horizontal scrolling caused by full-width elements
 */
html {
  min-height: 100%;
  overflow-x: hidden; /* Prevents horizontal scroll from full-width sections */
}

/* 
 * Body element setup
 * 
 * Layout strategy for sticky footer:
 * - min-height: 100vh ensures body fills viewport height
 * - display: flex + flex-direction: column enables flexbox layout
 * - Footer will be pushed to bottom via margin-top: auto
 * 
 * overflow-x: hidden prevents horizontal scrolling
 */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;                    /* Full viewport height */
  display: flex;                        /* Enable flexbox */
  flex-direction: column;                /* Stack children vertically */
  background-color: var(--ws-cream);    /* Cream background (overrides --ws-background) */
  font-family: Calibri, Aptos, "Marker Felt", sans-serif; /* System font stack */
  font-size: 16px;
  line-height: 1.6;
  color: var(--ws-text);
  overflow-x: hidden;                   /* Prevent horizontal scroll */
}

/* ==========================================================================
   Header - Full Width
   ========================================================================== */
/* 
 * Site Header
 * - Full-width royal blue background
 * - Sticky positioning (stays at top when scrolling)
 * - Contains: Logo, Site Title, Spacer, Menu, Donate Button, Image
 */
.site-header {
  width: 100%;
  background: var(--ws-blue);           /* Royal blue background */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Subtle bottom border */
  position: sticky;                     /* Stays at top when scrolling */
  top: 0;
  z-index: 1000;                        /* Above other content */
}

/* 
 * Header Inner Container
 * - Max-width container centers content on large screens
 * - Flexbox layout arranges header elements horizontally
 * - Height controlled by CSS variable (default: 320px)
 */
.header-inner {
  max-width: 1400px;                    /* Maximum content width */
  margin: 0 auto;                       /* Center horizontally */
  padding: 0 24px;                     /* Horizontal padding */
  height: var(--ws-header-height);     /* Dynamic height from Customizer */
  display: flex;                        /* Flexbox layout */
  align-items: center;                 /* Vertically center items */
  gap: 24px;                           /* Space between flex items */
}

/* Logo */
.site-logo {
  flex-shrink: 0;
}

.site-logo img {
  width: 150px;
  height: 150px;
  display: block;
  object-fit: contain;
}

.site-logo a {
  display: block;
}

/* Site Name */
.site-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ws-off-white);
}

.site-title a {
  color: inherit;
  text-decoration: none;
}

/* Spacer - pushes menu right */
.header-spacer {
  flex: 1;
  min-width: 24px;
}

/* Navigation */
.main-nav {
  background: var(--ws-blue);
  padding: 8px 16px;
  border-radius: 4px;
}

.main-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-nav li {
  margin: 0;
}

.main-nav a {
  display: block;
  padding: 8px 16px;
  color: var(--ws-off-white);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s;
  border-radius: 4px;
}

.main-nav a:hover {
  /* hover colors set via Customizer inline CSS */
}

.main-nav .current-menu-item a {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--ws-off-white);
}

/* Donate modal */
.donate-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.donate-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.donate-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.donate-modal-content {
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  background: var(--ws-off-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.donate-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--ws-text);
  background: var(--ws-off-white);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.donate-modal-close:hover {
  background: #eee;
}

.donate-modal-content iframe {
  width: 100%;
  height: 80vh;
  min-height: 400px;
  display: block;
  border: none;
}

/* Donate Button - colors set via Customizer inline CSS */
.header-donate a {
  display: inline-block;
  padding: 10px 24px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 4px;
  transition: background 0.2s, transform 0.2s;
}

.header-donate a:hover {
  transform: translateY(-1px);
}

/* Header Image */
.header-image img {
  height: 80px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Mobile menu toggle (hidden by default) */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 8px;
}

@media (max-width: 992px) {
  .main-nav,
  .header-donate {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .header-inner {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .site-logo img {
    width: 300px;
    height: 300px;
  }
}

/* ==========================================================================
   Hero Slideshow
   ========================================================================== */
.hero-slideshow {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.hero-slideshow .slides {
  position: relative;
  width: 100%;
  height: 400px;
}

.hero-slideshow .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-slideshow .slide.active {
  opacity: 1;
  z-index: 1;
}

.hero-slideshow .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-slideshow .slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4); /* overridden by Customizer */
  pointer-events: none;
}

.hero-slideshow .slide-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 1;
  font-family: Calibri, Aptos, "Marker Felt", sans-serif;
}

.hero-slideshow .slide-title {
  margin: 0 0 8px;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.hero-slideshow .slide.active .slide-title {
  opacity: 1;
  transform: translateY(0);
}

.hero-slideshow .slide-subtitle {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: inherit;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}

.hero-slideshow .slide.active .slide-subtitle {
  opacity: 1;
  transform: translateY(0);
}

/* Slideshow nav dots */
.hero-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}

.hero-dots button {
  border-radius: 50%;
  border: 2px solid;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}

/* ==========================================================================
   Page Hero (single image)
   ========================================================================== */
.page-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.page-hero img {
  width: 100%;
  height: 400px;
  display: block;
  object-fit: cover;
}

.page-hero .slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.page-hero-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--ws-off-white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 1;
  font-family: Calibri, Aptos, "Marker Felt", sans-serif;
}

.page-hero .entry-title {
  margin: 0;
  font-size: 2.5rem;
  opacity: 0;
  transform: translateY(10px);
  animation: pageHeroFadeIn 0.7s ease 0.3s forwards;
}

@keyframes pageHeroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Main Content
   ========================================================================== */
.site-content {
  max-width: 100%;
  margin: 0 auto;
  padding: 48px 24px;
}

/* Content width options */
.site-content.content-full-width {
  max-width: 100%;
}

.site-content.content-two-thirds {
  max-width: 66.67%;
}

.site-content.content-three-quarters {
  max-width: 75%;
}

.site-content.content-half {
  max-width: 50%;
}

.site-content.content-one-third {
  max-width: 33.33%;
}

.entry-content {
  max-width: 72ch;
}

/* Multi-column layout - applied per-page or via Customizer */
.entry-content[style*="column-count"],
.entry-content.columns-2,
.entry-content.columns-3 {
  max-width: 100%;
}

.entry-content[style*="column-count"] > *,
.entry-content.columns-2 > *,
.entry-content.columns-3 > * {
  break-inside: avoid;
}

.entry-content p {
  margin: 0 0 1em;
}

.entry-content h1,
.entry-content h2,
.entry-content h3 {
  margin: 1.5em 0 0.5em;
}

.entry-header {
  margin-bottom: 1.5em;
}

.entry-title {
  margin: 0 0 0.5em;
  font-size: 2rem;
}

.entry-meta {
  font-size: 0.9rem;
  color: var(--ws-text-light);
}

/* ==========================================================================
   Supporter Logos Slider
   ========================================================================== */
.supporter-logos {
  width: 100%;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 48px 0;
  background: var(--ws-background);
  overflow: hidden;
  box-sizing: border-box;
}

.supporter-logos-container {
  width: 100%;
  overflow: hidden;
}

.supporter-logos-track {
  display: flex;
  gap: 40px;
  align-items: center;
  will-change: transform;
}

@keyframes supporterLogosScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.supporter-logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

.supporter-logo-item img {
  max-height: 80px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.3s, opacity 0.3s;
}

.supporter-logo-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

.supporter-logo-item a {
  display: block;
  text-decoration: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  margin-top: auto;
  padding-top: 48px;
  padding: 32px 24px;
  background: var(--ws-blue);
  color: var(--ws-off-white);
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-image {
  flex-shrink: 0;
}

.footer-image img {
  max-height: 100px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.footer-left {
  flex: 1;
  text-align: center;
  min-width: 200px;
}

.footer-right {
  text-align: right;
  flex-shrink: 0;
}

.footer-info {
  margin: 0 0 4px;
  font-size: 0.9rem;
}

.footer-info:last-child {
  margin-bottom: 0;
}

.site-footer a {
  color: var(--ws-accent);
  text-decoration: none;
}

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

.footer-social {
  margin-bottom: 24px;
}

.footer-social-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-social-list li {
  margin: 0;
}

.footer-social .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--ws-off-white);
  transition: opacity 0.2s;
}

.footer-social .social-icon:hover {
  color: inherit;
}

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

.footer-copyright {
  margin: 0;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  .footer-image {
    order: -1;
    margin-bottom: 16px;
  }

  .footer-right {
    text-align: center;
    margin-top: 16px;
  }
}