/* ==========================================================================
   Brands band, contact section and footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brands — tilted red band with two logo rows moving in opposite directions.
   Each row holds its logos twice so js can loop it seamlessly.
   -------------------------------------------------------------------------- */
.brands {
  position: relative;
  z-index: 3;
  overflow: hidden;
  margin: -30px -4vw 0;
  padding-block: 34px;
  color: var(--color-paper);
  background: var(--color-red);
  transform: rotate(-2.2deg);
  box-shadow: 0 12px 0 var(--color-ink);
}
.brands__label { margin: 0 0 18px; padding-left: calc(var(--gutter) + calc(4 * var(--vw))); color: var(--color-paper); opacity: .9; }
.brands__row { display: flex; gap: 16px; width: max-content; margin: 0; padding: 6px 0; list-style: none; will-change: transform; }
.brands__row + .brands__row { margin-top: 14px; }

/* Paper label holding one logo. Logo sizes are pre-balanced by visual area
   (see tools/process_brand_logos.py) and set through width/height attributes. */
.brand-card {
  flex: none;
  display: grid;
  place-items: center;
  width: 210px;
  height: 96px;
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  box-shadow: 4px 4px 0 var(--color-ink);
}
.brand-card:nth-child(odd) { rotate: -1.5deg; }
.brand-card:nth-child(3n)  { rotate: 1.2deg; }
.brand-card img { display: block; }
/* Text fallback for brands without a logo file yet. */
.brand-card--text span { font-family: var(--font-display); font-weight: 900; font-size: 40px; letter-spacing: .04em; color: #1F5AA6; }
@media (max-width: 720px) {
  .brand-card { width: 160px; height: 76px; }
  .brand-card img { scale: .8; }
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact { position: relative; overflow: hidden; padding: 110px var(--gutter) 90px; /* bottom: the floating WhatsApp button parks here (js/extras.js → dockWhatsapp) */ color: var(--color-straw); background: var(--color-pasture); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; gap: clamp(30px, calc(5 * var(--vw)), 90px); }
.contact-grid h2 { font-size: clamp(70px, calc(11 * var(--vw)), 190px); color: var(--color-paper); }
.contact-grid h2 .highlight { font-size: .7em; }

/* Hand-drawn map card linking to Google Maps. */
.map-card {
  position: relative;
  display: block;
  margin-top: 40px;
  aspect-ratio: 600 / 230;
  overflow: hidden;
  color: var(--color-ink);
  text-decoration: none;
  background: var(--color-paper);
  border: 3px solid var(--color-ink);
  box-shadow: 8px 8px 0 var(--color-red);
  transform: rotate(-1deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.map-card:hover, .map-card:focus-visible { transform: rotate(0) translate(-2px, -2px); box-shadow: 12px 12px 0 var(--color-red); }
.map-card__map { display: block; width: 100%; height: 100%; }
.map-card__street--narrow { display: none; }
.map-card__street { font: 700 12px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; fill: var(--color-ink); dominant-baseline: middle; }
/* The pin sits where the avenue passes the middle of the card. */
.map-card__pin {
  position: absolute;
  left: 50%;
  top: 51%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  animation: map-pin-bob 2.4s ease-in-out infinite;
}
.map-card__pin svg { width: 34px; height: auto; filter: drop-shadow(2px 3px 0 rgba(19, 23, 17, .35)); }
.map-card__pin b {
  order: -1;
  margin-bottom: 4px;
  padding: 3px 8px 2px;
  font: 800 14px/1 var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-paper);
  background: var(--color-ink);
}
@keyframes map-pin-bob { 50% { transform: translate(-50%, calc(-100% - 6px)); } }
.map-card__cta {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 7px 12px 5px;
  font: 800 15px/1 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-paper);
  background: var(--color-red);
  border: 2px solid var(--color-ink);
  box-shadow: 3px 3px 0 var(--color-ink);
}
@media (max-width: 600px) {
  .map-card { aspect-ratio: 2 / 1; }
  /* The sides of the drawing are cropped here: the street name moves right of the pin. */
  .map-card__street--wide { display: none; }
  .map-card__street--narrow { display: inline; }
  .map-card__cta { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .map-card__pin { animation: none; } }

/* Right column: store label, then the goat cameo under it. */
.contact-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }

/* Small round window where the goat keeps chewing on its own. */
.goat-cameo { display: flex; align-items: center; gap: 22px; }
.goat-cameo__frame {
  flex: none;
  width: clamp(130px, calc(14 * var(--vw)), 190px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 6px solid var(--color-red);
  border-radius: 50%;
  background: var(--color-hero-fallback) url("../assets/frames/goat/g001.webp") center 30% / 180% auto no-repeat;
}
.goat-cameo__frame canvas { width: 100%; height: 100%; }
.goat-cameo p { max-width: 30ch; margin: 0; font-size: 24px; }

.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 40px; }
/* Phone numbers big enough to read (and tap) at a glance. */
/* The two numbers sit side by side (sizes follow the real width of the display
   font); if a fallback font is too wide, the second one drops to a new line. */
.phone-list { display: flex; flex-wrap: wrap; gap: 12px clamp(16px, calc(3 * var(--vw)), 40px); margin: 34px 0 0; }
.phone-list dt { margin-bottom: 4px; color: var(--color-sprout); }
.phone-list dd { margin: 0; }
.phone {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, calc(2.5 * var(--vw)), 36px);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--color-paper);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Instagram / Facebook as plastic livestock ear tags: a wide body with the
   app logo moulded in and the round stud at one end, hanging a little crooked
   under the goat. Colours are the apps' own, as plastic. */
.social-tags { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: -14px 0 0; padding: 0 0 0 6px; list-style: none; }
.plastic-tag {
  --tag: #1877F2;
  --tilt: 0deg;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transform: rotate(var(--tilt));
  transform-origin: 90% 50%; /* swings around the stud */
  transition: transform .5s var(--ease-spring);
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .3));
}
.plastic-tag--instagram { --tag: #DD2A7B; --tag-fill: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 50%, #6228D7 100%); }
.plastic-tag--facebook  { --tag: #1877F2; --tag-fill: linear-gradient(#1877F2, #1877F2); }
.plastic-tag:hover, .plastic-tag:focus-visible { transform: rotate(calc(var(--tilt) * -1.5)); }
.plastic-tag__body {
  display: grid;
  place-items: center;
  width: 92px;
  height: 58px;
  background:
    linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .14)),
    var(--tag-fill);
  border-radius: 14px 7px 7px 14px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), inset 0 2px 0 rgba(255, 255, 255, .25);
}
/* Logo slightly sunk into the plastic. */
.plastic-tag__body svg { width: 32px; height: 32px; fill: #fff; filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .25)) drop-shadow(0 1px 0 rgba(255, 255, 255, .25)); }
/* Round stud with the hole where the tag pierces the ear. */
.plastic-tag__stud {
  flex: none;
  width: 42px;
  height: 42px;
  margin-left: -5px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(19, 23, 17, .6) 0 5px, rgba(0, 0, 0, .2) 6px 10px, transparent 11px),
    linear-gradient(rgba(255, 255, 255, .3), rgba(0, 0, 0, .14)),
    var(--tag);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .1), inset 2px 2px 0 rgba(255, 255, 255, .3);
}
.plastic-tag--instagram .plastic-tag__stud { background:
    radial-gradient(circle, rgba(19, 23, 17, .6) 0 5px, rgba(0, 0, 0, .2) 6px 10px, transparent 11px),
    linear-gradient(rgba(255, 255, 255, .3), rgba(0, 0, 0, .14)),
    #6228D7; }
.plastic-tag:focus-visible .plastic-tag__body { outline: 3px solid var(--color-paper); outline-offset: 3px; }
@media (max-width: 420px) {
  .plastic-tag__body { width: 80px; height: 52px; }
  .plastic-tag__body svg { width: 28px; height: 28px; }
  .plastic-tag__stud { width: 38px; height: 38px; }
}
/* Desktop: there's spare room beside and under the goat, so the tags grow
   without pushing anything (sized to stay inside the left column's height). */
@media (min-width: 1360px) {
  .social-tags { gap: 14px 30px; }
  .plastic-tag__body { width: 126px; height: 78px; border-radius: 18px 9px 9px 18px; }
  .plastic-tag__body svg { width: 44px; height: 44px; }
  .plastic-tag__stud { width: 56px; height: 56px; margin-left: -7px;
    background:
      radial-gradient(circle, rgba(19, 23, 17, .6) 0 7px, rgba(0, 0, 0, .2) 8px 13px, transparent 14px),
      linear-gradient(rgba(255, 255, 255, .3), rgba(0, 0, 0, .14)),
      var(--tag); }
  .plastic-tag--instagram .plastic-tag__stud { background:
      radial-gradient(circle, rgba(19, 23, 17, .6) 0 7px, rgba(0, 0, 0, .2) 8px 13px, transparent 14px),
      linear-gradient(rgba(255, 255, 255, .3), rgba(0, 0, 0, .14)),
      #6228D7; }
}
@media (prefers-reduced-motion: reduce) { .plastic-tag { transition: none; } }
@media (max-width: 900px) { .phone { font-size: clamp(20px, 6.8vw, 34px); } }
.phone:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--color-red); text-underline-offset: 6px; }

