/*
Theme Name: Font Copy and Paste
Theme URI: https://font-copy-paste.com/
Author: Font Copy and Paste
Author URI: https://font-copy-paste.com/
Description: Official WordPress theme for Font Copy and Paste — a free tool for turning plain text into 45+ fancy Unicode font styles. Includes a live client-side generator, About/Contact/Privacy/Terms/Disclaimer page templates, and SEO meta tags matching the original site.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: font-copy-paste
*/

/* ============ Font Copy and Paste — shared styles ============ */
:root{
  /* Light content theme */
  --bg:#ffffff;
  --bg-2:#f1f5f9;
  --card:#ffffff;
  --card-hover:#f8fafc;
  --border:#e2e8f0;
  --border-soft:#e8edf3;
  --text:#0b1220;
  --text-dim:#334155;
  --text-faint:#64748b;

  --teal:#14b8a6;
  --teal-dark:#0d9488;
  --teal-deep:#0f766e;
  --teal-soft:rgba(20,184,166,.10);

  /* Dark header/footer theme (fixed, independent of the light body) */
  --dark-bg:#020617;
  --dark-bg-2:#0f172a;
  --dark-border:#1e293b;
  --dark-text:#e2e8f0;
  --dark-text-dim:#94a3b8;
  --dark-text-faint:#64748b;

  --radius:.85rem;
  --shadow:0 8px 24px rgba(15,23,42,.07);
  font-size:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}

/* ---------- Header (dark) ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(2,6,23,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--dark-border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:.75rem}
.brand-mark{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,var(--teal-deep),var(--teal-dark));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.35rem;color:#fff;
  box-shadow:0 4px 14px rgba(20,184,166,.35);
}
.brand-text .brand-name{font-weight:700;font-size:1.05rem;color:#fff;line-height:1.2}
.brand-text .brand-tag{font-size:.62rem;font-weight:700;letter-spacing:.14em;color:var(--teal);text-transform:uppercase}
.main-nav{display:flex;gap:.5rem}
.main-nav a{
  padding:.55rem 1.1rem;border-radius:.6rem;font-weight:500;color:var(--dark-text-dim);
  transition:color .15s,background .15s;
}
.main-nav a:hover{color:#fff;background:var(--dark-bg-2)}
.main-nav a.active{color:var(--teal);background:rgba(20,184,166,.14)}
.nav-toggle{display:none;background:none;border:1px solid var(--dark-border);border-radius:.6rem;color:var(--dark-text);padding:.45rem .65rem;font-size:1.1rem;cursor:pointer}

/* ---------- Hero ---------- */
.hero{padding:4.5rem 0 3rem;text-align:center;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-40% -20% auto;height:480px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(20,184,166,.07),transparent 65%);
}
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--teal-soft);color:var(--teal-deep);
  border:1px solid rgba(20,184,166,.25);
  padding:.4rem 1rem;border-radius:999px;font-size:.8rem;font-weight:600;margin-bottom:1.5rem;
}
.hero h1{
  font-size:clamp(2rem,5vw,3.4rem);font-weight:800;line-height:1.15;color:var(--text);
  max-width:820px;margin:0 auto 1.1rem;letter-spacing:-.02em;
}
.hero h1 .grad{
  background:linear-gradient(90deg,#0d9488,#0f766e 55%,#0369a1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lead{max-width:640px;margin:0 auto 2.2rem;color:var(--text-dim);font-size:1.08rem}

/* ---------- Generator input ---------- */
.gen-box{max-width:820px;margin:0 auto;position:relative;z-index:1}
.gen-input-wrap{
  background:var(--bg-2);border:2px solid var(--border);border-radius:1.15rem;
  padding:.55rem;display:flex;gap:.55rem;box-shadow:var(--shadow);
  transition:border-color .2s,box-shadow .2s;
}
.gen-input-wrap:focus-within{border-color:var(--teal);box-shadow:0 10px 34px rgba(20,184,166,.16)}
#gen-input{
  flex:1;background:transparent;border:none;outline:none;color:var(--text);
  font-size:1.25rem;padding:1.15rem 1.3rem;font-family:inherit;min-width:0;
}
#gen-input::placeholder{color:var(--text-faint)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:none;cursor:pointer;font-family:inherit;font-weight:600;
  border-radius:.85rem;transition:transform .12s,background .15s,box-shadow .15s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  color:#fff;padding:1.1rem 2rem;font-size:1.05rem;flex-shrink:0;
  box-shadow:0 4px 16px rgba(20,184,166,.3);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(20,184,166,.4)}
