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

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css?family=Poppins%20Bold:400,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Inter%20Medium:400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lora%20Regular:400,500&display=swap');

/* Typography Variables */
:root {
  --font-display: Poppins Bold, sans-serif;
  --font-primary: Inter Medium, sans-serif;
  --font-secondary: Lora Regular, serif;
  /* Tints native form controls (checkbox/radio/range) with the brand color */
  accent-color: var(--color-primary);
}

/* Brand-colored text selection for subtle polish */
::selection {
  background: var(--color-primary);
  color: var(--color-primary-content, white);
}

/* 
 * 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 + reserve scrollbar space so layout never shifts
     when content/scrollbar appearance changes (e.g. modal opens) */
  html {
    overflow-x: hidden;
    scrollbar-gutter: stable;
  }

  /* Smooth in-page anchor scrolling, but respect reduced-motion preferences */
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  /* Global body styles */
  body {
    font-family: var(--font-secondary);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
    /* Use dynamic viewport units so iOS Safari doesn't reserve space under the address bar */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* Crisper text rendering on macOS/Webkit and Firefox */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Display font for hero headlines and major headings */
  h1, h2 {
    font-family: var(--font-display);
  }

  /* Avoid orphan words in headings — distributes characters evenly across lines */
  h1, h2, h3 {
    text-wrap: balance;
  }

  /* Smooth color/opacity transitions on links so hover feels considered, not abrupt.
     DaisyUI .btn has its own (more specific) transition; this targets bare buttons. */
  a, button {
    transition: color 180ms ease, background-color 180ms ease, opacity 180ms ease;
  }

  /* Refined link underlines — pushed below the baseline at a thinner weight. Only
     visible when something actually applies an underline (Tailwind 'underline' class
     or text-decoration), so safe as a default. */
  a {
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
  }

  /* Primary font for subheadings */
  h3, h4, h5, h6 {
    font-family: var(--font-primary);
  }

  /* 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;
  }

}

/* Section spacing — content owns its own padding.
   Each section's inner wrapper carries its own py-* (see section prompt).
   Reasoning: sections that get emptied by user feedback collapse cleanly to 0
   height instead of leaving a ghost gap from global section padding.
   Sections with data-spacing="custom" (hero, visual break) manage their own padding. */
section[data-section-name]:not([data-spacing="custom"]) {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
/* Legacy fallback: if the section's inner wrapper doesn't already declare
   vertical padding (older generated sites), apply a sensible default so the
   layout doesn't collapse. New sites set py-* on the wrapper themselves. */
section[data-section-name]:not([data-spacing="custom"]) > :first-child:not([class*="py-"]):not([class*="pt-"]):not([class*="pb-"]) {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 768px) {
  section[data-section-name]:not([data-spacing="custom"]) > :first-child:not([class*="py-"]):not([class*="pt-"]):not([class*="pb-"]) {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
/* Footer trailing exemption: minimum gap before the footer in case the last
   section's content forgets its pb-*. Content can add more on top of this. */
main > section:last-of-type:not([data-spacing="custom"]) {
  padding-bottom: 1rem;
}

/* 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%;
}

/* Branded keyboard-focus ring — replaces the default browser outline with one that
   uses the brand's primary color. :focus-visible only fires for keyboard/AT users,
   so mouse clicks don't get a ring. Unlayered so it overrides DaisyUI defaults. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Subtle card hover lift — adds depth on interaction without being twee.
   Plays alongside the archetype-driven .card box-shadow above. */
.card {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.card:hover {
  transform: translateY(-2px);
}

/* 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;
    animation: header-blur-in linear both;
    animation-timeline: scroll();
    animation-range: 0px 150px;
  }

  header[data-transparent-header="dark"] :is(a, span, button, div, p, h1, h2, h3, i) {
    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="dark"] svg {
    color: color-mix(in oklch, white 90%, var(--color-primary)) !important;
    stroke: currentColor !important;
  }
  header[data-transparent-header="dark"] :is(a, button)[class*="bg-primary"],
  header[data-transparent-header="dark"] :is(a, button)[class*="bg-primary"] * {
    color: var(--color-primary-content, white) !important;
    text-shadow: none;
  }
  header[data-transparent-header="dark"] :is(a, button)[class*="bg-secondary"],
  header[data-transparent-header="dark"] :is(a, button)[class*="bg-secondary"] * {
    color: var(--color-secondary-content, white) !important;
    text-shadow: none;
  }
  header[data-transparent-header="dark"] :is(a, button)[class*="bg-accent"],
  header[data-transparent-header="dark"] :is(a, button)[class*="bg-accent"] * {
    color: var(--color-accent-content, white) !important;
    text-shadow: none;
  }
  header[data-transparent-header="dark"] :is(a, button)[class*="bg-neutral"],
  header[data-transparent-header="dark"] :is(a, button)[class*="bg-neutral"] * {
    color: var(--color-neutral-content, white) !important;
    text-shadow: none;
  }
  header[data-transparent-header="dark"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in oklch, rgba(0,0,0,0.85) 92%, var(--color-primary));
    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: 0px 150px;
  }
  

  header[data-transparent-header="light"] :is(a, span, button, div, p, h1, h2, h3, i) {
    color: var(--color-base-content) !important;
    text-shadow: 0 1px 3px rgba(255,255,255,0.4);
  }
  header[data-transparent-header="light"] svg {
    color: var(--color-base-content) !important;
    stroke: currentColor !important;
  }
  header[data-transparent-header="light"] :is(a, button)[class*="bg-primary"],
  header[data-transparent-header="light"] :is(a, button)[class*="bg-primary"] * {
    color: var(--color-primary-content, white) !important;
    text-shadow: none;
  }
  header[data-transparent-header="light"] :is(a, button)[class*="bg-secondary"],
  header[data-transparent-header="light"] :is(a, button)[class*="bg-secondary"] * {
    color: var(--color-secondary-content, white) !important;
    text-shadow: none;
  }
  header[data-transparent-header="light"] :is(a, button)[class*="bg-accent"],
  header[data-transparent-header="light"] :is(a, button)[class*="bg-accent"] * {
    color: var(--color-accent-content, white) !important;
    text-shadow: none;
  }
  header[data-transparent-header="light"] :is(a, button)[class*="bg-neutral"],
  header[data-transparent-header="light"] :is(a, button)[class*="bg-neutral"] * {
    color: var(--color-neutral-content, white) !important;
    text-shadow: none;
  }
  header[data-transparent-header="light"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in oklch, rgba(255,255,255,0.85) 92%, var(--color-primary));
    border-bottom: 1px solid color-mix(in oklch, rgba(0,0,0,0.08) 80%, var(--color-primary));
    opacity: 0;
    animation: header-bg-appear linear both;
    animation-timeline: scroll();
    animation-range: 0px 150px;
  }
  

  header[data-transparent-header="brand"] :is(a, span, button, div, p, h1, h2, h3, i) {
    color: white !important;
    text-shadow: 0 1px 3px color-mix(in oklch, var(--color-primary) 60%, black);
  }
  header[data-transparent-header="brand"] svg {
    color: white !important;
    stroke: currentColor !important;
  }
  header[data-transparent-header="brand"] :is(a, button)[class*="bg-primary"],
  header[data-transparent-header="brand"] :is(a, button)[class*="bg-primary"] * {
    color: var(--color-primary-content, white) !important;
    text-shadow: none;
  }
  header[data-transparent-header="brand"] :is(a, button)[class*="bg-secondary"],
  header[data-transparent-header="brand"] :is(a, button)[class*="bg-secondary"] * {
    color: var(--color-secondary-content, white) !important;
    text-shadow: none;
  }
  header[data-transparent-header="brand"] :is(a, button)[class*="bg-accent"],
  header[data-transparent-header="brand"] :is(a, button)[class*="bg-accent"] * {
    color: var(--color-accent-content, white) !important;
    text-shadow: none;
  }
  header[data-transparent-header="brand"] :is(a, button)[class*="bg-neutral"],
  header[data-transparent-header="brand"] :is(a, button)[class*="bg-neutral"] * {
    color: var(--color-neutral-content, white) !important;
    text-shadow: none;
  }
  header[data-transparent-header="brand"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in oklch, var(--color-primary) 90%, black);
    border-bottom: 1px solid color-mix(in oklch, var(--color-primary) 70%, white);
    opacity: 0;
    animation: header-bg-appear linear both;
    animation-timeline: scroll();
    animation-range: 0px 150px;
  }
  

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

  @keyframes header-blur-in {
    from {
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
    }
    to {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
  }

  /* Hero section compensation — fixed header is out of flow, so the hero
     needs padding-top to clear it. Values match the header prompt:
     mobile: py-3 (24px) + h-10 logo (40px) = 64px
     md:     py-4 (32px) + h-12 logo (48px) = 80px */
  header[data-transparent-header] ~ main > section:first-child {
    box-sizing: content-box !important;
    padding-top: 64px !important;
  }
  @media (min-width: 768px) {
    header[data-transparent-header] ~ main > section:first-child {
      padding-top: 80px !important;
    }
  }
}

/* Component-style archetype: friendly — applied site-wide to .card and .btn. */
:root {
  --rounded-box: 1.5rem;
  --rounded-btn: 9999px;
}
.card {
  border-radius: 1.5rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  
}
.btn {
  border-radius: 9999px;
  
  box-shadow: none;
}

/* Buttons: clean wrapping on narrow viewports.
   Long CTA labels (e.g. "Call (555) 123-4567 for Your Free Quote") wrap
   awkwardly inside DaisyUI's default .btn — bad break points plus a fixed
   height that crops descenders. We balance the wrap, tighten line-height,
   and let height grow with the content. Icons stay inline-centered. */
.btn {
  text-wrap: balance;
  line-height: 1.2;
  height: auto;
  padding-block: 0.5rem;
}

/* 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; }