/* =========================================================
   club-nav.css — top nav, inline nav-links, account dropdown,
   hamburger overlay sync. Loaded by header.php for all forum
   pages. Mirrors tenere.php's inline nav styles.
   ========================================================= */

/* ----- Top nav: fixed sticky ----- */
/* Overrides the legacy `position: absolute` rule in club.css so the nav
   behaves identically to tenere.php on every page. */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding: 22px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: padding .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.nav.is-scrolled{
  padding: 10px 56px;
  background: rgba(232,223,206,.88);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-strong);
  box-shadow: 0 6px 22px rgba(26,20,16,.07);
}
.logo img{ transition: height .25s ease; }
.nav.is-scrolled .logo img{ height: clamp(44px, 4.6vw, 64px); }

/* ----- nav--solid: always solid sand bg + dark text -----
   Used on every page that doesn't have a transparent hero photo behind
   the nav (i.e. all forum / profile / auth pages). Same shape as the
   scrolled state but applies regardless of scroll position so login,
   account, links and logo all stay legible on sand from the first frame. */
.nav.nav--solid{
  padding: 12px 56px;
  background: rgba(232,223,206,.92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-strong);
  box-shadow: 0 6px 22px rgba(26,20,16,.06);
}
.nav.nav--solid .logo img{ height: clamp(44px, 4.6vw, 64px); }
.nav.nav--solid .nav-links a{ color: var(--paper); text-shadow: none; }
.nav.nav--solid .nav-links a .num{ color: var(--muted); }
.nav.nav--solid .nav-links a:hover .num,
.nav.nav--solid .nav-links a.is-active .num{ color: var(--paper); }
.nav.nav--solid .nav-links a.is-active{ color: var(--brick); }
.nav.nav--solid .nav-account__name{ color: var(--paper); text-shadow: none; }
.nav.nav--solid .nav-account .login-link{ color: var(--paper); text-shadow: none; }
.nav.nav--solid .nav-account__caret{ color: var(--paper); }
/* Account chip stays box-less in nav--solid too — no fill, no border. */