.btn-ghost{background:var(--bg-2);color:var(--text-dim);border:1px solid var(--border);padding:.55rem 1rem;font-size:.85rem}
.btn-ghost:hover{color:var(--text);border-color:var(--teal)}
.gen-hint{margin-top:1rem;color:var(--text-faint);font-size:.9rem}

/* ---------- Sections ---------- */
section{padding:3.5rem 0}
.section-head{text-align:center;max-width:640px;margin:0 auto 2.5rem}
.section-head h2{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:700;color:var(--text);margin-bottom:.6rem;letter-spacing:-.01em}
.section-head p{color:var(--text-dim)}
.eyebrow{color:var(--teal-deep);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.6rem}

/* ---------- Style cards ---------- */
.styles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.style-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.6rem;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:border-color .15s,background .15s,transform .15s,box-shadow .15s;
}
.style-card:hover{border-color:rgba(20,184,166,.45);background:var(--card-hover);transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.06)}
.style-card h3{font-size:.8rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}
.style-card .preview{
  font-size:1.15rem;color:var(--text);min-height:2.1rem;word-break:break-word;line-height:1.5;
}
.style-card .card-actions{display:flex;justify-content:flex-end}
.copy-btn{
  background:var(--teal-soft);color:var(--teal-deep);border:1px solid rgba(20,184,166,.3);
  padding:.4rem .95rem;font-size:.8rem;font-weight:600;border-radius:.55rem;cursor:pointer;
  font-family:inherit;transition:background .15s,color .15s;
}
.copy-btn:hover{background:var(--teal);color:#fff}
.copy-btn.copied{background:var(--teal);color:#fff}

/* ---------- Tool cards ---------- */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.tool-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.4rem;transition:border-color .15s,transform .15s,box-shadow .15s;display:block;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.tool-card:hover{border-color:rgba(20,184,166,.45);transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.06)}
.tool-card .tool-icon{
  width:42px;height:42px;border-radius:.7rem;background:var(--teal-soft);
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:.9rem;color:var(--teal-deep);
}
.tool-card h3{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:.35rem}
.tool-card p{font-size:.85rem;color:var(--text-dim)}

/* ---------- Feature / steps ---------- */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.feature{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.feature .f-icon{font-size:1.6rem;margin-bottom:.8rem;display:block}
.feature h3{color:var(--text);font-size:1.02rem;margin-bottom:.4rem}
.feature p{color:var(--text-dim);font-size:.9rem}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;counter-reset:step}
.step{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;position:relative;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.step .num{
  width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;
}
.step h3{color:var(--text);font-size:1rem;margin-bottom:.35rem}
.step p{color:var(--text-dim);font-size:.9rem}

/* ---------- Use case chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;max-width:860px;margin:0 auto}
.chip{
  background:var(--bg-2);border:1px solid var(--border);border-radius:999px;
  padding:.55rem 1.2rem;font-size:.9rem;color:var(--text-dim);
}
.chip b{color:var(--teal-deep);font-weight:600}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto}
.faq details{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:.8rem;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.faq summary{
  cursor:pointer;list-style:none;padding:1.1rem 1.4rem;font-weight:600;color:var(--text);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--teal-deep);font-size:1.3rem;font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-body{padding:0 1.4rem 1.2rem;color:var(--text-dim);font-size:.95rem}

/* ---------- Content pages (about/contact/legal) ---------- */
.page-hero{padding:3.5rem 0 1rem;text-align:center}
.page-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:var(--text);letter-spacing:-.02em;margin-bottom:.7rem}
.page-hero p{color:var(--text-dim);max-width:620px;margin:0 auto}
.prose{max-width:780px;margin:0 auto;padding:2rem 0 4rem}
.prose h2{color:var(--text);font-size:1.35rem;margin:2.2rem 0 .7rem}
.prose h3{color:var(--text);font-size:1.08rem;margin:1.6rem 0 .5rem}
.prose p{color:var(--text-dim);margin-bottom:1rem}
.prose ul{color:var(--text-dim);margin:0 0 1rem 1.3rem}
.prose li{margin-bottom:.45rem}
.prose a{color:var(--teal-deep)}
.prose .updated{font-size:.85rem;color:var(--text-faint);margin-bottom:2rem}
.card-panel{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

/* ---------- Contact form ---------- */
.contact-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem;max-width:960px;margin:0 auto;padding-bottom:4rem}

/* ---------- Simple email-only contact card ---------- */
.contact-simple{max-width:560px;margin:0 auto;padding-bottom:3rem}
.contact-email-card{text-align:center;padding:2.75rem 2rem}
.contact-email-icon{
  width:56px;height:56px;font-size:1.5rem;margin:0 auto 1.2rem;
  display:flex;align-items:center;justify-content:center;
}
.contact-email-card h2{color:var(--text);font-size:1.4rem;margin-bottom:.6rem}
.contact-email-card p{color:var(--text-dim);margin-bottom:1.4rem}
.email-link{
  display:inline-block;font-size:1.35rem;font-weight:700;color:var(--teal-deep);
  padding:.6rem 1.4rem;border-radius:.7rem;background:var(--teal-soft);
  border:1px solid rgba(20,184,166,.3);transition:background .15s,transform .12s;
  word-break:break-word;
}
.email-link:hover{background:var(--teal);color:#fff;transform:translateY(-1px)}
.contact-email-card .form-note{margin-top:1.2rem;margin-bottom:0}
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:.4rem}
.form-group input,.form-group textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--border);border-radius:.7rem;
  padding:.8rem 1rem;color:var(--text);font-family:inherit;font-size:.95rem;outline:none;
  transition:border-color .15s;
}
.form-group input:focus,.form-group textarea:focus{border-color:var(--teal)}
.form-group textarea{min-height:140px;resize:vertical}
.contact-info-item{display:flex;gap:.9rem;margin-bottom:1.4rem}
.contact-info-item .ci-icon{
  width:42px;height:42px;flex-shrink:0;border-radius:.7rem;background:var(--teal-soft);color:var(--teal-deep);
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;
}
.contact-info-item h3{color:var(--text);font-size:.95rem;margin-bottom:.15rem}
.contact-info-item p{color:var(--text-dim);font-size:.88rem}
.form-note{font-size:.82rem;color:var(--text-faint);margin-top:.6rem}
.form-success{
  display:none;background:var(--teal-soft);border:1px solid rgba(20,184,166,.35);color:var(--teal-deep);
  border-radius:.7rem;padding:.9rem 1.1rem;font-size:.9rem;margin-top:1rem;
}

