/* Letalife — base + layout (load after tokens.css). */

/* ---- Base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background:
    var(--ll-bg);
  color: var(--ll-text);
  font-family: var(--ll-font-sans);
  font-size: 0.9375rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Clip horizontal overflow from full-bleed hero elements (home/wizard/listing).
     clip (not hidden) avoids creating a scroll container that would break sticky nav. */
  overflow-x: clip;
}

a {
  color: var(--ll-blue-700);
  text-decoration: none;
}

a:hover {
  color: var(--ll-blue-900);
  text-decoration: underline;
}


/* ---- Navbar ---- */
.ll-navbar {
  background: var(--ll-bg);
  /* warm cream, matches the page (--ll-bg) */
  border-top: 4px solid var(--ll-blue-700);
  border-bottom: 2px solid var(--ll-blue-200);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: var(--ll-z-navbar);
}

.ll-navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.ll-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}

.ll-brand:hover {
  opacity: 0.82;
  text-decoration: none;
}

.ll-brand-dot {
  display: none;
}

/* text removed — logo only */
.ll-brand-logo {
  height: 70px;
  width: auto;
}

.ll-brand-wordmark {
  color: var(--ll-blue-700);
  font-size: 40px;
  font-weight: 700;
  padding-left: 16px;
}

.ll-nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.ll-nav-link {
  font-size: 1rem;
  font-weight: 600;
  height: 100%;
  color: var(--ll-blue-700);
  padding: 0.4rem 0.75rem;
  border-radius: var(--ll-r-sm);
  text-decoration: none;
  transition: color 0.12s, background 0.12s;
}

.ll-nav-link:hover {
  color: #eee;
  background: var(--ll-blue-900);
  text-decoration: none;
}

.ll-nav-link.dropdown-toggle::after {
  vertical-align: 0.15em;
}

/* The dropdown sits inside a .dropdown wrapper, so its toggle is an *inline* anchor
   while the sibling nav links are flex items in .ll-nav-links. That mismatch made the
   toggle's hover highlight render shorter than the plain links. Re-flow the wrapper and
   toggle as flex boxes so the padding-driven hover box matches the siblings exactly. */
.ll-navbar .dropdown {
  display: inline-flex;
  align-items: stretch;
}
.ll-navbar .dropdown > .ll-nav-link {
  display: inline-flex;
  align-items: center;
}

.ll-navbar .dropdown-menu {
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r);
  box-shadow: var(--ll-shadow-md);
  padding: 0.35rem 0;
  min-width: 180px;
  background: var(--ll-surface);
}

.ll-navbar .dropdown-item {
  font-size: 0.875rem;
  color: var(--ll-blue-700);
  font-weight: 500;
  padding: 0.45rem 1rem;
}

.ll-navbar .dropdown-item:hover {
  background: var(--ll-blue-50);
  color: var(--ll-blue-900);
}

/* Account dropdown header (LETAL-130): the signed-in email (or "Guest") atop
   the menu. Eyebrow idiom per the style bible (small caps, wide tracking,
   muted) — but an email address is data, not a label, so it keeps its case. */
.ll-navbar .dropdown-header {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ll-muted);
  padding: 0.45rem 1rem 0.25rem;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ll-navbar .dropdown-header.ll-account-email {
  text-transform: none;
  letter-spacing: normal;
}

.btn-place-ad {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--ll-rose-600);
  color: var(--ll-white) !important;
  border: none;
  border-radius: var(--ll-r-pill);
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.12s, transform 0.1s, box-shadow 0.12s;
  /* --ll-rose-600-rgb gives the channel values without repeating the hex */
  box-shadow: 0 1px 3px rgb(var(--ll-rose-600-rgb) / 0.35);
}

.btn-place-ad:hover {
  background: var(--ll-rose-700);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgb(var(--ll-rose-600-rgb) / 0.4);
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: center;
  background: var(--ll-blue-700);
  color: var(--ll-white) !important;
  border: none;
  border-radius: var(--ll-r-pill);
  padding: 0.6rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.12s, transform 0.1s, box-shadow 0.12s;
  box-shadow: 0 2px 6px rgb(var(--ll-blue-700-rgb) / 0.3);
}

.btn-cta:hover {
  background: var(--ll-blue-900);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(var(--ll-blue-700-rgb) / 0.35);
}

/* Compact pill for tight rows (e.g. the filter bar). */
.btn-cta-sm {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  box-shadow: 0 1px 3px rgb(var(--ll-blue-700-rgb) / 0.3);
}

/* Oversized pill for a single hero CTA (e.g. the premium-upsell purchase
   button) — there should only ever be one of these visible at a time. */
.btn-cta-lg {
  padding: 0.85rem 2rem;
  font-size: 1.05rem;
  font-weight: 700;
}

/* ---- .btn-cta variants ----
   .btn-cta is the base pill (filled blue/primary). These modifiers compose
   alongside it — e.g. class="btn-cta btn-cta--outline btn-cta-sm" — rather than
   replacing it, so shape/spacing/hover-lift stay defined in exactly one place.
   Neutral/secondary action (back, cancel, clear, reset, renew). */
.btn-cta.btn-cta--outline {
  background: transparent;
  color: var(--ll-blue-700) !important;
  border: 1.5px solid var(--ll-blue-200);
  box-shadow: none;
}

.btn-cta.btn-cta--outline:hover {
  background: var(--ll-blue-50);
  border-color: var(--ll-blue-500);
  color: var(--ll-blue-900) !important;
  box-shadow: none;
}

