/* ==========================================================================
   Fixed-rail experience  (currently used by the Locations page)
   A reusable page pattern: a fixed menu rail on the LEFT (services-hub button
   style) and full-viewport content panels on the RIGHT that slide over a static
   backdrop, with scroll reveals and a parallaxing framed photo per panel.

   All colors are CSS custom properties on .loc-exp, so the same structure can
   be re-themed (or lifted into a shared component) by overriding the vars.
   Behavior: /javascript/locations-parallax.js.
   ========================================================================== */

.loc-exp {
  /* --- themeable tokens --- */
  /* Light theme: page text is the firm's dark navy on a light backdrop. The
     background photo is kept (per "not image") but sits under a light overlay
     that washes it out so the navy page copy stays readable over it. */
  /* Accent is navy #0b336e (was gold #c7a559): black/white base + navy accent. */
  --loc-accent: #0b336e;
  --loc-text: #0a1e3c;
  --loc-text-soft: rgba(10, 30, 60, 0.82);
  --loc-text-dim: rgba(10, 30, 60, 0.55);
  --loc-rail-bg: rgba(255, 255, 255, 0.55);
  --loc-hairline: rgba(10, 30, 60, 0.14);
  --loc-overlay: rgba(255, 255, 255, 0.88);
  --loc-rail-w: clamp(230px, 24vw, 340px);

  position: relative;
  /* Plain white page; the background photo/overlay was removed. */
  background: #ffffff;
  /* NOTE: do NOT set overflow-x:clip (or hidden) here. This element is an
     ancestor of the sticky side-nav rail (.loc-layout .section-nav). Per the
     CSS overflow spec, `overflow-x: clip` with `overflow-y: visible` computes
     the y axis to `clip` as well, turning .loc-exp into a both-axes clip box.
     A non-`visible` overflow ancestor changes the sticky rail's scroll/clip
     context, so the rail scrolled away with the panels instead of sticking -
     i.e. "side nav not visible under scroll". The horizontal overflow (from the
     panels' translateX reveal + parallax) is instead contained on .loc-panels
     below, which wraps the panels only and NOT the sticky rail. */
}

/* Quick scroll up/down swaps to the next office section, smoothly. Snap is
   PROXIMITY, not mandatory: the browser only snaps when a scroll comes to rest
   NEAR an office, so office-to-office scrolling still snaps but the top region
   (site navbar + header band + the first office) stays freely reachable.
   Mandatory was tried for a firmer lock but it trapped the top - because the
   header/navbar are not snap targets, mandatory yanked any upward scroll down to
   the first real snap target (Fresno), so you could never rest on Silicon Valley
   or the navbar. Proximity is required for that top region to be reachable. */
html {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}
.loc-panel {
  scroll-snap-align: start;
  /* No forced stop at every panel - a strong scroll can skip several, so
     scrolling up/down through all four isn't laborious. */
}
/* The FIRST office is NOT a snap target, so the page rests at the top (header +
   navbar) on load instead of proximity-snapping onto Silicon Valley. Under
   proximity this is safe (no mandatory yank to Fresno); you can still scroll to
   and rest on Silicon Valley freely. scroll-margin-top keeps rail-click
   scrollIntoView landing tidy. */
.loc-panels .loc-panel:first-child {
  scroll-snap-align: none;
  scroll-margin-top: 120px;
  /* First office sits directly under the page header, so top-align it and let
     it size to its content (rather than vertically centering inside a tall
     78vh panel, which left a big empty gap before Fresno below). A moderate top
     padding gives it breathing room below the header; the panel's bottom
     padding is the only separation before the next office. */
  min-height: auto;
  align-items: flex-start;
  padding-top: clamp(2.5rem, 5vh, 3.5rem);
}
/* Extra breathing room under the last office (San Diego) before the closing
   CTA band. */
.loc-panels .loc-panel:last-child {
  margin-bottom: clamp(3rem, 8vh, 6rem);
}
/* Keep the closing CTA reachable under mandatory snapping. */
.loc-exp .landing-narrow {
  scroll-snap-align: start;
}
/* Page header band: transparent so the page backdrop shows through (no white
   block). Not a snap target - under proximity snap the top region (navbar +
   header) stays freely reachable. */
.loc-exp .iplg-page-title-band {
  background: transparent;
}
/* Page-title hairline removed per request - no rule under the header/subheader. */
.loc-exp .iplg-page-title-band::after {
  content: none;
}

/* Bottom CTA: the shared --black variant is 80% opaque (reads dark gray over
   the white page). Take its alpha knob to full so this CTA is solid black. */
.loc-exp .iplg-consultation-cta--black {
  --iplg-cta-black-alpha: 1;
}

