/* ---------- styles.css (dropdown matches button width + submenu centered) ---------- */
:root{
  --maxw: 980px;
  --pad: 18px;
  --radius: 14px;
  --shadow: 0 12px 36px rgba(0,0,0,.35);

  --ink: #111827;
  --ink-on-dark: #f8fafc;
  --muted: #e5e7eb;

  --accent: #2563eb;
  --cta-bg: #16a34a;
  --cta-ink: #ffffff;

  /* Glass card theme tokens */
  --card-bg: rgba(12, 20, 17, 0.52);
  --card-bg-strong: rgba(12, 20, 17, 0.72);
  --card-border: rgba(255,255,255,0.18);
  --card-shadow: 0 20px 60px rgba(0,0,0,0.45);
  --card-blur: 10px;
  --accent-green: #22c55e;

  /* Background image controls */
  --bg-url: url("../assets/puppies-hero.jpg");
  --bg-pos: 50% 72%;
  --bg-fit: cover;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
  color: var(--ink-on-dark);
  background: #000;
  overscroll-behavior: none;
}

/* ===== Fixed background ===== */
.bg{
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-image: var(--bg-url);
  background-position: var(--bg-pos);
  background-repeat: no-repeat;
  background-size: var(--bg-fit);
  background-color: #000;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  z-index: -2;
}
@supports (height: 100lvh) {
  .bg{ width: 100lvw; height: 100lvh; }
}

.shade{
  position: fixed;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.38) 22%,
      rgba(0,0,0,0.18) 45%,
      rgba(0,0,0,0.00) 60%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.18) 8%,
      rgba(0,0,0,0.00) 18%);
  z-index: -1;
}

/* Content wrapper */
.wrap{
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* ===== Hero / CTA ===== */
/* (keeping hero styles in case other pages use them) */
.hero{
  padding: calc(18vh) var(--pad) calc(10vh);
  text-align: center;
  max-width: var(--maxw);
  margin: 0 auto;
}
.hero h1{
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 5.5vw, 48px);
}
.tagline{
  margin: 0 auto 24px;
  max-width: 42ch;
  font-size: clamp(16px, 2.8vw, 18px);
  opacity: .98;
}

/* CTA button */
.cta{
  display: inline-block;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--cta-bg);
  color: var(--cta-ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
}
.cta:hover{
  transform: translateY(-1px);
  opacity: .98;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.22), var(--shadow);
}
.cta:active{ transform: translateY(0); }
.cta:focus{ outline: 3px solid var(--accent); outline-offset: 3px; }

/* ===== Glass Card Bubble ===== */
.bubble{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 22px 18px;
  position: relative;
  margin-top: 36vh; /* default for pages with a hero */
}
.bubble::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    var(--card-bg);
  backdrop-filter: blur(var(--card-blur)) saturate(120%);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  z-index: -1;
}
.bubble::after{
  content: "";
  position: absolute;
  left: 42px; bottom: -14px;
  width: 26px; height: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    var(--card-bg-strong);
  transform: rotate(45deg);
  box-shadow: 6px 6px 20px rgba(0,0,0,.18);
  border-left: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  z-index: -1;
}
.bubble h2{
  text-align: center;
  margin: 4px auto 14px;
  font-size: clamp(22px, 4.5vw, 28px);
  color: #f8fafc;
  letter-spacing: 0.2px;
  position: relative;
}
.bubble h2::after{
  content: "";
  display: block;
  width: 72px; height: 3px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
  opacity: .9;
}
.bubble p{
  max-width: 60ch;
  margin: 0 auto;
  color: #eef2f1;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.1px;
}

/* Centering + widow control for About bubble */
.bubble-centered {
  text-align: center;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}
.bubble-centered h2 {
  text-wrap: balance;
  margin-bottom: 0.6rem;
}
.bubble-centered p {
  text-wrap: pretty;
  margin: 0 0 1rem;
  line-height: 1.65;
}
@media (max-width: 420px) {
  .bubble-centered p {
    margin-left: auto;
    margin-right: auto;
    max-width: 34ch;
  }
}

/* ===== About page only: raise the bubble to where the header used to be ===== */
/* Preferred: add class="page-about" to <body> on about.html */
.page-about .bubble { margin-top: 18vh; }
@media (max-width: 480px){
  .page-about .bubble { margin-top: 14vh; }
}