/* Destructive action (delete, remove, cancel subscription). */
.btn-cta.btn-cta--danger {
  background: transparent;
  color: var(--ll-red-700) !important;
  border: 1.5px solid var(--ll-red-300);
  box-shadow: none;
}

.btn-cta.btn-cta--danger:hover {
  background: var(--ll-red-50);
  border-color: var(--ll-red-600);
  color: var(--ll-red-700) !important;
  box-shadow: none;
}

/* Muted/inert state (e.g. "current plan" — a real button that isn't a live
   action right now). Always paired with the disabled attribute. */
.btn-cta.btn-cta--ghost,
.btn-cta.btn-cta--ghost:hover {
  background: var(--ll-slate-100);
  color: var(--ll-slate-500) !important;
  border: 1.5px solid var(--ll-slate-200);
  box-shadow: none;
  transform: none;
}

.btn-cta:disabled {
  cursor: not-allowed;
  transform: none !important;
}



/* ---- Footer ---- */
.ll-footer {
  background: var(--ll-slate-900);
  color: var(--ll-slate-400);
  padding: 2.5rem 0 2rem;
  margin-top: 5rem;
}

.ll-footer-brand {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--ll-white);
}

.ll-footer-wordmark {
  color: var(--ll-slate-400);
  font-size: 32px;
  font-weight: 700;
  padding-left: 4px;
}

/* LETAL-40 placeholder: logo on a light plate so the blue mark reads on the
   dark footer. Replace plate with a proper light/mono logo variant when supplied. */
.ll-footer-logo {
  height: 52px;
  width: auto;
  padding: 5px 8px;
}

.ll-footer a {
  color: var(--ll-slate-400);
  text-decoration: none;
}

.ll-footer a:hover {
  color: var(--ll-white);
}

/* Inert nav-group heading in the footer (no page to link to). Lighter weight than a
   link so it reads as a grouping label. */
.ll-footer-group-label {
  color: var(--ll-slate-300);
  font-weight: 600;
}

.ll-footer-tagline {
  font-size: 0.85rem;
  margin-top: 0.6rem;
  max-width: 22ch;
}

/* Section labels (Browse/About/Legal) reuse the shared .ll-section-label class but
   need a lighter shade here — the default --ll-muted is a dark slate tuned for light
   backgrounds and reads as barely-visible on the footer's near-black background. */
.ll-footer .ll-section-label {
  color: var(--ll-slate-400);
}

.ll-footer-sublist {
  padding-left: 0.75rem;
  margin-top: 0.15rem;
}

.ll-footer-sublist a {
  font-size: 0.8rem;
}

.ll-footer-copy {
  font-size: 0.8rem;
  color: var(--ll-slate-500);
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ll-slate-800);
}

.ll-footer-cookie-note {
  margin-top: 0.35rem;
  font-size: 0.78rem;
}


/* ---- Hamburger button ---- */
.ll-burger {
  background: none;
  border: 1px solid var(--ll-blue-200);
  border-radius: var(--ll-r-sm);
  color: var(--ll-blue-700);
  padding: 0.35rem 0.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.12s, border-color 0.12s;
}

.ll-burger:hover {
  background: var(--ll-blue-50);
  border-color: var(--ll-blue-500);
}

/* ---- Mobile off-canvas ---- */
.ll-offcanvas {
  width: 300px !important;
}

.ll-offcanvas .offcanvas-header {
  border-top: 4px solid var(--ll-blue-700);
  border-bottom: 2px solid var(--ll-blue-200);
  background: var(--ll-bg);
  padding: 0.75rem 1.25rem;
}

.ll-offcanvas .offcanvas-body {
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Mobile nav links */
.ll-mobile-nav {
  flex: 1;
  padding: 0.5rem 0;
}

.ll-mobile-nav a,
.ll-mobile-group>a {
  display: block;
  padding: 0.75rem 1.25rem;
  color: var(--ll-blue-700);
  font-size: 0.975rem;
  font-weight: 600;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.ll-mobile-nav a:hover,
.ll-mobile-group>a:hover {
  background: var(--ll-blue-50);
  border-left-color: var(--ll-blue-500);
  color: var(--ll-blue-700);
}

/* A nav-group heading in the mobile menu: same look as a group link but inert
   (no href), so it reads as a section label rather than a tappable page. */
.ll-mobile-group-label {
  display: block;
  padding: 0.75rem 1.25rem;
  color: var(--ll-slate-600);
  font-size: 0.975rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-left: 3px solid transparent;
}

/* Account group header when it's the signed-in email (LETAL-130): an email is
   data, not a label — keep its case and ellipsize instead of uppercasing. */
.ll-mobile-account-label {
  text-transform: none;
  letter-spacing: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sub-pages indented under their parent */
.ll-mobile-children {
  background: var(--ll-slate-50);
  border-top: 1px solid var(--ll-border);
  border-bottom: 1px solid var(--ll-border);
  margin-bottom: 0.25rem;
}

.ll-mobile-children a {
  padding-left: 2rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ll-slate-600);
}

.ll-mobile-children a::before {
  content: '└ ';
  opacity: 0.4;
  font-size: 0.8em;
}

/* Bottom of offcanvas */
.ll-mobile-footer {
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid var(--ll-border);
}

.ll-mobile-footer .btn-place-ad {
  width: 100%;
  justify-content: center;
}

.ll-mobile-signout {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8rem;
  color: var(--ll-slate-400);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: color 0.12s;
}

.ll-mobile-signout:hover {
  color: var(--ll-slate-700);
}

.ll-main .btn {
  border-radius: var(--ll-r-pill);
}