/*
  Springvale Calligraphy – extracted styles
  Palette: 
    bg light: #d0d3b5
    header/footer: #a8ad7f
    header/footer dark: #8a9163
*/
/* Webfont: Noteworthy Light (self-hosted) */
@font-face {
  font-family: "Noteworthy";
  src: url("fonts/Noteworthy-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #d0d3b5;
  --panel: #a8ad7f;
  --panel-hover: #8a9163;
  --text: #111111;
  --muted: #c5c9a9;
  --radius: 12px;
  --container: 1100px;
  /* Depth of the header fade into the page */
  --header-fade: clamp(160px, 24vh, 420px);
  /* Heading font: prefer Noteworthy if installed; otherwise fall back to hosted Google Font */
  --heading-font: "Noteworthy", "Dancing Script", "Comic Sans MS", "Bradley Hand", cursive;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: #fff;
  border-radius: 6px;
}

.page { min-height: 100dvh; display: flex; flex-direction: column; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 16px; }

.brand { font-weight: 300; margin: 0; font-family: var(--heading-font); }
.brand.small { font-size: 1.25rem; }

/* Header */
.site-header {
  background: var(--panel);
  color: #000;
  /* Enable gradient fade below header */
  position: relative;
  z-index: 0; /* create stacking context so ::after can sit behind content */
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px; }

/* Soft fade from header into page background */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--header-fade) * -1); /* extend deeper into main area */
  height: var(--header-fade);
  background: linear-gradient(to bottom, var(--panel) 0%, var(--bg) 100%);
  pointer-events: none; /* ensure it doesn't block interactions */
  z-index: -1; /* place gradient behind header and main content */
}

.nav { display: flex; align-items: center; gap: 20px; }
.nav-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.nav-link:hover { border-color: currentColor; }
.icon-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }

.icon { width: 20px; height: 20px; }
.mr-2 { margin-right: 8px; }

/* Small screen header layout: stack nav under logo */
@media (max-width: 640px) {
  .header-inner { flex-direction: column; align-items: center; gap: 12px; }
  .header-inner .brand { text-align: center; }
  .nav { width: 100%; justify-content: center; flex-wrap: wrap; }
}

/* Main */
.site-main { flex: 1 1 auto; padding: 24px 16px 48px; position: relative; z-index: 1; }
.section { margin-bottom: 48px; }
.section-title { font-size: clamp(1.9rem, 2.2vw + 1rem, 2.4rem); font-weight: 300; margin: 0 0 16px; font-family: var(--heading-font); }
/* Gallery heading aligns with other section titles now; width no longer constrains swiper */
.text-block { max-width: 60ch; }

/* Services cards */
.cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.avatar { width: 192px; height: 192px; border-radius: 50%; overflow: hidden; margin-bottom: 12px; }
.card-title { margin: 0; font-weight: 400; }
/* Ensure images are neatly centered within circular frame without awkward bottom cropping */
.avatar { position: relative; display: flex; align-items: center; justify-content: center; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

/* Gallery */
.swiper {
  width: 100%;
  height: clamp(12rem, 25vw, 20rem);
  border-radius: var(--radius);
}

/* Center the gallery swiper and ensure it scales fluidly on narrow phones.
  Approach: default width:100% with a 540px ceiling for mid/large screens, then below 560px
  we drop the ceiling so it can reduce further if any internal Swiper sizing tries to lock it. */
.gallery-swiper { margin: 0 auto; width: 100%; max-width: 540px; overflow: hidden; }
@media (max-width: 560px) { .gallery-swiper { max-width: 100%; } }
/* Allow the gallery to truly shrink on very small devices by ensuring Swiper's internal wrapper
   doesn't retain a previously measured large width when orientation/viewport changes. */
@media (max-width: 560px) {
  .gallery-swiper .swiper-wrapper { width: 100% !important; }
  .gallery-swiper .swiper-slide { width: 100% !important; }
}
@media (min-width: 800px) { .gallery-swiper { max-width: 680px; } }
@media (min-width: 1100px) { .gallery-swiper { max-width: 820px; } }

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--muted);
  cursor: pointer;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 20px;
}

.gallery-placeholder { height: clamp(8rem, 20vw, 16rem); background: var(--muted); border-radius: var(--radius); }

/* Quote */
.quote { margin: 0; max-width: 60ch; padding-left: 16px; border-left: 3px solid #333; }

/* Form */
.form { max-width: 800px; display: grid; gap: 16px; }
.form-row { display: grid; gap: 8px; }
.form-label { font-weight: 500; }
.input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--panel);
  color: #000;
}
.input:focus { outline: 2px solid #333; outline-offset: 2px; }
.textarea { resize: vertical; }

.form-actions { display: flex; justify-content: flex-end; }
.btn {
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  background: var(--panel);
  color: #000;
  cursor: pointer;
  transition: background-color .2s ease;
}
.btn:hover { background: var(--panel-hover); }

/* Footer */
.site-footer { background: var(--panel); color: #000; }
.footer-inner { display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: space-between; padding: 16px; }
@media (min-width: 768px) { .footer-inner { flex-direction: row; } }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-links a { color: inherit; text-decoration: none; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #000; border-radius: 50%; color: inherit; text-decoration: none; }
.footer-links { display: flex; flex-direction: column; align-items: center; gap: 8px; }
@media (min-width: 768px) { .footer-links { flex-direction: row; gap: 16px; } }
.footer-shop, .footer-email { display: flex; align-items: center; gap: 8px; }

/* Toast */
.toast-root { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 999; }
.toast {
  background: #1a1a1a;
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  transform: translateY(12px);
  opacity: 0;
  animation: slide-in .25s ease forwards;
}
.toast.success { background: #166534; }
.toast.error { background: #7f1d1d; }
@keyframes slide-in { to { transform: translateY(0); opacity: 1; } }

/* Back to Top button */
html { scroll-behavior: smooth; }
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  color: #000;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none; /* hidden by default */
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
  z-index: 998; /* just beneath toasts */
}
.back-to-top:hover { background: var(--panel-hover); }
.back-to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* If toast stack grows, nudge the button left a bit on small screens */
@media (max-width: 480px) {
  .back-to-top { right: 12px; bottom: 12px; }
}