:root{scroll-behavior:smooth}
.nav-link{color:var(--tw-prose-body,#374151)}
.nav-link:hover{color:#3BB7A0}
.btn-primary{display:inline-block;background:#3BB7A0;color:#fff;padding:.75rem 1.5rem;border-radius:9999px;font-weight:700}
.btn-secondary{display:inline-block;border:1px solid #d1d5db;padding:.75rem 1.5rem;border-radius:9999px}
.section-title{font-size:1.5rem;font-weight:700}
.card-article{display:flex;gap:1rem;padding:1.25rem;background:var(--tw-bg,white);border-radius:1rem;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.card-article .thumb{width:8rem;height:5rem;object-fit:cover;border-radius:.75rem}
.card-article .title{font-weight:700;font-size:1.125rem}
.card-article .meta{font-size:.875rem;color:#6b7280}
.card-box{background:var(--tw-bg,white);padding:1.5rem;border-radius:1rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.card-box-title{font-weight:700;font-size:1.125rem;margin-bottom:.5rem}
.input{width:100%;padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:9999px;background:transparent}
.dark .card-article,.dark .card-box{background:#1E1E1E}


/* === Unified square image size for feature & portrait === */
.square-figure{width:18rem;height:18rem;object-fit:cover;border-radius:1rem;box-shadow:0 10px 20px rgba(0,0,0,0.08)}
@media (min-width: 768px){.square-figure{width:22rem;height:22rem}}

.symbol{display:inline-block}


/* === v36 fixes (scoped) === */
textarea.input{border-radius:16px;resize:vertical}
input[type="email"].input{background:transparent!important;color:inherit;border-color:#d1d5db}
.input::placeholder{color:#9CA3AF;opacity:1}
input[type="email"].input:-webkit-autofill,
input[type="email"].input:-webkit-autofill:hover,
input[type="email"].input:-webkit-autofill:focus{
  box-shadow:0 0 0px 1000px transparent inset;
  -webkit-text-fill-color:inherit;caret-color:inherit;
}


/* === v37 fixes (scoped) === */
.input, textarea.input, input[type="email"].input, input[type="text"].input{border-radius:16px!important}


/* === v41: mobile hamburger visual === */
.menu-btn{
  width:44px; height:44px;
  display:inline-grid; place-items:center;
  border:2px solid #2E2E2E; /* fixed border color */
  border-radius:12px; background:transparent;
  color:inherit; /* icon lines follow current theme/text color */
}
.dark .menu-btn{ border-color:#2E2E2E; } /* keep border fixed in dark too */
.menu-btn svg{ width:24px; height:24px; }


/* === v42: theme-aware accent + mobile button placement === */
:root{ --accent: #3BB7A0; } /* default accent (matches current primary) */
html[data-theme="classic-blue"]{ --accent:#3b82a0; }
html[data-theme="skin"]{ --accent:#c58a6b; }
html[data-theme="pink"]{ --accent:#ff2bd4; }
html[data-theme="lavender"]{ --accent:#A073C4; }
html[data-theme="angels"]{ --accent:#315399; }

/* Menu button: visible in mobile, top-right like a clear CTA */
.menu-btn{
  width:44px;height:44px;
  display:inline-grid;place-items:center;
  border:2px solid #2E2E2E; /* fixed border color */
  border-radius:12px;background:var(--accent); /* follows theme */
  color:#fff; /* icon lines contrast with accent */
}
.menu-btn svg{width:24px;height:24px}
@media (max-width: 768px){
  header{position:relative}
  .menu-btn{position:absolute; right:1rem; top:1rem; display:inline-grid}
}


/* === v43: fixed, always-visible hamburger on mobile (top-right) === */
.menu-btn{
  display:none; /* hidden by default (desktop) */
  width:44px;height:44px;
  place-items:center;
  border:2px solid #2E2E2E; /* fixed border color */
  border-radius:12px;
  background:var(--accent); /* follows theme */
  color:#fff; /* icon lines */
}
.menu-btn svg{width:24px;height:24px}
@media (max-width: 768px){
  .menu-btn{
    display:grid;             /* show on mobile */
    position:fixed;           /* fixed so it never gets pushed away */
    right:1rem; top:1rem;
    z-index:9999;             /* above everything */
  }
}


/* === v45: keep top menu visible on mobile === */
#mainNav{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
@media (max-width:768px){
  #mainNav{background:transparent;position:static;padding:0;margin-top:.5rem}
}

/* v45: hide redundant hamburger button */
.menu-btn{display:none !important}


/* === v46: keep top menu inline (no stacking) and align with newsletter button === */
#mainNav{display:flex;flex-wrap:nowrap;gap:0.75rem;align-items:center}
#mainNav .nav-link{white-space:nowrap}
@media (max-width:768px){
  #mainNav{flex-wrap:nowrap;gap:0.5rem}
  #mainNav .nav-link{white-space:nowrap;font-size:0.95rem}
}


/* === v47: force top menu inline next to newsletter button === */
header{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap !important}
#mainNav{display:flex !important;flex-direction:row;flex-wrap:nowrap !important;gap:.6rem;align-items:center;margin-inline-start:auto}
#mainNav .nav-link{display:inline-block;white-space:nowrap}
@media (max-width:768px){
  #mainNav{gap:.5rem;font-size:.95rem;overflow-x:auto;scrollbar-width:none}
  #mainNav::-webkit-scrollbar{display:none}
}