/*
 * Leopati Footer — V6.05
 *
 * Replaces the V5.87 footer block that lived in theme-overrides.css (deleted in this release,
 * along with the V5.93 phone pass and the V6.04 desktop pass that tried to rescue it by tightening
 * its spacing). The old footer was four equal columns of 14px grey links under a small logotype:
 * correct, complete, and the default shape of a WordPress footer on a site whose portfolio pages
 * are art-directed. This is a closing section instead — a statement paired with a glass contact
 * panel, the link columns under a hairline, the logotype at closing scale, then the base line.
 *
 * THE FOOTER RENDERS ON EVERY TEMPLATE, so it declares its own tokens rather than inheriting them.
 * body.leopati-portfolio-experience defines --lp-bg / --lp-ink / --lp-accent for the portfolio
 * surfaces only; a footer built on those would change appearance from page to page. The --lpf-*
 * names below are namespaced for that reason, and their values are the same palette.
 *
 * WHAT IS DELIBERATELY UNCHANGED FROM THE OLD FILE, because it was paid for in measurement:
 *   - 44px minimum touch targets on every link row (V5.74 accessibility work).
 *   - The two-line clamp on .leopati-footer__label, on the span rather than on the padded anchor.
 *   - minmax(0, 1fr) on the phone grid, never 1fr. `1fr` is `minmax(auto, 1fr)` and that auto
 *     minimum is the track's min-content width, which at 414px pushed 196px of the footer —
 *     including two of the three service links — off the side of the screen.
 */

.leopati-footer {
  --lpf-bg: #08090c;
  --lpf-ink: #f4f1eb;
  --lpf-muted: rgba(244, 241, 235, 0.6);
  /* V7.03 — WCAG AA. Olculdu (canli, mobil 375px, 2026-09-01): bu belirtec 0.42 alfada
     en koyu zemine karsi 3.71:1 veriyordu; kucuk metin icin gereken 4.5. Bes ayri yerde
     ayni ihlal ciktigi icin tek noktadan duzeltiliyor: 0.48 alfada hepsi >=4.5.
     0.52 secildi cunku hesaplanan minimum 0.48 ve tasarim gerisinde pay birakiyor —
     ton hala belirgin sekilde soluk, sadece okunabilir. */
  --lpf-faint: rgba(244, 241, 235, 0.52);
  --lpf-line: rgba(244, 241, 235, 0.14);
  --lpf-line-strong: rgba(244, 241, 235, 0.3);
  --lpf-accent: #e9a0ba;
  --lpf-glass: rgba(255, 255, 255, 0.045);
  --lpf-edge: rgba(255, 255, 255, 0.115);
  --lpf-gutter: clamp(24px, 4.15vw, 72px);
  --lpf-shell: 1560px;
  --lpf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lpf-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  position: relative;
  z-index: 5;
  isolation: isolate;
  overflow: clip;
  padding: clamp(56px, 6vw, 104px) 0 clamp(26px, 2.4vw, 38px);
  border-top: 1px solid rgba(244, 241, 235, 0.08);
  background: var(--lpf-bg);
  color: var(--lpf-ink);
  font-family: var(--lpf-sans);
}

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

/* One light from the top right and a grain film, so the closing section has depth instead of
   being a flat black band under the page. Both are inert to the pointer. */
.leopati-footer__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% -6%, rgba(233, 160, 186, 0.1), transparent 42%),
    radial-gradient(circle at 4% 8%, rgba(117, 112, 166, 0.075), transparent 38%);
}

.leopati-footer__glow::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
}

.leopati-footer__inner {
  width: min(100%, var(--lpf-shell));
  margin-inline: auto;
  padding-inline: var(--lpf-gutter);
}

.leopati-footer a:focus-visible {
  outline: 2px solid var(--lpf-accent);
  outline-offset: 5px;
}

/* ---- the opening hairline ------------------------------------------------------------- */

.leopati-footer__rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lpf-line);
  color: var(--lpf-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/* ---- statement + contact panel -------------------------------------------------------- */

.leopati-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: start;
  gap: clamp(34px, 5vw, 96px);
  padding: clamp(40px, 5vw, 78px) 0 clamp(48px, 6vw, 88px);
}

