/* ===== Cookie UI ===== */
:root{
  --cc-z: 3000;
  --cc-bg: #ffffff;
  --cc-text: #0f2946;
  --cc-muted: #64748b;
  --cc-border: #e5e7eb;
  --cc-primary: #104879;
  --cc-shadow: 0 12px 30px rgba(0,0,0,.15);
  --cc-radius: 14px;
  --cc-ease: cubic-bezier(.2,.75,.25,1);
  --cc-speed: .28s;

  /* Footer social (follow + share) */
  --blue:#104879;
  --gold:#fec957;
}

/* Banner (slides up) */
.cc-banner{
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: var(--cc-z);
  background: var(--cc-bg);
  color: var(--cc-text);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  transform: translateY(16px);
  opacity: 0; visibility: hidden;
  transition: transform var(--cc-speed) var(--cc-ease),
              opacity var(--cc-speed) var(--cc-ease),
              visibility var(--cc-speed) var(--cc-ease);
}
.cc-banner.is-visible{ transform: translateY(0); opacity: 1; visibility: visible; }
.cc-banner[hidden]{ display: none !important; }

.cc-body{ padding: 16px; }
.cc-title{ margin: 0 0 8px; font-weight: 800; color: var(--cc-text); }
.cc-text{ margin: 0 0 12px; color: var(--cc-muted); line-height: 1.55; }
.cc-text a{ color: var(--cc-primary); text-decoration: underline; }

