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

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

/* Typography Variables */
:root {
  --font-primary: Montserrat, sans-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;
  }

  /* Z-index management for sticky header */
  header {
    position: sticky;
    top: 0;
    z-index: 50;
  }

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

}

/* 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!
 */