/* Store info styled as a Brazilian "Informação nutricional" label. */
.store-label {
  padding: 14px 16px 18px;
  font-family: var(--font-body);
  font-style: normal;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 3px solid var(--color-ink);
  box-shadow: 10px 10px 0 var(--color-red);
  transform: rotate(1.2deg);
}
.store-label h3 {
  margin: 0;
  padding-bottom: 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 42px;
  line-height: .9;
  text-transform: uppercase;
  border-bottom: 10px solid var(--color-ink);
}
.store-label__serving { padding: 6px 0; font-size: 14px; border-bottom: 4px solid var(--color-ink); }
.store-label table { width: 100%; border-collapse: collapse; font-size: 15px; }
.store-label th { padding: 7px 8px 7px 0; text-align: left; vertical-align: top; font-weight: 700; white-space: nowrap; }
.store-label td { padding: 7px 0; text-align: right; font-variant-numeric: tabular-nums; }

.store-label td a { text-decoration: none; }
.store-label tr { border-bottom: 1px solid rgba(19, 23, 17, .35); }
.store-label tr.is-thick { border-bottom: 4px solid var(--color-ink); }
.store-label small { display: block; margin-top: 10px; font-size: 12px; line-height: 1.35; }

.storefront { margin-top: 80px; }
/* The storefront is shown whole (no parallax, no side crop). If the frame
   ever needs to be shorter, only the bottom of the photo gets trimmed. */
