/**
 * Website Factory — Component Styles
 * Buttons, cards, forms, navigation, hero, footer.
 * All values reference design tokens — no hardcoded colors.
 */

/* ========================================
   BASE TYPOGRAPHY
   ======================================== */

body {
  font-family: var(--typography-fonts-body-family, sans-serif);
  font-size: var(--typography-scale-sizes-base, 1rem);
  font-weight: var(--typography-weights-normal, 400);
  line-height: var(--typography-lineHeights-normal, 1.5);
  color: var(--colors-text-base);
  background-color: var(--colors-background-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--typography-fonts-heading-family, sans-serif);
  font-weight: var(--typography-weights-bold, 700);
  line-height: var(--typography-lineHeights-tight, 1.15);
  letter-spacing: var(--typography-letterSpacing-tight, -0.025em);
  color: var(--colors-text-base);
  margin-bottom: var(--spacing-scale-md, 1rem);
}

h1 { font-size: var(--typography-scale-sizes-5xl, 3rem); }
h2 { font-size: var(--typography-scale-sizes-4xl, 2.25rem); }
h3 { font-size: var(--typography-scale-sizes-3xl, 1.875rem); }
h4 { font-size: var(--typography-scale-sizes-2xl, 1.5rem); }
h5 { font-size: var(--typography-scale-sizes-xl, 1.25rem); }
h6 { font-size: var(--typography-scale-sizes-lg, 1.125rem); }

p {
  margin-bottom: var(--spacing-scale-md, 1rem);
  color: var(--colors-text-secondary);
}

strong, b { font-weight: var(--typography-weights-bold, 700); }
small { font-size: var(--typography-scale-sizes-sm, 0.875rem); }

::selection {
  background-color: var(--colors-primary-light);
  color: var(--colors-text-inverse);
}

/* ========================================
   BUTTONS
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-scale-sm, 0.5rem);
  padding: var(--spacing-scale-md, 1rem) var(--spacing-scale-xl, 2rem);
  font-family: var(--typography-fonts-heading-family, sans-serif);
  font-size: var(--typography-scale-sizes-base, 1rem);
  font-weight: var(--typography-weights-semibold, 600);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: var(--borders-width-medium, 2px) solid transparent;
  border-radius: var(--borders-radius-md, 0.5rem);
  cursor: pointer;
  transition: all var(--transitions-speeds-base, 250ms) var(--transitions-easings-inOut);
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--colors-cta-base);
  color: var(--colors-cta-text);
  border-color: var(--colors-cta-base);
  box-shadow: var(--shadows-md);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--colors-cta-hover);
  box-shadow: var(--shadows-lg);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--colors-secondary-base);
  color: var(--colors-text-inverse);
  border-color: var(--colors-secondary-base);
  box-shadow: var(--shadows-md);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--colors-secondary-dark);
  box-shadow: var(--shadows-lg);
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  color: var(--colors-text-base);
  border-color: var(--colors-border-base);
}

.btn-outline:hover:not(:disabled) {
  background-color: var(--colors-background-surfaceHover);
  border-color: var(--colors-primary-base);
  color: var(--colors-primary-base);
}

.btn-ghost {
  background-color: transparent;
  color: var(--colors-text-muted);
  border-color: transparent;
  padding: var(--spacing-scale-sm, 0.5rem) var(--spacing-scale-md, 1rem);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--colors-primary-base);
  background-color: var(--colors-background-surface);
}

.btn-sm {
  padding: var(--spacing-scale-sm, 0.5rem) var(--spacing-scale-lg, 1.5rem);
  font-size: var(--typography-scale-sizes-sm, 0.875rem);
}

.btn-lg {
  padding: var(--spacing-scale-lg, 1.5rem) var(--spacing-scale-2xl, 3rem);
  font-size: var(--typography-scale-sizes-lg, 1.125rem);
}

/* ========================================
   CARDS
   ======================================== */

.card {
  background-color: var(--colors-background-surface);
  border: var(--borders-width-thin, 1px) solid var(--colors-border-base);
  border-radius: var(--borders-radius-lg, 0.75rem);
  padding: var(--spacing-scale-xl, 2rem);
  transition: all var(--transitions-speeds-base, 250ms) var(--transitions-easings-inOut);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadows-xl);
  border-color: var(--colors-primary-light);
}

.card-elevated {
  background-color: var(--colors-background-surfaceElevated);
  box-shadow: var(--shadows-md);
}

.card-glass {
  background-color: var(--colors-overlay);
  backdrop-filter: blur(var(--effects-blur-lg, 16px));
  -webkit-backdrop-filter: blur(var(--effects-blur-lg, 16px));
}

