/*
Theme Name: FontSiteScript
Theme URI: https://fontsitescript.com/
Description: Custom GeneratePress child theme for FontSiteScript.
Author: FontSiteScript
Template: generatepress
Version: 1.0.6
Text Domain: fontsitescript
*/

:root {
  --fss-bg: #071426;
  --fss-panel: #0d1d36;
  --fss-line: #29466d;
  --fss-text: #eef4ff;
  --fss-muted: #9cb5da;
  --fss-blue: #3478f6;
  --fss-cyan: #20d9e9;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fss-bg); color: var(--fss-text); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
a { color: inherit; }
.site-content { display: block; padding: 0; }
.content-area { width: 100%; }
.site-main { margin: 0; }
.fss-wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.fss-header { border-bottom: 1px solid var(--fss-line); background: #061224; }
.fss-header-inner { min-height: 108px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.fss-logo { display: inline-flex; align-items: center; text-decoration: none; }
.fss-logo img { display: block; width: auto; height: 80px; max-width: min(525px, 72vw); object-fit: contain; }
.fss-nav { display: flex; align-items: center; gap: 22px; }
.fss-nav a { color: #dce8ff; text-decoration: none; font-weight: 650; }
.fss-nav .fss-button { padding: 10px 16px; border-radius: 8px; background: linear-gradient(100deg, #5748f5, #14c9e8); color: #fff; }
.fss-footer { border-top: 1px solid var(--fss-line); padding: 30px 0; color: var(--fss-muted); }
.fss-footer-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fss-footer-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.fss-footer a { color: var(--fss-muted); text-decoration: none; }
.fss-hero { padding: 84px 0 62px; background: radial-gradient(circle at 65% 10%, #112d59 0, #071426 42%); }
.fss-eyebrow { color: var(--fss-cyan); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 800; }
.fss-hero h1 { max-width: 850px; margin: 12px 0 16px; font-size: clamp(46px, 7vw, 82px); line-height: .98; letter-spacing: -.055em; }
.fss-lead { max-width: 700px; color: var(--fss-muted); font-size: 18px; }
.fss-search { display: flex; gap: 10px; margin-top: 30px; max-width: 760px; }
.fss-search input, .fss-search select { min-height: 52px; border: 1px solid var(--fss-line); background: #09172c; color: #fff; border-radius: 8px; padding: 0 16px; }
.fss-search input { flex: 1; min-width: 0; }
.fss-search button, .fss-primary { border: 0; border-radius: 8px; padding: 0 20px; background: linear-gradient(100deg, #5748f5, #14c9e8); color: #fff; font-weight: 800; cursor: pointer; }
.fss-category-section { padding: 34px 0 6px; }
.fss-category-section .fss-eyebrow { text-align: center; }
.fss-category-section .fss-category-buttons { justify-content: center; }
.fss-category-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 15px; }
.fss-section > .fss-wrap > .fss-category-buttons { margin-bottom: 36px; }
.fss-category-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid var(--fss-line); border-radius: 7px; background: var(--fss-panel); color: var(--fss-text); font-size: 14px; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.fss-category-button:visited { color: var(--fss-text); }
.fss-category-button:hover, .fss-category-button:focus, .fss-category-button.is-active { border-color: var(--fss-cyan); background: linear-gradient(100deg, #3f43df, #119dbd); color: #fff; transform: translateY(-2px); outline: none; }
.fss-section { padding: 58px 0; }
.fss-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.fss-section h2 { margin: 7px 0 0; font-size: clamp(30px, 4vw, 44px); }
.fss-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fss-card { min-height: 185px; padding: 20px; border: 1px solid var(--fss-line); border-radius: 10px; background: var(--fss-panel); text-decoration: none; transition: transform .18s ease, border-color .18s ease; }
.fss-card, .fss-card:visited, .fss-card:hover, .fss-card:focus { color: var(--fss-text); }
.fss-card:hover, .fss-card:focus { transform: translateY(-3px); border-color: var(--fss-cyan); background: #102442; outline: none; }
.fss-card-name { color: var(--fss-text); font-size: 21px; font-weight: 700; }
.fss-card-preview { color: var(--fss-text); margin: 24px 0; font-size: 38px; line-height: 1; }
.fss-card-meta { color: var(--fss-muted); font-size: 13px; }
.fss-font-hero { padding: 58px 0 26px; }
.fss-font-hero h1 { font-size: clamp(46px, 7vw, 76px); margin: 8px 0; letter-spacing: -.04em; }
.fss-tool { border: 1px solid var(--fss-line); border-radius: 12px; padding: 24px; background: var(--fss-panel); margin-bottom: 20px; }
.fss-preview-input, .fss-code { width: 100%; border: 1px solid var(--fss-line); background: #07172d; color: #fff; border-radius: 8px; padding: 14px; }
.fss-preview-output { margin-top: 16px; padding: 24px; border-radius: 8px; background: #f5f7ff; color: #0b1830; font-size: 54px; line-height: 1.15; overflow-wrap: anywhere; }
.fss-options { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.fss-option { border: 1px solid var(--fss-line); background: #09172c; color: #fff; border-radius: 7px; padding: 9px 13px; cursor: pointer; }
.fss-option.is-active { background: linear-gradient(100deg, #5748f5, #14c9e8); }
.fss-code { white-space: pre-wrap; font-family: ui-monospace, monospace; min-height: 130px; }
@media (max-width: 900px) { .fss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fss-nav a:not(.fss-button) { display: none; } .fss-grid { grid-template-columns: 1fr; } .fss-search { flex-direction: column; } .fss-search button { min-height: 50px; } .fss-category-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .fss-category-button { padding: 0 10px; font-size: 12px; } }