/* ============================================================
   Siya & Me — Site-specific styles
   Extends website-design-system.css
   ============================================================ */

/* ── Sticky nav ──
   Always solid. It used to be transparent over the hero and only turn cream
   once scrolled, but the hero photo is bright at the top (its brightest pixel
   behind the nav is rgb(255,255,245)), so the pale text was unreadable there —
   measured as low as 1.7:1 against a 4.5:1 target. A solid bar is legible over
   any hero image, including whichever photo replaces this one. */
.site-nav-wrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--cream-soft);
  box-shadow: 0 1px 16px rgba(30,68,32,0.10);
}
.site-nav-wrap .nav { max-width: var(--container); }
.site-nav-wrap .logo { color: var(--moss); }
.site-nav-wrap .nav-links a { color: var(--ink-soft); }
.site-nav-wrap .nav-links a:hover { color: var(--terracotta); }

.nav-cta {
  background: var(--terracotta); color: var(--cream-soft) !important;
  padding: 10px 20px; border-radius: var(--radius); font-weight: 700 !important;
  font-size: 13px !important; transition: background 0.15s;
}
.nav-cta:hover { background: var(--terracotta-soft) !important; color: var(--cream-soft) !important; }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ── Hero ── */
#hero {
  /* svh excludes the mobile browser chrome, so the hero doesn't jump as the
     address bar shows and hides. vh first as the fallback. */
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url('../images/siya-hero.jpg') center 30% / cover no-repeat;
}
/* Desktop swaps in the wide bridge photo and matches the hero's aspect ratio
   to it (1600x739), so cover shows the whole image at full width rather than
   cropping. Phones keep the portrait photo: a 2.17:1 image in a tall viewport
   would render as a useless vertical sliver of decking. */
@media (min-width: 781px) {
  #hero {
    min-height: 520px;
    aspect-ratio: 1600 / 739;
  }
  .hero-bg {
    background-image: url('../images/siya-bridge.jpg');
    background-position: center center;
  }
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,68,32,0.75) 0%, rgba(0,0,0,0.18) 55%, transparent 100%);
}
.hero-content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 0 var(--sp-5) var(--sp-8);
}
.hero-content h1 { color: var(--cream-soft); }
.hero-content h1 em { color: var(--sand-deep); }
.hero-tagline {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 2.5vw, 24px);
  color: rgba(251,247,238,0.85); margin: var(--sp-3) 0 var(--sp-2);
}
.hero-location {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--sand);
  margin-bottom: var(--sp-4);
}
.hero-btns { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
/* The design system's outline button is moss green, which disappears against
   the hero photo. Down here the overlay is dark, so cream reads clearly. */
#hero .btn-outline { border-color: var(--cream-soft); color: var(--cream-soft); }
#hero .btn-outline:hover { background: var(--cream-soft); color: var(--moss-deep); }

/* ── Section spacing ── */
.section { padding: var(--sp-8) 0; }
.section-sm { padding: var(--sp-7) 0; }

/* ── About split ── */
.about-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-7); align-items: center;
}
.about-split + .about-split { margin-top: var(--sp-8); }
.about-img {
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/5; box-shadow: var(--shadow-card);
}
.about-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-text .eyebrow { margin-bottom: var(--sp-3); }
.about-text h2 { margin-bottom: var(--sp-4); }
.about-text p { color: var(--ink-soft); margin-bottom: var(--sp-3); font-size: var(--fs-body-lg); }
.about-text p:last-of-type { margin-bottom: 0; }
.about-checklist { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.about-checklist li { font-size: var(--fs-small); color: var(--ink-soft); display: flex; gap: var(--sp-2); align-items: baseline; }
.about-checklist li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); flex-shrink: 0; transform: translateY(1px); }

