/*
Theme Name:   Belise Lite Child — Dr. Liina Tiigi kliinik
Template:     belise-lite
Version:      1.0.0
Text Domain:  belise-lite-child
Description:  Child theme. All customisations live here so parent updates are safe.
*/

/* ---------- Design tokens ---------- */
:root {
  --lt-ink:        #1c1a19;
  --lt-ink-soft:   #5b5350;
  --lt-bg:         #fbf9f7;
  --lt-surface:    #ffffff;
  --lt-line:       #e8e2dd;
  --lt-accent:     #a8836f;   /* warm bronze — clinical but not cold */
  --lt-accent-ink: #7d5f4e;
  --lt-accent-bg:  #f2e9e3;

  /* Fluid type — no media queries needed */
  --lt-step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --lt-step-0:  clamp(1rem,    0.96rem + 0.2vw, 1.09rem);
  --lt-step-1:  clamp(1.33rem, 1.24rem + 0.45vw, 1.6rem);
  --lt-step-2:  clamp(1.78rem, 1.6rem + 0.9vw,  2.34rem);
  --lt-step-3:  clamp(2.37rem, 2.05rem + 1.6vw, 3.43rem);

  --lt-gap:     clamp(1rem, 2.5vw, 2rem);
  --lt-section: clamp(3rem, 8vw, 6.5rem);
  --lt-measure: 68ch;
  --lt-radius:  2px;          /* restrained, not bubbly */
  --lt-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Typography ----------
 * SCOPED ON PURPOSE. An earlier version styled body, h1-h3 and "p, li" globally,
 * which blew out the footer widget columns and fought 6,000 lines of existing
 * theme CSS. Typography now applies ONLY inside page/post content wrappers —
 * never the header, main navigation, sidebar or footer.
 */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.belise-page-content h1,
.belise-page-content h2,
.belise-page-content h3 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.entry-content h2,
.belise-page-content h2 { font-size: var(--lt-step-2); }
.entry-content h3,
.belise-page-content h3 { font-size: var(--lt-step-1); }

/* Comfortable reading measure for body copy in content only. Lists are excluded:
   constraining every <li> is what broke the footer and risks the nav. */
.entry-content > p,
.belise-page-content > p {
  max-width: var(--lt-measure);
  line-height: 1.7;
}

/* ---------- Scroll reveal (paired with js/interactions.js) ---------- */
[data-lt-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--lt-ease), transform 0.7s var(--lt-ease);
  transition-delay: var(--lt-reveal-delay, 0ms);
}
[data-lt-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-lt-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Before/after comparison ---------- */
.lt-ba {
  --lt-ba-pos: 50%;
  position: relative;
  overflow: hidden;
  border-radius: var(--lt-radius);
  background: var(--lt-accent-bg);
  line-height: 0;
  touch-action: pan-y;          /* let the page still scroll vertically */
}
.lt-ba__img { display: block; width: 100%; height: auto; }
.lt-ba__img--after {
  position: absolute; inset: 0;
  /* Only the region left of the handle shows the "after" image */
  clip-path: inset(0 calc(100% - var(--lt-ba-pos)) 0 0);
}
.lt-ba__divider {
  position: absolute; top: 0; bottom: 0;
  left: var(--lt-ba-pos);
  width: 2px; background: var(--lt-surface);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
  pointer-events: none;
}
.lt-ba__divider::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 2.75rem; height: 2.75rem;
  transform: translate(-50%, -50%);
  border: 2px solid var(--lt-surface);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.15);
  backdrop-filter: blur(2px);
}
/* The range input IS the control: keyboard + screen-reader support for free */
.lt-ba__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
  appearance: none; background: transparent; cursor: ew-resize;
}
.lt-ba__range::-webkit-slider-thumb {
  appearance: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: transparent; cursor: ew-resize;
}
.lt-ba__range::-moz-range-thumb {
  width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%;
  background: transparent; cursor: ew-resize;
}
.lt-ba__range:focus-visible { outline: 3px solid var(--lt-accent); outline-offset: 3px; }
.lt-ba__label {
  position: absolute; bottom: 0.75rem;
  font: 600 var(--lt-step--1)/1 'Work Sans', system-ui, sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--lt-surface); text-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
  pointer-events: none;
}
.lt-ba__label--before { right: 0.9rem; }
.lt-ba__label--after  { left: 0.9rem; }

