@import url('fonts.bb72172f.css');

:root {
  /* Color Palette - Calming, Natural, Hopeful */
  --bg-color: #FAFAF7;
  --surface-color: #FFFFFF;
  --primary-color: #5A7D69;
  --primary-hover: #486554;
  --primary-dark: #486554;
  --primary-link: #1d334a;
  --secondary-color: #fdffb4;
  --text-primary: #2D3A33;
  --text-secondary: #5C6B61;
  --accent-color: #E6A87C;
  --border-color: #E2E8E4;

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* Shadows */
  --shadow-sm: 0 4px 6px -1px rgba(45, 58, 51, 0.05), 0 2px 4px -1px rgba(45, 58, 51, 0.03);
  --shadow-md: 0 10px 15px -3px rgba(45, 58, 51, 0.05), 0 4px 6px -2px rgba(45, 58, 51, 0.03);
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Accessibility: skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--spacing-sm);
  z-index: 2000;
  background-color: var(--surface-color);
  color: var(--text-primary);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.skip-link:focus {
  top: var(--spacing-sm);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-color);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
  text-wrap: balance;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

p {
  margin-bottom: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: 1.125rem;
  text-wrap: pretty;
}

address {
  font-style: normal;
}

a {
  color: var(--primary-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primary-link) 40%, transparent);
  text-underline-offset: 2px;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.site-header a {
  text-decoration: none;
}

a:hover {
  color: var(--text-primary);
  text-decoration-color: currentColor;
}

a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Layout */
.container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.container-wide {
  max-width: 1200px;
}

/* Header & Navigation */
.site-header {
  background: radial-gradient(circle at 50% 20%,
      rgba(230, 168, 124, 0.35),
      rgba(230, 168, 124, 0.12) 45%,
      rgba(230, 168, 124, 0) 75%),
    var(--surface-color);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: var(--spacing-sm) 0;
  padding-top: calc(var(--spacing-sm) + env(safe-area-inset-top));
}

.nav-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.logo:hover {
  text-decoration: none;
  color: var(--text-primary);
}

nav {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  right: calc(20px + env(safe-area-inset-right));
  background-color: var(--surface-color);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-sm) 1.5rem;
  border-radius: var(--radius-md);
  z-index: 1000;
  border: 1px solid var(--border-color);
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  list-style: none;
}

.nav-links a {
  display: block;
  padding: 0.5rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  background-color: var(--secondary-color);
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--primary-hover);
}

.nav-links a.active {
  color: var(--primary-dark);
}

/* Main Content Area */
main {
  flex: 1;
  padding: var(--spacing-lg) 0;
}

/* Hero Section */
.hero {
  width: 100%;
  text-align: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(440px, 80vh, 780px);
  padding: var(--spacing-xl) 0;
  /* Pull up into main's top padding so the photo sits flush under the header */
  margin-top: calc(-1 * var(--spacing-lg));
  /* Full-bleed background photo, left undimmed; readability comes from the local scrim below.
     Swapped for a smaller variant per breakpoint below so phones don't fetch the 1.6MB original.
     WebP first via image-set(), JPG as fallback for browsers without WebP support. */
  background: url('../images/hero-900.jpg') center/cover no-repeat;
  background-image: -webkit-image-set(url('../images/hero-900.webp') type('image/webp'), url('../images/hero-900.jpg') type('image/jpeg'));
  background-image: image-set(url('../images/hero-900.webp') type('image/webp'), url('../images/hero-900.jpg') type('image/jpeg'));
  margin-bottom: var(--spacing-lg);
  position: relative;
  overflow: hidden;
  color: var(--surface-color);
  /* Make text white on dark image */
}

.hero a.btn {
  text-decoration: none;
}

@media (min-width: 700px) {
  .hero {
    background-image: url('../images/hero-1600.jpg');
    background-image: -webkit-image-set(url('../images/hero-1600.webp') type('image/webp'), url('../images/hero-1600.jpg') type('image/jpeg'));
    background-image: image-set(url('../images/hero-1600.webp') type('image/webp'), url('../images/hero-1600.jpg') type('image/jpeg'));
  }
}

