/*
Theme Name: LuminaThera Hybrid
Description: A lightweight theme for headless/hybrid integration with Next.js. Mirrors standard design tokens and chrome (header/footer) but relies on Vercel proxy for serving.
Author: LuminaThera
Version: 1.0.0
*/

:root {
  /* 1.1 Surface Layers */
  --surface-1: #0B1C22;
  /* hsl(190, 48%, 8%) */
  --surface-2: #122B34;
  /* hsl(190, 48%, 14%) */
  --surface-3: #264A57;
  /* hsl(190, 40%, 25%) */
  --surface-4: #E6E1D9;
  /* hsl(35, 15%, 88%) */
  --surface-card: #213C46;
  /* hsl(190, 35%, 20%) */
  --surface-overlay: #213B35;
  /* hsl(170, 28%, 18%) */
  --surface-overlay-card: #1C2B27;
  /* hsl(170, 22%, 14%) */

  /* 1.2 Accent & Brand */
  --copper: #CA6935;
  /* hsl(16, 58%, 50%) */
  --copper-glow: #D67A45;
  /* hsl(16, 58%, 55%) */

  /* 1.3 Text - Dark Mode Defaults */
  --text-heading-dark: #142C35;
  /* hsl(190, 48%, 15%) */
  --foreground: #F2EEE5;
  /* hsl(40, 30%, 92%) */
  --muted-foreground: #B8B3AA;
  /* hsl(40, 15%, 70%) */

  /* 1.5 Radius */
  --radius: 0.375rem;
  /* 6px */
  --radius-card: 1rem;
  /* 16px */
  --radius-panel: 1.5rem;
  /* 24px */
  --radius-section: 2.5rem;
  /* 40px */
  --radius-pill: 9999px;

  /* Fonts */
  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'Inter', sans-serif;
}

/* Base Reset & Typography */
html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--surface-1);
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
  margin-top: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Utility Classes (Mini-Tailwind) */