.storefront figcaption { max-width: calc(100% - 28px); }
@media (max-width: 600px) { .storefront figcaption { font-size: 17px; } }
.storefront img { position: static; width: 100%; height: auto; max-height: 70vh; object-fit: cover; object-position: 50% 0; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 30px;
  position: relative; /* anchors the credit popovers on phones */
  /* Outside <main> since the audit (contentinfo landmark): it paints its own
     green and draws the thin divider inside the gutters. */
  padding: 26px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 36px);
  color: var(--color-straw);
  background:
    linear-gradient(rgba(237, 227, 201, .3), rgba(237, 227, 201, .3)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat,
    var(--color-pasture);
}
.site-footer img { width: 84px; }
.site-footer .mono { opacity: .75; }

/* Author credit: 3D figure head + "by Bruno Villas Boas", opens a links menu. */
/* Two lines next to the face: the name on top, "inspiração" right under it, both right-aligned. */
.credit { display: flex; flex-direction: column; align-items: flex-end; }
.credit__item { position: relative; }
/* Tuck "inspiração" under the name, beside the lower half of the face. */
.credit__item + .credit__item { margin-top: -30px; }
.credit__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.credit__toggle .mono { margin-bottom: 18px; font-size: 11px; opacity: .75; transition: opacity .2s; } /* lifts the name to the upper half of the face */
.site-footer .credit__head { width: 55px; height: auto; transform-origin: 50% 90%; transition: transform .3s var(--ease-spring); }
/* On hover the head nods along to the music in the headphones. */
.credit__toggle:hover .credit__head,
.credit__toggle[aria-expanded="true"] .credit__head { animation: credit-nod .6s ease-in-out infinite alternate; }
.credit__toggle:hover .mono,
.credit__toggle[aria-expanded="true"] .mono { opacity: 1; }
@keyframes credit-nod {
  from { transform: rotate(-6deg) translateY(0); }
  to   { transform: rotate(5deg) translateY(-2px); }
}

