/* ==========================================================================
   The Vega Law Firm — single page
   Palette sampled from vega-law-crest.jpg: gold #fac92f, blue #1a189d
   ========================================================================== */

:root {
  --blue: #1a189d;
  --blue-deep: #101060;
  --blue-tint: #eeeefb;
  --gold: #fac92f;
  --gold-deep: #c99a08;
  --ink: #14143a;
  --body: #3a3a52;
  --muted: #6a6a80;
  --cream: #fbfaf7;
  --white: #ffffff;
  --line: #e4e2dc;

  --serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1120px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20, 20, 58, .06), 0 8px 24px rgba(20, 20, 58, .07);
  --shadow-lift: 0 2px 4px rgba(20, 20, 58, .07), 0 16px 40px rgba(20, 20, 58, .12);
  --header-h: 4.5rem;
}

/* --- reset ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 .6em;
  font-weight: 700;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- language switching ---------------------------------------------------
   Both languages ship in the markup; CSS reveals one. `display: none` also
   removes the hidden copy from the accessibility tree, so a screen reader
   reads one language rather than both. English is the static default, so a
   visitor with JavaScript disabled still gets a complete page.
   -------------------------------------------------------------------------- */

[data-lang="en"] [lang="es"] { display: none; }
[data-lang="es"] [lang="en"] { display: none; }

/* Without JavaScript the language switch and the click-to-load map cannot
   do anything, so they are hidden rather than left as dead controls. The
   page still reads completely in English, and the Kissimmee office keeps its
   plain "Directions" link out to Google Maps. */
html:not(.js) .langswitch,
html:not(.js) .map { display: none; }

/* --- layout primitives ---------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }

.section__head { max-width: 46rem; margin-bottom: 2.75rem; }
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 .75rem;
}

h2 { font-size: clamp(1.85rem, 4vw, 2.6rem); text-wrap: balance; }
h3 { font-size: 1.25rem; text-wrap: balance; }

.rule {
  width: 68px;
  height: 4px;
  border: 0;
  margin: 1.25rem 0 0;
  background: var(--gold);
  border-radius: 2px;
}
.section__head--center .rule { margin-inline: auto; }

.lede { font-size: 1.125rem; color: var(--body); }

.mt { margin-top: 1.15rem; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(201, 154, 8, .28);
}
.btn--gold:hover { background: #ffd455; border-color: #ffd455; }

.btn--blue {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.btn--blue:hover { background: var(--blue-deep); border-color: var(--blue-deep); }

.btn--ghost {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
}
.btn--ghost:hover { background: var(--blue); color: var(--white); }

.btn--sm { padding: .55rem 1.1rem; font-size: .9375rem; }

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* --- skip link ------------------------------------------------------------ */

.skip {
  position: absolute;
  left: 1rem;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transform: translateY(-105%);
  transition: transform .15s;
}
.skip:focus { transform: translateY(0); }

/* --- header --------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -3px 0 var(--gold);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  margin-right: auto;
}

.brand img { width: 42px; height: auto; }

.brand__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.15;
  color: var(--blue);
  letter-spacing: .01em;
}

.brand__tag {
  display: block;
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.nav a {
  display: block;
  padding: .5rem .7rem;
  border-radius: 8px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { background: var(--blue-tint); color: var(--blue); }

.header__actions { display: flex; align-items: center; gap: .6rem; }

/* language toggle */

.langswitch {
  display: flex;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--white);
}

.langswitch button {
  padding: .35rem .7rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  cursor: pointer;
}
.langswitch button:hover { background: var(--blue-tint); color: var(--blue); }
.langswitch button[aria-pressed="true"] { background: var(--blue); color: var(--white); }

/* mobile menu — a <details> disclosure, so it works with no JavaScript */

.menu { display: none; position: relative; }

.menu > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 1.05rem; height: 1.05rem; }
.menu[open] > summary { background: var(--blue); border-color: var(--blue); color: var(--white); }

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + .6rem);
  min-width: 15rem;
  padding: .5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.menu__panel ul { list-style: none; margin: 0; padding: 0; }
