/* ==========================================================================
   site.css — the shared foundation for every page.

   This is the ONLY place the brand colours are defined. Change one here and
   every page follows. Anything used by more than one page lives here;
   anything used by a single page lives in that page's own stylesheet.
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* The site's two typefaces, named once. Everything else refers to these,
     so changing a typeface is a one-line change here.
     Note: the display typeface has no weight lighter than 300. */
  --font-body: 'Public Sans', sans-serif;
  --font-display: 'Cormorant Garamond', serif;

  --cream: #f5f0e8;
  --sand: #e8dfc8;
  --dune: #c8b89a;
  --ocean: #6b8f9e;
  --deep: #2c3e45;
  --text: #2e3a3f;
  --light-text: #7a8a8f;
  --white: #fdfbf7;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text);
}

/* ── Hidden from sight, still reachable by assistive technology ── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── NAV (shared shell; each page sets its own position/background) ── */
.nav-logo { text-decoration: none; color: var(--deep); }
.logo-svg { display: block; }

.nav-links { display: flex; gap: 2.8rem; list-style: none; }
.nav-links a {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--light-text);
  text-decoration: none;
  transition: color 0.3s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ocean); }

/* The links, the Instagram icon and the menu button travel together on
   the right of the bar. */
.nav-right { display: flex; align-items: center; gap: 2.2rem; }

.nav-instagram {
  display: inline-flex;
  align-items: center;
  color: var(--light-text);
  transition: color 0.3s;
}
.nav-instagram:hover { color: var(--ocean); }
.nav-instagram svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none; stroke-width: 1.4;
  display: block;
}

/* Inner pages (pricing, galleries) share one translucent fixed bar. */
.nav-inner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 4rem;
  background: rgba(245, 240, 232, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(200, 184, 154, 0.25);
}

/* ── PHONE MENU ──
   The button is invisible on a laptop, where the bar shows its own links.
   On a phone it opens the links full screen. */
.menu-toggle {
  display: none;
  position: relative;
  z-index: 320;
  width: 34px; height: 26px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--deep);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-toggle span + span { margin-top: 8px; }
.menu-toggle.open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 310;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 300;
 
  color: var(--deep);
  text-decoration: none;
  transition: color 0.3s;
}
.mobile-menu a:hover, .mobile-menu a.active { color: var(--ocean); }

/* ── SHARED TEXT PRIMITIVES ── */
.label {
  font-size: 0.65rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ocean);
  margin-bottom: 1rem;
}
.divider { width: 48px; height: 1px; background: var(--sand); margin: 1.8rem auto; }

.section-title {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--deep);
  line-height: 1.2;
}

/* ── FOOTER ── */
footer {
  background: var(--deep);
  padding: 3rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-copy { font-size: 0.65rem; letter-spacing: 0.14em; color: rgba(200, 184, 154, 0.4); }
.footer-socials { display: flex; gap: 1.6rem; }
.footer-socials a {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(200, 184, 154, 0.5);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-socials a:hover { color: var(--ocean); }

/* ── SHARED RESPONSIVE BEHAVIOUR ── */
@media (max-width: 900px) {
  .nav-inner { padding: 1.9rem 1.5rem; }
  /* The logo is drawn about six times wider than it is tall, so at its
     full size it is wider than the screen. */
  .logo-svg { height: 38px; width: auto; }
  .nav-links { display: none; }
  .nav-right { gap: 1.4rem; }
  .menu-toggle { display: block; }
  /* Stacked on a phone, but kept against the left edge — a centred logo
     floating above centred text reads as unanchored. */
  footer { flex-direction: column; align-items: flex-start; gap: 1.2rem; text-align: left; padding: 2rem; }
}