/* ----- Inline desktop nav-links ----- */
.nav-links{
  display: none;
  list-style: none; margin: 0; padding: 0;
  align-items: center; gap: 2px;
}
.nav-links a{
  position: relative;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 14px;
  text-decoration: none;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  font-family: var(--display); font-weight: 700; font-style: italic;
  font-size: 16px; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s ease, text-shadow .25s ease;
}
.nav-links a .num{
  font-family: var(--mono); font-style: normal; font-weight: 500;
  font-size: 11px; letter-spacing: .22em;
  color: rgba(255,255,255,.7);
  transition: color .2s ease;
}
.nav-links a::after{
  content: ""; position: absolute;
  left: 14px; right: 14px; bottom: 6px; height: 2px;
  background: #FFCC00;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after,
.nav-links a.is-active::after{ transform: scaleX(1); }
.nav-links a:hover .num,
.nav-links a.is-active .num{ color: #fff; }
.nav-links a.is-active{ color: #fff; }
.nav.is-scrolled .nav-links a{ color: var(--paper); text-shadow: none; }
.nav.is-scrolled .nav-links a .num{ color: var(--muted); }
.nav.is-scrolled .nav-links a:hover .num,
.nav.is-scrolled .nav-links a.is-active .num{ color: var(--paper); }
.nav.is-scrolled .nav-links a.is-active{ color: var(--brick); }

@media (min-width: 1100px){
  .nav-links{ display: flex; }
  .nav .menu-btn{ display: none; }
}

/* ----- Right-side action group (bell + account + hamburger).
   The .nav itself uses `justify-content: space-between`, so without this
   wrapper every direct child would float apart. Wrapping keeps them as a
   single right-aligned cluster. ----- */
.nav-actions{
  display: flex; align-items: center; gap: 8px;
}

/* ----- Account block (avatar dropdown / login CTAs) ----- */
.nav-account{
  position: relative;
  display: flex;
  align-items: center; gap: 8px;
}
.nav-account .login-link{
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  padding: 9px 12px;
  transition: color .25s ease, text-shadow .25s ease;
}
.nav.is-scrolled .nav-account .login-link{ color: var(--paper); text-shadow: none; }
.nav-account .login-link:hover{ color: #FFCC00; }
.nav-account .signup-cta{
  background: #FFCC00; color: var(--paper);
  border: 1px solid var(--paper);
  padding: 9px 18px;
  font-family: var(--display); font-weight: 700; font-style: italic;
  font-size: 16px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-account .signup-cta:hover{
  background: var(--brick); color: #FFCC00; border-color: var(--brick);
}
.nav-account__btn{
  /* No box — avatar circle + name read on their own. */
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 4px 4px 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit; line-height: 1;
  transition: opacity .2s ease;
}
.nav-account__btn:hover,
.nav-account.is-open .nav-account__btn{ opacity: .85; }
.nav-account__btn:focus-visible{
  outline: 2px solid var(--brick);
  outline-offset: 4px;
}
.nav-account__avatar{
  position: relative;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-style: italic; font-weight: 800;
  font-size: 12px; line-height: 1;
  color: var(--paper-on-dark);
  overflow: visible;
}
.nav-account__avatar.has-img{ color: transparent; text-indent: -9999px; overflow: hidden; }
.nav-account__avatar.has-img .nav-account__dot{ text-indent: 0; overflow: visible; }
.nav-account__name{
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: color .25s ease, text-shadow .25s ease;
  /* Show the full handle — no max-width truncation. */
  white-space: nowrap;
}
.nav.is-scrolled .nav-account__name{ color: var(--paper); text-shadow: none; }
.nav-account__caret{
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 2px;
  opacity: .65;
  transition: transform .2s ease, opacity .2s;
  color: #fff;
}
.nav.is-scrolled .nav-account__caret{ color: var(--paper); }
.nav-account.is-open .nav-account__caret{ transform: rotate(180deg); opacity: 1; }
.nav-account__dot{
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--brick);
  color: var(--paper-on-dark);
  border: 2px solid var(--night);
  font-family: var(--mono); font-style: normal; font-weight: 600;
  font-size: 9.5px; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.nav-account__menu{
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 260px;
  background: var(--night);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 14px 32px rgba(26,20,16,.18);
  padding: 6px;
  visibility: hidden; opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  z-index: 80;
}
.nav-account.is-open .nav-account__menu{
  visibility: visible; opacity: 1; transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.nav-account__menu a{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--paper);
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  transition: background .15s, color .15s;
}
.nav-account__menu a:hover{ background: var(--brick); color: var(--paper-on-dark); }
.nav-account__menu a .num{
  font-family: var(--mono); font-style: normal; font-weight: 500;
  font-size: 9px; letter-spacing: .22em; color: var(--muted);
  min-width: 22px; text-align: right;
}
.nav-account__menu a:hover .num{ color: rgba(255,255,255,.7); }
.nav-account__menu .div{ height: 1px; background: var(--rule); margin: 4px 0; }
.nav-account__menu .badge{
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px;
  padding: 0 6px;
  background: var(--brick);
  color: var(--paper-on-dark);
  font-family: var(--mono); font-style: normal;
  font-size: 10px; font-weight: 600;
  border-radius: 9px;
}
.nav-account__menu a:hover .badge{ background: var(--paper); color: #FFCC00; }

/* Push notifications toggle inside the account dropdown.
   Reuses the same shape as a menu link so the row reads identically. */
.nav-account__menu .nav-push-toggle{
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--paper);
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  transition: background .15s, color .15s;
}
.nav-account__menu .nav-push-toggle:hover:not(:disabled){
  background: var(--brick); color: var(--paper-on-dark);
}
.nav-account__menu .nav-push-toggle:disabled{ opacity: .55; cursor: not-allowed; }
.nav-account__menu .nav-push-toggle .num{
  font-family: var(--mono); font-style: normal; font-weight: 500;
  font-size: 9px; letter-spacing: .22em; color: var(--muted);
  min-width: 22px; text-align: right;
}
.nav-account__menu .nav-push-toggle:hover:not(:disabled) .num{ color: rgba(255,255,255,.7); }
.nav-account__menu .nav-push-toggle .nav-push-state{
  margin-left: auto;
  font-family: var(--mono); font-style: normal;
  font-size: 14px;
  color: var(--brick);
}
.nav-account__menu .nav-push-toggle[data-state="on"]  .nav-push-state{ color: #2ea043; }
.nav-account__menu .nav-push-toggle[data-state="off"] .nav-push-state{ color: var(--muted); }
.nav-account__menu .nav-push-toggle[data-state="blocked"] .nav-push-state{ color: var(--brick); }
.nav-account__menu .nav-push-toggle:hover:not(:disabled) .nav-push-state{ color: var(--paper-on-dark) !important; }

/* ----- Mobile compact mode (< 1100px) -----
   Same shape as desktop (avatar + @username) so the chip looks uniform
   across viewports. Only the caret + signup-cta are hidden to save space. */
@media (max-width: 1099px){
  .nav-account__caret{ display: none; }
  .nav-account .signup-cta{ display: none; }
  .nav-account .login-link{
    font-size: 12px; letter-spacing: .14em; padding: 8px 10px;
  }
  .nav-account__btn{ padding: 3px 6px 3px 3px; gap: 8px; }
  .nav-account__avatar{ width: 28px; height: 28px; font-size: 11px; }
  .nav-account__name{
    font-size: 12px; letter-spacing: .08em;
    /* Full username on tablet too — no truncation. */
  }
  /* shift the dropdown so its right edge stays inside the viewport */
  .nav-account__menu{ right: -8px; min-width: 240px; }
}
@media (max-width: 480px){
  /* On very narrow phones we hide the name entirely rather than ellipsing
     it — cleaner than a truncated handle that nobody can read. The avatar
     circle still identifies the user. */
  .nav-account__name{ display: none; }
}

/* ----- Post / thread delete button (hilo.php) ----- */
.post-actions{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
  display: flex; justify-content: flex-end;
}
.post-actions form{ margin: 0; }
.post-delete{
  background: none;
  border: 1px solid var(--rule);
  color: var(--muted);
  padding: 6px 12px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.post-delete:hover{
  border-color: #C8102E;
  color: #C8102E;
  background: rgba(200,16,46,.05);
}

/* =========================================================
   Notification bell + dropdown + toast stack
   ========================================================= */
.nav-bell{
  position: relative;
  display: flex; align-items: center;
}
.nav-bell__btn{
  /* No box — outline glyph only. The bell icon (rendered via .nav-bell__icon)
     stays visible against either the hero photo or the cream/sand nav-solid
     state thanks to the existing color/shadow rules below. */
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit; line-height: 1;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  transition: color .2s ease, transform .15s ease;
}
.nav.is-scrolled .nav-bell__btn,
.nav.nav--solid  .nav-bell__btn{
  color: var(--paper);
  text-shadow: none;
}
.nav-bell__btn:hover,
.nav-bell.is-open .nav-bell__btn{
  color: var(--brick);
}
.nav-bell__btn:focus-visible{
  outline: 2px solid var(--brick);
  outline-offset: 4px;
}
.nav-bell__icon{ font-size: 18px; line-height: 1; }
.nav-bell__count{
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  /* Brand: yellow chip with navy text — matches Sonauto race livery. */
  background: #FFCC00; color: var(--brick);
  border: 2px solid var(--night);
  font-family: var(--mono); font-style: normal; font-weight: 700;
  font-size: 9.5px; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none;
}
/* Explicit override: `display: inline-flex` above wins over the UA stylesheet's
   `[hidden]{ display: none }`, so the chip would still render at zero unless
   we re-assert display:none. JS sets `bellCount.hidden = true` when there are
   no unread notifications, and the PHP fallback emits `hidden` when count = 0. */
.nav-bell__count[hidden]{ display: none; }

.nav-bell__panel{
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 380px; max-width: calc(100vw - 24px);
  background: var(--night);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 14px 32px rgba(26,20,16,.18);
  visibility: hidden; opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  z-index: 80;
  max-height: min(560px, 80vh); display: flex; flex-direction: column;
}
.nav-bell.is-open .nav-bell__panel{
  visibility: visible; opacity: 1; transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.nav-bell__head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}
.nav-bell__title{ color: var(--paper); }
.nav-bell__ack-all{ margin: 0; }
.nav-bell__ack-all button{
  background: none; border: 0;
  color: var(--brick);
  font: inherit; cursor: pointer;
  padding: 0; letter-spacing: .14em;
}
.nav-bell__ack-all button:hover{ text-decoration: underline; }

.nav-bell__list{
  overflow-y: auto;
  flex: 1; min-height: 0;
}
.nav-bell__empty{
  margin: 0; padding: 22px 14px;
  text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
/* Group section header (Sin leer / Anteriores) */
.nav-bell__group-head{
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: var(--night-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}
.nav-bell__group-head .lbl{ color: var(--paper); }
.nav-bell__group-head .cnt{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px;
  background: var(--rule); color: var(--paper);
  border-radius: 8px;
  font-size: 9px; letter-spacing: 0;
}
/* Highlight the count chip when it's the unread group */
.nav-bell__group-head + .nav-bell-row.is-unread,
.nav-bell__group-head:has(+ .nav-bell-row.is-unread) .cnt{
  /* :has() not always available; fall back rule below */
}
.nav-bell__group-head .lbl + .cnt{
  background: rgba(0,58,143,.18); color: var(--brick);
}

.nav-bell-row{
  position: relative;
  display: grid; grid-template-columns: 32px 1fr;
  gap: 12px; align-items: start;
  padding: 14px 16px 14px 16px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--paper);
  background: var(--night);
  transition: background .15s;
}
.nav-bell-row:last-child{ border-bottom: 0; }

/* ===== UNREAD (new): high-emphasis treatment ===== */
.nav-bell-row.is-unread{
  background: rgba(0,58,143,.07);
  border-left: 3px solid #FFCC00;
  padding-left: 13px;
}
.nav-bell-row.is-unread:hover{ background: rgba(0,58,143,.14); }
.nav-bell-row.is-unread .nav-bell-row__glyph{
  /* Yellow disc + navy glyph for unread — pops at a glance. */
  background: #FFCC00; color: var(--brick);
  box-shadow: 0 0 0 3px rgba(255,204,0,.18);
}
.nav-bell-row.is-unread .nav-bell-row__title{
  font-weight: 700;
  color: var(--paper);
}
.nav-bell-row.is-unread .nav-bell-row__time{
  color: var(--brick); font-weight: 600;
}
.nav-bell-row.is-unread::after{
  content: ""; position: absolute; right: 14px; top: 18px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #FFCC00;
  box-shadow: 0 0 0 2px rgba(255,204,0,.3);
}

/* ===== READ (seen): muted, low-emphasis treatment ===== */
.nav-bell-row.is-read{
  background: var(--night);
  opacity: .72;
  border-left: 3px solid transparent;
  padding-left: 13px;
}
.nav-bell-row.is-read:hover{ opacity: 1; background: var(--night-2); }
.nav-bell-row.is-read .nav-bell-row__glyph{
  /* Muted: hollow navy outline instead of solid yellow. */
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--rule-strong);
  box-shadow: none;
}
.nav-bell-row.is-read .nav-bell-row__title{
  font-weight: 400;
  color: var(--paper-soft);
}

/* ===== Common row internals ===== */
.nav-bell-row__glyph{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brick); color: #FFCC00;
  font-family: var(--mono); font-weight: 700; font-size: 14px;
  line-height: 1;
}
.nav-bell-row__body{ display: block; min-width: 0; padding-right: 14px; }
.nav-bell-row__title{
  display: block;
  font-size: 13px; line-height: 1.4;
  color: var(--paper);
  margin-bottom: 3px;
  word-break: break-word;
}
.nav-bell-row__title strong{ font-weight: 700; }
.nav-bell-row__time{
  display: block;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

@media (max-width: 1099px){
  .nav-bell__btn{ width: 34px; height: 34px; }
  .nav-bell__icon{ font-size: 16px; }
  /* On mobile, anchor the panel to the viewport instead of the bell button.
     This guarantees it fits between the left and right edges with consistent
     12 px gutters, regardless of where the bell sits inside the nav. */
  .nav-bell__panel{
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 80px);
  }
}
@media (max-width: 480px){
  /* Slimmer nav on tiny phones — pin the panel a bit higher. */
  .nav-bell__panel{ top: 58px; }
}

/* =========================================================
   Toast stack — transient banners for new notifications.
   Shown ONCE per page load via localStorage gating in JS.
   ========================================================= */
.toast-stack{
  position: fixed; bottom: 18px; right: 18px;
  z-index: 200;
  display: flex; flex-direction: column-reverse; gap: 10px;
  pointer-events: none;
}
.toast{
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 12px; align-items: center;
  width: 360px; max-width: calc(100vw - 36px);
  padding: 14px 16px;
  /* Brand pair: navy bar with yellow accents — matches the scroll-progress
     gradient and the Sonauto race livery used across the site. */
  background: linear-gradient(135deg, var(--brick) 0%, #002a6b 100%);
  color: var(--paper-on-dark);
  border-top: 3px solid #FFCC00;
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  text-decoration: none;
  pointer-events: auto;
  animation: toast-in .35s cubic-bezier(.2,.7,.2,1) both;
}
.toast.is-out{ animation: toast-out .3s ease both; }
.toast__glyph{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  /* Yellow disc, navy glyph — flips the toast palette for emphasis. */
  background: #FFCC00; color: var(--brick);
  font-family: var(--mono); font-weight: 800; font-size: 15px;
  line-height: 1;
  box-shadow: 0 0 0 3px rgba(255,204,0,.18);
}
.toast__body{ display: block; min-width: 0; }
.toast__title{
  display: block;
  font-size: 13.5px; line-height: 1.4;
  color: var(--paper-on-dark);
  margin-bottom: 3px;
  word-break: break-word;
}
.toast__title strong{ font-weight: 800; color: #FFCC00; }
.toast__time{
  display: block;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,204,0,.75);
}
.toast__close{
  background: none; border: 0;
  color: rgba(245,237,224,.55);
  font-size: 22px; line-height: 1;
  cursor: pointer; padding: 4px 6px;
  align-self: start;
  font-family: inherit;
}
.toast__close:hover{ color: #FFCC00; }

@keyframes toast-in{
  from{ opacity: 0; transform: translateX(20px); }
  to  { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out{
  from{ opacity: 1; transform: translateX(0); }
  to  { opacity: 0; transform: translateX(20px); }
}
@media (prefers-reduced-motion: reduce){
  .toast{ animation: none; }
  .toast.is-out{ animation: none; }
}

/* =========================================================
   Like / upvote button — reddit-style on threads + replies.
   ========================================================= */
.post-toolbar{
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
}
.post-toolbar-end{ margin-left: auto; }
.post-toolbar form{ margin: 0; }

.like-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 24px;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
  user-select: none;
}
.like-btn:hover:not(:disabled){
  border-color: var(--brick);
  color: var(--brick);
  background: rgba(0,58,143,.05);
}
.like-btn:disabled{
  opacity: .55; cursor: not-allowed;
}
.like-btn.is-liked{
  background: var(--brick);
  border-color: var(--brick);
  color: #FFCC00;
  box-shadow: 0 2px 10px rgba(0,58,143,.18);
}
.like-btn.is-liked:hover{
  background: #002a6b;
  border-color: #002a6b;
}
.like-btn .like-arrow{
  font-size: 11px; line-height: 1;
  transition: transform .2s ease;
}
.like-btn.is-liked .like-arrow{ color: #FFCC00; transform: translateY(-1px); }
.like-btn .like-count{
  font-weight: 700;
  min-width: 10px;
  font-variant-numeric: tabular-nums;
}
.like-btn.is-liked .like-count{ color: #FFCC00; }
.like-btn .like-label{
  font-size: 9.5px; letter-spacing: .2em; opacity: .8;
}

/* Read-only like pill for thread overviews (foro.php / tenere.php homepage feed).
   Reuses the existing .r-pill styling and adds the brand pair when liked. */
.r-pill.r-like{
  border-color: rgba(0,58,143,.35);
  color: var(--brick);
  font-weight: 700;
}
.r-pill.r-like.is-liked{
  background: var(--brick);
  border-color: var(--brick);
  color: #FFCC00;
}

/* "Pop" feedback when the user just toggled the like on. */
.like-btn.just-liked{ animation: like-pop .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes like-pop{
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .like-btn.just-liked{ animation: none; }
  .like-btn .like-arrow{ transition: none; }
}

/* =========================================================
   hilo.php — pull the section watermark up behind the title.
   Default `.watermark` (in club.css) anchors bottom-right at 240px.
   On the topic-page hero the strip beside/behind the breadcrumb +
   title is empty, so we move the watermark there as a faint
   background mark instead of letting it dominate the bottom corner.
   ========================================================= */
.section.hilo-hero{ position: relative; }
.section.hilo-hero > .watermark{
  position: absolute;
  top: 80px; bottom: auto;
  right: 24px;  left: auto;
  font-size: clamp(120px, 18vw, 220px);
  line-height: .85;
  letter-spacing: .015em;
  color: rgba(26,20,16,.045);
  z-index: 0;
  text-align: right;
  white-space: nowrap; max-width: 100%; overflow: hidden;
}
.section.hilo-hero > *:not(.watermark){ position: relative; z-index: 1; }

@media (max-width: 760px){
  .section.hilo-hero > .watermark{
    top: 70px; right: auto; left: -8px;
    font-size: clamp(60px, 18vw, 110px);
    text-align: left;
  }
}