.leopati-footer__brand { min-width: 0; }

.leopati-footer__say {
  max-width: 15ch;
  margin: 0;
  color: var(--lpf-ink);
  font-size: clamp(2.15rem, 4.6vw, 4.4rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.062em;
  text-transform: none;
  text-wrap: balance;
}

.leopati-footer__tagline {
  max-width: 46ch;
  margin: clamp(22px, 2.4vw, 34px) 0 0;
  color: var(--lpf-muted);
  font-size: 14.5px;
  line-height: 1.68;
  text-wrap: pretty;
}

/* The glass: the site's own fill, edge and blur, with a light drawn along the top edge — the
   same treatment .lp-panel carries on the service pages. */
.leopati-footer__panel {
  position: relative;
  padding: clamp(26px, 2.4vw, 38px);
  border: 1px solid var(--lpf-edge);
  border-radius: 22px;
  background: var(--lpf-glass);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.leopati-footer__panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 18%;
  left: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
}

.leopati-footer__panel-label {
  margin: 0 0 6px;
  color: var(--lpf-accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

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

.leopati-footer__contact li { margin: 0; }

.leopati-footer__contact a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--lpf-line);
  color: var(--lpf-ink);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  letter-spacing: -0.022em;
  text-decoration: none;
  transition: color 300ms ease;
}

.leopati-footer__contact a:hover,
.leopati-footer__contact a:focus-visible { color: #fff; }

.leopati-footer__arrow {
  flex: 0 0 auto;
  display: block;
  width: 17px;
  height: 17px;
  color: var(--lpf-faint);
  transform: translateX(-5px);
  opacity: 0;
  transition: transform 450ms var(--lpf-ease), opacity 300ms ease;
}

.leopati-footer__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.leopati-footer__contact a:hover .leopati-footer__arrow,
.leopati-footer__contact a:focus-visible .leopati-footer__arrow {
  color: var(--lpf-accent);
  transform: translateX(0);
  opacity: 1;
}

/* The button fills from the left rather than switching colour, so the state change reads as one
   movement with the arrows above it. */
.leopati-footer__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  margin-top: clamp(22px, 2vw, 30px);
  padding: 15px 26px;
  border: 1px solid var(--lpf-line-strong);
  border-radius: 999px;
  color: var(--lpf-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 380ms var(--lpf-ease), border-color 380ms var(--lpf-ease);
}

.leopati-footer__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lpf-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--lpf-ease);
}

.leopati-footer__cta > * { position: relative; }

.leopati-footer__cta svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.leopati-footer__cta:hover,
.leopati-footer__cta:focus-visible {
  color: var(--lpf-bg);
  border-color: var(--lpf-ink);
}

.leopati-footer__cta:hover::before,
.leopati-footer__cta:focus-visible::before { transform: scaleX(1); }

/* ---- link columns --------------------------------------------------------------------- */