/* ========================================
   HEADER / NAVIGATION
   ======================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--zIndex-sticky, 200);
  background-color: var(--colors-background-base);
  backdrop-filter: blur(var(--effects-blur-md, 8px));
  -webkit-backdrop-filter: blur(var(--effects-blur-md, 8px));
  border-bottom: var(--borders-width-thin, 1px) solid var(--colors-border-base);
  padding: var(--spacing-scale-md, 1rem) 0;
  transition: all var(--transitions-speeds-base, 250ms);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  font-family: var(--typography-fonts-heading-family, sans-serif);
  font-size: var(--typography-scale-sizes-xl, 1.25rem);
  font-weight: var(--typography-weights-bold, 700);
  color: var(--colors-text-base);
  text-decoration: none;
  letter-spacing: var(--typography-letterSpacing-wide, 0.025em);
  transition: color var(--transitions-speeds-fast, 150ms);
}

.site-logo:hover {
  color: var(--colors-primary-base);
}

.main-nav ul {
  display: flex;
  gap: var(--spacing-scale-xl, 2rem);
  align-items: center;
}

.main-nav a {
  font-family: var(--typography-fonts-heading-family, sans-serif);
  font-size: var(--typography-scale-sizes-base, 1rem);
  font-weight: var(--typography-weights-medium, 500);
  color: var(--colors-text-muted);
  text-decoration: none;
  transition: color var(--transitions-speeds-fast, 150ms);
  position: relative;
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--colors-primary-base);
  transition: width var(--transitions-speeds-base, 250ms);
}

.main-nav a:hover { color: var(--colors-text-base); }
.main-nav a:hover::after { width: 100%; }
.main-nav a.active { color: var(--colors-primary-base); }

/* Mobile menu */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--colors-text-base);
  font-size: var(--typography-scale-sizes-2xl, 1.5rem);
  cursor: pointer;
  padding: var(--spacing-scale-sm, 0.5rem);
}

@media (max-width: 767px) {
  /* Closed state is translated off-canvas, not parked at a negative offset:
     a negative right widens the layout viewport and the page scrolls sideways. */
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background-color: var(--colors-background-surface);
    border-left: var(--borders-width-thin, 1px) solid var(--colors-border-base);
    padding: var(--spacing-scale-3xl, 4rem) var(--spacing-scale-xl, 2rem);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transitions-speeds-slow, 350ms), visibility 0s linear var(--transitions-speeds-slow, 350ms);
    z-index: var(--zIndex-modal, 400);
  }

  .main-nav.active {
    transform: none;
    visibility: visible;
    transition: transform var(--transitions-speeds-slow, 350ms), visibility 0s;
  }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: var(--spacing-scale-lg, 1.5rem); }

  .mobile-menu-toggle {
    display: block;
    position: relative;
    z-index: calc(var(--zIndex-modal, 400) + 1);
  }

  /* backdrop-filter makes the header the containing block for its fixed children, clipping the overlay to the header strip. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--colors-overlay);
  z-index: var(--zIndex-overlay, 300);
  opacity: 0;
  transition: opacity var(--transitions-speeds-base, 250ms);
}

.menu-overlay.active {
  display: block;
  opacity: 1;
}

/* One-page anchors: land below the sticky header, scroll smoothly unless the visitor opts out. */
section[id] {
  scroll-margin-top: var(--header-height, 5rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav, .main-nav.active { transition: none; }
}

/* ========================================
   HERO
   ======================================== */

.hero {
  min-height: 85vh;
  min-height: 85svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: var(--spacing-scale-3xl, 4rem) 0;
  isolation: isolate;
  color: #fff;
}

.hero-plain {
  background:
    radial-gradient(circle at 85% 15%, var(--colors-primary-light, transparent) 0, transparent 55%),
    linear-gradient(135deg, var(--colors-primary-dark), var(--colors-primary-base));
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.7));
  z-index: -1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--spacing-scale-md, 1rem);
}

.hero h1 {
  font-size: clamp(var(--typography-scale-sizes-4xl, 2.25rem), 8vw, var(--typography-scale-sizes-6xl, 3.75rem));
  margin-bottom: var(--spacing-scale-lg, 1.5rem);
  line-height: var(--typography-lineHeights-tight, 1.15);
  color: #fff;
  overflow-wrap: break-word;
}

.hero p {
  font-size: var(--typography-scale-sizes-xl, 1.25rem);
  color: #fff;
  margin-bottom: var(--spacing-scale-2xl, 3rem);
  line-height: var(--typography-lineHeights-relaxed, 1.625);
}

.hero-cta {
  display: flex;
  gap: var(--spacing-scale-lg, 1.5rem);
  justify-content: center;
  flex-wrap: wrap;
}

.hero .btn-primary {
  background-color: #fff;
  border-color: #fff;
  color: var(--colors-primary-dark);
}

.hero .btn-primary:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.88);
}

.hero .btn-outline {
  color: #fff;
  border-color: #fff;
}

.hero .btn-outline:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: #fff;
  color: #fff;
}

