/* ============================================================
   Dubuisson Law Office — site styles
   Colour system: deep wine/burgundy (--wine) is the single accent
   used for the footer, buttons, and hover states. Everything else
   is black text on white, or white text on the image heroes.
   ============================================================ */

:root {
  --wine: #6d1a2e;
  --wine-dark: #4f1220;
  --wine-light: #8a2540;
  --ink: #1a1416;
  --paper: #ffffff;
  --paper-soft: #faf7f6;
  --line: #e7dee0;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  /* Scroll-snapping is deliberately limited to the hero landing section
     only (see .hero below) — everything past it is normal, freely
     scrollable content. A lone snap point doesn't need "mandatory" to
     work reliably, and "proximity" keeps the hero's snap gentle rather
     than forcing a hard stop whenever it drifts into view. */
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  /* Fluid base font size: every rem-based size in this stylesheet (and
     there are a lot of them) scales smoothly between mobile and desktop
     instead of jumping at breakpoints. ~15px on narrow phones up to 18px
     on large desktops. */
  font-size: clamp(15px, 0.4vw + 13.4px, 18px);
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--wine); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--serif); line-height: 1.15; margin: 0 0 0.6em; font-weight: 700; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 0; top: -60px; background: var(--wine); color: #fff;
  padding: 0.75em 1.25em; z-index: 1000; transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ---------- Top navigation ---------- */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.5rem;
  background: rgba(26, 20, 22, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.topbar.is-solid {
  background: var(--paper);
  box-shadow: 0 2px 14px rgba(0,0,0,0.08);
}

.topbar .brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
}
.topbar.is-solid .brand { color: var(--wine-dark); }

.topbar .brand small {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0; padding: 0;
}

.nav-links a {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.3em 0;
  border-bottom: 2px solid transparent;
}
.topbar.is-solid .nav-links a { color: var(--ink); }
.nav-links a:hover,
.nav-links a[aria-current="page"] { border-bottom-color: var(--wine-light); text-decoration: none; }
.topbar.is-solid .nav-links a:hover,
.topbar.is-solid .nav-links a[aria-current="page"] { border-bottom-color: var(--wine); }

.lang-switch {
  border: 1.5px solid rgba(255,255,255,0.7);
  color: #fff;
  border-radius: 999px;
  padding: 0.3em 0.9em;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.topbar.is-solid .lang-switch { border-color: var(--wine); color: var(--wine); }
.lang-switch:hover { background: rgba(255,255,255,0.15); text-decoration: none; }
.topbar.is-solid .lang-switch:hover { background: var(--paper-soft); }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  z-index: 600; /* stay above the .nav-right panel so it remains clickable to close */
  position: relative;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, background 0.25s ease;
}
.topbar.is-solid .nav-toggle-bar { background: var(--wine-dark); }
/* Once the panel is open, the toggle sits on top of the wine-dark panel,
   so its bars need to stay white regardless of the topbar's solid/transparent
   state underneath (mirrors the same fix applied to the panel's nav links). */
.nav-toggle.is-active .nav-toggle-bar,
.topbar.is-solid .nav-toggle.is-active .nav-toggle-bar { background: #fff; }
.nav-toggle.is-active .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-right { display: flex; align-items: center; gap: 1.6rem; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  /* The one deliberately-kept scroll-snap point: scrolling off the hero
     (down into the content) or back up to it still glides to a clean
     rest at the top of the section. Nothing below the hero snaps. */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  padding: 6rem 1.5rem 3rem;
  isolation: isolate;
}

.hero-inner {
  max-width: 46rem;
  text-align: center;
  color: #fff;
}

/* No darkening overlay on the hero photos any more — the images show
   their true, unaltered color and shading. Text sitting on top of them
   gets its own shadow instead, so it stays legible against bright or
   busy areas of the photo without dimming the image itself. */
.hero-kicker,
.hero-inner h1,
.hero-inner .hero-sub,
.hero-tel,
.hero-inner .btn-outline {
  text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 1px 2px rgba(0,0,0,0.6);
}

.hero-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f1d9de;
  margin-bottom: 1.1rem;
}

.hero-inner h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  color: #fff;
  margin-bottom: 0.75rem;
}

.hero-inner .hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: #f2eaec;
  margin-bottom: 1.8rem;
}

.hero-tel {
  display: block;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1.8rem;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}
.hero-tel:hover { text-decoration: underline; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  background: var(--wine);
  color: #fff;
  border: 2px solid var(--wine);
  border-radius: 999px;
  padding: 0.7em 1.7em;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn:hover { background: var(--wine-dark); border-color: var(--wine-dark); text-decoration: none; transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.btn-outline:hover { background: #fff; color: var(--wine-dark); }

/* ---------- Content sections ---------- */

.section {
  /* Sections are no longer pinned to one-screen-per-section: content
     simply flows to whatever height it needs and the page scrolls
     normally, like any ordinary web page. */
  padding: 5rem 1.5rem;
  background: var(--paper);
}
.section:nth-of-type(even) { background: var(--paper-soft); }

.section-inner {
  /* A bit wider than before now that a paragraph's column isn't fighting
     for space inside a fixed-height screen — still a fixed, readable rem
     value that scales with the page's fluid root font-size, so it adapts
     smoothly across screen sizes rather than jumping at a breakpoint. */
  max-width: 54rem;
  margin: 0 auto;
  width: 100%;
}

.section h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--wine-dark);
}

.section p { margin: 0 0 1.5em; color: var(--ink); }
.section p:last-child { margin-bottom: 0; }

.section-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 2.25rem;
}
.section-links .btn { background: var(--wine); color: #fff; }

/* ---------- Practice list ---------- */

.practice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem 2.4rem;
  margin: 2rem 0 2.5rem;
  text-align: left;
}
.practice-grid h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--wine-dark);
  margin: 0 0 0.4em;
  padding-bottom: 0.3em;
  border-bottom: 2px solid var(--line);
}
.practice-grid ul { margin: 0; padding-left: 1.1em; color: var(--ink); font-size: 0.94rem; }
.practice-grid li { margin-bottom: 0.25em; }
.practice-grid .no-sub { list-style: none; padding-left: 0; font-size: 0.94rem; color: var(--ink); }

/* ---------- Practice Areas: text + list split (desktop) ---------- */

@media (min-width: 861px) {
  .section--split .practice-split {
    max-width: 74rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "heading ."
      "text    list"
      "links   links";
    column-gap: 3.5rem;
    row-gap: 2rem;
  }
  /* Title lives in its own row above both columns. Both the text and the
     list now simply flow to their natural height — no independent
     scrolling within the page, the whole page just scrolls. */
  .practice-split-heading { grid-area: heading; }
  .practice-split-heading h2 { margin: 0; }
  .practice-text-panel { grid-area: text; padding-top: 0.5rem; }
  .practice-list-panel { grid-area: list; padding-top: 0.5rem; }
  .practice-list-panel .practice-grid { margin-top: 0; }
  .practice-split > .section-links { grid-area: links; }
}

/* ---------- About: paired two-column rows (desktop) ---------- */