/* ── Services / Rate rows ── */
.rates-wrap { max-width: 680px; margin-top: var(--sp-5); }
.rates-intro { color: var(--ink-soft); font-size: var(--fs-body-lg); margin-bottom: var(--sp-5); }
.rate-row { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-4) 0; border-top: 1px solid var(--border); }
.rate-row:first-child { border-top: none; }
.rate-name { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--moss-deep); }
.rate-note { font-size: var(--fs-caption); color: var(--ink-soft); margin-top: 3px; }
.rate-price { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--terracotta); text-align: right; white-space: nowrap; }
.rate-unit { font-size: 10.5px; color: var(--ink-soft); text-align: right; }
.rate-label { flex: 1; }

.rates-note {
  margin-top: var(--sp-5); padding: var(--sp-4);
  background: var(--sand); border-radius: var(--radius);
  font-size: var(--fs-small); color: var(--ink-soft);
  border-left: 4px solid var(--terracotta);
}

/* ── Gallery ── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.gallery-item { overflow: hidden; border-radius: var(--radius); cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; aspect-ratio: 1; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item.wide { grid-column: span 2; }
.gallery-item.wide img { aspect-ratio: 2/1; }
.gallery-item.tall { grid-row: span 2; }
.gallery-item.tall img { aspect-ratio: auto; height: 100%; }

/* ── Why us ── */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-5); }
.why-item { display: flex; flex-direction: column; gap: var(--sp-2); }
.why-icon { font-size: 24px; }
.why-title { font-family: var(--serif); font-size: 18px; color: var(--cream-soft); font-weight: 500; }
.why-body { font-size: var(--fs-small); color: var(--sand); line-height: 1.55; }
.why-disclaimer {
  margin-top: var(--sp-6); padding: var(--sp-4);
  background: rgba(228,211,174,0.12); border-radius: var(--radius);
  border-left: 3px solid rgba(228,211,174,0.4);
  font-size: var(--fs-small); color: rgba(251,247,238,0.55);
}

/* ── Conditions ── */
.conditions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-7); margin-top: var(--sp-5); }
.condition-item { display: flex; gap: var(--sp-3); align-items: baseline; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.condition-item:last-child, .condition-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }

/* ── T&Cs Accordion ── */
.tcs-list { margin-top: var(--sp-5); }
.tcs-item { border-top: 1px solid var(--border-inverse); }
.tcs-item:last-child { border-bottom: 1px solid var(--border-inverse); }
.tcs-btn {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-4) 0; color: var(--cream-soft);
  font-family: var(--sans); font-size: var(--fs-body); font-weight: 600;
  text-align: left; gap: var(--sp-4);
}
.tcs-btn:hover { color: var(--sand); }
.tcs-chevron { flex-shrink: 0; font-size: 18px; transition: transform 0.3s; color: var(--sand); }
.tcs-item.open .tcs-chevron { transform: rotate(180deg); }
.tcs-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.tcs-inner { padding-bottom: var(--sp-5); }
.tcs-inner p { color: rgba(251,247,238,0.7); font-size: 15px; margin-bottom: var(--sp-3); }
.tcs-inner p:last-child { margin-bottom: 0; }
.tcs-inner ul { padding-left: var(--sp-4); margin: 0; }
.tcs-inner li { color: rgba(251,247,238,0.7); font-size: 15px; margin-bottom: var(--sp-2); line-height: 1.5; }
.disclaimer-panel {
  margin-top: var(--sp-6); padding: var(--sp-5);
  background: rgba(228,211,174,0.10);
  border-left: 4px solid var(--terracotta-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.disclaimer-panel h3 { color: var(--terracotta-soft); font-size: 18px; margin-bottom: var(--sp-3); }
.disclaimer-panel p { color: rgba(251,247,238,0.65); font-size: 15px; margin-bottom: var(--sp-3); }
.disclaimer-panel p:last-child { margin-bottom: 0; }

/* ── Contact ── */
.contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; }
.contact-info h2 { margin-bottom: var(--sp-4); }
.contact-info p { color: var(--ink-soft); font-size: var(--fs-body-lg); margin-bottom: var(--sp-5); }
.contact-method { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); }
.contact-icon {
  width: 44px; height: 44px; background: var(--sand);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 18px; flex-shrink: 0;
}
.contact-method h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 2px; }
.contact-method p { font-size: var(--fs-body); margin: 0; color: var(--ink); font-weight: 600; }
.contact-method a { color: var(--moss); }
.contact-preferred {
  margin-top: var(--sp-5); padding: var(--sp-4);
  background: var(--sand); border-radius: var(--radius);
  font-size: var(--fs-small); color: var(--ink-soft);
}