/* ========================================
   GALLERY
   ======================================== */

.gallery-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-scale-md, 1rem);
}

.gallery-item {
  margin: 0;
  min-width: 0;
}

.gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--borders-radius-md, 0.5rem);
}

.gallery-item figcaption {
  margin-top: var(--spacing-scale-sm, 0.5rem);
}

@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ========================================
   CONTACT HOURS
   ======================================== */

.contact-hours {
  max-width: 28rem;
  margin: var(--spacing-scale-2xl, 3rem) auto 0;
}

.contact-hours h3 {
  text-align: center;
  margin-bottom: var(--spacing-scale-md, 1rem);
}

.contact-hours ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-hours li {
  padding: var(--spacing-scale-sm, 0.5rem) 0;
  border-bottom: var(--borders-width-thin, 1px) solid var(--colors-border-base);
  font-size: var(--typography-scale-sizes-sm, 0.875rem);
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
  background-color: var(--colors-background-elevated);
  border-top: var(--borders-width-thin, 1px) solid var(--colors-border-base);
  padding: var(--spacing-scale-3xl, 4rem) 0 var(--spacing-scale-xl, 2rem);
  margin-top: var(--spacing-scale-4xl, 6rem);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-scale-2xl, 3rem);
  margin-bottom: var(--spacing-scale-2xl, 3rem);
}

.footer-section h4 {
  font-size: var(--typography-scale-sizes-lg, 1.125rem);
  margin-bottom: var(--spacing-scale-md, 1rem);
  color: var(--colors-text-base);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scale-sm, 0.5rem);
}

.footer-links a {
  color: var(--colors-text-muted);
  text-decoration: none;
  transition: color var(--transitions-speeds-fast, 150ms);
}

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

.footer-bottom {
  padding-top: var(--spacing-scale-xl, 2rem);
  border-top: var(--borders-width-thin, 1px) solid var(--colors-border-base);
  text-align: center;
  color: var(--colors-text-muted);
  font-size: var(--typography-scale-sizes-sm, 0.875rem);
}

/* ========================================
   FORMS
   ======================================== */

.form-group {
  margin-bottom: var(--spacing-scale-lg, 1.5rem);
}

label {
  display: block;
  font-weight: var(--typography-weights-medium, 500);
  margin-bottom: var(--spacing-scale-sm, 0.5rem);
  color: var(--colors-text-base);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: var(--spacing-scale-md, 1rem);
  font-size: var(--typography-scale-sizes-base, 1rem);
  color: var(--colors-text-base);
  background-color: var(--colors-background-surface);
  border: var(--borders-width-thin, 1px) solid var(--colors-border-base);
  border-radius: var(--borders-radius-md, 0.5rem);
  transition: all var(--transitions-speeds-fast, 150ms);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--colors-border-focus);
  box-shadow: 0 0 0 3px var(--colors-primary-light, rgba(37, 99, 235, 0.15));
}

input.error,
select.error,
textarea.error {
  border-color: var(--colors-utility-error);
}

.error-message {
  display: block;
  margin-top: var(--spacing-scale-xs, 0.25rem);
  font-size: var(--typography-scale-sizes-sm, 0.875rem);
  color: var(--colors-utility-error);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* ========================================
   BRANDING BAR
   ======================================== */

.branding-bar {
  text-align: center;
  font-size: var(--typography-scale-sizes-sm, 0.875rem);
}

.branding-bar p { margin: 0; color: inherit; }
.branding-bar a { text-decoration: underline; }

.branding-subtle {
  padding: var(--spacing-scale-sm, 0.5rem) 0;
  background: var(--colors-background-elevated);
  color: var(--colors-text-muted);
}

.branding-subtle a { color: var(--colors-text-muted); }

.branding-prominent {
  padding: var(--spacing-scale-md, 1rem) 0;
  background: var(--colors-primary-base);
  color: #fff;
  border-top: var(--borders-width-medium, 2px) solid var(--colors-secondary-base);
}

.branding-prominent a {
  color: #fff;
  font-weight: var(--typography-weights-semibold, 600);
}

.removal-line {
  padding: var(--spacing-scale-sm, 0.5rem) 0;
  text-align: center;
  font-size: var(--typography-scale-sizes-sm, 0.875rem);
  color: var(--colors-text-muted);
}

.removal-line p { margin: 0; color: inherit; }
.removal-line a { color: var(--colors-text-muted); text-decoration: underline; }

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 767px) {
  h1 { font-size: var(--typography-scale-sizes-4xl, 2.25rem); }
  h2 { font-size: var(--typography-scale-sizes-3xl, 1.875rem); }
  h3 { font-size: var(--typography-scale-sizes-2xl, 1.5rem); }

  .hero { min-height: 78vh; min-height: 78svh; }

  .hero-cta {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 300px;
  }
}