/* ============================================================
   TextFontChanger.com - stylesheet
   Clean, modern "tool" aesthetic: white surfaces, indigo accent,
   rounded cards, friendly geometric headings.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --paper:        #FFFFFF;
  --paper-alt:    #F8FAFC;
  --paper-card:   #FFFFFF;
  --ink:          #0F172A;
  --ink-soft:     #0F172A;
  --ink-faint:    #0F172A;
  --indigo:       #4F46E5;
  --indigo-dark:  #4338CA;
  --indigo-tint:  #EEF2FF;
  --success:      #16A34A;
  --success-tint: #DCFCE7;
  --line:         #E2E8F0;
  --line-strong:  #CBD5E1;
  --footer-bg:    #1E1B4B;
  --footer-text:  #FFFFFF;
  --footer-line:  #342F76;

  --font-display: 'Poppins', 'Segoe UI', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(79,70,229,.07);
  --shadow-pop:  0 4px 10px rgba(15,23,42,.06), 0 20px 44px rgba(79,70,229,.12);

  --container: 1180px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--indigo); text-decoration:none; }
a:hover{ color:var(--indigo-dark); text-decoration:underline; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); margin:0 0 var(--space-3); line-height:1.2; font-weight:600; }
p{ margin:0 0 var(--space-4); color:var(--ink-soft); }
:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--space-5); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Type scale ---------- */
h1{ font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); letter-spacing:-.02em; }
h2{ font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem); letter-spacing:-.01em; }
h3{ font-size: 1.2rem; }
.lede{ font-size:1.1rem; color:var(--ink-soft); max-width:62ch; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  border-radius:99px;
  padding:13px 26px;
  font-weight:600;
  font-size:.95rem;
  font-family:var(--font-display);
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background:var(--indigo); color:#fff; box-shadow:0 8px 20px rgba(79,70,229,.28); }
.btn-primary:hover{ background:var(--indigo-dark); color:#fff; transform:translateY(-1px); }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--indigo); color:var(--indigo); }
.btn-sm{ padding:9px 16px; font-size:.82rem; border-radius:99px; }

/* ============================================================
   Top announcement bar
   ============================================================ */
.topbar{ background:var(--indigo); color:#fff; }
.topbar-inner{
  display:flex; align-items:center; justify-content:center; gap:var(--space-4);
  padding:9px var(--space-5); font-size:.85rem; font-weight:500; text-align:center; flex-wrap:wrap;
}
.topbar-share{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); color:#fff;
  border-radius:99px; padding:4px 16px; font-size:.78rem; font-weight:600; flex-shrink:0;
  transition:background .15s ease;
}
.topbar-share:hover{ background:rgba(255,255,255,.3); }
.topbar-share.is-copied{ background:#fff; color:var(--indigo); }
@media (max-width:560px){ .topbar-inner{ font-size:.78rem; padding:8px var(--space-4); } }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.08rem;
  color:var(--indigo);
  letter-spacing:-.02em;
}
.brand:hover{ color:var(--indigo); text-decoration:none; }

.main-nav{ display:flex; align-items:center; gap:var(--space-6); }
.main-nav a{
  color:var(--ink-soft);
  font-weight:600;
  font-size:.93rem;
  padding:6px 0;
  border-bottom:2px solid transparent;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{
  color:var(--indigo);
  text-decoration:none;
  border-bottom-color:var(--indigo);
}

.nav-toggle{
  display:none;
  width:38px; height:38px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-s);
  background:#fff;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.nav-toggle span{ width:18px; height:2px; background:var(--ink); display:block; }

@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:absolute; top:68px; left:0; right:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:var(--space-2) var(--space-5) var(--space-4);
    display:none;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ width:100%; padding:12px 0; border-bottom:1px solid var(--line); }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{ padding:var(--space-5) 0 var(--space-4); position:relative; overflow:hidden; text-align:center; }
.hero::before{
  content:"";
  position:absolute; top:-160px; right:-160px; width:480px; height:480px;
  background:radial-gradient(circle, var(--indigo-tint) 0%, rgba(238,242,255,0) 70%);
  pointer-events:none;
}
.hero-inner{ max-width:680px; margin:0 auto; position:relative; }
.hero h1{ margin-bottom:var(--space-3); color:var(--indigo); font-size:clamp(26px, 4vw, 35px); }
.hero .lede{ margin:0 auto; font-size:1.2rem; }

/* ============================================================
   Section scaffolding
   ============================================================ */
.section{ padding:var(--space-8) 0; }
#tool{ padding-top:var(--space-4); }
.section-head{ max-width:64ch; margin-bottom:var(--space-6); }
.section-alt{ background:var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ============================================================
   Tool: input panel
   ============================================================ */
.tool-panel{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--space-4);
  box-shadow:var(--shadow-card);
}
.tool-input-row label{
  display:block;
  font-family:var(--font-body); font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:var(--space-1);
}
.tool-textarea{
  width:100%;
  min-height:64px;
  resize:vertical;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-m);
  padding:var(--space-3);
  font-family:var(--font-body);
  font-size:1.05rem;
  color:var(--ink);
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tool-textarea:focus{
  border-color:var(--indigo);
  box-shadow:0 0 0 4px var(--indigo-tint);
  outline:none;
}
.tool-controls{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3);
  margin-top:var(--space-3);
}
.size-slider-row{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-top:var(--space-3);
}
.size-slider-row label{
  font-size:.82rem;
  font-weight:600;
  color:var(--ink-soft);
  white-space:nowrap;
}
.size-slider{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  border-radius:99px;
  background:var(--indigo-tint);
  outline:none;
  cursor:pointer;
}
.size-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--indigo);
  cursor:pointer;
  border:3px solid #fff;
  box-shadow:0 0 0 1px var(--indigo);
}
.size-slider::-moz-range-thumb{
  width:20px; height:20px;
  border-radius:50%;
  background:var(--indigo);
  cursor:pointer;
  border:3px solid #fff;
  box-shadow:0 0 0 1px var(--indigo);
}
.size-slider::-moz-range-track{
  height:6px;
  border-radius:99px;
  background:var(--indigo-tint);
}
.size-row{ display:flex; align-items:center; gap:var(--space-2); }
.size-row span{ font-size:.82rem; font-weight:600; color:var(--ink-soft); margin-right:4px; }
.size-btn{
  width:34px; height:34px;
  border:1px solid var(--line-strong);
  background:#fff;
  border-radius:var(--radius-s);
  font-weight:700;
  font-size:1rem;
  color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
}
.size-btn:hover{ border-color:var(--indigo); color:var(--indigo); }
.size-value{
  font-size:.85rem; font-weight:600; min-width:44px; text-align:center; color:var(--ink);
}
.char-count{ font-size:.82rem; color:var(--ink-faint); }
.tool-action-buttons{ display:flex; gap:var(--space-3); }

