/* fonts.css is enqueued separately by inc/assets.php (before this file). */

/* =========================================================================
   Design tokens
   ========================================================================= */

:root {
  /* Colour */
  --color-bg: #ffffff;
  --color-bg-soft: #fcfcfa;
  --color-ink: #14150f;
  --color-ink-soft: #3d3f36;
  --color-heading: #2e3022; /* dark olive from the comp */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-rule: #d9d9d2;
  --color-gold: #fbbc04; /* the review stars; baked into star.svg too */
  /* Small accents on interior pages: the hero rule, the credential rules,
     the trait numerals and the prose bullets. */
  --color-mark: #8a8a82;
  --color-accent: #155eef; /* form submit — matches the live LeadConnector embed */
  --color-accent-dark: #0f4ed0;

  /* Type — the comp pairs a serif with DM Sans; see fonts.css for the split. */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "DM Sans", "Segoe UI", system-ui, sans-serif;

  /* The comp sets the practice-area copy in a bold weight.
     Change this single token to 400 for a lighter reading texture. */
  --weight-service-body: 400;

  /* Layout */
  --container-max: 1200px;
  --gutter: clamp(1.125rem, 4vw, 2rem);
  --radius-pill: 999px;
  --radius-card: 1.5rem;

  /* Rhythm */
  --space-section: clamp(3rem, 8vw, 7rem);
}

/* =========================================================================
   Reset / base
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--color-heading);
  line-height: 1.2;
  text-wrap: balance;
}

p,
figure,
figcaption,
blockquote,
ol {
  margin: 0;
}

ol {
  padding: 0;
  list-style: none;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   Layout helpers
   ========================================================================= */

.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: 0.5rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-sans);
  text-decoration: none;
  transition: top 0.2s ease;

  &:focus {
    top: 0.5rem;
  }
}

/* =========================================================================
   Button
   ========================================================================= */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.75rem 2rem;
  border: 2px solid var(--color-black);
  border-radius: var(--radius-pill);
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.65vw, 1.4375rem);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;

  &:hover {
    background: var(--color-white);
    color: var(--color-black);
  }

  &:active {
    transform: translateY(1px);
  }

  &.button--block {
    width: 100%;
  }

  /* Interior pages carry several secondary calls to action per screen
     (Email Me, Get Directions); the editorial pill is too loud for those. */
  &.button--small {
    min-height: 2.75rem;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
  }

  /* Inverted for calls to action that sit on the black hero panel. */
  &.button--invert {
    border-color: var(--color-white);
    background: var(--color-white);
    color: var(--color-black);

    /* This pill is the brightest thing on the panel, so it dims on hover
       rather than inverting: dropping the fill the way the default .button
       does would leave it transparent against black, i.e. looking like it
       had disappeared rather than responded. */
    &:hover {
      border-color: var(--color-rule);
      background: var(--color-rule);
      color: var(--color-black);
    }
  }

  &.button--outline {
    background: transparent;
    color: var(--color-black);

    &:hover {
      background: var(--color-black);
      color: var(--color-white);
    }
  }

  /* The submit belongs to the form embed, not to the page's editorial pill
     buttons: 43px tall, 8px radius, 14/600. */
  &.button--accent {
    min-height: 2.6875rem;
    padding: 0.5rem 0.875rem;
    border-width: 0;
    border-radius: 0.5rem;
    background: var(--color-accent);
    font-size: 0.875rem;
    font-weight: 600;

    &:hover {
      background: var(--color-accent-dark);
      color: var(--color-white);
    }
  }
}

/* =========================================================================
   Site header
   ========================================================================= */

.site-header {
  background: var(--color-white);

  .site-header__bar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.75rem 2rem;
    padding-block: clamp(0.75rem, 1.5vw, 1.3rem);
  }

  .site-header__logo {
    display: inline-block;
    line-height: 0;

    img {
      width: auto;
      height: clamp(2.75rem, 6.2vw, 5.3rem);
    }
  }

  /* Below the tablet breakpoint the contact block gets its own row, so the
     logo is not squeezing it into three ragged lines. */
  @media (max-width: 47.99rem) {
    .site-header__bar {
      grid-template-columns: 1fr;
    }

    .header-contact {
      justify-self: start;
      text-align: left;
    }

    .header-contact__list {
      justify-content: flex-start;
      gap: 0.25rem 1.25rem;
    }
  }

  /* Phone landscape. Under ~480px of height the full bar spends a third of the
     viewport on the logo and two phone numbers before the nav even starts, so
     it collapses to a compact logo row — still a 44px target — and the numbers
     fall back to the "Need immediate help?" band and the footer. */
  @media (max-width: 61.25rem) and (max-height: 30rem) {
    .site-header__bar {
      grid-template-columns: auto;
      justify-items: start;
      padding-block: 0.25rem;
    }

    .site-header__logo {
      display: flex;
      align-items: center;
      min-height: 2.75rem;

      img {
        height: 2.25rem;
      }
    }

    .header-contact {
      display: none;
    }
  }
}

.header-contact {
  justify-self: end;
  /* The comp stops the contact block short of the container edge the logo
     is aligned to, rather than running it flush right. */
  margin-inline-end: min(5.8vw, 5rem);
  text-align: right;
  /* Home-v2 moves the contact block off the serif and onto DM Sans; the logo
     lockup beside it stays serif because it is artwork. */
  font-family: var(--font-sans);

  .header-contact__title {
    margin-bottom: 0.25rem;
    color: var(--color-ink);
    font-size: clamp(0.9375rem, 1.76vw, 1.5rem);
    line-height: 1.25;
  }

  .header-contact__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem 0.75rem;
    font-size: clamp(0.875rem, 1.6vw, 1.375rem);
    line-height: 1.25;
  }

  .header-contact__item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  /* The comp separates the two numbers with a text-height pipe rather than a
     full-height rule. It only reads as a separator while both numbers share
     a line, which is also where the header stops stacking. */
  @media (min-width: 48rem) {
    .header-contact__item + .header-contact__item::before {
      content: "|";
      margin-inline-end: 0.4rem;
      color: var(--color-ink-soft);
    }
  }

  .header-contact__label {
    color: var(--color-ink-soft);
    white-space: nowrap;
  }

  /* The type alone only reaches 44px at the top of its clamp, so the tap
     target is set on the link rather than left to line-height and padding. */
  .header-contact__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-block: 0.5rem;
    text-decoration: underline;
    white-space: nowrap;

    &:hover {
      text-decoration: none;
    }
  }
}

/* -- Primary navigation -------------------------------------------------- */

.site-nav {
  background: var(--color-black);
  color: var(--color-white);

  .site-nav__toggle {
    display: none;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.5rem 0;
    border: 0;
    background: none;
    color: inherit;
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    cursor: pointer;

    svg {
      width: 1.6rem;
      height: 1.6rem;
    }
  }

  .site-nav__toggle-close {
    display: none;
  }

  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 1rem;
  }

  /* The comp draws no marker on the current page, so aria-current is left to
     carry that meaning for assistive tech alone. */
  .site-nav__link {
    display: block;
    padding: 1.2rem 0.4rem;
    /* Home-v2 sets the primary nav in DM Sans. Sized so the seven-item menu
       clears the 1200px container on one row. */
    font-family: var(--font-sans);
    font-size: clamp(0.9375rem, 1.54vw, 1.3125rem);
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;

    &:hover {
      opacity: 0.7;
    }
  }
}

/* -- Nested items (the Services sub-pages) ------------------------------
   Wide viewports: a dropdown under the parent, opened by hover or keyboard
   focus. Collapsed menu: the same list, indented, always visible. */

.site-nav {
  .site-nav__item--parent {
    position: relative;
  }

  .site-nav__sublist {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 17rem;
    padding: 0.5rem 0;
    background: var(--color-black);
    box-shadow: 0 0.75rem 1.75rem rgb(0 0 0 / 0.25);
  }

  .site-nav__item--parent:hover .site-nav__sublist,
  .site-nav__item--parent:focus-within .site-nav__sublist {
    display: grid;
  }

  .site-nav__link--sub {
    padding: 0.7rem 1.25rem;
    font-size: 1rem;
    white-space: normal;
  }
}

/* Collapsed navigation for tablets and phones */
@media (max-width: 61.25rem) {
  .site-nav {
    .site-nav__toggle {
      display: flex;
    }

    .site-nav__list {
      display: none;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0;
      padding-bottom: 0.75rem;
      border-top: 1px solid rgb(255 255 255 / 0.18);
    }

    .site-nav__link {
      padding: 0.9rem 0.25rem;
      font-size: 1.0625rem;
    }

    .site-nav__item + .site-nav__item {
      border-top: 1px solid rgb(255 255 255 / 0.12);
    }

    .site-nav__sublist {
      display: grid;
      position: static;
      min-width: 0;
      padding: 0 0 0.5rem 1rem;
      box-shadow: none;
    }

    .site-nav__link--sub {
      padding: 0.65rem 0.25rem;
      font-size: 1rem;
      opacity: 0.85;
    }

    &.is-open {
      .site-nav__list {
        display: flex;
      }

      .site-nav__toggle-open {
        display: none;
      }

      .site-nav__toggle-close {
        display: block;
      }
    }

    /* Phone landscape. Seven 49px rows do not fit under 480px of viewport, and
       wide-and-short is the shape a two-column menu suits: the same rows at the
       same tap size, all of them above the fold, nothing to scroll.
       Ordered after .is-open so it wins the display switch. */
    @media (max-height: 30rem) {
      &.is-open .site-nav__list {
        display: grid;
      }

      .site-nav__list {
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(1.5rem, 5vw, 4rem);
        padding-bottom: 0.5rem;
        /* Dense so a single-column item backfills the cell a spanning
           parent item (below) left open. */
        grid-auto-flow: row dense;
      }

      /* An item with a sub-list takes the full width and lays its children
         out in the same two columns, instead of one tall column beside a
         hole. */
      .site-nav__item--parent {
        grid-column: 1 / -1;
      }

      .site-nav__sublist {
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(1.5rem, 5vw, 4rem);
      }

      /* Row-major fill puts items 1–2 on the first row, where the rule under
         the toggle already separates them; 3 onwards open a new row and carry
         their own. Tied to the two columns above. */
      .site-nav__item + .site-nav__item {
        border-top: 0;
      }

      .site-nav__item:nth-child(n + 3) {
        border-top: 1px solid rgb(255 255 255 / 0.12);
      }

      /* An odd number of items leaves the last one alone on its row, so it
         spans the pair rather than sitting beside an empty cell. This holds for
         whatever the menu grows to in WP — 5, 7, 9 all span, 6 and 8 do not.
         The 2n + 1 restates the two columns above: a quantity query cannot read
         a custom property, so the two have to move together. */
      .site-nav__item:last-child:nth-child(2n + 1) {
        grid-column: 1 / -1;
      }
    }
  }
}

/* =========================================================================
   Site footer
   ========================================================================= */

.site-footer {
  background: var(--color-black);
  color: var(--color-white);
  font-size: 1rem;

  .site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(1.75rem, 4vw, 3rem);
    padding-block: clamp(2.5rem, 5vw, 3.75rem);
  }

  .site-footer__logo img {
    width: auto;
    height: 4.5rem;
    filter: invert(1); /* black-on-white artwork → white-on-black */
  }

  .site-footer__tagline {
    max-width: 24rem;
    margin-top: 1rem;
    color: rgb(255 255 255 / 0.72);
  }

  .site-footer__heading {
    margin-bottom: 1rem;
    color: var(--color-white);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .site-footer__list {
    display: grid;
    gap: 0.35rem;
  }

  .site-footer__link {
    display: inline-block;
    padding-block: 0.65rem;
    color: rgb(255 255 255 / 0.78);
    text-decoration: none;

    &:hover {
      color: var(--color-white);
      text-decoration: underline;
    }
  }

  .site-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: rgb(255 255 255 / 0.78);

    svg {
      flex: none;
      width: 1.25rem;
      height: 1.25rem;
      margin-top: 0.45rem;
      color: var(--color-white);
    }
  }

  .site-footer__social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }

  .site-footer__social-link {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(255 255 255 / 0.35);
    border-radius: 50%;
    color: var(--color-white);
    transition: background-color 0.2s ease, color 0.2s ease;

    svg {
      width: 1.25rem;
      height: 1.25rem;
    }

    &:hover {
      background: var(--color-white);
      color: var(--color-black);
    }
  }

  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-block: 1.25rem;
    border-top: 1px solid rgb(255 255 255 / 0.18);
    color: rgb(255 255 255 / 0.6);
    font-size: 0.9375rem;
  }

  .site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
  }
}