/* ============================================================
   GLOBAL.CSS — Shared layout, typography, utilities, components
   Ongwacho Cherop Associates & Advocates
   Depends on: tokens.css, reset.css
============================================================ */

/* ── Base typography ── */
body {
  font-family:      var(--ff-body);
  font-size:        var(--fs-base);
  color:            var(--color-ink);
  background-color: var(--color-cream);
}

/* ── Skip link ── */
.skip-link {
  position:   absolute;
  top:        -100%;
  left:       1rem;
  padding:    0.5rem 1rem;
  background: var(--color-primary);
  color:      var(--color-white);
  font-size:  var(--fs-sm);
  z-index:    var(--z-preloader);
  transition: top var(--ease-fast);
}
.skip-link:focus {
  top: 1rem;
}

/* ── Focus styles ── */
:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ── Screen reader only ── */
.sr-only {
  position:  absolute;
  width:     1px;
  height:    1px;
  padding:   0;
  margin:    -1px;
  overflow:  hidden;
  clip:      rect(0, 0, 0, 0);
  white-space: nowrap;
  border:    0;
}

/* ── Container ── */
.container {
  width:     min(var(--container-w), 100% - 3rem);
  margin-inline: auto;
}

/* ── Section wrapper ── */
.section {
  padding-block:  var(--space-xl);
  padding-inline: var(--space-gutter);
}

/* ── Section label / eyebrow ── */
.section-label {
  display:         inline-flex;
  align-items:     center;
  gap:             0.6rem;
  font-family:     var(--ff-body);
  font-size:       var(--fs-xs);
  font-weight:     600;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  color:           var(--color-accent);
  margin-bottom:   1.25rem;
}
.section-label::before {
  content:    '';
  display:    block;
  width:      24px;
  height:     1px;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* ── Section header (shared) ──
   Centred block: eyebrow, serif title, italic serif subtitle.
   Colours come from --header-eyebrow / --header-title / --header-sub; the fallbacks are the light variant.
   A dark section opts in with .section--dark and may override one value (--header-title). */
.section--dark {
  --header-eyebrow: var(--color-accent);
  --header-title:   var(--color-cream);
  --header-sub:     var(--color-on-dark-muted);
}
.section__header {
  max-width:      var(--container-w);
  margin-inline:  auto;
  text-align:     center;
}
.section__header .section-label {
  letter-spacing:      0.25em;
  padding-inline-start: 0.25em; /* balances the trailing letter-space so the text is optically centred */
  color:               var(--header-eyebrow, var(--color-primary));
}
.section__header .section-label::before {
  display: none;
}
.section__title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size:   clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1.1;
  color:       var(--header-title, var(--color-ink));
  text-wrap:   balance;
}
.section__title--inline {
  font-size:  clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  color:      var(--color-ink);
  text-align: left;
  margin-top: 0.4rem;
}
.section__subtitle {
  max-width:   40rem;
  margin:      0.75rem auto 0;
  font-family: var(--ff-display);
  font-style:  italic;
  font-size:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  color:       var(--header-sub, var(--color-ink-muted));
  text-wrap:   balance;
}

/* ── Section divider: fading hairline either side of three diamonds (filled, outlined, filled) ──
   One empty element. The hairline is two gradient layers on the element; the diamonds are a
   clipped ::before (path() with evenodd leaves the middle one hollow). */
.section-divider {
  position:       relative;
  height:         10px;
  margin:         var(--space-md) auto var(--space-lg);
  background:
    linear-gradient(to right, transparent, var(--color-border-lt)) left center / calc(50% - 44px) 1px no-repeat,
    linear-gradient(to left,  transparent, var(--color-border-lt)) right center / calc(50% - 44px) 1px no-repeat;
}
.section-divider::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       50%;
  width:      46px;
  height:     10px;
  transform:  translateX(-50%);
  background: var(--color-accent);
  clip-path:  path(evenodd, 'M5 0 L10 5 L5 10 L0 5 Z M23 0 L28 5 L23 10 L18 5 Z M23 2 L26 5 L23 8 L20 5 Z M41 0 L46 5 L41 10 L36 5 Z');
}