/* Fallback if you forget the body class: pages without a .hero get the same spacing
   (supported in modern Chrome and Safari) */
.wrap:not(:has(> .hero)) .bubble { margin-top: 18vh; }
@media (max-width: 480px){
  .wrap:not(:has(> .hero)) .bubble { margin-top: 14vh; }
}

/* Footer */
.site-footer{
  text-align: center;
  padding: 28px var(--pad) 40px;
  font-size: 14px;
  color: #e5e7eb;
  opacity: .9;
}

/* ===== Off-canvas menu ===== */
.hamburger{
  position: fixed;
  top: 14px; left: 14px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  color: #fff;
  z-index: 50;
}
.hamburger span{
  display: block;
  width: 20px; height: 2px;
  background: #fff;
  margin: 3px 0;
  border-radius: 2px;
}

.backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 49;
}
.backdrop.show{ opacity: 1; pointer-events: auto; }

.sidemenu{
  position: fixed;
  top: 0; left: 0;
  height: 100lvh;
  width: min(88vw, 320px);
  transform: translateX(-100%);
  transition: transform .22s ease;
  background: rgba(15,23,42,.92);
  color: #fff;
  backdrop-filter: blur(10px);
  box-shadow: 8px 0 30px rgba(0,0,0,.45);
  z-index: 51;
  overflow-y: auto;
}
.sidemenu.open{ transform: translateX(0); }
.menu-inner{ padding: 16px; }

/* Menu header */
.menu-header{
  display: block;
  padding: 10px 2px 12px;
  color: #e5e7eb;
  opacity: .98;
  text-align: center;
}
.menu-header .brand{
  display: block;
  font-family: Poppins, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 4.2vw, 24px);
  letter-spacing: .2px;
  color: #f8fafc;
}
.menu-header .sub{
  display: block;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 2.9vw, 14px);
  opacity: .88;
}

/* Menu items */
.menu-item{
  position: relative; /* for the current-page bar */
  display: block;
  padding: 14px 12px;
  border-radius: 10px;
  color: #f8fafc;
  text-decoration: none;
  font-weight: 600;
}
.menu-item:hover{ background: rgba(255,255,255,.08); }

.menu-item.primary{
  background: linear-gradient(180deg, rgba(34,197,94,.98), rgba(22,163,74,.98));
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  text-align: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.28) inset, 0 10px 28px rgba(0,0,0,.24);
}
.menu-item.primary:hover{ filter: brightness(1.02); }

.menu-item[aria-current="page"]{
  background: rgba(255,255,255,.06);
  padding-left: 26px;
}
.menu-item[aria-current="page"]::before{
  content: "";
  position: absolute;
  left: 4px; top: 8px; bottom: 8px;
  width: 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--accent-green), #16a34a);
  box-shadow: 0 0 0 2px rgba(34,197,94,.12), 0 0 10px rgba(34,197,94,.28);
}

.divider{
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  margin: 10px 0 12px;
}

/* ===== CTA dropdown ===== */

/* keep the wrapper sized to the button so children can be 100% width */
.cta-group{
  position: relative;
  display: inline-block;
  width: max-content; /* ensures the group width equals the button’s width */
}

.has-caret{ position: relative; padding-right: 38px; }
.has-caret::after{
  content: "";
  position: absolute; right: 14px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translateY(-60%) rotate(45deg);
  opacity: .9;
  transition: transform .2s ease, opacity .2s ease;
}

/* ▼ NEW: panel matches button width exactly */
.cta-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;          /* makes width = wrapper (button) width */
  width: 100%;
  max-height: 70vh;

  overflow: auto;
  scrollbar-gutter: stable both-edges;
  padding: 10px 12px;

  background: rgba(22,163,74,0.65);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.40);
  color: #fff;
  z-index: 5;
  display: none;
  transform-origin: top center;
}
.cta-menu.show{
  display: block;
  animation: ctaFadeIn .28s ease forwards;
}

/* Optional: tidy scrollbar in WebKit */
.cta-menu::-webkit-scrollbar{ width: 10px; }
.cta-menu::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.35); border-radius: 10px; }
.cta-menu::-webkit-scrollbar-track{ background: transparent; }