/* ============================================================
   Sticky wrapper: text input box + category pills stick
   together below the header; sections scroll up beneath them.
   ============================================================ */
.tool-sticky{
  position:sticky;
  top:68px;
  z-index:40;
  background:var(--paper);
  padding-bottom:var(--space-4);
}

/* ============================================================
   Category pill nav (inside the sticky wrapper, below the card)
   ============================================================ */
.cat-nav{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  gap:8px;
  margin-top:var(--space-5);
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.cat-nav::-webkit-scrollbar{ display:none; }
.cat-nav a{
  display:inline-block;
  flex:0 0 auto;
  font-size:.78rem;
  font-weight:600;
  color:var(--ink-soft);
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:99px;
  padding:6px 16px;
  text-decoration:none;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
  white-space:nowrap;
}
.cat-nav a:hover,
.cat-nav a.is-active{
  color:#fff;
  border-color:var(--indigo);
  background:var(--indigo);
  text-decoration:none;
}

/* ============================================================
   Tool: output grid (grouped by category)
   ============================================================ */
.output-group{ margin-top:var(--space-7); }
.output-group:first-child{ margin-top:var(--space-6); }
.output-group-title{ display:flex; align-items:baseline; gap:var(--space-3); margin-bottom:var(--space-4); }
.output-group-title h3{ margin:0; font-size:1.15rem; }
.output-group-title span{ font-size:.85rem; color:var(--ink-faint); }

.output-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:var(--space-4);
}
.output-grid:has(> .output-group){
  display:block;
}
.output-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:var(--space-4);
  display:flex; flex-direction:column; gap:var(--space-3);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.output-card:hover{ border-color:var(--indigo); box-shadow:var(--shadow-card); transform:translateY(-2px); }
.output-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.output-name{ font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--ink); }
.output-text{
  font-size:var(--preview-size, 1.3rem);
  line-height:1.4;
  color:var(--ink);
  min-height:1.6em;
  word-break:break-word;
  white-space:pre-wrap;
}
.output-text:empty::before{
  content:"Your converted text will appear here";
  color:var(--ink-faint);
  font-size:.92rem;
  font-family:var(--font-body);
}
.copy-btn{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--ink-soft);
  border-radius:99px;
  padding:6px 14px;
  font-size:.78rem;
  font-weight:600;
  font-family:var(--font-body);
  flex-shrink:0;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.copy-btn:hover{ border-color:var(--indigo); color:var(--indigo); background:var(--indigo-tint); }
