/* Lady Lex — sticky contact CTA + form trust + P0/P1 mobile fixes */

/* ── P1.1 Top-bar: phone + email same type level ── */
/* 600 = slightly firmer, still not bold shout */
.top-bar{
  align-items:center !important;
}
.top-bar a,
.top-bar a[href^="tel"],
.top-bar a[href^="mailto"]{
  font-size:inherit !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
  line-height:1.35 !important;
  font-family:var(--sans),system-ui,sans-serif !important;
  display:inline-flex !important;
  align-items:center !important;
  vertical-align:middle;
}

/* ── P1.2 Hamburger: thicker bars, softer rounded button ── */
.nav-toggle{
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;
  padding:0 !important;
  background:var(--cream,#f6f3ee) !important;
  border:2px solid var(--green,#0a3d28) !important;
  border-radius:12px !important; /* soft, matches site radius */
  color:var(--green,#0a3d28) !important;
  font-size:0 !important;
  line-height:0 !important;
  cursor:pointer;
  box-sizing:border-box !important;
  transition:background .2s,border-color .2s,border-radius .2s !important;
}
.nav-toggle:hover,
.nav-toggle:focus-visible{
  background:var(--green-light,#d4ede0) !important;
  outline:none;
}
.nav-toggle-bar{
  display:block !important;
  width:20px !important;
  height:3.5px !important; /* thicker */
  background:var(--green,#0a3d28) !important;
  border-radius:999px !important; /* soft rounded ends */
  transition:transform .25s ease,opacity .2s ease !important;
  flex-shrink:0;
}
/* open → X (spacing matches thicker bars + gap) */
.nav-toggle.open .nav-toggle-bar:nth-child(1){
  transform:translateY(9.5px) rotate(45deg);
}
.nav-toggle.open .nav-toggle-bar:nth-child(2){
  opacity:0;
}
.nav-toggle.open .nav-toggle-bar:nth-child(3){
  transform:translateY(-9.5px) rotate(-45deg);
}

/* ── P1.3 Contact quick = practice-pill language (not hard boxes) ── */
.contact-quick{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 22px;
}
.contact-quick a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  min-height:44px !important;
  padding:10px 20px !important;
  /* same family as .practice-pill */
  background:var(--teal,#0F766E) !important;
  border:none !important;
  border-radius:var(--radius-sm,8px) !important;
  color:#fff !important;
  text-decoration:none !important;
  font-family:var(--sans),system-ui,sans-serif !important;
  font-size:.72rem !important;
  font-weight:600 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  box-shadow:none !important;
  transition:background .2s ease !important;
}
.contact-quick a:hover,
.contact-quick a:focus-visible{
  background:var(--teal-dark,#0B5F58) !important;
  color:#fff !important;
  outline:none;
  box-shadow:none !important;
}
/* Both actions same pill style (pair, not “two different products”) */
.contact-quick a[href*="wa.me"],
.contact-quick a[href^="tel"]{
  background:var(--teal,#0F766E) !important;
}
.contact-quick a[href*="wa.me"]:hover,
.contact-quick a[href*="wa.me"]:focus-visible,
.contact-quick a[href^="tel"]:hover,
.contact-quick a[href^="tel"]:focus-visible{
  background:var(--teal-dark,#0B5F58) !important;
}

/* ── P1.4 Logo: larger on mobile ── */
@media (max-width:768px),(orientation:landscape) and (max-height:520px){
  .logo-full{
    font-size:clamp(1.12rem,4.9vw,1.5rem) !important;
    line-height:1.1 !important;
  }
  .logo-line-top{
    font-size:.68em !important;
  }
  .header-inner{
    gap:12px !important;
  }
}

/* ── Scroll targets: fixed header + sticky bar ── */
html{
  scroll-padding-top:120px;
  scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));
}
#contact,
#contact-form,
.contact-form{
  scroll-margin-top:120px;
  scroll-margin-bottom:calc(72px + env(safe-area-inset-bottom,0px));
}

/*
 * Sticky bottom: three equal practice-pill buttons
 * SOITA | WHATSAPP | VIESTI — text only (no emoji).
 * Icons optional later: monoline above label only; side-by-side gets tight.
 */
/* Transparent shell — only the three pills are visible (no bar slab) */
.contact-cta-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:120;
  display:flex;
  align-items:stretch;
  gap:8px;
  padding:0 12px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-sizing:border-box;
  pointer-events:none; /* clicks only on buttons */
}
.contact-cta-bar a{
  pointer-events:auto;
  flex:1 1 0;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:0;
  min-width:0;
  min-height:48px;
  padding:12px 8px;
  background:var(--teal,#0F766E);
  border:none;
  border-radius:var(--radius-sm,8px);
  color:#fff;
  text-decoration:none;
  font-family:var(--sans),system-ui,sans-serif;
  font-size:clamp(.62rem,2.6vw,.72rem);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.15;
  text-align:center;
  /* soft lift so pills read as floating over page content */
  box-shadow:0 4px 16px rgba(10,61,40,.22);
  transition:background .2s ease,box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.contact-cta-bar a:hover,
.contact-cta-bar a:focus-visible{
  background:var(--teal-dark,#0B5F58);
  color:#fff;
  outline:none;
  box-shadow:0 6px 20px rgba(10,61,40,.28);
}
.contact-cta-bar a:focus-visible{
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--teal,#0F766E),0 6px 20px rgba(10,61,40,.28);
}
.contact-cta-bar .cta-icon{display:none !important;}
.contact-cta-bar .cta-label{
  display:block;
  line-height:1.15;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Room so last content isn’t hidden under floating pills */
body.has-contact-cta{
  padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));
}
body.has-contact-cta .site-footer{
  padding-bottom:calc(36px + 8px);
}

/* Desktop: same idea — only pills, bottom-right */
@media (min-width:900px){
  .contact-cta-bar{
    left:auto;
    right:24px;
    bottom:24px;
    width:auto;
    max-width:440px;
    padding:0;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }
  .contact-cta-bar a{
    min-width:110px;
    min-height:48px;
    padding:12px 16px;
    font-size:.72rem;
  }
  body.has-contact-cta{
    padding-bottom:0;
  }
}

@media (prefers-reduced-motion:reduce){
  .contact-cta-bar a{transition:none}
}

/* Form trust — soft panel, no left accent bar */
.contact-trust{
  margin:0 0 22px;
  padding:16px 18px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);
  border-left:none !important;
  border-radius:var(--radius-sm,8px);
  font-size:.92rem;
  line-height:1.55;
  color:rgba(255,255,255,.92);
}
.contact-trust strong{
  display:block;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:8px;
  color:rgba(184,240,208,.95);
  font-weight:700;
}

/* ── P2.2 + P2.6 Field layout: label → input → hint (no overlap) ── */
.contact-field{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  margin-bottom:16px !important;
}
.contact-field .contact-label{
  margin-bottom:8px !important;
}
/* Input/textarea sit alone; no negative-margin hints on top of them */
.contact-field input,
.contact-field textarea{
  margin-bottom:0 !important;
  width:100%;
  box-sizing:border-box;
}
/* Control wrap for ✓/✕ without covering hint */
.contact-field .contact-control{
  position:relative;
  display:block;
  width:100%;
}
.contact-field .contact-hint{
  display:block;
  position:static !important;
  margin:8px 0 0 !important;
  padding:0 2px;
  font-size:.78rem;
  line-height:1.4;
  opacity:.75;
  color:rgba(255,255,255,.78);
  z-index:0;
}

/* Field feedback: green check / red X on the control only */
.contact-field .contact-field-status{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:1.35rem;
  height:1.35rem;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  font-weight:700;
  line-height:1;
  pointer-events:none;
  border-radius:50%;
  z-index:2;
}
.contact-field:has(textarea) .contact-field-status,
.contact-field .contact-control:has(textarea) .contact-field-status{
  top:14px;
  transform:none;
}
.contact-field.is-valid .contact-field-status,
.contact-field.is-invalid .contact-field-status{
  display:flex;
}
.contact-field.is-valid .contact-field-status{
  color:#b8f0d0;
  background:rgba(26,107,71,.35);
}
.contact-field.is-valid .contact-field-status::before{
  content:'✓';
}
.contact-field.is-invalid .contact-field-status{
  color:#ffc9c9;
  background:rgba(160,40,40,.35);
}
.contact-field.is-invalid .contact-field-status::before{
  content:'✕';
}
.contact-field.is-valid input,
.contact-field.is-valid textarea{
  border-color:rgba(184,240,208,.85) !important;
  box-shadow:0 0 0 1px rgba(184,240,208,.35) !important;
  padding-right:2.6rem !important;
}
.contact-field.is-invalid input,
.contact-field.is-invalid textarea{
  border-color:rgba(255,160,160,.9) !important;
  box-shadow:0 0 0 1px rgba(255,120,120,.35) !important;
  padding-right:2.6rem !important;
}
.contact-quick{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 22px;
}
.contact-quick a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  min-height:44px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  text-decoration:none;
  font-size:.88rem;
  font-weight:600;
  border-radius:4px;
  transition:background .2s,border-color .2s;
}
.contact-quick a:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.4);
  color:#fff;
}
.contact-form-status.success{
  padding:12px 14px;
  background:rgba(184,240,208,.15);
  border-radius:6px;
  line-height:1.45;
}
.contact-form-status.error{
  padding:12px 14px;
  background:rgba(255,201,201,.12);
  border-radius:6px;
  line-height:1.45;
}
.contact-label{
  display:block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.75;
  margin-bottom:6px;
}
.contact-field{margin-bottom:4px}

/* ── P0.2: Mobile contact order — form first, details after ── */
@media (max-width:768px),(orientation:landscape) and (max-height:520px){
  .contact-grid{
    display:flex !important;
    flex-direction:column;
    gap:28px;
  }
  .contact-grid > .contact-form{
    order:-1;
  }
  .contact-section{
    padding-top:clamp(40px,8vw,64px) !important;
    padding-bottom:clamp(48px,10vw,80px) !important;
  }
  /* Decorative side image eats less space on narrow screens */
  .contact-section::before{
    width:100% !important;
    opacity:.18 !important;
    clip-path:none !important;
  }
}

/* ── P0.3b: Gallery — no phantom gaps on mobile (iOS-safe) ── */
@media (max-width:1024px){
  .gallery-section{
    padding:16px 16px 12px !important;
    /* kill reveal translate leftover visual air */
    transform:none !important;
  }
  .gallery-section.reveal{
    opacity:1 !important;
    transform:none !important;
  }
  .gallery-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    width:100% !important;
    max-width:100% !important;
  }
  /* Fixed frame: aspect-ratio box + absolute img (iOS-safe, no % height bugs) */
  .gallery-grid > *,
  .gallery-grid .img-color-wrap,
  .gallery-grid .gallery-main,
  .gallery-grid .gallery-panel,
  .gallery-grid .gallery-panel-img{
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:4/3 !important;
    padding:0 !important;
    overflow:hidden !important;
    margin:0 !important;
    grid-row:auto !important;
    grid-column:auto !important;
    flex:0 0 auto !important;
    box-sizing:border-box !important;
    border-radius:6px !important;
    background-color:transparent !important;
    /* prevent flex min-content size from image intrinsic height */
    min-width:0 !important;
  }
  .gallery-grid .img-color-wrap img,
  .gallery-grid .gallery-main img,
  .gallery-grid .gallery-panel-img img,
  .gallery-grid img{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    box-shadow:none !important;
    filter:saturate(1.1) contrast(1.05) !important;
  }
  /* Legacy empty panels with CSS background only */
  .gallery-grid .gallery-panel{
    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
  }
  /* CTA tight under gallery */
  .cta-bold{
    padding-top:28px !important;
    padding-bottom:28px !important;
    margin-top:0 !important;
    gap:16px !important;
  }
  .cta-bold.reveal{
    /* avoid extra air from reveal transform before paint */
    transform:none !important;
  }
  .cta-bold::before{
    /* full-bleed soft bg on mobile, no diagonal empty wedge */
    width:100% !important;
    left:0 !important;
    clip-path:none !important;
    opacity:.28 !important;
  }
}