/* menu items */
.cta-item{
  position: relative;
  display: block;
  padding: 12px 14px;
  margin: 6px 0;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  transition: background .25s ease, transform .18s ease, filter .18s ease;
}
.cta-item:hover{
  background: rgba(255,255,255,0.15);
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* DFW caret spacing */
.cta-item.menu-caret{ padding-right: 48px; }
.cta-item.menu-caret::after{ right: 18px; }

.cta-item.disabled{ opacity: .55; filter: grayscale(.1); cursor: not-allowed; }

/* Submenu (stays perfectly centered because parent panel is now 100% of button width) */
.menu-caret{ text-align: center; }
.cta-item[aria-expanded="true"].menu-caret::after{
  transform: translateY(-60%) rotate(-135deg);
}
.cta-submenu{
  display: none;
  margin: 8px 0 4px;
  padding: 8px;
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
}
.cta-submenu.show{ display: block; animation: ctaFadeIn .25s ease forwards; }

.cta-subitem{
  display: block;
  margin: 4px 0;
  padding: 11px 12px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  font-weight: 700;
  transition: background .25s ease, transform .18s ease, filter .18s ease;
}
.cta-subitem:hover{
  background: rgba(255,255,255,0.15);
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Glow ring on active/expanded button */
.cta:focus-visible,
.cta[aria-expanded="true"]{
  box-shadow: 0 0 0 6px rgba(34,197,94,0.28), var(--shadow);
}

/* Opening animation (no horizontal centering math needed now) */
@keyframes ctaFadeIn{
  from{ opacity: 0; transform: translateY(-6px) scale(.98); }
  to  { opacity: 1; transform: translateY(0)      scale(1); }
}

/* Responsive background framing */
@media (max-aspect-ratio: 9/16) {
  :root { --bg-pos: 50% 76%; --bg-fit: cover; }
}
@media (min-aspect-ratio: 16/9) {
  :root { --bg-pos: 50% 70%; --bg-fit: 108% auto; }
}
@media (min-aspect-ratio: 21/9) {
  :root { --bg-pos: 50% 68%; --bg-fit: 110% auto; }
}

/* =========================
   PAGE-SCOPED: Happy Homes
   ========================= */
.page-happy-homes .hero{
  /* title up near the menu; tighter bottom so Start Here tucks under */
  padding: clamp(56px, 10vh, 90px) var(--pad) 3vh;
}
.page-happy-homes .hero h1{
  margin-bottom: 8px;
}
.page-happy-homes .tagline{
  display: none; /* subtitle removed */
}

/* Tight stack by default, with one big gap only before the 2nd bubble */
.page-happy-homes .bubble{
  margin-top: 14px;            /* tight spacing for most bubbles */
  padding: 20px 18px 16px;
}
.page-happy-homes .bubble:first-of-type{
  margin-top: 8px;             /* Start Here right under the title */
}
.page-happy-homes .bubble:nth-of-type(2){
  margin-top: 36vh;            /* big reveal before General Puppy & Kitten Care */
}

/* Grid of resource cards: 1 col mobile → 2 cols ≥720px */
.page-happy-homes .resource-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 820px;
  margin: 12px auto 4px;
}
@media (min-width: 720px){
  .page-happy-homes .resource-grid{
    grid-template-columns: 1fr 1fr;
    gap: 16px 16px;
  }
}

/* Individual resource “card” (button + explanation) */
.page-happy-homes .resource{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.24) inset, 0 8px 26px rgba(0,0,0,.22);
}
.page-happy-homes .btn-resource{
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  border-radius: 12px;
  padding: 12px 14px;
  color: #fff;
  background: linear-gradient(180deg, rgba(34,197,94,.95), rgba(22,163,74,.95));
  border: 1px solid rgba(255,255,255,.22);
  transition: transform .12s ease, filter .18s ease, box-shadow .2s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,.2), inset 0 0 0 1px rgba(0,0,0,.06);
}
.page-happy-homes .btn-resource:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 0 0 4px rgba(34,197,94,.22), 0 10px 28px rgba(0,0,0,.28);
}
.page-happy-homes .btn-resource:focus{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.page-happy-homes .explain{
  margin: 10px 6px 2px;
  font-size: 14px;
  line-height: 1.55;
  color: #eaf5ee;
  text-align: center;
}

/* Remove default UL styling if any remain */
.page-happy-homes .highlights{ list-style: none; padding: 0; margin: 0; }

/* Keep any dropdown hidden here just in case */
.page-happy-homes #adoptMenu{ display: none !important; }