/* =========================================================
   dumaguete.uk — assets/css/promo.css

   A post-it in the same yellow as the wordmark note, but this
   one stays. It sits at the right edge on the today-line's row
   showing only the word "Promo", slides out to its full title,
   slides back, and repeats — so a reader who missed it the
   first time gets another chance without the page ever moving.

   The tab is positioned against .hero, which is the nearest
   positioned ancestor; nothing else in the page shifts when it
   opens, because the tab is out of flow and the card that opens
   under it is out of flow too.
   ========================================================= */

.promo-tab {
  box-sizing: border-box;
  position: absolute;
  /* Clear of the search bar above — the tab must never look
     stuck to it. */
  top: calc(100% + 6px);
  right: 0;
  z-index: 4;
  display: block;
  margin: 0;
  padding: 3px 8px;
  border: 0;
  max-width: calc(100vw - 24px);
  overflow: hidden;
  cursor: pointer;
  font-family: var(--font-body, inherit);
  font-size: 0.62rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: left;
  color: #4A3D00;
  background: linear-gradient(180deg, #FFF48C 0%, #FFEB57 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  transform: rotate(-1.6deg);
  transform-origin: 100% 0;
  /* The slide is the width changing, so the text beyond the
     collapsed width is simply clipped rather than reflowed —
     no jump when it opens, no jump when it closes. */
  transition: width 0.5s var(--ease), opacity 0.5s var(--ease);
}
/* Folded away, the tab is a hint, not a block: the line it sits on
   stays readable through it. Slid out, it is the thing being read. */
.promo-tab[aria-expanded="false"] { opacity: 0.6; }
.promo-tab:hover { text-decoration: none; }
.promo-tab__label { display: block; }

/* The card. Hangs under the tab, out of flow, so opening it
   never pushes the page down. */
.promo-card[hidden] { display: none; }
.promo-card {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 5;
  display: block;
  width: min(320px, calc(100vw - 24px));
  padding: 12px 14px;
  font-family: var(--font-body, inherit);
  font-size: 0.82rem;
  line-height: 1.5;
  color: #4A3D00;
  background: linear-gradient(180deg, #FFF48C 0%, #FFEB57 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  transform: rotate(-0.8deg);
  transform-origin: 100% 0;
}
.promo-card h3 {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}
.promo-card p { margin: 0 0 8px; }
.promo-card p:last-child { margin-bottom: 0; }
.promo-card a { color: #4A3D00; text-decoration: underline; }
.promo-card__input {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 7px 9px;
  border: 1px solid rgba(74, 61, 0, 0.35);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.65);
  font: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: #4A3D00;
}
.promo-card__input:focus {
  outline: none;
  border-color: #4A3D00;
  background: #fff;
}
.promo-card__btn {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 4px;
  background: #4A3D00;
  color: #FFF48C;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.promo-card__btn:disabled { opacity: 0.5; cursor: default; }
.promo-card__note[hidden] { display: none; }
.promo-card__note {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
}
.promo-card__close {
  position: absolute;
  top: 4px;
  right: 6px;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: #4A3D00;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}
.promo-card__close:hover { opacity: 1; }

/* Phones: the today-line runs close to the right edge, so the
   opened tab would sit on top of its last words. Dropping the
   tab below that line keeps both readable, and the card follows
   it down. */
@media (max-width: 560px) {
  .promo-tab { top: calc(100% + 28px); }
  .promo-card { top: calc(100% + 54px); }
}

/* Someone who asked for less movement gets the tab open and
   still, rather than a loop running in the corner of their eye. */
@media (prefers-reduced-motion: reduce) {
  .promo-tab { transition: none; }
}