/* Links menu: paper card popping up above the button. */
.credit__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 80; /* above the floating WhatsApp button (60) */
  display: grid;
  gap: 2px;
  min-width: 190px;
  margin: 0;
  padding: 8px;
  list-style: none;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  box-shadow: 5px 5px 0 var(--color-red);
  transform: rotate(-1.5deg);
  transform-origin: 80% 100%;
  animation: credit-pop .22s var(--ease-spring);
}
.credit__menu[hidden] { display: none; }
.credit__menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
}
.credit__menu a:hover, .credit__menu a:focus-visible { background: var(--color-straw); }
.credit__menu svg { width: 22px; height: 22px; flex: none; fill: var(--color-pasture); }
@keyframes credit-pop {
  from { opacity: 0; transform: rotate(-1.5deg) translateY(8px) scale(.94); }
  to   { opacity: 1; transform: rotate(-1.5deg); }
}
@media (max-width: 600px) { .credit__menu { right: auto; left: 0; transform-origin: 20% 100%; } }
@media (prefers-reduced-motion: reduce) {
  .credit__toggle .credit__head { animation: none !important; }
  .credit__menu { animation: none; }
}


/* "Inspiração": small lamp link under the credit that opens a note about the design. */
.inspiration__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px; /* right edge lines up with the name above */
  padding: 2px 0;
  font-size: 11px;
  color: var(--color-straw);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .25s, text-shadow .25s;
}
.inspiration__bulb { width: 18px; height: 18px; overflow: visible; transition: transform .3s var(--ease-spring); }
.inspiration__bulb path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* The bulb is always lit and breathes softly, so the link gets noticed… */
.inspiration__bulb .bulb-glass {
  fill: #F2C94C;
  stroke: #F2C94C;
  filter: drop-shadow(0 0 5px rgba(242, 201, 76, .75));
  animation: bulb-breathe 2.8s ease-in-out infinite;
}
@keyframes bulb-breathe { 50% { filter: drop-shadow(0 0 9px rgba(242, 201, 76, .95)); } }
/* …and blazes when hovered or open. */
.inspiration__toggle:hover,
.inspiration__toggle:focus-visible,
.inspiration__toggle[aria-expanded="true"] { color: #F7DC85; text-shadow: 0 0 8px rgba(242, 201, 76, .8); }
.inspiration__toggle:hover .inspiration__bulb,
.inspiration__toggle:focus-visible .inspiration__bulb,
.inspiration__toggle[aria-expanded="true"] .inspiration__bulb { transform: scale(1.2) rotate(-8deg); }
.inspiration__toggle:hover .bulb-glass,
.inspiration__toggle:focus-visible .bulb-glass,
.inspiration__toggle[aria-expanded="true"] .bulb-glass {
  fill: #FFE58A;
  stroke: #FFE58A;
  animation: none;
  filter: drop-shadow(0 0 6px #FFE58A) drop-shadow(0 0 16px rgba(242, 201, 76, .95)) drop-shadow(0 0 28px rgba(242, 201, 76, .6));
}
@media (prefers-reduced-motion: reduce) { .inspiration__bulb .bulb-glass { animation: none; } }

.inspiration__note {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 80; /* above the floating WhatsApp button (60) */
  width: min(420px, calc(100vw - 2 * var(--gutter)));
  padding: 20px 22px 16px;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  box-shadow: 6px 6px 0 var(--color-red);
  transform: rotate(-1deg);
  transform-origin: 80% 100%;
  animation: credit-pop .22s var(--ease-spring);
}
.inspiration__note[hidden] { display: none; }
.inspiration__note .mono { display: block; margin-bottom: 10px; color: var(--color-red); }
.inspiration__note p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.inspiration__note .hand { display: block; text-align: right; font-size: 30px; color: #2D4FA0; }
/* On phones and tablets the note opens as a sheet pinned to the bottom of the
   screen, so it always fits whatever the position of the lamp; long text scrolls. */
@media (max-width: 900px) {
  .inspiration__note {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    z-index: 80; /* above the floating WhatsApp button */
    width: auto;
    max-width: 520px;
    max-height: calc(100dvh - 110px);
    margin-inline: auto;
    overflow-y: auto;
    transform: none;
    animation-name: note-pop;
  }
}
@keyframes note-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .inspiration__note { animation: none; } }

/* Phones: the seal sits beside the store line, and "inspiração" beside the
   name, so the footer takes two short rows instead of four. */
@media (max-width: 600px) {
  .site-footer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 14px; }
  .site-footer > img { width: 60px; }
  .site-footer > .mono { font-size: 11px; line-height: 1.6; }
  .credit { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .credit__item + .credit__item { margin-top: 0; }
  .credit__toggle .mono { margin-bottom: 0; }
  .inspiration__toggle { margin-right: 0; }
  .credit__toggle .mono, .inspiration__toggle { white-space: nowrap; font-size: 10px; letter-spacing: .06em; }
  .credit__toggle { gap: 8px; padding-right: 0; }
}