/* LostTitle.Solutions – theme.css (drop-in, non-destructive)
   Purpose: purely visual refinement. No functional changes.
   Safe to include after your existing <style> blocks.
*/

:root{
  /* extra shadows and radii (use existing variables wherever possible) */
  --radius: .85rem;
  --shadow-s: 0 1px 0 rgba(0,0,0,.22), 0 6px 16px rgba(0,0,0,.18);
  --shadow-m: 0 1px 0 rgba(0,0,0,.22), 0 10px 26px rgba(0,0,0,.22);
}

/* ---------------------------------- */
/* NAV + FOOTER polish                 */
/* ---------------------------------- */
nav{
  border-bottom: 2px solid var(--black);
  box-shadow: 0 1px 0 rgba(0,0,0,.12);
  letter-spacing: .2px;
}
nav .links a{
  font-weight: 800;
  text-decoration: none;
  padding: .5rem .7rem;
  border-radius: .65rem;
  outline-offset: 2px;
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
nav .links a:hover{ filter: brightness(1.05); }
nav .links a:active{ transform: scale(.98); }

footer{
  border-top: 2px solid var(--black);
  box-shadow: 0 -1px 0 rgba(0,0,0,.12);
}

/* ---------------------------------- */
/* BUTTONS (service + change-service) */
/* ---------------------------------- */
.service-buttons{ display:flex; flex-direction:column; gap:.65rem; align-items:stretch; }
.service-buttons button,
.link-btn,
a.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none; /* stretch full column width */
  padding: .9rem 1.1rem;
  border-radius: 1rem;
  border: 2px solid var(--black);
  background: var(--black);
  color: var(--yellow);
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration: none !important;
  box-shadow: var(--shadow-s);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.service-buttons button[aria-pressed="true"]{ outline: 3px solid var(--yellow); outline-offset:2px; }
.link-btn{ background:#fff7b0; color:var(--black) !important; }
.service-buttons button:hover,
.link-btn:hover,
a.button:hover{ filter: brightness(1.03); box-shadow: var(--shadow-m); }
.service-buttons button:active,
.link-btn:active,
a.button:active{ transform: scale(.985); }
@media (min-width:901px){
  .service-buttons button, .link-btn{ width: 100%; }
}

/* Subtle “shine” on hover for primary buttons */
.service-buttons button::after, a.button::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.14) 50%, transparent 100%);
  transform: translateX(-120%);
  transition: transform .5s ease;
}
.service-buttons button:hover::after, a.button:hover::after{ transform: translateX(120%); }
.service-buttons button, a.button{ position:relative; overflow:hidden; }

/* ---------------------------------- */
/* CARDS (benefits, prereqs, estimator)
   Applies to existing elements without HTML changes.
------------------------------------- */
.benefit-card,
.prereqs,
.collapsible{
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  background: #fffef0;
}
.prereqs h2, .benefits h3{
  margin: .2rem 0 .6rem;
  position: relative;
}
.prereqs h2::before, .benefits h3::before{
  content: ""; position:absolute; left:0; bottom:-.35rem; width:64px; height:3px; background: var(--black);
}

/* ---------------------------------- */
/* VIDEO polish                       */
/* ---------------------------------- */
.video-shell::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(transparent 60%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
}
.video-overlay{
  width:110px; height:110px; border-radius:999px;
  background: rgba(0,0,0,.65);
  color:#fff; font-weight:900; letter-spacing:.2px;
  border:2px solid rgba(255,255,255,.9);
}

/* ---------------------------------- */
/* LISTS: optional icon alignment     */
/* (add inline SVG .li-ico next to li)
------------------------------------- */
.li-ico{ margin-right:.5rem; vertical-align:-3px; }
.benefits li, .prereqs li{ display:flex; align-items:flex-start; gap:.5rem; }

/* ---------------------------------- */
/* COLLAPSIBLE animation (polite)     */
/* ---------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .collapsible[open] > *{ animation: ltsFadeIn .22s ease; }
  @keyframes ltsFadeIn{ from{ opacity:0; transform: translateY(4px);} to{ opacity:1; transform:none; } }
}

/* ---------------------------------- */
/* CHAT polish                        */
/* ---------------------------------- */
.chip{
  background:#fff7b0;
  border:2px solid var(--black);
  border-radius:999px;
  padding:.35rem .7rem;
  font-weight:700;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  transition: transform .16s ease, box-shadow .16s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.chip:active{ transform: translateY(0); }

/* “typing” shimmer (add .is-typing to .chatwrap to enable) */
.chatwrap.is-typing .chatinput::before{
  content:""; position:absolute; left:1rem; right:1rem; top:.3rem; height:3px;
  background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.25), rgba(0,0,0,.05));
  background-size: 200% 100%;
  animation: ltsShimmer 1.2s linear infinite;
  border-radius:2px;
}
@keyframes ltsShimmer{ from{ background-position: 200% 0; } to{ background-position: -200% 0; } }
.chatinput{ position:relative; }

/* ---------------------------------- */
/* TYPOGRAPHY                         */
/* ---------------------------------- */
h2{ font-size: clamp(1.15rem, 1vw + 1rem, 1.5rem); }
h3{ font-size: clamp(1.05rem, .6vw + .9rem, 1.25rem); }
nav, .service-buttons button, .link-btn, a.button{ letter-spacing: .2px; }

/* ---------------------------------- */
/* Ensure estimator/forms fit columns */
/* ---------------------------------- */
.collapsible form,
.collapsible fieldset,
.collapsible .contentbox{ width:100%; max-width:100%; }
.collapsible .iframe-form{ width:100% !important; max-width:100%; display:block; }


/* --- Privacy Policy link override --- */
.muted a[href*="ltc_privacy_policy.html"],
.muted a[href*="ltc_privacy_policy.html"]:link,
.muted a[href*="ltc_privacy_policy.html"]:visited,
.muted a[href*="ltc_privacy_policy.html"]:hover,
.muted a[href*="ltc_privacy_policy.html"]:active {
  color: var(--black) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* nice focus ring for keyboard users (optional) */
.muted a[href*="ltc_privacy_policy.html"]:focus {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}