/**
 * Triangledots — shared cookie consent banner.
 * Enqueued on every page alongside mobile-nav.css (see
 * triangledots_enqueue_assets() in functions.php), so it uses its own
 * copy of the brand color variables rather than relying on whichever
 * per-page stylesheet happens to also be loaded.
 */
:root{
  --cc-pink:#fe4060;--cc-pink-h:#d93050;
  --cc-navy:#002d4f;
  --cc-br:#E5E7EB;--cc-brs:#D1D5DB;
  --cc-txt2:#374151;
  --cc-fb:'Inter',sans-serif;--cc-fd:'Sora',sans-serif;
}

.cookie-banner{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:9999;
  background:#fff;
  border-top:1px solid var(--cc-br);
  box-shadow:0 -8px 32px rgba(0,45,79,.12);
  padding:1.1rem 1.5rem;
  transform:translateY(120%);
  transition:transform .35s ease;
}
.cookie-banner.is-visible{transform:translateY(0)}
/* Hidden by default via both transform (above) and display, so there's
   no flash of the banner before assets/js/cookie-consent.js decides
   whether a stored choice already exists. */
.cookie-banner{display:none}
.cookie-banner.is-visible{display:block}

.cookie-banner-in{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  flex-wrap:wrap;
}
.cookie-banner-txt{flex:1;min-width:240px}
.cookie-banner-txt p{
  font-family:var(--cc-fb);
  font-size:13.5px;line-height:1.6;
  color:var(--cc-txt2);
  margin:0;
}
.cookie-banner-txt a{color:var(--cc-pink);font-weight:600;text-decoration:none}
.cookie-banner-txt a:hover{text-decoration:underline}

.cookie-banner-acts{display:flex;align-items:center;gap:10px;flex-shrink:0}
.btn-cookie-reject,
.btn-cookie-accept{
  font-family:var(--cc-fb);
  font-size:13.5px;font-weight:600;
  padding:10px 22px;
  border-radius:8px;
  cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s;
  white-space:nowrap;
}
.btn-cookie-reject{
  background:none;
  border:1.5px solid var(--cc-brs);
  color:var(--cc-navy);
}
.btn-cookie-reject:hover{border-color:var(--cc-navy);background:#f4f6f8}
.btn-cookie-accept{
  background:var(--cc-pink);
  border:1.5px solid var(--cc-pink);
  color:#fff;
}
.btn-cookie-accept:hover{background:var(--cc-pink-h);border-color:var(--cc-pink-h);transform:translateY(-1px)}

@media(max-width:600px){
  .cookie-banner{padding:1rem 1.1rem}
  .cookie-banner-in{flex-direction:column;align-items:stretch;gap:1rem}
  .cookie-banner-acts{justify-content:stretch}
  .btn-cookie-reject,.btn-cookie-accept{flex:1;text-align:center}
}