/* ============================================================
   TextCountify — Shared stylesheet (style.css)
   Lives at the web root (/style.css). Loaded by header.php on
   every page via <link rel="stylesheet" href="/style.css">.
   Contains: design tokens, reset, container, header, nav,
   dropdown (first level), hamburger, mobile nav, footer,
   theme-toggle, dark-mode variable overrides, accessibility,
   toast, and shared Legal/Info page styles.
   The flyout (second-level) CSS lives INSIDE header.php as an
   inline <style> block — see header.php.
   Page-specific styles live in each page's <style> block.
   ============================================================ */

/* ============ Design Tokens ============ */
:root{
  --bg-primary:#F8F9FB;
  --bg-surface:#FFFFFF;
  --accent:#4F6EF7;
  --accent-hover:#3B56D9;
  --success:#22C55E;
  --warning:#F59E0B;
  --danger:#EF4444;
  --text-primary:#111827;
  --text-secondary:#6B7280;
  --border:#E5E7EB;
  --radius-card:8px;
  --radius-pill:6px;
  --shadow-lift:0 2px 8px rgba(0,0,0,0.06);
  --shadow-dropdown:0 8px 24px rgba(17,24,39,0.08);
}

/* ============ Reset ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;
  color:var(--text-primary);
  background:var(--bg-primary);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
img,svg{display:block;max-width:100%}

/* ============ Container ============ */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* ============ Header ============ */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  height:60px;
  display:flex;
  align-items:center;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:100%;
}
.header-actions{
  display:flex;
  align-items:center;
  gap:4px;
}
.logo{
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:20px;
  color:var(--accent);
  letter-spacing:-0.02em;
}
.nav-desktop{
  display:flex;
  align-items:center;
  gap:8px;
}
.nav-item{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  font-size:15px;
  font-weight:500;
  color:var(--text-primary);
  border-radius:var(--radius-pill);
  transition:background 0.15s ease,color 0.15s ease;
}
.nav-item:hover{background:var(--bg-primary);color:var(--accent)}
.nav-item .chev{
  width:12px;height:12px;flex-shrink:0;
  transition:transform 0.2s ease;
}
.nav-item[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* ============ Dropdown (first level — Tools) ============ */
.dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:340px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-dropdown);
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity 0.15s ease,transform 0.15s ease,visibility 0.15s ease;
}
.nav-item[aria-expanded="true"] .dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.dropdown-group + .dropdown-group{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.dropdown-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-secondary);
  padding:6px 12px;
}
.dropdown-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 12px;
  font-size:14px;
  font-weight:500;
  color:var(--text-primary);
  border-radius:var(--radius-pill);
  transition:background 0.15s ease,color 0.15s ease;
  position:relative;
}
.dropdown-link:hover{background:var(--bg-primary);color:var(--accent)}
.dropdown-link .chev-right{
  width:12px;height:12px;
  flex-shrink:0;
  color:var(--text-secondary);
  transition:transform 0.15s ease,color 0.15s ease;
}
.dropdown-link:hover .chev-right{color:var(--accent);transform:translateX(2px)}

/* NOTE: The flyout (second-level) CSS — .flyout, .flyout-link, hover/focus
   reveal rules, and their dark-mode overrides — now lives INSIDE
   includes/header.php as an inline <style> block, because header.php owns
   that HTML and is the source of truth for it. See "Header dropdown / flyout
   CSS" comment in header.php. Do not re-add these rules here. */

/* ============ Hamburger ============ */
.hamburger{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  border-radius:var(--radius-pill);
}
.hamburger:hover{background:var(--bg-primary)}
.hamburger svg{width:22px;height:22px;color:var(--text-primary)}

/* ============ Mobile nav panel ============ */
.mobile-nav{
  position:fixed;
  top:0;right:0;
  width:84vw;max-width:340px;
  height:100vh;
  background:var(--bg-surface);
  border-left:1px solid var(--border);
  box-shadow:var(--shadow-dropdown);
  transform:translateX(100%);
  transition:transform 0.25s ease;
  z-index:200;
  overflow-y:auto;
  padding:16px;
}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav-close{
  display:flex;align-items:center;justify-content:flex-end;
  margin-bottom:8px;
}
.mobile-nav-close button{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);
}
.mobile-nav-close button:hover{background:var(--bg-primary)}
.mobile-nav-close svg{width:20px;height:20px}
.mobile-nav-link{
  display:block;
  padding:12px 12px;
  font-size:15px;font-weight:500;
  color:var(--text-primary);
  border-radius:var(--radius-pill);
}
.mobile-nav-link:hover{background:var(--bg-primary);color:var(--accent)}
.accordion-trigger{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding:12px 12px;
  font-size:14px;font-weight:700;
  color:var(--text-primary);
  border-radius:var(--radius-pill);
  text-align:left;
}
.accordion-trigger:hover{background:var(--bg-primary)}
.accordion-trigger .chev{width:14px;height:14px;transition:transform 0.2s ease}
.accordion-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
.accordion-panel{
  display:none;
  padding:4px 8px 8px;
}
.accordion-panel.open{display:block}
.accordion-label{
  font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-secondary);
  padding:8px 12px 4px;
}
.accordion-link{
  display:block;
  padding:8px 12px;
  font-size:14px;font-weight:500;
  color:var(--text-primary);
  border-radius:var(--radius-pill);
}
.accordion-link:hover{background:var(--bg-primary);color:var(--accent)}

.scrim{
  position:fixed;inset:0;
  background:rgba(17,24,39,0.4);
  opacity:0;visibility:hidden;
  transition:opacity 0.25s ease,visibility 0.25s ease;
  z-index:150;
}
.scrim.open{opacity:1;visibility:visible}

/* ============ Footer ============ */
.site-footer{
  background:#111827;
  border-top:3px solid var(--accent);
  color:#9CA3AF;
  padding:48px 0 32px;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}
.footer-col h4{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#D1D5DB;
  margin-bottom:16px;
}
.footer-col ul li{margin-bottom:8px}
.footer-col a{
  font-size:14px;
  color:#9CA3AF;
  transition:color 0.15s ease;
}
.footer-col a:hover{color:#FFFFFF}
.footer-col p{
  font-size:13px;
  color:#9CA3AF;
  margin-bottom:8px;
  line-height:1.5;
}

/* ============ Dark Mode Toggle Button ============ */
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:var(--radius-pill);
  color:var(--text-primary);
  transition:background 0.15s ease,color 0.15s ease;
}
.theme-toggle:hover{background:var(--bg-primary);color:var(--accent)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .moon{display:none}
.theme-toggle .sun{display:block}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
:root[data-theme="dark"] .theme-toggle .sun{display:none}

/* ============ Toast (shared utility) ============ */
.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--text-primary);
  color:var(--bg-surface);
  padding:10px 16px;
  border-radius:var(--radius-pill);
  font-size:13px;
  font-weight:500;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.2s ease,transform 0.2s ease,visibility 0.2s ease;
  z-index:300;
  box-shadow:var(--shadow-dropdown);
}
.toast.show{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

/* ============ Accessibility ============ */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ============ Dark Mode Variable Overrides ============ */
:root[data-theme="dark"]{
  --bg-primary:#0F172A;
  --bg-surface:#1E293B;
  --text-primary:#F1F5F9;
  --text-secondary:#94A3B8;
  --border:#334155;
  --shadow-lift:0 2px 8px rgba(0,0,0,0.3);
  --shadow-dropdown:0 8px 24px rgba(0,0,0,0.4);
}
:root[data-theme="dark"] body{background:var(--bg-primary);color:var(--text-primary)}
:root[data-theme="dark"] .site-header{background:var(--bg-surface)}
:root[data-theme="dark"] .nav-item:hover,
:root[data-theme="dark"] .dropdown-link:hover,
:root[data-theme="dark"] .accordion-link:hover,
:root[data-theme="dark"] .mobile-nav-link:hover,
:root[data-theme="dark"] .accordion-trigger:hover,
:root[data-theme="dark"] .hamburger:hover,
:root[data-theme="dark"] .mobile-nav-close button:hover{background:#0F172A}
:root[data-theme="dark"] .dropdown{background:var(--bg-surface);box-shadow:var(--shadow-dropdown)}
/* Note: :root[data-theme="dark"] .flyout and .flyout-link:hover overrides
   live in header.php's inline <style> block — see header.php. */
:root[data-theme="dark"] .mobile-nav{background:var(--bg-surface)}
:root[data-theme="dark"] .toast{background:#F1F5F9;color:#0F172A}

/* ============ Shared Responsive (header + footer only) ============ */
@media (max-width:900px){
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:32px 24px}
}
@media (max-width:768px){
  .nav-desktop{display:none}
  .hamburger{display:flex}
  .footer-grid{justify-items:center;text-align:center}
  .footer-col ul{display:flex;flex-direction:column;align-items:center}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;gap:24px;justify-items:center;text-align:center}
  .footer-col{width:100%}
  .footer-col ul{display:flex;flex-direction:column;align-items:center;gap:8px}
  .footer-col ul li{margin-bottom:0}
  .footer-col p{margin-left:auto;margin-right:auto;text-align:center}
}

/* ============ Legal / Info Pages ============
   Shared layout for privacy-policy.php, terms-of-service.php, about.php,
   contact.php (and any future legal/info page). Each page's <style> block
   contains only its OWN page-specific overrides on top of these.
*/
.legal-main{
  padding:64px 0;
  background:var(--bg-primary);
}
.legal-content{
  max-width:760px;
  margin:0 auto;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:48px;
}
.legal-content h1{
  font-size:32px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--text-primary);
  margin-bottom:8px;
}
.legal-meta{
  font-size:14px;
  color:var(--text-secondary);
  margin-bottom:40px;
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
}
.legal-content h2{
  font-size:20px;
  font-weight:700;
  color:var(--text-primary);
  margin:32px 0 12px;
}
.legal-content p{
  font-size:16px;
  color:var(--text-secondary);
  line-height:1.7;
  margin-bottom:16px;
}
.legal-content ul{
  list-style:disc;
  padding-left:24px;
  margin-bottom:16px;
}
.legal-content ul li{
  font-size:16px;
  color:var(--text-secondary);
  line-height:1.7;
  margin-bottom:8px;
}
.legal-content a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Dark mode override — applies to .legal-content on every legal page.
   Page-specific dark mode overrides for additional selectors (founder-block,
   contact-card, etc.) live in each page's <style> block. */