.leopati-footer__cols {
  /* V6.51 — four equal columns spanning the same width as the rule above them.
     
     V6.50 sized the tracks to their content and centred the group. It did centre — measured at
     1440px the set sat 291px from each edge — but content sizing made the tracks 161, 163, 327
     and 63px wide, so the columns lost their rhythm and the block pulled visibly inside the
     horizontal rule above it. Equal tracks across the shell put every column back on the same
     pitch and line the group up with that rule, which is the edge the eye actually reads the
     footer against. Text stays left-aligned inside each column. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 52px);
  padding-top: clamp(30px, 3vw, 46px);
  border-top: 1px solid var(--lpf-line);
}

.leopati-footer__col { min-width: 0; }

/* V6.31 — the contact rows' kind label. Deliberately the SAME type as .leopati-footer__heading
   below (10px / 0.17em / uppercase / faint) rather than a new scale, so WhatsApp and Email read as
   two equal channels in the footer's existing voice instead of introducing a third label style. */
.leopati-footer__contact-kind {
  display: block;
  margin-bottom: 6px;
  color: var(--lpf-faint);
  font-family: var(--lpf-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.leopati-footer__contact > li + li { margin-top: clamp(18px, 1.6vw, 26px); }

.leopati-footer__heading {
  margin: 0 0 18px;
  color: var(--lpf-faint);
  font-family: var(--lpf-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

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

.leopati-footer__list li { margin: 0 0 2px; }

/* The underline is painted as a background so it can sweep in from the left without the link
   changing size — a border-bottom transition here would move every row under it. */
.leopati-footer__list a {
  display: inline-block;
  padding: 5px 0;
  color: var(--lpf-muted);
  font-size: 13.5px;
  line-height: 1.5;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color 300ms ease, background-size 420ms var(--lpf-ease);
}

.leopati-footer__list a:hover,
.leopati-footer__list a:focus-visible {
  color: var(--lpf-ink);
  background-size: 100% 1px;
}

.leopati-footer__more { color: rgba(244, 241, 235, 0.86); font-weight: 600; }

/* ---- the logotype, at closing scale ---------------------------------------------------- */

/* The padding, not the margin, holds the descender. At line-height 0.8 the box is shorter than
   the glyphs, so the tail of the "p" reaches past it and would otherwise cross the rule above
   the base line. */
.leopati-footer__brandmark {
  margin: clamp(46px, 6vw, 92px) 0 clamp(24px, 2.4vw, 36px);
  padding-bottom: 0.16em;
  /* Sized to nearly span the shell. Measured: this logotype's ink is 2.94x its font-size, and the
     shell's content box is at its narrowest ratio to the viewport around 1440px — 28vw lands the
     wordmark at ~90% of the line there and stays inside the shell from 340px up, with the cap
     taking over before the 1560px shell stops growing. The 10% left over is deliberate headroom
     for a wider fallback face. */
  font-size: clamp(3.2rem, 28vw, 28rem);
  line-height: 0.8;
}

/* No white-space:nowrap on purpose. The wordmark is Customizer text, so it can be replaced with
   a longer string; allowed to wrap it stays inside the shell at any length instead of running
   off the edge, and at the shipped "Leopati." it never reaches a second line. */
.leopati-footer__brandmark .leopati-logo,
.leopati-footer__brandmark .leopati-text-logo {
  display: block;
  color: var(--lpf-ink);
  font-family: var(--lpf-sans);
  font-size: inherit;
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.062em;
  text-decoration: none;
  text-transform: none;
}

/* The dot's colour is NOT set here. leopati_logo_customizer_css() paints it with the same
   linear-gradient(90deg, dot_1, dot_2) it gives the header mark, and this mount is now named in
   that rule, so changing the dot colours in the Customizer changes both wordmarks together.

   THE CLIP FIX. That gradient is painted with background-clip:text, which paints only inside the
   span's own background box — and the brandmark's -0.062em tracking pulls that box narrower than
   the glyph, so the right edge of the dot was left unpainted and read as a flat cut. Normal
   tracking plus a little padding gives the box room to cover the ink; the negative margin hands
   the space straight back, so the wordmark's spacing is unchanged. */
/* V6.29 — the wordmark's INK is centred, not just its box.
   The box was already perfectly centred, but letter-spacing:-0.062em is applied after the LAST
   character too, so the glyph run sat left inside it: measured on production at 1280px the ink
   started 53.1px from the shell edge and ended 105.3px from the other — 26.1px left of centre,
   and 17.1px off at 375px. text-align:center alone overcorrects (+16.1px at 1280px) because the
   line's advance width still carries that trailing space; the -0.0455em pull hands exactly it
   back. Calibrated against the rendered ink, not the box: 1280px -> -0.2px, 375px -> 0.0px. */
.leopati-footer__brandmark {
  text-align: center;
}

.leopati-footer__brandmark .leopati-logo,
.leopati-footer__brandmark .leopati-text-logo {
  position: relative;
  left: -0.0455em;
}

.leopati-footer__brandmark .leopati-logo-dot {
  letter-spacing: normal;
  padding-right: 0.09em;
  margin-right: -0.09em;
}

/* The signature signal — the slow blink and the two expanding rings — comes from
   theme-overrides.css and is kept, because it is part of the logotype. Only the radius is reined
   in: the rings are sized in em, so at closing scale the header's 0.62em would throw a ~250px
   halo across the base line. Colour and glow are the logotype's own. */
.leopati-footer__brandmark .leopati-logo-dot::before,
.leopati-footer__brandmark .leopati-logo-dot::after {
  width: 0.42em !important;
  height: 0.42em !important;
}

/* An uploaded image logo is capped: only the text logotype is allowed to run to full size. */
.leopati-footer__brandmark img,
.leopati-footer__brandmark img.custom-logo {
  display: block;
  width: auto;
  max-height: clamp(56px, 7vw, 104px);
}

/* ---- base line ------------------------------------------------------------------------- */

.leopati-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  padding-top: clamp(18px, 1.8vw, 26px);
  border-top: 1px solid var(--lpf-line);
  color: var(--lpf-faint);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.leopati-footer__base a {
  color: var(--lpf-faint);
  text-decoration: none;
  transition: color 300ms ease;
}

.leopati-footer__base a:hover,
.leopati-footer__base a:focus-visible { color: var(--lpf-ink); }

/* ==========================================================================
   Narrower canvases
   ========================================================================== */

@media (max-width: 1099px) {
  .leopati-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(30px, 4vw, 44px);
  }
  .leopati-footer__say { max-width: 20ch; }
  .leopati-footer__panel { max-width: 520px; }
}

@media (max-width: 900px) {
  .leopati-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones. Everything from the V5.93 / V5.94 mobile passes is preserved here verbatim in intent:
   the footer was 1687px tall at 375x812 before that work, and none of the height came back. */
@media (max-width: 767.98px) {
  .leopati-footer { padding: clamp(40px, 9vw, 56px) 0 26px; }
  .leopati-footer__inner { padding-inline: 24px; }
  .leopati-footer__rule { font-size: 10px; letter-spacing: 0.14em; }
  .leopati-footer__top { padding: 26px 0 30px; gap: 26px; }
  .leopati-footer__say { max-width: none; font-size: clamp(1.9rem, 9vw, 2.5rem); }
  .leopati-footer__tagline { margin-top: 16px; font-size: 14px; line-height: 1.6; }
  .leopati-footer__panel { max-width: none; padding: 22px; border-radius: 18px; }
  .leopati-footer__contact a { padding: 13px 0; min-height: 44px; font-size: 1rem; }
  /* Touch never hovers, so the affordance is simply present. */
  .leopati-footer__arrow { opacity: 0.55; transform: none; }
  .leopati-footer__cta { display: flex; justify-content: center; width: 100%; min-height: 48px; }

  .leopati-footer__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; gap: 22px 16px; }
  .leopati-footer__heading { margin: 0 0 6px; }
  .leopati-footer__col { padding-bottom: 6px; border-bottom: 1px solid rgba(244, 241, 235, 0.06); }
  .leopati-footer__col:last-child { border-bottom: 0; }
  .leopati-footer__list li { margin: 0; }

  /* 44px minimum target, and the clamp on the span rather than the anchor: an overflow:hidden
     box clips at its padding edge, so clamping the padded <a> lets a third line render inside
     the bottom padding and be cut through the middle of the letters. */
  .leopati-footer__list a { display: flex; align-items: center; padding: 12px 0; min-height: 44px; background-size: 0 1px; }
  .leopati-footer__label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 20px;
    white-space: normal;
  }

  /* 24vw rather than the desktop 28vw: at 375px the gutters leave a 327px line, and the extra
     headroom keeps the logotype off the edge on the narrowest phones. */
  .leopati-footer__brandmark { margin: 28px 0 18px; font-size: 24vw; }
  .leopati-footer__base { gap: 8px; font-size: 11.5px; }
}

@media (max-width: 340px) {
  .leopati-footer__cols { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .leopati-footer__arrow,
  .leopati-footer__cta,
  .leopati-footer__cta::before,
  .leopati-footer__list a,
  .leopati-footer__contact a { transition: none !important; }
  .leopati-footer__brandmark .leopati-logo-dot,
  .leopati-footer__brandmark .leopati-logo-dot::before,
  .leopati-footer__brandmark .leopati-logo-dot::after { animation: none !important; }
}

@media (forced-colors: active) {
  .leopati-footer__panel { border: 1px solid CanvasText; }
  .leopati-footer__cta { border: 1px solid CanvasText; }
}