/* ── Ornament ── */
.ornament {
  display:    block;
  width:      40px;
  height:     2px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  margin:     1rem 0;
}

/* ── Corner box accent ── */
.corner-box {
  position: relative;
}
.corner-box::before,
.corner-box::after {
  content:  '';
  position: absolute;
  width:    40px;
  height:   40px;
  border-color: var(--color-accent);
  border-style: solid;
  opacity:  0.5;
}
.corner-box::before {
  top:    -8px;
  left:   -8px;
  border-width: 2px 0 0 2px;
}
.corner-box::after {
  bottom: -8px;
  right:  -8px;
  border-width: 0 2px 2px 0;
}

/* ── Buttons ── */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.75rem 2rem;
  font-family:     var(--ff-body);
  font-size:       var(--fs-sm);
  font-weight:     600;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  border:          2px solid transparent;
  border-radius:   var(--radius-sm);
  cursor:          pointer;
  transition:      all var(--ease-fast);
  text-decoration: none;
  white-space:     nowrap;
  min-height:      44px;
}

.btn--primary {
  background: var(--color-accent);
  color:      var(--color-primary-dk);
  border-color: var(--color-accent);
}
.btn--primary:hover {
  background:   var(--color-accent-lt);
  border-color: var(--color-accent-lt);
  transform:    translateY(-1px);
  box-shadow:   var(--shadow-md);
}

.btn--outline {
  background:   transparent;
  color:        var(--color-accent);
  border-color: var(--color-accent);
}
.btn--outline:hover {
  background: var(--color-accent);
  color:      var(--color-primary-dk);
}

.btn--dark {
  background:   var(--color-primary);
  color:        var(--color-accent);
  border-color: var(--color-primary);
}
.btn--dark:hover {
  background:   var(--color-primary-dk);
  border-color: var(--color-primary-dk);
  transform:    translateY(-1px);
  box-shadow:   var(--shadow-md);
}

.btn--ghost {
  background:   transparent;
  color:        var(--color-white);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ghost:hover {
  background:   rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
}

/* ── Scroll reveal ── */
.reveal {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity var(--ease-slow), transform var(--ease-slow);
}
.reveal.visible {
  opacity:   1;
  transform: translateY(0);
}

/* ── Page hero (shared by all four inner pages) ──
   Shared hero block: page files only override what differs, for example practice's ::after gradient. */
.page-hero {
  background: var(--color-primary-dk);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100dvh;
}

/* Geometric pattern — left side only, above image */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 65%;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z' fill='none' stroke='rgba(201,169,97,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 2;
}

/* Gradient — opaque on left for text, fades to transparent on right to show image */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--color-primary-dk)    0%,
    var(--color-primary-dk)   35%,
    rgba(92,10,34,0.92)       48%,
    rgba(92,10,34,0.55)       62%,
    rgba(92,10,34,0.12)       76%,
    transparent               88%
  );
  z-index: 1;
  pointer-events: none;
}

/* Image — full hero background */
.page-hero__image-col {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  opacity: 0;
  animation: fadeIn 1.2s 0.3s ease forwards;
}

/* Text column — floats on left above gradient */
.page-hero__text-col {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 3rem / 6rem from 1100px up (4.37vw and 8.73vw reach those values at 1100px); fluid below. */
  padding: 9rem clamp(1.5rem, 4.37vw, 3rem) 5rem clamp(1.5rem, 8.73vw, 6rem);
  width: min(600px, 55%);
}



.page-hero__eyebrow {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(201,169,97,0.85);
  margin-bottom: 1.2rem;
  animation: fadeSlideUp 0.8s 0.2s cubic-bezier(0.22,1,0.36,1) both;
}
.page-hero__title {
  font-family: var(--ff-display);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin-bottom: 1.2rem;
  animation: fadeSlideUp 0.8s 0.35s cubic-bezier(0.22,1,0.36,1) both;
}
.page-hero__title strong {
  display: block;
  font-weight: 600;
  color: var(--color-accent-lt);
  font-style: italic;
}
.page-hero__subtitle {
  font-family: var(--ff-display);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.68);
  line-height: 1.65;
  margin-bottom: 2rem;
  animation: fadeSlideUp 0.8s 0.5s cubic-bezier(0.22,1,0.36,1) both;
}