/* ---- Page header (above the first office panel) -----------------------
   Sits at the very top of the scrolling panel column, ABOVE Silicon Valley.
   The page lands on the first office panel on load (initial scroll in
   locations-parallax.js); this header is revealed by scrolling UP. It is NOT a
   scroll-snap target (scroll-snap-align:none) so it doesn't fight the first
   panel's landing position. Navy text on the page's light backdrop. */
.loc-header {
  scroll-snap-align: none;
  box-sizing: border-box;
  /* Clear the 120px site nav so the title isn't hidden behind it when the
     header is scrolled into view from the top. */
  padding: calc(120px + clamp(2rem, 6vh, 4rem)) clamp(2rem, 6vw, 7rem) clamp(2rem, 6vh, 4rem);
  color: var(--loc-text);
  text-align: left;
}
.loc-header__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-variant: small-caps;
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
  margin: 0 0 0.6rem;
  color: var(--loc-text);
}
.loc-header__subtitle {
  font-family: 'Karla', sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: var(--loc-text-soft);
  max-width: 46ch;
  margin: 0;
}

/* ---- Two-column layout: sticky LEFT menu rail + scrolling panels ------ */
.loc-layout {
  display: flex;
  align-items: flex-start;
  /* Content width matched exactly to the practice-areas page (.pa-layout):
     max-width 1500px, centered, with 1.5rem horizontal gutters. This makes the
     locations content column land at the same rendered width as practice areas.
     The mobile breakpoint below resets the padding for the stacked layout. */
  max-width: 1500px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.loc-panels {
  flex: 1 1 auto;
  min-width: 0;
  /* Contain the horizontal overflow that the panels themselves create (the
     framed photo's translateX reveal and the parallax travel) WITHOUT clipping
     the sticky rail: .loc-panels wraps only the panel column, not the rail, so
     this clip can't break the rail's sticky scroll context. Replaces the old
     overflow-x:clip that lived on .loc-exp (an ancestor of the rail). */
  overflow-x: clip;
}

/* The menu sticks within the layout (not viewport-fixed), so it travels with
   the section and releases at the layout's end. The rail's LOOK now lives in
   the shared component (/stylesheets/section-nav.css + .section-nav* classes);
   only these LAYOUT/sticky concerns stay here, re-scoped to the component
   within this layout so its placement is byte-for-byte identical to before. */
.loc-layout .section-nav {
  position: sticky;
  /* Pin 1.5rem below the top edge, matching the Practice Areas rail
     (.pa-layout .section-nav top: 1.5rem). The rail used to pin flush at
     top: 0, which left its items sitting 1.5rem higher than the PA page even
     though both share the same 1.25rem internal top padding. Height is trimmed
     by the same offset so the full-height rail's bottom does not run off-screen. */
  top: 20vh;
  align-self: flex-start;
  flex: 0 0 var(--loc-rail-w);
  height: 80vh;
  height: 80dvh;
  /* Sit ABOVE the panel content/backdrop. The panels can visually reach under
     the rail during their translateX parallax/reveal, and we want the rail to
     paint over them while it sticks. z-index needs a stacking context to win
     against the panels' transformed descendants, so isolate it. */
  z-index: 40;
  isolation: isolate;
  /* Items sit at the top of the rail, which pins ~1/5 down the screen. */
  justify-content: flex-start;
  padding: 1.25rem clamp(1rem, 2vw, 2rem) 2rem;
  /* Solid white so the alternating gray panels never show through the rail
     (it would otherwise read as a gray-highlighted side nav). */
  background: #ffffff;
}

/* ---- Side-nav rail: always visible (locations) ------------------------
   The rail used to hide while Silicon Valley (the default landing office) was
   active (toggled via .section-nav--hidden). That behavior was removed per
   user request - the rail now stays visible at all times - so the hidden state
   rule is gone. Only the opacity/visibility transition is kept so any future
   programmatic show/hide would animate smoothly; the sticky/z-index placement
   that keeps the rail painting above the parallax panels lives in the block
   above. */
.loc-layout .section-nav {
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

/* ---- Office panels: stacked - main text on TOP, then image + details --
   Per request, each panel's main copy (name + subtitle) sits ABOVE a row that
   pairs the framed photo with the side details (address + contact actions).
   The panel is a centered column; the head and body share a matched max width
   so the stacked content stays aligned with the photo/details row below it. */
.loc-panel {
  position: relative;
  /* Size to content with symmetric vertical padding, so every office leaves the
     same bottom spacing before the next. (The old min-height: 78vh +
     align-content: center vertically centered each panel, which left a
     different-sized gap below depending on how much copy the office had.) */
  display: grid;
  /* Photo + info are content-sized and centered as a group, so the head row
     (which spans both) lines up with the photo's left edge instead of running to
     the panel's far-left edge. */
  grid-template-columns: auto auto;
  grid-template-areas:
    "head head"
    "media text";
  justify-content: center;
  align-items: start;
  column-gap: clamp(2.5rem, 5vw, 6rem);
  row-gap: clamp(1.25rem, 3vh, 2rem);
  padding: clamp(2.5rem, 6vh, 4rem) clamp(2rem, 6vw, 7rem);
  background: transparent;
}
/* Alternating panel backgrounds down the page. Contained to the content column
   (the sticky rail and the page's side gutters are unaffected, not full-bleed).
   Odd = white, even = the Our Firm shaded tint, for a clear alternating band. */
.loc-panel:nth-of-type(odd) {
  background: #ffffff;
}
.loc-panel:nth-of-type(even) {
  background: var(--iplg-bg-gray);
}
/* Alternating offices flip the photo to the right. */
.loc-panel--right {
  flex-direction: row-reverse;
}
/* Office info (address + actions) in the right cell: left-aligned, top-aligned
   with the top of the photo. */
.loc-panel__text {
  grid-area: text;
  /* Stretch the info column to the photo's height so the buttons can anchor to
     the bottom (see .loc-panel__actions margin-top:auto), lining up with the
     bottom edge of the photo. */
  align-self: stretch;
  width: clamp(260px, 34vw, 420px);
  color: var(--loc-text);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Section head spans the top row, left-aligned above the photo + info. */
.loc-panel__head {
  grid-area: head;
  justify-self: stretch;
  text-align: left;
  margin: 0;
  /* Full-width rule under the office name + subtitle on each location. */
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(11, 51, 110, 0.15);
}
/* Contained, framed photo (source images are small): shown at a modest sharp
   size; the whole frame parallaxes, the inner photo slides in. */
.loc-panel__media {
  grid-area: media;
  position: relative;
  width: clamp(280px, 42vw, 560px);
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 22px 50px -28px rgba(10, 30, 60, 0.45);
  will-change: transform;
}
/* Image card slides in/out from the LEFT and fades. */
.loc-panel__media[data-loc-reveal] {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.loc-panel__media[data-loc-reveal].is-visible {
  opacity: 1;
  transform: translateX(0);
}
.loc-panel__media[data-loc-reveal].is-leaving {
  opacity: 0;
  transform: translateX(-48px);
}
/* The whole photo frame is a link to the office detail page. */
.loc-panel__media-link {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
}
.loc-panel__media-link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}
.loc-panel__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(1);   /* full brightness now the page backdrop is light */
  transition: transform 0.6s ease;
}
/* Fresno's skyline is a thin band between a big sky and the freeway foreground;
   zoom past cover and drop the framing onto the buildings so the city reads
   larger and centered. Background sizing, not transform, so the hover zoom and
   reveal slide still work. Scoped to Fresno via its filename in the inline style. */
.loc-panel__photo[style*="fresno"] {
  background-size: auto 150%;
  background-position: center 52%;
}
/* Slight navy screen in front of the office photo. Clipped by the media frame's
   overflow:hidden; pointer-events:none so the photo link underneath still works.
   Matches the screen on the homepage carousel and detail-page office photos. */
.loc-panel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 28, 51, 0.22);
  pointer-events: none;
}
.loc-panel__media:hover .loc-panel__photo {
  transform: scale(1.06);   /* gentle zoom on hover */
}
.loc-panel__name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-variant: small-caps;
  font-weight: 500;
  /* Match the online-payments section headers (.iplg-faq-page-heading): 34px,
     navy. */
  font-size: clamp(1.6rem, 4vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #0b336e;
  margin: 0 0 0.5rem;
}
/* Size/typography from the shared .iplg-section-sub component. */
.loc-panel__subtitle {
  margin: 0;
}
.loc-panel__address-label {
  display: block;
  color: #0b336e;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}
.loc-panel__address {
  font-style: normal;
  font-family: 'Karla', sans-serif;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--loc-text-dim);
  margin: 0 0 0.5rem;
}
.loc-panel__address span { display: block; }
/* Email under the address. */
.loc-panel__email {
  display: inline-block;
  font-family: 'Karla', sans-serif;
  font-size: 0.98rem;
  color: #0b336e;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 51, 110, 0.3);
  margin: 0 0 2rem;
}
.loc-panel__email:hover,
.loc-panel__email:focus {
  border-bottom-color: #0b336e;
}
.loc-panel__actions {
  display: flex;
  flex-direction: column;
  /* Stretch both buttons to the width of the wider one so they match. */
  align-items: stretch;
  width: fit-content;
  gap: 1.1rem;
  /* Anchor the buttons to the bottom of the (stretched) info column. */
  margin-top: auto;
}
/* Both buttons use the shared .iplg-btn / .iplg-btn--white component (look +
   hover). Only layout-specific rules remain here: equal 14rem width, the
   View office button's wider padding, and the green phone icon. */
