/*
  Built With Style - Global Design System
  Contains reusable design tokens, utilities, and components
    MOVED FROM style.css during CSS refactor:
  - CSS custom properties (:root variables)
  - Global reset styles (*,*::before,*::after)
  - Base typography (body, h1-h6, p)
  - Utility classes (.container, .bg-*, .text-*, spacing)
  - Button components (.button, .button--primary, .button--secondary)
  - Responsive utilities (show/hide classes)
*/

/* -------------------------------------------------------------------------- */
/* CSS CUSTOM PROPERTIES (DESIGN TOKENS)                                     */
/* -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --clr-primary: #2c5062;
  --clr-secondary: #1e3845;
  --clr-accent: #f59e0b;
  --clr-bg-light: #ffffff;
  --clr-bg-dark: #2c5062;
  --clr-text: #333333;
  --clr-text-light: #718096;
  --clr-text-muted: #2D3748;
  --clr-text-inverse: #ffffff;
  /* Spacing Scale - Mobile-first (base = mobile 320px+) */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 0.75rem;  /* 12px - tighter on mobile */
  --space-md: 1.5rem;   /* 24px - smaller on mobile */
  --space-lg: 2.5rem;   /* 40px - smaller on mobile */
  --space-xl: 3.5rem;   /* 56px - smaller on mobile */

  /* Typography Scale - Mobile-first (base = mobile 320px+) */
  --font-base: 1rem;      /* 16px */
  --font-sm: 0.875rem;   /* 14px */
  --font-lg: 1.125rem;   /* 18px */
  --font-xl: 1.25rem;    /* 20px */
  --font-2xl: 1.375rem;  /* 22px - smaller on mobile */
  --font-3xl: 1.75rem;   /* 28px - smaller on mobile */
  --font-4xl: 2rem;      /* 32px - smaller on mobile */
  --font-heading: 2.25rem; /* 36px - mobile-optimized */

  /* Font Families */
  --font-family-body: 'Proza Libre', sans-serif;
  --font-family-heading: 'Cormorant Garamond', serif;

  /* Shared Values */
  --radius: 0.5rem;      /* 8px */
  --radius-sm: 0.3125rem; /* 5px */
  --radius-lg: 0.625rem;  /* 10px */
  --radius-pill: 999px;
  --shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.15);
  --transition: all 0.3s ease;  /* Container Widths - Mobile-first (base = mobile 320px+) */
  --container-width: 100%;        /* Full width on mobile */
  --container-width-narrow: 100%; /* Full width on mobile */
  --container-width-hero: 80rem;  /* 1280px - hero section max-width */
  --container-padding: 1rem;      /* 16px - mobile padding */
}

/* -------------------------------------------------------------------------- */
/* GLOBAL RESET & BASE STYLES                                                */
/* -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-sm); /* Start smaller on mobile */
  line-height: 1.6;
  color: var(--clr-text);
  margin: 0;
  background-color: #f0f0f0;
}

/* Body text responsive scaling */
@media (min-width: 768px) {
  body {
    font-size: var(--font-base); /* Scale up to 16px on tablet+ */
  }
}

/* Typography Base */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--clr-text);
  margin: 0 0 var(--space-sm);
}

h1 { 
  font-size: var(--font-heading); 
  margin-bottom: var(--space-md);
}

h2 { 
  font-size: var(--font-3xl); 
  margin-bottom: var(--space-md);
}

h3 { 
  font-size: var(--font-xl); 
  margin-bottom: var(--space-sm);
}

p {
  font-family: var(--font-family-body);
  font-size: var(--font-base);
  line-height: 1.6;
  color: var(--clr-text);
  margin: 0 0 var(--space-sm);
}

/* -------------------------------------------------------------------------- */
/* UTILITY CLASSES - Only for special cases that differ from base styles    */
/* -------------------------------------------------------------------------- */

/* Text utilities for when you need something different from base styles */
.text-lg {
  font-size: var(--font-lg);
  line-height: 1.7;
}

.text-sm {
  font-size: var(--font-sm);
}

/* Text alignment utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Text color utilities */
.text-light { color: var(--clr-text-inverse); }
.text-muted { color: var(--clr-text-muted); }

/* Semantic center utility for any element */
.center {
  text-align: center;
}