/* ---------- Footer (dark) ---------- */
.site-footer{border-top:1px solid var(--dark-border);background:var(--dark-bg);margin-top:3rem}
.footer-main{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem;padding:3.5rem 0 2.5rem;
}
.footer-brand p{color:var(--dark-text-dim);font-size:.92rem;margin:1.1rem 0 1.4rem;max-width:420px}
.footer-blog-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--teal);font-size:.85rem;font-weight:600;
  padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(20,184,166,.35);
  background:rgba(20,184,166,.08);transition:background .15s,color .15s;
}
.footer-blog-btn:hover{background:var(--teal);color:#fff}
.social-row{display:flex;gap:1rem}
.social-row a{
  color:var(--dark-text-faint);display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;
  border-radius:.5rem;transition:color .15s,background .15s;
}
.social-row a:hover{color:var(--teal);background:rgba(20,184,166,.14)}
.social-row svg{width:19px;height:19px;fill:currentColor}
.footer-col h4{color:#fff;font-size:1.05rem;font-weight:700;margin-bottom:1.2rem}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.85rem}
.footer-col a{color:var(--dark-text-dim);font-size:.93rem;transition:color .15s}
.footer-col a:hover{color:var(--teal)}
.footer-tools{border-top:1px solid var(--dark-border);padding:2.5rem 0}
.footer-tools h4{color:#fff;font-size:1rem;margin-bottom:1.5rem}
.footer-tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
.footer-tools-grid h5{color:var(--teal);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.9rem}
.footer-tools-grid ul{list-style:none}
.footer-tools-grid li{margin-bottom:.55rem}
.footer-tools-grid a{color:var(--dark-text-faint);font-size:.86rem}
.footer-tools-grid a:hover{color:var(--teal)}
.footer-bottom{
  border-top:1px solid var(--dark-border);padding:1.4rem 0;display:flex;
  justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  color:var(--dark-text-faint);font-size:.85rem;
}
.footer-bottom a{color:var(--dark-text-dim)}
.footer-bottom a:hover{color:var(--teal)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%,20px);
  background:var(--teal);color:#fff;font-weight:600;font-size:.9rem;
  padding:.7rem 1.4rem;border-radius:.7rem;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:100;box-shadow:0 8px 24px rgba(20,184,166,.4);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Responsive ---------- */

/* Large tablets / small laptops */
@media(max-width:1024px){
  .container{padding:0 1.1rem}
  .styles-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}

/* Tablets */
@media(max-width:860px){
  .footer-main{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .contact-wrap{grid-template-columns:1fr}
  section{padding:2.75rem 0}
  .hero{padding:3.25rem 0 2.25rem}
  .styles-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.85rem}
  .tools-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .footer-tools-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.5rem}
}

/* Phones (landscape and large) */
@media(max-width:640px){
  html{font-size:15px}
  .header-inner{height:64px}
  .brand-mark{width:38px;height:38px;font-size:1.15rem;border-radius:10px}
  .brand-text .brand-name{font-size:.95rem}
  .brand-text .brand-tag{font-size:.56rem}
  .main-nav{
    display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:.15rem;
    background:var(--dark-bg);border-bottom:1px solid var(--dark-border);padding:.8rem 1.1rem;
    box-shadow:0 12px 24px rgba(2,6,23,.35);
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:.7rem .9rem;width:100%}
  .nav-toggle{display:block}

  .hero{padding:2.5rem 0 1.75rem}
  .hero-badge{font-size:.72rem;padding:.35rem .85rem}
  .hero p.lead{font-size:1rem;padding:0 .25rem}

  .gen-input-wrap{flex-direction:column;border-radius:1rem;padding:.5rem}
  #gen-input{font-size:1.1rem;padding:.9rem 1rem;text-align:center}
  .btn-primary{width:100%;padding:.95rem 1.5rem}

  section{padding:2.25rem 0}
  .section-head{margin:0 auto 1.6rem}
  .section-head h2{font-size:1.5rem}

  .styles-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .style-card{padding:.9rem 1rem}
  .style-card .preview{font-size:1rem;min-height:1.8rem}
  .copy-btn{padding:.35rem .8rem;font-size:.75rem}

  .tools-grid{grid-template-columns:1fr 1fr;gap:.75rem}
  .tool-card{padding:1.1rem}

  .features-grid,.steps{grid-template-columns:1fr}
  .chips{gap:.5rem}
  .chip{font-size:.82rem;padding:.5rem 1rem}

  .page-hero{padding:2.25rem 0 .75rem}
  .prose{padding:1.5rem 0 2.75rem}
  .contact-wrap{gap:1.25rem;padding-bottom:2.75rem}
  .card-panel{padding:1.4rem}

  .footer-main{grid-template-columns:1fr;gap:2rem;padding:2.5rem 0 2rem;text-align:left}
  .footer-tools-grid{grid-template-columns:1fr 1fr;gap:1.5rem 1rem}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:.5rem;text-align:left}
}

/* Small phones */
@media(max-width:400px){
  html{font-size:14px}
  .container{padding:0 .9rem}
  .styles-grid,.tools-grid{grid-template-columns:1fr}
  .hero h1{font-size:1.7rem}
  #gen-input{font-size:1rem}
}

/* Comfortable tap targets on touch devices */
@media(hover:none) and (pointer:coarse){
  .copy-btn{padding:.5rem 1rem;min-height:38px}
  .main-nav a,.tool-card,.style-card{min-height:44px}
  .btn-primary{min-height:48px}
  .nav-toggle{min-width:44px;min-height:44px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}