/* Match the practice-areas hub buttons: navy 1px outline, Karla sentence-case
   (not Montserrat uppercase), filling navy on hover, with slight rounding. */
.loc-panel__phone,
.loc-panel__cta {
  border-width: 1px;
  border-radius: 0;
  font-family: 'Karla', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}
.loc-panel__phone {
  min-width: 11rem;
  padding: 0.7rem 1.5rem;
}
.loc-panel__phone-icon {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: currentColor;       /* match the button label (navy, white on hover) */
  /* scaleX(-1) flips it to match the hamburger menu's phone icon; the rotate
     then tilts that flipped icon counter-clockwise. */
  transform: rotate(-25deg) scaleX(-1);
}
.loc-panel__cta {
  min-width: 11rem;
  padding: 0.7rem 1.5rem;
}
.loc-panel__cta:hover {
  background: #0b336e;
  color: #ffffff;
  transform: translateY(-2px);
}

/* ---- Scroll reveals removed: items are shown immediately, no fade-in ---- */
[data-loc-reveal] {
  opacity: 1;
  transform: none;
}
[data-loc-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Explicit fade-OUT-up when an element leaves the viewport. */
[data-loc-reveal].is-leaving {
  opacity: 0;
  transform: translateY(-22px);
}
.loc-panel__head [data-loc-reveal]:nth-child(1) { transition-delay: 0s; }
.loc-panel__head [data-loc-reveal]:nth-child(2) { transition-delay: 0.07s; }
.loc-panel__text > .loc-panel__address[data-loc-reveal] { transition-delay: 0.14s; }
.loc-panel__text > .loc-panel__actions[data-loc-reveal] { transition-delay: 0.21s; }
/* The framed photo reveals with a gentle slide + scale instead of the vertical
   lift (and never with a harsh jump). */
/* Images fade only (no slide), per request. */
.loc-panel__photo[data-loc-reveal] {
  transform: none;
  transition: opacity 0.5s ease;
}
.loc-panel__photo[data-loc-reveal].is-visible,
.loc-panel__photo[data-loc-reveal].is-leaving {
  transform: none;   /* images fade only, no movement, in or out */
}

/* ---- Mobile: stack; menu becomes a sticky top bar; no snapping --------- */
@media (max-width: 991.98px) {
  html { scroll-snap-type: none; }
  /* Stacked layout: drop the desktop gutters so the sticky top bar spans the
     full width again; panels keep their own horizontal padding. */
  .loc-layout { flex-direction: column; padding-left: 0; padding-right: 0; }
  /* Mobile rail container: a simple vertical list stacked above the panels
     (matches the Practice Areas hub), replacing the former sticky horizontal
     scrolling top bar. The shared component's mobile block (section-nav.css)
     switches the list to a horizontal wrap bar, so the per-page overrides below
     restore the vertical left-accent-bar list. */
  .loc-layout .section-nav {
    position: static;
    flex: none;
    width: 100%;
    height: auto;
    padding: 0 15px;
    background: transparent;
    border-bottom: 0;
  }
  .loc-layout .section-nav__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.4rem;
    justify-content: flex-start;
  }
  .loc-layout .section-nav__link {
    flex: none;
    text-align: left;
    white-space: normal;
    padding: 0.7rem 0 0.7rem 1.25rem;
    border-left: 4px solid rgba(10, 30, 60, 0.4);
    border-bottom: 0;
  }
  .loc-layout .section-nav__link:hover,
  .loc-layout .section-nav__link:focus,
  .loc-layout .section-nav__link.is-active {
    border-left-width: 7px;
    padding-left: calc(1.25rem - 3px);
    border-bottom: 0;
  }

  /* Narrow screens: single stacked column - head, then photo, then info. */
  .loc-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "media"
      "text";
    row-gap: 1.75rem;
    padding: 3rem 1.5rem 5rem;   /* nav now stacks inline above the panels, so no fixed-bar clearance needed */
  }
  .loc-panel__media {
    justify-self: center;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 16 / 10;
  }
  .loc-panel__text {
    justify-self: center;
    width: 100%;
    max-width: 520px;
    align-items: flex-start;
    text-align: left;
  }
  .loc-panel__head {
    justify-self: center;
    width: 100%;
    max-width: 520px;
    text-align: left;
  }
  /* Buttons centered as a group and stretched to a common width. */
  .loc-panel__actions {
    align-self: center;
    align-items: stretch;
    width: 100%;
    max-width: 18rem;
  }
  .loc-panel__name { font-size: clamp(1.5rem, 7vw, 2rem); }
}

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-loc-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .loc-panel__media { transform: none !important; }
}