.copy-btn.is-copied{
  background:var(--success-tint);
  border-color:var(--success);
  color:var(--success);
}

/* ============================================================
   Symbols grid
   ============================================================ */
.symbols-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(56px, 1fr));
  gap:var(--space-2);
  margin-top:var(--space-5);
}
.symbol-chip{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  height:54px;
  font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
.symbol-chip:hover{ border-color:var(--indigo); background:var(--indigo-tint); }
.symbol-chip.is-copied{ border-color:var(--success); background:var(--success-tint); }

/* ============================================================
   Decoration / border presets
   ============================================================ */
.deco-grid{
  margin-top:var(--space-5);
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:var(--space-3);
}
.deco-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-m);
  padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.deco-card:hover{ border-color:var(--indigo); box-shadow:var(--shadow-card); transform:translateY(-2px); }
.deco-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.deco-name{ font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--ink); }
.deco-text{ font-size:1.1rem; word-break:break-word; min-height:1.5em; }

/* ============================================================
   Prose / article content
   ============================================================ */
.prose ol{ margin:var(--space-5) 0 var(--space-4); padding-left:1.3em; list-style:decimal; }
.prose ol li{ margin-bottom:var(--space-3); color:var(--ink-soft); font-size:1.02rem; }
.prose ol li strong{ color:var(--ink); }

.feature-list h3{ margin-top:var(--space-5); font-size:1.05rem; }
.feature-list h3:first-child{ margin-top:0; }
.feature-list p{ margin:0 0 var(--space-4); }

.prose{ max-width:74ch; }
.prose.prose-full{ max-width:none; }
.about-section{ padding-bottom:var(--space-5); padding-top:var(--space-5); }
#faq{ padding-top:var(--space-5); }
#symbols{ padding-bottom:var(--space-5); }
.prose h2{ margin-top:var(--space-7); }
.prose h2:first-child{ margin-top:0; }
.prose p{ font-size:1.02rem; }
.prose ul{ margin:0 0 var(--space-4); padding-left:1.2em; list-style:disc; }
.prose ul li{ margin-bottom:var(--space-2); color:var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq-list{ max-width:74ch; }
.faq-item{ padding:var(--space-4) 0; }
.faq-item:last-child{ }
.faq-item h3{ font-size:1.02rem; margin-bottom:var(--space-2); font-family:var(--font-display); font-weight:600; }
.faq-item p{ margin:0; }

/* ============================================================
   Static content pages (about, privacy, contact, etc.)
   ============================================================ */
.page-hero{ padding:var(--space-6) 0 var(--space-4); background:var(--paper); }
.page-hero + .section{ padding-top:var(--space-4); }
.page-hero h1{ font-size:clamp(26px, 4vw, 35px); }
.page-hero .eyebrow{ margin-bottom:var(--space-3); }
.page-hero p{ max-width:68ch; }
.updated-note{ font-size:.85rem; color:var(--ink-faint); }



/* ============================================================
   Generator sections
   ============================================================ */
.gen-section{ padding:var(--space-6) 0; scroll-margin-top:130px; }
.gen-section.section-alt{
  padding:var(--space-6) 0;
  background:none;
  border-top:none;
  border-bottom:none;
}
.gen-section .section-head{ margin-bottom:var(--space-4); }
.gen-section .section-head h2{ font-size:1.3rem; }
.gen-section .section-head p{ font-size:.95rem; margin:0; }

/* also give the main #tool section scroll-margin so pill links land correctly */
#tool{ scroll-margin-top:130px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background:var(--footer-bg); color:var(--footer-text); margin-top:var(--space-8); }
.footer-grid{
  padding:var(--space-8) var(--space-5) var(--space-6);
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:var(--space-6);
  max-width:var(--container); margin:0 auto;
}
.footer-col h3{ color:#fff; font-family:var(--font-display); font-size:1rem; margin-bottom:var(--space-3); }
.footer-col h4{ color:#fff; font-family:var(--font-body); font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; margin:0 0 var(--space-3); }
.footer-col p{ color:var(--footer-text); font-size:.9rem; max-width:32ch; }
.footer-col a{ display:block; color:var(--footer-text); font-size:.9rem; padding:5px 0; }
.footer-col a:hover{ color:#fff; text-decoration:none; }
.footer-bottom{
  border-top:1px solid var(--footer-line);
  padding:var(--space-4) var(--space-5);
  max-width:var(--container); margin:0 auto;
  display:flex; justify-content:center; text-align:center; flex-wrap:wrap; gap:var(--space-2);
  font-size:.8rem; color:var(--footer-text);
}
.footer-bottom a{ color:var(--footer-text); }
.footer-bottom p{ color:var(--footer-text); margin:0; }

@media (max-width:760px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------- Misc ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:100; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }