/* ==========================================================================
   PETLO — additions on top of the approved prototype stylesheet.

   petlo.css is a VERBATIM copy of the signed-off styles-v4.css (only its one
   relative image URL was repointed). Anything we add lives here instead, so
   petlo.css can be re-copied from the prototype at any time without losing
   our work, and so a design review can diff the prototype cleanly.
   ========================================================================== */
/* ==========================================================================
   ADOPTION PARTNER FRAME
   Shelter partners own their listings, so the adoption card opens their live
   page in a frame rather than us duplicating their data. Sized off the
   existing design tokens so it matches the approved look.
   ========================================================================== */
.adoption-modal-box { max-width: 900px; width: 100%; }
.adoption-frame-wrap {
  position: relative; width: 100%; height: min(62vh, 560px);
  border: 1.5px solid var(--light-border); border-radius: var(--radius-md);
  overflow: hidden; background: var(--bg-cream);
}
.adoption-frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.adoption-frame-note { font-size: 0.82rem; color: var(--muted-text); }
@media (max-width: 640px) {
  .adoption-frame-wrap { height: 52vh; }
  .adoption-frame-note { display: none; }
}

/* Behind the frame: shown only when the partner refuses to be embedded, because a
   refused cross-origin frame paints blank and raises no catchable error. */