@media (min-width: 1400px) {
  .hero {
    background-image: url('../images/hero-2400.jpg');
    background-image: -webkit-image-set(url('../images/hero-2400.webp') type('image/webp'), url('../images/hero-2400.jpg') type('image/jpeg'));
    background-image: image-set(url('../images/hero-2400.webp') type('image/webp'), url('../images/hero-2400.jpg') type('image/jpeg'));
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  /* Localized readability scrim: follows the text block itself (not a fixed band of the
     photo), so it stays put behind the words regardless of hero height or text length —
     see WCAG audit for why a percentage-based overlay wasn't reliable enough. Stays solid
     under the whole text block (incl. wrapped lines), only fading in the outer padding
     margin so it blends into the photo with no visible boundary. */
  background: radial-gradient(ellipse 95% 95% at center,
      rgba(45, 58, 51, 0.78) 0%,
      rgba(45, 58, 51, 0.72) 65%,
      rgba(45, 58, 51, 0) 100%);
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  color: var(--surface-color);
  /* Force white for contrast */
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.hero p {
  font-size: 1.25rem;
  max-width: 600px;
  margin: 0 auto var(--spacing-md);
  color: var(--surface-color);
  /* Force white for contrast */
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

/* Components */
.card {
  background-color: var(--surface-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--border-color);
  overflow-wrap: break-word;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hyphens {
  hyphens: auto;
}

.draft-badge {
  display: inline-block;
  background-color: var(--accent-color);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

.card ul {
  padding-left: 1.5rem;
  margin-bottom: var(--spacing-sm);
}

.card li {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.profile-photo {
  float: right;
  width: 38.2%;
  max-width: 220px;
  margin: 0 0 var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.btn {
  display: inline-block;
  background-color: var(--surface-color);
  color: var(--primary-dark);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-family: var(--font-heading);
  transition: background-color 0.3s ease, transform 0.2s ease;
  border: none;
  cursor: pointer;
}

.btn:hover {
  background-color: var(--secondary-color);
  color: var(--primary-dark);
  text-decoration: none;
  transform: translateY(-2px);
}

/* Legal Content Blocks */
.legal-content h2 {
  margin-top: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-color);
}

.legal-content h3 {
  margin-top: var(--spacing-md);
}

/* Footer */
.site-footer {
  background-color: var(--surface-color);
  border-top: 1px solid var(--border-color);
  padding: var(--spacing-md) 0;
  margin-top: auto;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  text-align: center;
}

.footer-links {
  display: flex;
  gap: var(--spacing-md);
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.footer-links a:hover {
  color: var(--primary-color);
}

.copyright {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Responsive Design */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  .hero h1 {
    font-size: 2.25rem;
  }

  .hero {
    min-height: clamp(420px, 75vh, 640px);
    padding: var(--spacing-lg) var(--spacing-sm);
  }

}

@media (max-width: 600px) {
  .profile-photo {
    float: none;
    width: 61.8%;
    max-width: 220px;
    margin: 0 auto var(--spacing-sm);
    display: block;
  }

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

  nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--surface-color);
    box-shadow: 0 -10px 15px -3px rgba(45, 58, 51, 0.05), 0 -4px 6px -2px rgba(45, 58, 51, 0.03);
    z-index: 1000;
    padding: var(--spacing-xs) env(safe-area-inset-right) calc(var(--spacing-xs) + env(safe-area-inset-bottom)) env(safe-area-inset-left);
    border: none;
    border-top: 1px solid var(--border-color);
    border-radius: 0;
  }

  .nav-links {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    padding-bottom: 0.25rem;
  }

  .nav-links::-webkit-scrollbar {
    height: 5px;
  }

  .nav-links::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: var(--radius-sm);
  }

  .nav-links a {
    flex: 0 0 auto;
  }

  body {
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }

  .hero h1 {
    font-size: 2rem;
  }

  .card,
  .hero-content {
    padding: 1.25rem;
  }
}

.equalizeheights {
  list-style-type: none;
  text-align: center;
}

.equalizeheights li {
  padding-bottom: 1.5rem;
}

@media (min-width: 601px) {
  .equalizeheights {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
  }

  .equalizeheights li {
    padding-bottom: 0;
  }
}

.equalizeheights img {
  height: 70px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Accessibility: respect reduced-motion preference for scrolling/hover animations */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .card,
  .card:hover,
  .btn,
  .btn:hover {
    transition: none;
    transform: none;
  }
}