/* =============================================================================
   COUNSEL PAGES — PER-FIRM THEME
   THEME FOR: MTC Spain Solicitors  (CP-2026-0042)
   DOMAIN:    mtcspainlawyers.com  →  preview at mtcspain62.counselpages.com
   PALETTE:   Navy + bronze + paper — proposed real-brand override for the
              firm's current base64-embedded wordmark. To be re-tuned if Manuel
              supplies original brand assets at engagement.
   FONTS:     Pairing 1 "Traditional" — Playfair Display + Source Sans 3
   HERO:      Archetype C "Split" (50/50 panel)
   SEED:      See ../../design-seed.md
   ============================================================================ */

:root {
  /* ---- 1. BRAND COLOURS --------------------------------------------------- */
  --brand:        #1B2A4E;
  --brand-700:    #0F1B36;
  --brand-300:    #3A4D7A;
  --brand-100:    #E5E8F0;

  --accent:       #A47148;
  --accent-700:   #7E5732;
  --accent-100:   #F1E6D7;

  /* ---- 2. NEUTRALS — paper-ground system ---------------------------------- */
  --bg:           #F6F2EC;
  --bg-alt:       #ECE6DA;
  --surface:      #FFFFFF;
  --ink:          #0F172A;
  --ink-soft:     #475569;
  --line:         #DCD5C7;
  --on-brand:     #F6F2EC;
  --on-brand-soft:#B5BFD2;

  /* ---- 3. TYPOGRAPHY — Traditional ---------------------------------------- */
  --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --h1: clamp(2.5rem, 5.2vw, 4.25rem);
  --h2: clamp(1.9rem, 3.4vw, 2.85rem);
  --h3: clamp(1.25rem, 1.9vw, 1.6rem);

  /* ---- 4. SHAPE & DEPTH --------------------------------------------------- */
  --radius:      6px;
  --radius-sm:   3px;
  --radius-pill: 999px;
  --shadow-sm:  0 1px 2px rgba(15,27,54,.06), 0 2px 6px rgba(15,27,54,.04);
  --shadow-md:  0 6px 18px rgba(15,27,54,.08), 0 2px 6px rgba(15,27,54,.05);
  --shadow-lg:  0 24px 60px rgba(15,27,54,.16);

  /* ---- 5. LAYOUT ---------------------------------------------------------- */
  --container: 1200px;
  --gutter:    clamp(1.1rem, 4vw, 2.5rem);
  --section-y: clamp(3.75rem, 8vw, 7rem);

  /* ---- 6. SEMANTIC -------------------------------------------------------- */
  --btn-bg:        var(--brand);
  --btn-bg-hover:  var(--brand-700);
  --btn-ink:       #FFFFFF;
  --link:          var(--brand);
  --focus:         var(--accent);
}

/* HERO ARCHETYPE — Split */
:root {
  --hero-img: linear-gradient(160deg, #1B2A4E 0%, #0F1B36 100%);
}

/* FIX 1 — Mobile nav drawer horizontal-scroll guard */
html, body { overflow-x: clip; max-width: 100%; }
@media (max-width: 960px) {
  .nav__links {
    transform: none;
    right: calc(0px - min(320px, 82vw));
    visibility: hidden;
    transition: right .3s ease, visibility 0s linear .3s;
  }
  .nav__links.open {
    right: 0;
    visibility: visible;
    transition: right .3s ease;
  }
}

/* FIX 2 — Light-paper hero overrides (dark text on light bg) */
.hero { background: var(--bg); padding-top: 1rem; }
.hero .hero__bg { display: none; }
.hero h1 { color: var(--brand-700); }
.hero .lede { color: var(--ink-soft); }
.hero .eyebrow { color: var(--accent-700); }
.hero .hero__trust { color: var(--ink-soft); }
.hero .hero__trust svg { color: var(--accent); }

/* SPLIT HERO right-column media frame — editorial card, not stock photo */
.hero-c .hero__inner { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
@media (min-width: 880px) {
  .hero-c .hero__inner { grid-template-columns: 1.1fr 1fr; align-items: center; }
}
.hero-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 2rem 1.6rem;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: "§";
  position: absolute;
  top: 1rem; right: 1.2rem;
  font-family: var(--font-head);
  color: var(--accent);
  font-size: 1.6rem;
}
.hero-card__label {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .8rem;
}
.hero-card__stat {
  font-family: var(--font-head);
  color: var(--brand);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 .4rem;
}
.hero-card__stat small { font-size: 1.2rem; color: var(--accent-700); font-weight: 500; margin-left: .2rem;}
.hero-card__line { color: var(--ink-soft); font-size: 1rem; margin: 0 0 1.6rem; }
.hero-card hr { border: none; border-top: 1px solid var(--line); margin: 1.2rem 0; }
.hero-card__cite {
  font-family: var(--font-head);
  font-style: italic;
  color: var(--brand-700);
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 .8rem;
}
.hero-card__cite-who {
  font-family: var(--font-body);
  font-style: normal;
  color: var(--ink-soft);
  font-size: .85rem;
  letter-spacing: .03em;
}

/* SIGNATURE — Courts-practiced-in geography strip */
.courts-strip {
  background: var(--brand-700);
  color: var(--on-brand);
  padding: 1.4rem 0;
}
.courts-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem 2rem;
  justify-content: center;
}
.courts-strip__label {
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-brand-soft);
}
.courts-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.courts-strip__list li {
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 600;
  letter-spacing: .005em;
}
.courts-strip__list li + li::before {
  content: "§";
  color: var(--accent);
  margin-right: 1.2rem;
  font-weight: 400;
  opacity: .8;
}