.adoption-frame-fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center; color: var(--muted-text);
}
.adoption-frame-fallback i { font-size: 1.6rem; color: var(--brand-green); }
.adoption-frame-fallback p { font-size: 0.9rem; line-height: 1.6; margin: 0; }
.adoption-frame-wrap iframe { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Signed-in header state.

   The prototype had no accounts, so it specifies no logged-in header. Rather
   than restyle anything, the logged-in pills reuse the prototype's own .btn
   classes — but "Log out" must be a POST, so it needs a <form> around it, and
   a bare form would become the flex item instead of the button.

   display:contents makes the wrapper vanish from layout entirely, so the
   button is laid out as a direct child exactly as the original sibling
   <button> was. No geometry change in either the header row or the mobile
   drawer's stacked column.
   -------------------------------------------------------------------------- */
.header-actions form,
.mobile-drawer-actions form {
  display: contents;
}

/* The account pill has to be an <a> (it navigates) while its neighbour stays a
   <button> (log out must POST). A <button> takes the UA's line-height:normal,
   but an <a> inherits the body's 1.6 — which alone made it 45px tall next to a
   41px sibling. Matching it keeps the two pills identical, as the prototype's
   two <button> siblings were. Only ever hits the signed-in state: the approved
   logged-out markup uses buttons in both places. */
.header-actions a.btn,
.mobile-drawer-actions a.btn {
  line-height: normal;
}

/* ==========================================================================
   PETLO hero rotator

   The client chose rotation with NO added controls, so there are no dots and no
   arrows here — nothing is added to the approved hero. All of this is additive:
   with one slide the markup and computed layout are exactly the prototype's.

   .hero-img is already position:absolute; inset:0; object-fit:cover in the
   approved stylesheet, so media layers stack for free and only need opacity.

   Content is the delicate part: .hero-bg-card is height:auto on phones, driven
   by its content, so only ONE .hero-content may ever be in flow. Inactive ones
   are display:none rather than faded-out-but-present — otherwise the card would
   grow to the tallest caption and the mobile hero would change height.
   ========================================================================== */

/* Media layers: cross-fade. The current one sits on top of its neighbours. */
[data-petlo-hero="rotate"] > .hero-img {
  opacity: 0;
  transition: opacity 900ms ease-in-out;
}
[data-petlo-hero="rotate"] > .hero-img.is-current {
  opacity: 1;
}
/* <picture> is not a replaced element, so its own <img> must fill it too. */
[data-petlo-hero] > picture.hero-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption blocks: exactly one in flow, so the card's height never depends on
   how many slides exist. */
[data-petlo-hero="rotate"] > .hero-content.is-past,
[data-petlo-hero="rotate"] > .hero-content.is-next {
  display: none;
}
[data-petlo-hero="rotate"] > .hero-content.is-current {
  animation: petlo-hero-caption-in 700ms ease-out both;
}
@keyframes petlo-hero-caption-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Someone who asked their OS for less motion gets the first slide, held still.
   petlo.js checks the same query and never starts the timer. */
@media (prefers-reduced-motion: reduce) {
  [data-petlo-hero="rotate"] > .hero-img {
    transition: none;
  }
  [data-petlo-hero="rotate"] > .hero-content.is-current {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Hero swipe indicator

   The current slide reads as a wide pill, the others as dots — the shape the
   client asked for. Colours are PETLO's own: #0B0F12 is the hero's black CTA
   button, #CBD5E1 its outline-hover border, so nothing new is introduced.

   Sits inside the card, below the caption. The caption's CTA row already
   carries a 40px bottom margin in the approved stylesheet, so there is room
   here without moving anything.
   -------------------------------------------------------------------------- */
.petlo-hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.petlo-hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: #CBD5E1;
  cursor: pointer;
  /* Width is what animates as the pill grows, so it gets its own transition. */
  transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1), background-color 320ms ease;
}

.petlo-hero-dot:hover {
  background: #94A3B8;
}

.petlo-hero-dot.is-current {
  width: 26px;
  background: #0B0F12;
}

/* Keyboard users need to see which dot they are on; the pill alone isn't enough
   because the focused dot may not be the current one. */
.petlo-hero-dot:focus-visible {
  outline: 2px solid #0B0F12;
  outline-offset: 3px;
}

/* The caption is left-aligned and the dots are centred, so on a narrow screen a
   long CTA row can reach them. Pull them to the same edge as the copy, where
   there is always clearance. */
@media (max-width: 768px) {
  .petlo-hero-dots {
    justify-content: flex-start;
    padding-left: 24px;
    bottom: 16px;
  }
}

@media (max-width: 480px) {
  .petlo-hero-dots {
    padding-left: 20px;   /* matches .hero-content's own padding at this width */
  }
}

/* A swipe must not select the caption text on the way past. */
[data-petlo-hero="rotate"] {
  touch-action: pan-y;
}

@media (prefers-reduced-motion: reduce) {
  .petlo-hero-dot {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Per-slide overlay strength

   The design's white wash is what makes its dark green caption readable. It is
   now one layer per slide carrying its own --ov (0..1), so the opening banner
   can keep the wash at full strength while the client's photographs show clear.

   At --ov:1 the rendering is identical to the approved design, and the no-slides
   fallback has no inline --ov at all, so its wash falls back to 1 the same way.
   -------------------------------------------------------------------------- */
[data-petlo-hero="static"] > .hero-overlay {
  opacity: var(--ov, 1);
}

/* Rotating: only the current slide's wash shows, at that slide's strength, and it
   cross-fades on the same curve as the media so the two never disagree. */
[data-petlo-hero="rotate"] > .hero-overlay {
  opacity: 0;
  transition: opacity 900ms ease-in-out;
}
[data-petlo-hero="rotate"] > .hero-overlay.is-current {
  opacity: var(--ov, 1);
}

@media (prefers-reduced-motion: reduce) {
  [data-petlo-hero="rotate"] > .hero-overlay {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Brand marks

   The prototype drew a placeholder "P" as inline SVG next to the word PETLO.
   The real artwork is one image that already contains the wordmark, so the
   height is set on the element and the width follows the file's own aspect —
   never the reverse, or the lockup distorts.
   -------------------------------------------------------------------------- */
.brand-logo-img {
  display: block;
  width: auto;
  height: 48px;
  /* .logo is a flex row inside another flex row. Without this the image is a
     shrinkable flex item and collapses to zero width when the header runs out
     of space — which it does, because this lockup is 3.9:1 and wide. */
  flex: 0 0 auto;
  /* The delivered PNG has no padding of its own, so nothing to trim. */
}

/* Same reason one level up: the logo link itself must not be squeezed by the
   search bar and buttons beside it. */
.header-container > .logo,
.mobile-drawer-header > .logo {
  flex: 0 0 auto;
}

/* The drawer is narrower than the header; the lockup is 3.9:1, so it has to
   come down or it crowds the close button. */
.mobile-drawer-header .brand-logo-img {
  height: 36px;
}

.footer-logo .brand-logo-img {
  height: 44px;
}

@media (max-width: 900px) {
  .header-container .brand-logo-img {
    height: 38px;
  }
}

@media (max-width: 480px) {
  .header-container .brand-logo-img {
    height: 32px;
  }
}

/* --------------------------------------------------------------------------
   Google sign-in in the auth modal

   Reuses the design's own .btn.btn-outline.btn-block.btn-lg, so the shape,
   radius and type all come from the approved stylesheet. Only the things
   .btn-outline cannot know are set here: room for the mark, and the "or" rule
   that separates it from the email form.
   -------------------------------------------------------------------------- */
.petlo-google-btn {
  gap: 10px;                 /* .btn is already a flex row; this spaces the mark */
  margin-bottom: 4px;
  text-decoration: none;
}

.petlo-google-btn svg {
  flex: 0 0 auto;            /* the mark must never be squeezed by the label */
}

.petlo-auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 6px;
  color: var(--muted-text);
  font-size: 0.82rem;
  font-weight: 600;
}

/* The rules either side of the word, drawn with the design's own border token. */
.petlo-auth-or::before,
.petlo-auth-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--brand-sage-border);
}