.menu__panel a {
  display: block;
  padding: .7rem .85rem;
  border-radius: 8px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.menu__panel a:hover { background: var(--blue-tint); color: var(--blue); }

/* --- hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(1000px 420px at 50% -12%, #fff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--blue-tint) 0%, var(--cream) 62%);
  text-align: center;
  overflow: hidden;
}

.hero__crest {
  width: clamp(160px, 26vw, 250px);
  margin: 0 auto clamp(1.25rem, 3vw, 2rem);
  filter: drop-shadow(0 10px 22px rgba(20, 20, 58, .16));
}

.hero h1 {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  letter-spacing: -.015em;
  margin-bottom: .35em;
  text-wrap: balance;
}
.hero h1 .accent { color: var(--blue); display: block; }

.hero__sub {
  max-width: 40rem;
  margin: 0 auto 1.75rem;
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  color: var(--body);
  text-wrap: balance;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: center;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.4rem;
  margin-top: 1.85rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--muted);
}
.hero__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.hero__meta svg { width: 1.05rem; height: 1.05rem; color: var(--gold-deep); flex: none; }

/* --- trust strip ---------------------------------------------------------- */

.strip { background: var(--blue); color: #dcdcf7; }

.strip ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1rem;
  list-style: none;
  margin: 0;
  padding: clamp(2rem, 5vw, 2.75rem) 0;
  text-align: center;
}

.strip b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.15rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold);
}

.strip span {
  display: block;
  margin-top: .3rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --- practice areas ------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1.25rem;
}

.card {
  position: relative;
  padding: 1.6rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: #d5d2ca;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  background: var(--blue-tint);
  color: var(--blue);
}
.card__icon svg { width: 1.5rem; height: 1.5rem; }

.card h3 { margin-bottom: .35rem; font-size: 1.125rem; }
.card p { font-size: .9375rem; color: var(--muted); }

/* --- prose / split -------------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.prose p { max-width: 40rem; }

.panel {
  padding: 1.85rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel--cream { background: var(--cream); }

.panel h3 {
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: var(--sans);
  color: var(--gold-deep);
  margin-bottom: 1.15rem;
}

.creds { list-style: none; margin: 0; padding: 0; }

.creds li {
  display: flex;
  gap: .8rem;
  padding: .7rem 0;
  border-top: 1px solid var(--line);
  font-size: .9375rem;
  line-height: 1.55;
}
.creds li:first-of-type { border-top: 0; padding-top: 0; }

.creds svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: .2rem;
  color: var(--blue);
}

.creds strong { display: block; color: var(--ink); }

/* --- offices -------------------------------------------------------------- */

.offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1.5rem;
}

.office {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* The grid stretches both cards to the same height. The bottom panel — the map
   on Kissimmee, the appointment notice on Winter Park — absorbs the slack, so
   the two cards line up without leaving a gap under either set of buttons. */
.office__body {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}

.office h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: 1.35rem;
  margin-bottom: 1.1rem;
}
.office h3 svg { width: 1.15rem; height: 1.15rem; color: var(--gold-deep); flex: none; }

/* "By appointment only" — the Winter Park office is a satellite location */
.badge {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-tint);
  border: 1px solid #cfcff4;
  border-radius: 999px;
  padding: .2rem .6rem;
  line-height: 1.5;
  white-space: nowrap;
}

/* Winter Park's appointment panel takes the slot the Kissimmee map occupies,
   so the two cards read as a matched pair */
.appt {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 1.75rem;
  border-top: 1px solid var(--line);
  background: var(--blue-tint);
  text-align: center;
}
.appt svg { width: 1.75rem; height: 1.75rem; color: var(--blue); }
.appt strong { color: var(--blue); font-weight: 700; }
.appt p { font-size: .875rem; color: var(--muted); margin: 0; }

.contact { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.contact li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .45rem 0;
  font-size: .9375rem;
}