.cc-actions{
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cc-actions.right{ justify-content: flex-end; }

/* Buttons */
.cc-btn{
  appearance: none; border: 1px solid var(--cc-border);
  background: #f8fafc; color: var(--cc-text);
  padding: 10px 14px; border-radius: 10px; font-weight: 600;
  cursor: pointer;
}
.cc-btn:hover{ background: #eef2f7; }
.cc-btn.primary{
  background: var(--cc-primary); color: #fff; border-color: var(--cc-primary);
}
.cc-btn.ghost{
  background: transparent; border-color: var(--cc-border); color: var(--cc-text);
}

/* Preferences modal (panel) */
.cc-dim{
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  z-index: calc(var(--cc-z) - 1);
  opacity: 0; visibility: hidden;
  transition: opacity var(--cc-speed) var(--cc-ease), visibility var(--cc-speed) var(--cc-ease);
}
.cc-dim.is-visible{ opacity: 1; visibility: visible; }
.cc-dim[hidden]{ display: none !important; }

.cc-panel{
  position: fixed; inset: auto 16px 16px auto; /* bottom-right by default */
  z-index: var(--cc-z);
  transform: translateY(16px);
  opacity: 0; visibility: hidden;
  transition: transform var(--cc-speed) var(--cc-ease),
              opacity var(--cc-speed) var(--cc-ease),
              visibility var(--cc-speed) var(--cc-ease);
}
.cc-panel.is-visible{ transform: translateY(0); opacity: 1; visibility: visible; }
.cc-panel[hidden]{ display: none !important; }

.cc-window{
  width: min(90vw, 440px);
  background: var(--cc-bg);
  color: var(--cc-text);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  padding: 16px 16px 12px;
}

/* Switch-like rows */
.cc-switch{
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px;
  align-items: start; padding: 10px 0; border-top: 1px solid var(--cc-border);
}
.cc-switch:first-of-type{ border-top: 0; }
.cc-switch input{ margin-top: 4px; }
.cc-switch-title{ font-weight: 700; color: var(--cc-text); }
.cc-switch small{ grid-column: 2 / -1; color: var(--cc-muted); }

/* --- Responsive shapes --- */
/* Phone: bottom sheet (full width rectangle) */
@media (max-width: 480px){
  .cc-banner{
    left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .cc-body{ padding: 16px 18px 18px; }
  .cc-panel{
    left: 0; right: 0; bottom: 0; inset: auto 0 0 0;
  }
  .cc-window{
    width: 100%; border-radius: 16px 16px 0 0;
    max-height: 70vh; overflow: auto;
  }
}

/* Tablet (square-ish compact card) */
@media (min-width: 481px) and (max-width: 899px){
  .cc-window{ width: 360px; min-height: 340px; }
}

/* Desktop (wider rectangle) */
@media (min-width: 900px){
  .cc-window{ width: 440px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .cc-banner, .cc-panel, .cc-dim{ transition: none !important; }
}

/* cookie.css */
.cc-banner, .cc-panel {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cc-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  background: #0b1220; color: #fff; border-radius: 12px;
  padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.2);
  transform: translateY(24px); opacity: 0; transition: .35s ease;
  z-index: 2147483000;
}
.cc-banner.show { transform: translateY(0); opacity: 1; }
.cc-banner h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.cc-banner p { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: #dbe4ff; }

.cc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-btn { border: none; cursor: pointer; border-radius: 10px; padding: 10px 12px; font-weight: 600; font-size: 14px; }
.cc-btn.primary { background: #2563eb; color: #fff; }
.cc-btn.secondary { background: #e5e7eb; color: #111827; }
.cc-btn.ghost { background: transparent; color: #e5e7eb; text-decoration: underline; }

.cc-panel {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: min(680px, calc(100% - 32px));
  background: #fff; color: #111827; border-radius: 12px; padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 2147483001; display: none;
}
.cc-panel.show { display: block; }

.cc-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; }
.cc-row:last-child { border-bottom: 0; }
.cc-row label { font-weight: 600; }
.cc-row small { color: #6b7280; display: block; }

.cc-panel .cc-actions { justify-content: flex-end; margin-top: 12px; }

/* Avatar button (initials + name) */
.avatar-btn{
  display:flex; align-items:center; gap:.5rem;
  background:transparent; border:0; cursor:pointer; padding:.25rem .5rem;
}
.avatar-circle{
  width:34px; height:34px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; letter-spacing:.3px;
  background:#e8f0fb; color:#104879; border:1px solid #d6e3f7;
}

.avatar-btn{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid #e5e7eb;
  border-radius:999px;padding:6px 10px;cursor:pointer}
.avatar-btn:hover{background:#f8fafc}

.avatar-fallback{width:24px;height:24px}
.avatar-name{color:#0f355e;font-weight:600;max-width:10rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-dropdown a{display:block;padding:10px 12px;color:#0f355e;text-decoration:none}
.user-dropdown a:hover{background:#f8fafc}
.user-menu.is-open .user-dropdown{display:block}

/* Avatar button + dropdown */
.dropdown-label{ font-weight:700; color:#0f355e; padding:6px 8px 0; }
.dropdown-email{ font-size:12px; color:#64748b; padding:2px 8px 6px; word-break:break-all; }
.dropdown-sep{ border:0; border-top:1px solid #eef2f7; margin:6px 0; }
.dropdown-item{
  display:block; padding:8px 10px; color:#0f355e; text-decoration:none;
  border-radius:8px;
}
.dropdown-item:hover{ background:#f1f5f9; }

.user-menu{ position:relative; }

.avatar-btn{
  display:flex; align-items:center; gap:8px;
  border:0; background:transparent; cursor:pointer;
  padding:6px 8px; border-radius:10px;
}
.avatar-btn:hover{ background:#f1f5f9; }

.avatar-circle{
  width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; background:#104879; /* site blue */
  font-size:.85rem; letter-spacing:.5px;
}
.avatar-circle.sm{ width:28px; height:28px; font-size:.8rem; }

.avatar-name{ color:#0f355e; font-weight:800; }

/* Dropdown panel */
.user-dropdown{
  position:absolute; right:0; top:calc(100% + 8px);
  width:240px; padding:12px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 12px 28px rgba(16,72,121,.14);
  display:none; z-index:1200;
}
.user-dropdown.show{ display:block; }

.ud-top{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ud-name{ font-weight:800; color:#104879; }
.ud-email{ font-size:.95rem; color:#64748b; padding:6px 0; }
.ud-sep{ border:0; height:1px; background:#eef2f7; margin:6px 0 8px; }

.ud-item{
  display:flex; align-items:center; gap:8px;
  padding:8px; border-radius:8px;
  color:#0f355e; text-decoration:none; font-weight:600;
}
.ud-item:hover{ background:#f1f5f9; }

.ud-email{ padding:4px 0 8px; }

/* keep the icon the same size as the initials pill */
.avatar-btn > img {
  width: 24px;
  height: 24px;
  display: inline-block;   /* avoids baseline gap */
  flex: 0 0 24px;          /* don't let flexbox stretch it */
  object-fit: contain;
}

.user-dropdown .avatar-icon,
.user-dropdown .avatar-circle.sm {
  width: 24px;
  height: 24px;
}

/* Header avatar button */
.avatar-btn{ display:flex; align-items:center; gap:8px; border:0; background:transparent;
  cursor:pointer; padding:6px; border-radius:10px; }
.avatar-btn:hover{ background:#f1f5f9; }

/* Initials pill */
.avatar-circle{ width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; background:#104879; font-size:.85rem; letter-spacing:.5px; }

/* Fallback svg size (logged out) */
.avatar-icon{ width:24px; height:24px; display:block; }

.upgrade-banner{
  display:block;
  background:#fff3cd;
  color:#664d03;
  border:1px solid #ffecb5;
  padding:.75rem 1rem;
  margin:0 1rem 1rem;
  border-radius:.5rem;
  font-weight:600;
}

@media (max-width: 480px) {
  .cc-banner { left: 12px; right: 12px; bottom: 12px; }
  .cc-panel { width: calc(100% - 24px); left: 12px; right: 12px; transform: none; }
}

/* Centered upgrade modal */
#upgrade-layer { position: fixed; inset: 0; display: none; z-index: 10000; }
#upgrade-layer .upgrade-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.45);
}
#upgrade-layer .upgrade-modal {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 32px));
  background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 18px 16px; z-index: 10001;
}
#upgrade-layer .upgrade-close {
  position: absolute; top: 8px; right: 10px; border: 0; background: transparent;
  font-size: 20px; line-height: 1; cursor: pointer;
}
#upgrade-layer .upgrade-body { font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
#upgrade-layer .upgrade-body a { text-decoration: underline; }

/* If you had old top/bottom sticky styles, neutralize them when modal is used */
.has-upgrade-banner .upgrade-banner { position: static !important; }

/* Watermark host (generic, immediate) */
[data-watermark] {
  position: relative;             /* anchor ::before */
}

/* Single centered watermark (simple, fast) — generic / immediate */
[data-watermark]::before {
  content: attr(data-watermark);
  position: absolute; inset: 0;
  display: grid; place-content: center;
  text-align: center;
  pointer-events: none;
  opacity: .12;
  font-size: 44px;
  line-height: 1.25;
  color: #000;
  transform: rotate(-30deg);
  white-space: pre-wrap;
}

/* Optional strength modifiers */
[data-watermark].wm-light::before { opacity: .08; }
[data-watermark].wm-strong::before { opacity: .16; }

/* Optional tiled background class (JS will set background-image) */
[data-watermark].wm-tiled {
  background-repeat: repeat;
  background-size: 360px 360px;   /* must match JS tile size */
}

/* OPTIONAL: no-copy deterrence
[data-watermark] {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
*/

/* Sparse canvas watermark overlay (large, few stamps) */
[data-watermark] { position: relative; }          /* ensure anchoring */
[data-watermark].wm-sparse::before { content: none !important; } /* hide single-center ::before if present */

.wm-overlay{
  position:absolute; inset:0;
  pointer-events:none; user-select:none; z-index:3;
}

/* -------------------------------------------------------
   Preview wrappers: overlay should appear ONLY after JS
   sets `.wm-active` (post-render). We also suppress the
   generic [data-watermark]::before on preview-wrap.
   ------------------------------------------------------- */

/* base */
.preview-wrap{ position: relative; }
.preview-wrap iframe{ display:block; width:100%; height:80vh; border:0; background:#fff; }

/* prevent generic immediate ::before on preview wrappers */
.preview-wrap[data-watermark]::before{ content:none !important; }

/* overlay definition (hidden by default) */
.preview-wrap[data-watermark] { position: relative; }
.preview-wrap[data-watermark]::after {
  content: attr(data-watermark);
  position: absolute; inset: 0;
  display: none;              /* hidden by default */
  place-items: center;
  font: 700 28px/1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: rgba(16,72,121,.08);
  transform: rotate(-30deg);
  user-select: none; pointer-events: none;
  z-index: 3;
}
.preview-wrap.wm-active::after { display: grid; } /* only after content is ready */

.main { padding-inline: 1rem; }
.card { margin-inline: auto; }

/* === Header + nav containers must not clip the menu === */
.site-header,
.header-right,
.desktop-nav,
.desktop-nav .dropdown {
  position: relative;
  
}

/* === Trigger button === */
.desktop-nav .dropbtn {
  background: transparent;
  border: 0;
  padding: 10px 8px;
  font: inherit;
  cursor: pointer;
  line-height: 1;
}

/* === The dropdown panel === */
.desktop-nav .dropdown-content {
  position: absolute;
  top: calc(100% + 8px);   /* <-- forces it to open downward */
  left: 0;
  display: none;           /* shown on hover/focus */
  min-width: 220px;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(16,24,40,.15);
  padding: 6px;
  z-index: 1000;          /* above header */
}

/* show on hover or keyboard focus */
.desktop-nav .dropdown:hover .dropdown-content,
.desktop-nav .dropdown:focus-within .dropdown-content {
  display: block;
}

/* items */
.desktop-nav .dropdown-content a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #102a43;
  text-decoration: none;
  white-space: nowrap;
}
.desktop-nav .dropdown-content a:hover,
.desktop-nav .dropdown-content a:focus {
  background: #f6f9ff;
}
.dropdown .dropdown-content.show { display: block; }

/* If your header is sticky, make sure it doesn't create a clipping context */
.site-header {
  position: sticky;        /* or fixed; */
  top: 0;
  z-index: 2000;           /* sits above page content */
  overflow: visible;       /* important */
}

/* --- Fixed header (always visible) --- */
.site-header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 2000;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid rgba(16,24,40,.06);
  transition: box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
  overflow: visible;   /* <-- prevents cutting off */
}

.mobile-nav { display: none; }
.mobile-nav.show { display: block; }

/* =========================
   Footer social (follow + share)
   ========================= */
.site-footer{
  /* keep layout from old */
  padding:20px 0 28px;
  text-align:center;

  /* new theme */
  background: var(--blue);
  color:#fff;
  border-top:none;
}

.site-footer .social-row{
  width:min(1150px,92%);
  margin:0 auto 12px auto;
  display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap;
}
.site-footer .social-row.share{ margin-top:8px; }

.social-title{
  /* keep shape from old */
  padding:8px 12px; border-radius:999px; font-weight:800;

  /* new colours on blue */
  background: var(--gold);
  color: var(--blue);
  border:1px solid transparent;
}

.social-icons{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center;
}

.social-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px;
  text-decoration:none; font-weight:700; font-size:14px;

  /* visible by default on blue */
  background: rgba(255,255,255,.10);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:none;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.social-btn svg{ width:18px; height:18px; fill:currentColor; display:block; opacity:.95; }
.social-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.25); filter:none; }

/* Brand hovers */
.social-btn.x:hover        { background:#000;    color:#fff; border-color:#000; }
.social-btn.linkedin:hover { background:#0a66c2; color:#fff; border-color:#0a66c2; }
.social-btn.ig:hover       { background:#e1306c; color:#fff; border-color:#e1306c; }
.social-btn.fb:hover       { background:#1877f2; color:#fff; border-color:#1877f2; }
.social-btn.yt:hover       { background:#ff0000; color:#fff; border-color:#ff0000; }

/* Primary Share button */
.share-native{
  background: var(--gold);
  color: var(--blue);
  border-color: rgba(255,255,255,.35);
}
.share-native:hover{ filter:brightness(1.05); }

/* Legal strip on blue */
.footer-note-static{
  margin-top:16px;
  color: #42526b !important;
}
.footer-note-static .footer-link{
  color:#104879; text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.45);
}
.footer-note-static .footer-link:hover{
  color:var(--gold); border-bottom-color:var(--gold);
}

/* Focus ring */
.social-btn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(254,201,87,.35);
}

/* Small screens */
@media (max-width:640px){
  .social-title{ display:inline-flex; }
}

/* Footer legal strip: revert to gray text + blue links */
.site-footer .footer-note-static{
  color: #42526b !important;            /* gray like before */
}

.site-footer .footer-note-static .footer-link{
  color: var(--blue) !important;         /* brand blue links */
  text-decoration: none;
  border-bottom: 0;                      /* remove the dashed underline we added */
}

.site-footer .footer-note-static .footer-link:hover{
  color: var(--blue) !important;         /* keep same color on hover */
  text-decoration: underline;            /* classic underline on hover */
}