.max-w-1400 {
  max-width: 1400px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Spacing */
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.pt-8 {
  padding-top: 2rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

/* Layout & Flex */
.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-12 {
  gap: 3rem;
}

.hidden {
  display: none;
}

.block {
  display: block;
}

.h-full {
  height: 100%;
}

.w-full {
  width: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

/* Grid */
.grid {
  display: grid;
}

.gap-12 {
  gap: 3rem;
}

/* Redundant but grouped */

/* Colors & Backgrounds */
.bg-surface-1 {
  background-color: var(--surface-1);
}

.bg-surface-2 {
  background-color: var(--surface-2);
}

.bg-surface-2\/95 {
  background-color: rgba(18, 43, 52, 0.95);
}

/* Approx surface-2 */
.bg-surface-3 {
  background-color: var(--surface-3);
}

.bg-surface-4 {
  background-color: var(--surface-4);
}

.text-heading {
  color: var(--text-heading-dark);
}

.text-copper {
  color: var(--copper);
}

.text-foreground {
  color: var(--foreground);
}

.text-white {
  color: #fff;
}

.text-white\/35 {
  color: rgba(255, 255, 255, 0.35);
}

.text-white\/40 {
  color: rgba(255, 255, 255, 0.40);
}

.text-white\/50 {
  color: rgba(255, 255, 255, 0.50);
}

.text-white\/55 {
  color: rgba(255, 255, 255, 0.55);
}

.text-white\/70 {
  color: rgba(255, 255, 255, 0.70);
}

.text-white\/80 {
  color: rgba(255, 255, 255, 0.80);
}

.hover\:text-white:hover {
  color: #fff;
}

.hover\:text-white\/80:hover {
  color: rgba(255, 255, 255, 0.80);
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

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

/* Typography */
.font-medium {
  font-weight: 500;
}

.uppercase {
  text-transform: uppercase;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.leading-relaxed {
  line-height: 1.625;
}

/* Dimensions & Images */
.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.w-auto {
  width: auto;
}

.object-contain {
  object-fit: contain;
}

.object-left {
  object-position: left;
}

.max-w-sm {
  max-width: 24rem;
}

/* Position & Z-index */
.sticky {
  position: sticky;
}

.top-0 {
  top: 0;
}

.z-50 {
  z-index: 50;
}

/* Borders & Effects */
.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-white\/5 {
  border-color: rgba(255, 255, 255, 0.05);
}

.border-white\/10 {
  border-color: rgba(255, 255, 255, 0.1);
}

.backdrop-blur-xl {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.brightness-125 {
  filter: brightness(1.25);
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.duration-300 {
  transition-duration: 300ms;
}

/* Desktop Overrides */
@media (min-width: 768px) {
  .md\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .md\:py-36 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-14 {
    height: 3.5rem;
  }

  .md\:h-20 {
    height: 5rem;
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
}

@media (min-width: 1024px) {
  .lg\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

/* ============================
   FOOTER (Semantic — mirrors Next.js Footer.tsx)
   ============================ */
.footer-container {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .footer-container { padding-left: 3rem; padding-right: 3rem; }
}
@media (min-width: 1024px) {
  .footer-container { padding-left: 5rem; padding-right: 5rem; }
}

.footer-grid {
  display: grid;
  gap: 3rem;
  margin-bottom: 4rem;
  align-items: start;
}
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr auto auto;
  }
}

.footer-mission {
  max-width: 24rem;
}

.footer-logo {
  height: 3rem;
  width: auto;
  filter: brightness(1.25);
  margin-bottom: 1.25rem;
  object-fit: contain;
  object-position: left;
}

.footer-mission-text {
  color: rgba(255, 255, 255, 0.50);
  font-size: 0.875rem;
  line-height: 1.625;
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-nav-label {
  color: rgba(255, 255, 255, 0.40);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.footer-nav-link {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.875rem;
  transition: color 0.3s;
}
.footer-nav-link:hover {
  color: rgba(255, 255, 255, 0.80);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 2rem;
}

.footer-crisis {
  color: rgba(255, 255, 255, 0.40);
  font-size: 0.75rem;
  line-height: 1.625;
  margin-bottom: 1rem;
}
.footer-crisis strong,
.footer-crisis b {
  color: rgba(255, 255, 255, 0.55);
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.75rem;
}

/* Events Manager Overrides (Dark Mode Adaptation) */
.em-calendar {
  color: var(--foreground);
}

table.em-calendar td {
  border-color: rgba(255, 255, 255, 0.1);
}

table.em-calendar td.eventful a {
  color: var(--copper);
  font-weight: bold;
}

/* Search Bar Container */
.em-search-form,
.em-booking-form,
.em-search,
div.em-search {
  background: var(--surface-card) !important;
  padding: 2rem;
  border-radius: var(--radius-card);
  color: var(--foreground);
  margin-bottom: 2rem;
}

/* Inputs */
.em-booking-form input[type="text"],
.em-booking-form input[type="email"],
.em-search-form input[type="text"],
div.em-search input[type="text"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  padding: 0.75rem 1rem !important;
  border-radius: var(--radius) !important;
  outline: none;
}

/* Buttons (Search & Submit) - Force Copper Pill */
input.em-booking-submit,
input.em-search-submit,
.em-search-submit,
button.em-search-submit {
  background: var(--copper) !important;
  color: white !important;
  padding: 0.75rem 2rem !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  cursor: pointer;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background 0.2s;
  box-shadow: none !important;
  text-shadow: none !important;
}

input.em-booking-submit:hover,
input.em-search-submit:hover,
button.em-search-submit:hover {
  background: var(--copper-glow) !important;
}

/* "More Info" / Secondary Buttons */
a.button,
.em-item-read-more a,
.em-button {
  background: transparent !important;
  border: 1px solid var(--copper) !important;
  color: var(--copper) !important;
  padding: 0.5rem 1.5rem !important;
  border-radius: var(--radius-pill) !important;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.8rem;
  transition: all 0.2s;
}

a.button:hover,
.em-item-read-more a:hover,
.em-button:hover {
  background: var(--copper) !important;
  color: white !important;
}

/* Location/Event Meta Adjustments */
.em-location-meta,
.em-event-meta {
  color: var(--muted-foreground);
}

.em-location-title,
.em-event-title,
h1.em-item-title {
  color: white;
  font-family: var(--font-serif);
}

/* Hide WP Admin Bar for cleaner preview */
#wpadminbar {
  display: none;
}

html {
  margin-top: 0 !important;
}