/* SEAL-REPEAT accent on section eyebrows */
.section-head .eyebrow::before {
  content: "§ ";
  color: var(--accent);
  font-weight: 400;
  margin-right: .15rem;
}

/* NUMBERED CARDS */
.card--numbered { padding-top: 2.2rem; position: relative; }
.card--numbered .card__numeral {
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin: 0 0 .4rem;
  display: block;
}
.card--numbered .card__icon { display: none; }

/* LANGUAGE SWITCHER */
.lang { display: inline-flex; gap: 4px; align-items: center; }

/* STATS — paper variant */
.stats--paper { background: transparent; color: var(--brand-700); padding: 2.4rem 0; }
.stats--paper .stat__num { color: var(--brand); font-family: var(--font-head); }
.stats--paper .stat__lbl { color: var(--ink-soft); }
.section.stats-section { padding-block: clamp(2.4rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }

/* PRINCIPAL block (replaces team grid) */
.principal {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 880px;
  margin: 0 auto;
  padding: 2.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 720px) {
  .principal { grid-template-columns: 200px 1fr; align-items: start; }
}
.principal__mark {
  aspect-ratio: 1;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-700) 100%);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 3.2rem;
  font-weight: 700;
  border-radius: var(--radius);
  letter-spacing: .04em;
}
.principal__body h3 { margin: 0 0 .25rem; font-size: 1.7rem; font-family: var(--font-head); color: var(--brand-700); }
.principal__role {
  font-family: var(--font-body);
  color: var(--accent-700);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .85rem;
  margin: 0 0 1rem;
}
.principal__cred {
  font-size: .92rem;
  color: var(--ink-soft);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* WORDMARK in masthead — firm has no clean raster logo */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  font-family: var(--font-head);
  color: var(--brand);
  text-decoration: none;
}
.wordmark__seal {
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  position: relative;
  top: .15rem;
}
.wordmark__name {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1;
}
.wordmark__small {
  font-size: .72rem;
  color: var(--ink-soft);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 500;
  margin-left: .3rem;
  position: relative;
  top: -.15rem;
}
.site-footer .wordmark { color: #fff; }
.site-footer .wordmark__small { color: var(--on-brand-soft); }

/* PILLS on paper */
.pill { background: var(--surface); border: 1px solid var(--line); }
.pill svg { color: var(--accent); }

/* ASYMMETRIC FOOTER */
.site-footer { background: var(--brand-700); color: var(--on-brand-soft); }
.site-footer h4 { color: #fff; margin: 0 0 .8rem; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-body); }
.site-footer a { color: var(--on-brand-soft); text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: var(--accent); }
.footer__asym {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  padding-block: 3rem;
}
@media (min-width: 880px) {
  .footer__asym { grid-template-columns: minmax(280px, 1fr) 2fr; }
}
.footer__brand-asym p { color: var(--on-brand-soft); margin-top: .8rem; max-width: 36ch; }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.6rem 2rem;
}
.footer__cols a { display: block; padding: .18rem 0; }
.footer__bottom-asym {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.2rem 0 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .85rem;
}