/* Container */
.container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  width: 100%;
}

.container--narrow {
  max-width: var(--container-width-narrow);
}

/* Backgrounds */
.bg-light { background-color: var(--clr-bg-light); }
.bg-dark { background-color: var(--clr-bg-dark); }
.bg-primary { background-color: var(--clr-primary); }

/* Spacing Utilities */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* -------------------------------------------------------------------------- */
/* BUTTON COMPONENTS                                                          */
/* -------------------------------------------------------------------------- */

/* Base Button - Mobile-first sizing */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.75rem 1.5rem; /* Consistent mobile padding for better touch targets */
  font-family: var(--font-family-body);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
  font-size: var(--font-sm); /* Smaller text on mobile */
  line-height: 1; /* Tight line-height for better vertical centering */
}

.button:focus {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

/* Primary Button */
.button--primary {
  background-color: var(--clr-primary);
  color: var(--clr-text-inverse);
  border-color: var(--clr-primary);
}

.button--primary:hover {
  background-color: var(--clr-bg-light);
  color: var(--clr-primary);
  border-color: var(--clr-primary);
}

.button--primary:active {
  background-color: var(--clr-secondary);
  border-color: var(--clr-secondary);
  color: var(--clr-text-inverse);
}

/* Secondary Button */
.button--secondary {
  background-color: transparent;
  color: var(--clr-primary);
  border-color: var(--clr-primary);
}

.button--secondary:hover {
  background-color: var(--clr-primary);
  color: var(--clr-text-inverse);
}

/* Secondary button on dark backgrounds - uses CSS custom properties */
.hero .button--secondary {
  color: var(--clr-text-inverse);
  border-color: var(--clr-text-inverse);
}

.hero .button--secondary:hover {
  background-color: var(--clr-text-inverse);
  color: var(--clr-primary);
}

/* Button Sizes */
.button--sm {
  padding: 0.625rem 1.25rem;
  font-size: var(--font-sm);
}

.button--lg {
  padding: 1rem 2rem;
  font-size: var(--font-lg);
}

/* -------------------------------------------------------------------------- */
/* CARD COMPONENTS - Mobile First                                             */
/* -------------------------------------------------------------------------- */

/* Base Card - mobile-first shared styling */
.card {
  background: var(--clr-bg-light);
  border-radius: var(--radius-lg);
  padding: var(--space-sm); /* Smaller padding on mobile */
  box-shadow: var(--shadow);
  text-align: center;
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

/* Card responsive scaling */
@media (min-width: 768px) {
  .card {
    padding: var(--space-md); /* Larger padding on tablet+ */
  }
}

/* -------------------------------------------------------------------------- */
/* ICON COMPONENTS - Mobile First                                             */
/* -------------------------------------------------------------------------- */

/* Base icon styling - mobile-first sizing */
.icon {
  width: 40px;  /* Smaller on mobile */
  height: 40px;
  stroke: var(--clr-primary);
  stroke-width: 1.5;
  fill: none;
}

.icon--accent {
  color: var(--clr-accent);
  fill: currentColor;
}

/* Star icons for ratings */
.stars {
  color: var(--clr-accent);
  font-size: 1.25rem; /* Smaller on mobile */
  letter-spacing: 0.2em;
  margin: 0;
}

/* Icon responsive scaling */
@media (min-width: 768px) {
  .icon {
    width: 48px;  /* Desktop size */
    height: 48px;
  }
  
  .stars {
    font-size: 1.5rem; /* Desktop size */
  }
}

/* -------------------------------------------------------------------------- */
/* TYPOGRAPHY UTILITIES - Component-level text styles                        */
/* -------------------------------------------------------------------------- */

/* Card title styling - used in info boxes, testimonial cards, etc. */
.card-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--clr-primary);
  line-height: 1.4;
  margin: 0 0 var(--space-sm);
}

/* Muted text for secondary content */
.text-muted {
  color: var(--clr-text-muted);
  font-family: var(--font-family-body);
  font-size: var(--font-base);
  line-height: 1.6;
  margin: 0;
}

/* Section heading with icon pattern */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-family-heading);
  font-size: var(--font-3xl);
  line-height: 1.2;
}