/* Breadcrumb — inside text column, no longer absolute */
.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201,169,97,0.85);
  animation: fadeIn 0.8s 0.75s ease both;
  white-space: nowrap;
}
.page-hero__breadcrumb a       { transition: color var(--ease-fast); }
.page-hero__breadcrumb a:hover { color: var(--color-accent-lt); }
.page-hero__breadcrumb-sep {
  width: 5px; height: 5px;
  background: var(--color-accent);
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: 0.85;
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Scroll indicator ── */
.page-hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  opacity: 0;
  animation: fadeIn 1s 1.2s ease both;
}
.page-hero__scroll:hover .page-hero__scroll-line {
  animation-duration: 1s;
}
.page-hero__scroll-text {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(201,169,97,0.85);
  transition: color var(--ease-fast);
}
.page-hero__scroll:hover .page-hero__scroll-text {
  color: var(--color-accent);
}
.page-hero__scroll-line {
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, rgba(201,169,97,0.85), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%,100% { opacity: 0.4; transform: scaleY(1);    }
  50%      { opacity: 1;   transform: scaleY(1.15); }
}

/* Grid-glow canvas: fills the hero (home hero and inner-page heroes). */
.hero-grid-canvas,
.page-hero-grid-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
}

/* Page hero ≤900px: the text column spans the hero and the photo shows through an even scrim.
   Each page sets its own .page-hero__image object-position (about, contact 90%, leadership 75%, practice 70%). */
@media (max-width: 900px) {
  .page-hero__text-col {
    width: 100%;
    padding-bottom: 7rem; /* keeps the breadcrumb clear of the scroll cue */
  }
  .page-hero::before { width: 100%; }
  .page-hero::after  { background: var(--hero-scrim); }
  /* Small gold text goes solid: 0.85 alpha measured 3.3:1 over the photo under the scrim; accent-lt measures 5.1:1+. */
  .page-hero__eyebrow,
  .page-hero__breadcrumb,
  .page-hero__scroll-text { color: var(--color-accent-lt); }
}

/* ── Utility classes ── */
.text-accent  { color: var(--color-accent); }
.text-primary { color: var(--color-primary); }
.text-white   { color: var(--color-white); }
.text-muted   { color: var(--color-ink-muted); }
.text-center  { text-align: center; }

.bg-primary { background-color: var(--color-primary); }
.bg-cream   { background-color: var(--color-cream); }
.bg-ink     { background-color: var(--color-ink); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* ── Responsive ── */
/* Long button labels wrap inside a narrow column instead of overflowing it. */
@media (max-width: 560px) {
  .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* Section header eyebrow: tighter tracking on phones so the longer labels wrap less. */
@media (max-width: 560px) {
  .section__header .section-label { letter-spacing: 0.12em; padding-inline-start: 0.12em; }
}

/* ── Wrapping (inside <main> only: hero titles and footer headings are untouched) ── */
main h2, main h3, main h4 { text-wrap: balance; }
main p { text-wrap: pretty; }

/* ── Title scale on phones and tablets: one token for section headers and column titles ──
   Desktop clamps (above) are unchanged. Column titles (.section__title--inline) take the token
   from 719px down only; between 720 and 899px they keep their own clamp.
   Long titles use the smaller step so they stay within four lines at 320-408px. */
@media (max-width: 899px) {
  .section__title:not(.section__title--inline) { font-size: var(--fs-title); }
  .section__title.section__title--long { font-size: var(--fs-title-long); }
}
@media (max-width: 719px) {
  .section__title--inline { font-size: var(--fs-title); }
}

/* ── Skip-link target ── <main id="main" tabindex="-1">: the skip link lands focus here; no ring on the whole page,
   and the fixed navbar does not cover the first block. */
main { scroll-margin-top: var(--nav-height); }
main:focus { outline: none; }