/* Website Styles - DaisyUI + Tailwind CSS */
/* Theme: custom */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css?family=Georgia:400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open%20Sans:400,500&display=swap');

/* Typography Variables */
:root {
  --font-primary: Georgia, serif;
  --font-secondary: Open Sans, sans-serif;
}

/* 
 * Base styles wrapped in @layer base so Tailwind utilities can override them.
 * CSS Cascade Layers: unlayered styles beat layered styles, so we must use layers
 * to allow @layer utilities (Tailwind classes like h-10, xl:h-18) to win.
 */
@layer base {
  /* Critical: Global box-sizing reset */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* Prevent horizontal overflow */
  html {
    overflow-x: hidden;
  }

  /* Global body styles */
  body {
    font-family: var(--font-secondary);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* Main content container */
  main {
    flex: 1 0 auto;
    width: 100%;
  }

  /* Section containment - prevent overlaps and maintain structure */
  section {
    position: relative;
    width: 100%;
    overflow: visible;
    clear: both;
  }

  section + section {
    margin-top: 0;
  }

  /* Alternating section backgrounds for visual rhythm */
  /* Uses DaisyUI's base-200 surface — designed for contrast with base-content */
  main > section:nth-child(even) {
    background-color: var(--color-base-200);
  }

  header {
    z-index: 50;
  }

  footer {
    position: relative;
    z-index: 10;
    margin-top: auto;
  }

}

/* Mobile menu: unlayered so it beats both @layer base and @layer utilities.
   Ensures the menu always covers the full viewport above the sticky header. */
#mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  overflow-y: auto;
}

/* Sticky header on all pages — unlayered so it beats Tailwind utilities */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  width: 100%;
}

/* Transparent header overlay — pure CSS, no JavaScript.
   Uses scroll-driven animations (Chrome/Edge 115+, Safari 16.4+).
   Unsupported browsers (Firefox) gracefully get the normal solid header. */
@supports (animation-timeline: scroll()) {
  header[data-transparent-header] {
    position: fixed !important;
    z-index: 50 !important;
    width: 100% !important;
    background: transparent !important;
    border-bottom-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* Brand-tinted white text — 90% white + 10% theme primary for unique warmth per site.
     Uses DaisyUI 5 variable --color-primary (already contains oklch(...) value).
     Targets all text/icon elements including SVG (stroke=currentColor). */
  header[data-transparent-header] :is(a, span, button, div, p, h1, h2, h3, i) {
    color: white !important;
    color: color-mix(in oklch, white 90%, var(--color-primary)) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  }
  header[data-transparent-header] svg {
    stroke: white !important;
    stroke: color-mix(in oklch, white 90%, var(--color-primary)) !important;
    color: white !important;
    color: color-mix(in oklch, white 90%, var(--color-primary)) !important;
  }

  /* CTA buttons keep their own colors */
  header[data-transparent-header] a[class*="bg-primary"] {
    color: var(--color-primary-content, white) !important;
    text-shadow: none;
  }

  /* Dark glaze — fades in on first pixel of scroll via ::before */
  header[data-transparent-header]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0,0,0,0.85);
    background: color-mix(in oklch, rgba(0,0,0,0.85) 92%, var(--color-primary));
    border-bottom: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid color-mix(in oklch, rgba(255,255,255,0.1) 80%, var(--color-primary));
    opacity: 0;
    animation: header-bg-appear linear both;
    animation-timeline: scroll();
    animation-range: 0 1px;
  }

  @keyframes header-bg-appear {
    to { opacity: 1; }
  }
}

/* Text utilities for better typography */
.text-balance {
  text-wrap: balance;
}

.break-words {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Custom text shadow for hero sections */
.text-shadow-lg {
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

/* Note: Animation styles are now provided by the Core Plugin System */
/* See: src/core/plugins/scroll-animations-plugin.ts */
/* This allows animations to be updated without regenerating websites */

/*
 * DaisyUI Extended Color Utilities
 *
 * DaisyUI 5+ provides official extended utilities for Tailwind 4 compatibility:
 * - properties-extended.css: from-*, to-*, via-*, ring-*, fill-*, stroke-*, shadow-*, outline-*
 * - states-extended.css: hover:*, focus:*, active:* variants
 * - responsive-extended.css: sm:*, md:*, lg:*, xl:* breakpoint variants
 *
 * These are included automatically by the Tailwind CSS compiler via getDaisyUIExtendedCss().
 * No hand-written utilities needed here - using official DaisyUI solution!
 */

/* Gradient wash — ambient color blobs using theme colors */
body::after {
  content: "";
  position: fixed;
  top: -30%;
  left: -20%;
  right: -20%;
  height: 80%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.25;
  filter: blur(100px);
  background:
    radial-gradient(ellipse 600px 400px at 20% 40%, var(--color-primary), transparent),
    radial-gradient(ellipse 500px 500px at 75% 30%, var(--color-secondary), transparent);
}
body > * { position: relative; z-index: 1; }