/* -------------------------------------------------------------------------- */
/* LAYOUT UTILITIES                                                           */
/* -------------------------------------------------------------------------- */

/* Centered button wrapper */
.button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Icon container for consistent spacing */
.icon-container {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-sm);
}

/* -------------------------------------------------------------------------- */
/* RESPONSIVE DESIGN - Mobile First Approach                                 */
/* -------------------------------------------------------------------------- */

/* Show/Hide utilities */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* iPad/Tablet - 768px and up */
@media (min-width: 768px) {
  :root {
    /* Spacing scales up for tablet */
    --space-sm: 1rem;     /* 16px */
    --space-md: 2rem;     /* 32px */
    --space-lg: 3rem;     /* 48px */
    --space-xl: 4rem;     /* 64px */
    
    /* Typography scales up for tablet */
    --font-2xl: 1.5rem;    /* 24px */
    --font-3xl: 2rem;      /* 32px */
    --font-4xl: 2.5rem;    /* 40px */
    --font-heading: 3rem;  /* 48px - tablet size */
      /* Container gets max-width on tablet - closer to desktop width for smoother transition */
    --container-width: 58rem;        /* 928px - much closer to 1024px for smoother transition */
    --container-width-narrow: 50rem; /* 800px */
    --container-padding: 1.375rem;   /* 22px - between mobile and desktop */
  }

  /* Responsive Button Scaling */
  .button {
    padding: 0.5625rem 1.0625rem; /* Slightly increased from 0.5rem for better balance */
    font-size: var(--font-base);
  }
}

/* Desktop - 1024px and up */
@media (min-width: 1024px) {
  :root {
    /* Spacing scales up further for desktop */
    --space-md: 2.5rem;   /* 40px */
    --space-lg: 4rem;     /* 64px */
    --space-xl: 6rem;     /* 96px */
    
    /* Typography reaches desktop sizes */
    --font-3xl: 2.25rem;   /* 36px */
    --font-4xl: 2.75rem;   /* 44px */
    --font-heading: 4rem;  /* 64px - desktop size */
    
    /* Container reaches desktop width */
    --container-width: 64rem;        /* 1024px */
    --container-width-narrow: 56rem; /* 896px */
    --container-padding: 1.5rem;     /* 24px */
  }

  /* Responsive Button Scaling */
  .button {
    padding: 0.6875rem 1.3125rem; /* Slightly increased from 0.625rem for better balance */
  }
}

/* Large Desktop - 1440px and up */
@media (min-width: 1440px) {
  :root {
    /* Maximum container width for large screens */
    --container-width: 87.5rem;      /* 1400px */
    --container-width-narrow: 64rem; /* 1024px */
    --container-padding: 1.5rem;     /* 24px */
  }
}

/* Contextual styles based on background context - truly global approach */
/* Light backgrounds get dark text (default behavior from base styles) */
.bg-light h1,
.bg-light h2,
.bg-light h3 {
  color: var(--clr-primary);
}

/* Dark backgrounds get light text */
.bg-dark h1,
.bg-dark h2,
.bg-dark h3 {
  color: var(--clr-text-inverse);
}

/* Cards maintain light background even on dark sections */
.bg-dark .card {
  background: var(--clr-bg-light);
}

/* Stars remain accent color regardless of background */
.bg-dark .stars,
.bg-light .stars {
  color: var(--clr-accent);
}

/* -------------------------------------------------------------------------- */
/* HERO COMPONENTS - Mobile First                                             */
/* -------------------------------------------------------------------------- */

/* Hero title styling - mobile-first for large impact headings */
.hero-title {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: var(--font-heading); /* Uses mobile-first --font-heading (2.25rem) */
  line-height: 1.1;
  color: var(--clr-text-inverse);
  margin: var(--space-sm) 0;
  text-transform: capitalize;
  letter-spacing: normal;
}

/* Hero subtitle styling - mobile-first for hero supporting text */
.hero-subtitle {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--font-base); /* Mobile-optimized size */
  line-height: 1.6;
  color: var(--clr-text-inverse);
  margin: 0 0 var(--space-md);
}

/* Hero responsive scaling */
@media (min-width: 768px) {
  .hero-subtitle {
    font-size: var(--font-lg); /* Scales up on tablet */
  }
}