.contact svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: .28rem;
  color: var(--blue);
}

.contact a { font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 2px; }

.office__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: auto; }

/* map — stays a placeholder button until the visitor asks for it, so no
   third-party iframe loads on first paint */

.map {
  position: relative;
  flex: 1;
  aspect-ratio: 16 / 10;
  border-top: 1px solid var(--line);
  background: var(--blue-tint);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

.map__load {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--blue);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.map__load:hover { background: #e4e4f8; }
.map__load svg { width: 1.75rem; height: 1.75rem; }
.map__load small { font-weight: 500; color: var(--muted); font-size: .8125rem; }

/* --- callout -------------------------------------------------------------- */

.callout {
  margin-top: 2.5rem;
  padding: clamp(1.85rem, 4vw, 2.75rem);
  background: var(--blue);
  color: #dcdcf7;
  border-radius: var(--radius);
  text-align: center;
}
.callout h3 { color: var(--white); font-size: clamp(1.4rem, 3vw, 1.85rem); }
.callout p { max-width: 34rem; margin-inline: auto; }
.callout .btn { margin-top: 1.4rem; }

/* --- footer --------------------------------------------------------------- */

.footer {
  background: var(--blue-deep);
  color: #b9b9d8;
  font-size: .875rem;
  border-top: 4px solid var(--gold);
}

.footer__top {
  display: grid;
  gap: 2rem;
  padding: clamp(2.5rem, 6vw, 3.5rem) 0 2rem;
}

.footer__brand { display: flex; align-items: center; gap: .85rem; }
.footer__brand img { width: 54px; }
.footer__brand strong {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--white);
}

.footer a { color: var(--gold); }
.footer h4 {
  color: var(--white);
  font-family: var(--sans);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .85rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li { padding: .2rem 0; }
.footer ul a { color: #d4d4ea; text-decoration: none; }
.footer ul a:hover { color: var(--gold); text-decoration: underline; }

.footer__legal {
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .8125rem;
  line-height: 1.65;
  color: #9a9ac0;
}
.footer__legal p { margin-bottom: .85rem; }

/* --- 404 ------------------------------------------------------------------ */

.oops {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 3rem 1.25rem;
  text-align: center;
}
.oops img { width: clamp(150px, 30vw, 220px); margin-bottom: 2rem; }
.oops h1 { font-size: clamp(1.85rem, 5vw, 2.75rem); }
.oops p { max-width: 32rem; margin-bottom: 2rem; color: var(--muted); }

/* --- breakpoints ---------------------------------------------------------- */

@media (max-width: 960px) {
  .nav { display: none; }
  .menu { display: block; }
}

@media (min-width: 600px) {
  .strip ul { grid-template-columns: repeat(4, 1fr); }
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr; }
}

@media (min-width: 900px) {
  .split--bio { grid-template-columns: 1fr 22rem; }
  .split--firm { grid-template-columns: 1.35fr 1fr; }
}

/* The header carries five things (crest, name, language switch, call, menu).
   Below ~620px they stop fitting, so the wordmark sheds its tagline and then
   itself — the crest keeps the identity and the <h1> names the firm directly
   below the fold line. */
@media (max-width: 620px) {
  .brand__tag { display: none; }
  .brand__name { font-size: .9375rem; }
}

@media (max-width: 560px) {
  .brand__name { display: none; }
  .header__actions .btn--sm span,
  .menu > summary span { display: none; }
  .menu > summary { padding: .5rem .7rem; }
  .hero__cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .btn:hover, .card:hover { transform: none; }
}

/* --- print ---------------------------------------------------------------- */

@media print {
  .header, .skip, .map, .hero__cta, .office__actions, .callout, .menu { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding: 1rem 0; }
  .card, .panel, .office { box-shadow: none; border: 1px solid #bbb; break-inside: avoid; }
  .strip { background: #fff; color: #000; }
  .strip b { color: #000; }
  .footer { background: #fff; color: #000; border-top: 2px solid #000; }
  .footer a, .footer ul a { color: #000; }
}