:root[data-theme="dark"] .legal-content{
  background:var(--bg-surface);
  border-color:var(--border);
}

/* Shared responsive rules for legal pages.
   Page-specific responsive rules (principle-grid, contact-cards, etc.)
   live in each page's <style> block. */
@media (max-width:768px){
  .legal-main{padding:32px 0}
  .legal-content{padding:24px}
  .legal-content h1{font-size:26px}
}

/* ============ Cookie Notice Banner ============
   Fixed-position banner shown at the bottom of the viewport on first visit.
   HTML lives in includes/footer.php. JS in the same file controls show/hide
   via localStorage key "textcountify_cookies". Uses design tokens so dark
   mode works automatically — no separate dark-mode override block needed.
*/
.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:9999;
  background:var(--bg-surface);
  border-top:1px solid var(--border);
  padding:16px 20px;
  box-shadow:0 -2px 12px rgba(0,0,0,0.08);
}
.cookie-banner-inner{
  max-width:900px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.cookie-banner-text{
  margin:0;
  color:var(--text-primary);
  font-size:0.875rem;
  font-family:'Inter',sans-serif;
  flex:1;
  min-width:200px;
  line-height:1.5;
}
.cookie-banner-link{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
  margin-left:4px;
}
.cookie-banner-link:hover{
  color:var(--accent-hover);
}
.cookie-banner-btn{
  background:var(--accent);
  color:#ffffff;
  border:none;
  border-radius:6px;
  padding:8px 20px;
  font-size:0.875rem;
  font-family:'Inter',sans-serif;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  transition:background 0.15s ease;
}
.cookie-banner-btn:hover{
  background:var(--accent-hover);
}

/* Dark mode — banner inherits its colors from the design tokens above,
   so it automatically flips to dark surface + light text. No special
   override needed. */

/* Responsive — stack the button below the text on narrow screens */
@media (max-width:560px){
  .cookie-banner-inner{
    flex-direction:column;
    align-items:stretch;
  }
  .cookie-banner-btn{
    width:100%;
  }
}