/* ── Form ── */
.form-card {
  background: var(--cream-soft); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-6);
  box-shadow: var(--shadow-card);
}
.form-card h3 { font-size: 22px; color: var(--moss-deep); margin-bottom: var(--sp-5); }
.form-group { margin-bottom: var(--sp-4); }
.form-group label {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: var(--sp-2);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 12px var(--sp-3);
  border: 1.5px solid var(--sand-deep); border-radius: var(--radius);
  font-size: var(--fs-body); font-family: var(--sans); color: var(--ink);
  background: var(--cream-soft); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--moss); box-shadow: 0 0 0 3px rgba(44,95,46,0.12);
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-check { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-5); }
.form-check input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px;
  flex-shrink: 0; accent-color: var(--moss);
}
.form-check label {
  font-size: 13px; color: var(--ink-soft); line-height: 1.5;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.form-check a { color: var(--moss); font-weight: 600; }
.form-submit { width: 100%; justify-content: center; font-size: var(--fs-body); }
.msg-success {
  display: none; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: #e8f4ea; border: 1.5px solid var(--moss);
  border-radius: var(--radius); color: var(--moss-deep); font-weight: 600; font-size: 15px;
}
.msg-error {
  display: none; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: #fdecea; border: 1.5px solid #c0392b;
  border-radius: var(--radius); color: #c0392b; font-weight: 600; font-size: 15px;
}

/* ── Footer ── */
.footer-inner {
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: var(--sp-4);
}
.footer-right { text-align: right; color: var(--sand); font-size: var(--fs-small); line-height: 1.8; }
.footer-right a { color: var(--cream-soft); }
.footer-legal { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid rgba(228,211,174,0.2); font-size: 11px; color: rgba(228,211,174,0.45); text-align: center; }

/* ── Lightbox ── */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(27,22,16,0.93); align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius); }
.lightbox-close {
  position: absolute; top: var(--sp-4); right: var(--sp-5);
  background: none; border: none; color: var(--cream-soft);
  font-size: 32px; cursor: pointer; line-height: 1;
}

/* ── Responsive ── */
@media (max-width: 780px) {
  .about-split { grid-template-columns: 1fr; gap: var(--sp-5); }
  .about-split .about-img { aspect-ratio: 3/2; }
  /* Square source photo: a 3/2 frame would crop the face top and bottom. */
  .about-split .about-img-square { aspect-ratio: 1; }
  .why-grid { grid-template-columns: 1fr; }
  .conditions-grid { grid-template-columns: 1fr; }
  .contact-split { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.wide, .gallery-item.tall { grid-column: auto; grid-row: auto; }
  .gallery-item.wide img, .gallery-item.tall img { aspect-ratio: 1; height: auto; }
  .hamburger { display: flex; }
  .nav-links { display: none; position: fixed; top: 0; left: 0; right: 0; background: var(--cream-soft); padding: 80px var(--sp-5) var(--sp-6); flex-direction: column; gap: var(--sp-4); box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 199; }
  .nav-links.open { display: flex; }
  .nav-links a { color: var(--ink); font-size: 18px; }
  .hero-content { padding-bottom: var(--sp-7); }
  .section, .section-sm { padding: var(--sp-7) 0; }
  .rates-wrap { max-width: 100%; }
}