@media (min-width: 861px) {
  .section--split .pair-split {
    max-width: 74rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 3.5rem;
    row-gap: 2rem;
  }
  .pair-panel {
    /* Each panel just flows to its natural height now — no forced
       viewport-height row, no internal scrollbar, no vertical-centering
       trick to keep content "on screen". Comfortable, generous padding
       since there's no longer a tight fit-on-one-screen budget. */
    padding: 1rem 0;
  }
  /* The bio block (photo + name/title/contact) is centered as its own
     unit within its column — image centered, and the text under it
     centered too — unlike the text-only panels, which read left-aligned. */
  .pair-panel .bio {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

/* Trailing page CTA merged into the last row of a split/pair grid section
   (About, Practice Areas) — a full-width strip below both columns instead
   of its own empty-feeling screen. */
@media (min-width: 861px) {
  .practice-split > .section-links,
  .pair-split > .section-links {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

/* About page pair blocks: the block as a whole is vertically centered in
   the row (see .pair-panel above), but the text inside reads left-aligned
   like ordinary body copy rather than centered like a pull-quote. */
.pair-panel { text-align: left; }

/* ---------- Bio block ---------- */

.bio {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
  padding-top: 2rem;
  border-top: 2px solid var(--line);
}
/* The whole portrait, uncropped — not a tight close-up — shown as a
   rounded square with a white + wine-red framed border. Same treatment at
   every size, mobile through desktop, just scaled up on larger screens. */
.bio img {
  width: min(56vw, 240px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 16px;
  border: 6px solid #fff;
  box-shadow: 0 0 0 4px var(--wine), 0 3px 14px rgba(0,0,0,0.18);
}
.bio-name { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--wine-dark); margin-bottom: 0.15em; }
.bio-title { font-weight: 600; margin-bottom: 0.1em; }
.bio-credentials { color: #6b5a5e; margin-bottom: 0.6em; font-size: 0.92rem; }
.bio-contact a { display: inline-block; margin-right: 1.2em; font-weight: 600; }

@media (min-width: 861px) {
  .pair-panel .bio { gap: 1.5rem; }
  .pair-panel .bio img {
    width: clamp(200px, 20vw, 320px);
  }
}

/* ---------- Contact form ---------- */

.contact-info {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 1.6rem 0 2.4rem;
  font-weight: 600;
  font-size: 1.05rem;
}
.contact-info a { color: var(--wine); }

form.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  text-align: left;
}
.form-field { display: flex; flex-direction: column; gap: 0.4em; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.85rem; font-weight: 600; color: var(--wine-dark); }
.form-field label .req { font-weight: 400; color: #8a7478; font-size: 0.78rem; }
.form-field input,
.form-field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.75em 0.9em;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(109,26,46,0.12);
}
.form-field textarea { resize: vertical; min-height: 120px; }

.contact-form .btn { border: none; cursor: pointer; justify-self: start; grid-column: 1 / -1; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Contact page no longer needs to squeeze the intro text and the whole
   form onto one screen — normal comfortable spacing throughout, same as
   any other section, with the form given a bit more room to breathe. */
@media (min-width: 861px) {
  #contact-form .section-inner { max-width: 42rem; }
  form.contact-form { gap: 1.4rem; }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--wine-dark);
  color: #f5e9ec;
  padding: 3.5rem 1.5rem 2rem;
}
.footer-inner {
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.footer-brand { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 0.6rem; }
.footer-contact a { display: block; color: #f5e9ec; margin-bottom: 0.3em; font-weight: 500; }
.footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5em; }
.footer-nav a { color: #f5e9ec; font-weight: 500; }
.footer-nav a:hover, .footer-contact a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  max-width: 60rem;
  margin: 0 auto;
  padding-top: 1.4rem;
  font-size: 0.85rem;
  color: #d9b9c2;
}

/* ---------- 404 / thank-you ---------- */

.simple-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem;
  background: var(--paper-soft);
}
.simple-page h1 { color: var(--wine-dark); font-size: 2.4rem; }
.simple-page p { max-width: 32rem; margin-bottom: 2rem; color: #4a3a3e; }

/* ---------- Mobile ---------- */

@media (max-width: 860px) {
  .practice-grid { grid-template-columns: 1fr; }
  form.contact-form { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .nav-right {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: var(--wine-dark);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5.5rem 2rem 2rem;
    gap: 2rem;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    box-shadow: -8px 0 30px rgba(0,0,0,0.25);
  }
  .nav-right.is-open { transform: translateX(0); }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  /* The dropdown panel is always wine-dark on mobile, regardless of whether
     the topbar itself has gone "solid" (white) after scrolling — so its
     text must always stay white. These selectors intentionally match (and
     beat the specificity of) the ".topbar.is-solid .nav-links a" desktop
     rule, which would otherwise turn this text black-on-wine. */
  .nav-right .nav-links a,
  .topbar.is-solid .nav-right .nav-links a { color: #fff; font-size: 1.05rem; }
  .nav-right .nav-links a[aria-current="page"],
  .topbar.is-solid .nav-right .nav-links a[aria-current="page"] { border-bottom-color: var(--wine-light); }
  .nav-right .lang-switch,
  .topbar.is-solid .nav-right .lang-switch { border-color: rgba(255,255,255,0.7); color: #fff; }
  .nav-right .lang-switch:hover,
  .topbar.is-solid .nav-right .lang-switch:hover { background: rgba(255,255,255,0.15); }
  .hero { padding-top: 5.5rem; }
  .bio { flex-direction: column; text-align: center; }
  .bio-contact a { display: block; margin: 0 0 0.4em; }
  .contact-info { flex-direction: column; gap: 0.6rem; }
  .footer-inner { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}