/* ---------- Sticky booking bar ---------- */
.lt-book {
  position: fixed; z-index: 90;
  left: 50%; bottom: 1rem; transform: translate(-50%, 150%);
  display: flex; gap: 0.75rem; align-items: center;
  padding: 0.7rem 0.85rem 0.7rem 1.25rem;
  background: var(--lt-ink); color: var(--lt-surface);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.18);
  transition: transform 0.45s var(--lt-ease);
}
.lt-book.is-visible { transform: translate(-50%, 0); }
.lt-book__cta {
  padding: 0.55rem 1.1rem; border-radius: 999px;
  background: var(--lt-accent); color: #fff; text-decoration: none;
  font: 600 var(--lt-step--1)/1 'Work Sans', system-ui, sans-serif;
  white-space: nowrap;
}
.lt-book__cta:hover, .lt-book__cta:focus { background: var(--lt-accent-ink); color: #fff; }
@media (prefers-reduced-motion: reduce) { .lt-book { transition: none; } }

.lt-book__phone {
  font: 600 var(--lt-step--1)/1 'Work Sans', system-ui, sans-serif;
  color: var(--lt-surface);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.lt-book__phone:hover, .lt-book__phone:focus { color: var(--lt-accent-bg); }

/* Hide the bar's phone number on very narrow screens — the CTA is what matters */
@media (max-width: 26em) {
  .lt-book__phone { display: none; }
  .lt-book { padding-left: 0.7rem; }
}

/* =========================================================================
 * HEADER MENU — modernised (desktop only, >=992px)
 *
 * HARD CONSTRAINTS, do not violate:
 *   - The submenu's width (325px) and margin-left (-162.5px) must NOT change.
 *     js/functions.js dropdownHorizontalAlign() centres the panel using
 *     $(ul).width(), and the CSS margin-left must stay at exactly -width/2.
 *   - left / top / position / display must NOT be touched. Desktop reveal is
 *     jQuery .show()/.hide() writing inline display, and left is set inline by
 *     the same JS. Anything we do here is appearance only.
 *   - Everything lives inside the 992px query so the mobile menu (which uses a
 *     completely different mechanism, .dropdown-toggle + .opened) is untouched.
 * ====================================================================== */

@media screen and (min-width: 992px) {

  /* ---- Top-level items: lighter, tighter, Work Sans ---- */
  /* Font size and weight deliberately NOT set — an earlier version forced
   * 0.78rem/600 here, which made the menu noticeably smaller than the theme's
   * own sizing. Nav links inherit their size, as the theme intends. */
  .main-navigation > div > ul > li > a {
    font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
    transition: color 0.25s var(--lt-ease);
  }

  /* ---- Caret: muted, and it flips when the panel opens ---- */
  .main-navigation .menu-item-has-children > a:after,
  .main-navigation .page_item_has_children > a:after,
  .main-navigation .has_children > a:after {
    display: inline-block;
    font-size: 0.8em;
    opacity: 0.5;
    transform-origin: 50% 55%;
    transition: transform 0.25s var(--lt-ease), opacity 0.25s var(--lt-ease);
  }
  .main-navigation > div > ul > li:hover > a:after {
    opacity: 1;
    transform: rotate(180deg);
  }

  /* ---- Hover indicator ----
   * Was a chunky 25x4px grey block. Now a full-width 2px accent rule that
   * wipes in from the left. Only the transform changes, so the theme's
   * translateY(10px) positioning is preserved. */
  .main-navigation li > a:before {
    left: 0;
    right: 0;
    width: auto;
    margin-left: 0;
    height: 2px;
    border-bottom-width: 2px;
    border-bottom-color: var(--lt-accent);
    opacity: 1;
    transform: translateY(10px) scaleX(0);
    transform-origin: left center;
    transition: transform 0.32s var(--lt-ease);
  }
  .main-navigation li > a:hover:before,
  .main-navigation .current_page_item > a:before,
  .main-navigation .current-menu-item > a:before,
  .main-navigation .current-menu-ancestor > a:before,
  .main-navigation .current_page_ancestor > a:before {
    opacity: 1;
    transform: translateY(10px) scaleX(1);
  }

  /* ---- The dropdown panel: cream box + hard triangle -> clean white card ----
   * Hairline is a box-shadow ring, NOT a border, so it adds zero layout width
   * and cannot perturb the JS centring maths. */
  .main-navigation > div > ul > li > ul {
    padding: 10px 0;
    background-color: #fff;
    border-radius: 3px;
    box-shadow:
      0 0 0 1px var(--lt-line),
      0 20px 44px -14px rgba(28, 26, 25, 0.20),
      0 3px 8px rgba(28, 26, 25, 0.05);
    text-align: left;
    animation: ltMenuIn 0.22s var(--lt-ease) both;
  }

  /* The 15px white triangle read as a notch against the old cream panel and
   * is redundant against a white card. */
  .main-navigation > div > ul > li > ul:before { display: none; }

  /* ---- Submenu items: full-width rows with a hover wash ---- */
  .main-navigation ul ul li {
    margin: 0;
    text-transform: none;
  }
  .main-navigation ul ul a {
    display: block;
    padding: 9px 24px;
    font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
    letter-spacing: 0.01em;
    line-height: 1.5;
    transition:
      background-color 0.18s var(--lt-ease),
      color 0.18s var(--lt-ease),
      padding-left 0.18s var(--lt-ease);
  }
  .main-navigation ul ul a:hover,
  .main-navigation ul ul a:focus {
    background-color: var(--lt-accent-bg);
    padding-left: 29px;
  }

  /* ---- Keyboard users get a visible focus ring (the theme had none) ---- */
  .main-navigation a:focus-visible {
    outline: 2px solid var(--lt-accent);
    outline-offset: 4px;
  }

  @keyframes ltMenuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .main-navigation > div > ul > li > ul { animation: none; }
    .main-navigation li > a:before,
    .main-navigation ul ul a,
    .main-navigation .has_children > a:after { transition: none; }
    .main-navigation li > a:before { transform: translateY(10px) scaleX(0); }
    .main-navigation li > a:hover:before { transform: translateY(10px) scaleX(1); }
  }
}