/*
Theme Name: FastSSL Arena
Theme URI: https://www.fastsslarena.com/
Author: Prima Secure
Description: Custom theme for FastSSL Arena — an SSL certificate marketplace covering DigiCert, Sectigo, Thawte, GeoTrust and RapidSSL certificates.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: fastsslarena
*/

/* ==========================================================================
   Design tokens — sharp, clear, modern
   Squared corners, one confident accent (teal), gold reserved for a single
   emphasis move per screen, generous whitespace, tight geometric type.
   ========================================================================== */

:root{
  --navy: #0B1526;
  --navy-soft: #16233A;
  --gold: #C9A24B;
  --gold-deep: #A9823A;
  --teal: #2A9D8F;
  --teal-deep: #1F7A70;
  --paper: #FFFFFF;
  --paper-alt: #F5F7F8;
  --ink: #12161F;
  --slate: #545E6B;
  --slate-light: #8992A0;
  --line: #E1E5E9;
  --line-dark: rgba(245,247,248,0.14);

  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --max-w: 1200px;
  --measure: 620px;
  --radius: 0px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body{
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-size: 16.5px;
}

img, svg{ display:block; max-width:100%; }
a{ color: inherit; }

h1, h2, h3{
  font-family: var(--font-display);
  color: var(--navy);
  margin: 0 0 0.4em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.3rem, 4.4vw, 3.6rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; }
h2{ font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1.14; }
h3{ font-size: 1.18rem; }

p{ margin: 0 0 1.1em; color: var(--ink); }
p.lede{ color: var(--slate); font-size: 1.14rem; max-width: var(--measure); }

.measure{ max-width: var(--measure); }

.container{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

a:focus-visible, button:focus-visible, summary:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* ---------- header ---------- */
.site-header{
  background: var(--navy);
  color: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line-dark);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}
.brand-mark{
  display:flex;
  align-items:center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--white, #fff);
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark-icon{
  width: 18px; height: 18px;
  flex: none;
  background: var(--gold);
  transform: rotate(45deg);
  position: relative;
}
.brand-mark-icon::after{
  content:"";
  position:absolute;
  inset: 4px;
  background: var(--navy);
}
.main-nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap: clamp(10px, 2vw, 30px); flex-wrap: wrap; }
.main-nav{ display:flex; align-items:center; }
.main-nav a{
  color: var(--paper);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  opacity: 0.86;
  display:inline-block;
}
.main-nav a:hover, .main-nav a.is-active, .main-nav li.current-menu-item a{
  opacity: 1;
  border-bottom-color: var(--gold);
  color: var(--gold);
}

/* ---------- hero ---------- */
.hero{
  background: var(--navy);
  color: var(--paper);
  padding: clamp(60px, 9vw, 116px) 0 clamp(56px, 7vw, 96px);
}
.hero .container{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.hero-kicker{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--teal);
  margin: 0 0 18px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.hero h1{ color: #fff; }
.hero p.lede{ color: rgba(245,247,248,0.76); }
.hero-actions{ display:flex; gap:14px; margin-top: 30px; flex-wrap: wrap; }
.hero-badge-wrap{ display:flex; justify-content:center; }

/* hero badge — flat geometric mark replacing the old vintage seal */
.hero-badge{
  position: relative;
  width: 190px; height: 190px;
}
.hero-badge .plate{
  position:absolute; inset:0;
  border: 1px solid var(--teal);
}
.hero-badge .plate-fill{
  position:absolute; top:14px; left:14px; right:14px; bottom:14px;
  background: var(--navy-soft);
  border: 1px solid rgba(245,247,248,0.18);
  display:flex; align-items:center; justify-content:center;
}
.hero-badge .lock{ width: 46px; height: 46px; }
.hero-badge figcaption{
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-light);
  text-align:center;
}

/* buttons — sharp corners, one confident CTA color */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.96rem;
  padding: 14px 26px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-gold{ background: var(--gold); color: var(--navy); }
.btn-gold:hover{ background: var(--gold-deep); }
.btn-outline{ background: transparent; color: var(--paper); border-color: rgba(245,247,248,0.4); }
.btn-outline:hover{ border-color: #fff; }
.btn-ink{ background: var(--navy); color: #fff; }
.btn-ink:hover{ background: var(--navy-soft); }

/* ---------- sections ---------- */
section{ padding: clamp(56px, 7vw, 100px) 0; }
.section-alt{ background: var(--paper-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head{ max-width: 740px; margin-bottom: clamp(30px, 4vw, 48px); }
.section-head .eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--teal);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- ledger list ---------- */
.ledger{ border-top: 1px solid var(--line); }
.ledger-row{
  display:grid;
  grid-template-columns: 64px 1fr auto;
  gap: 20px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.ledger-row .ledger-index{
  font-family: var(--font-mono);
  color: var(--slate-light);
  font-size: 0.95rem;
  padding-top: 4px;
}
.ledger-row h3{ margin-bottom: 6px; }
.ledger-row p{ color: var(--slate); margin-bottom: 0; max-width: 56ch; }
.ledger-row .ledger-cta{ align-self:center; white-space:nowrap; }
.ledger-row a.brand-link{
  text-decoration:none;
  color: var(--navy);
  font-weight:600;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 1px;
}
.ledger-row a.brand-link:hover{ color: var(--teal-deep); border-bottom-color: var(--teal); }

/* ---------- spec table ---------- */
.spec-table{ width:100%; border-collapse: collapse; }
.spec-table caption{ text-align:left; color: var(--slate); margin-bottom: 14px; font-size:0.95rem; }
.spec-table th, .spec-table td{
  text-align:left;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.96rem;
}
.spec-table thead th{
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--slate);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--navy);
}
.spec-table tbody th{ font-weight: 600; color: var(--navy); }
.spec-table td.num{ font-family: var(--font-mono); }

/* ---------- validation steps ---------- */
.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.step{ padding: 30px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.step .step-num{ font-family: var(--font-mono); color: var(--gold-deep); font-size: 0.88rem; display:block; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.step h3{ font-size: 1.08rem; margin-bottom: 8px; }
.step p{ color: var(--slate); font-size: 0.95rem; margin-bottom: 0; }

/* ---------- faq ---------- */
.faq-item{ border-bottom: 1px solid var(--line); padding: 6px 0; }
.faq-item summary{
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--navy);
  padding: 18px 32px 18px 0;
  position: relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content: "+";
  position:absolute; right: 2px; top: 14px;
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--teal);
}
.faq-item[open] summary::after{ content: "\2212"; }
.faq-item .faq-body{ color: var(--slate); padding: 0 0 22px; max-width: var(--measure); }

/* ---------- trust bar ---------- */
.trust-bar{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.trust-item{ padding: 26px 24px; border-right: 1px solid var(--line); }
.trust-item:last-child{ border-right:none; }
.trust-item .num{ font-family: var(--font-display); font-size: 2rem; font-weight:700; color: var(--navy); display:block; }
.trust-item .label{ color: var(--slate); font-size: 0.9rem; }

/* ---------- cta band ---------- */
.cta-band{ background: var(--navy); color: var(--paper); text-align: left; }
.cta-band .container{ display:flex; align-items:center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.cta-band h2{ color: #fff; margin-bottom: 6px; }
.cta-band p{ color: rgba(245,247,248,0.72); margin-bottom:0; }

/* ---------- editable content area (from the WordPress editor) ---------- */
.entry-content{ padding: clamp(40px,6vw,72px) 0; }
.entry-content .container > *:last-child{ margin-bottom:0; }

/* ---------- footer ---------- */
.site-footer{ background: var(--navy-soft); color: rgba(245,247,248,0.68); padding: 52px 0 32px; font-size: 0.92rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; border-bottom: 1px solid var(--line-dark); padding-bottom: 34px; margin-bottom: 20px; }
.footer-grid h4{ font-family: var(--font-mono); color: var(--paper); font-size: 0.8rem; font-weight: 500; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom: 9px; }
.footer-grid a{ color: rgba(245,247,248,0.68); text-decoration:none; }
.footer-grid a:hover{ color: var(--gold); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; opacity:0.68; font-size: 0.85rem; }

/* ---------- check-list (compact benefit/service bullets) ---------- */
.check-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap: 12px 32px; }
.check-list li{ position:relative; padding-left:26px; color:var(--slate); font-size:0.97rem; }
.check-list li::before{ content:""; position:absolute; left:0; top:0.55em; width:9px; height:9px; background:var(--teal); }
.check-list.single-col{ grid-template-columns: 1fr; }

/* ---------- choice guide (a short list of "choose X when Y" lines) ---------- */
.choice-list{ margin:0; }
.choice-list p{ padding: 14px 0; border-bottom: 1px solid var(--line); margin:0; }
.choice-list p:first-child{ padding-top:0; }
.choice-list strong{ color: var(--navy); }

/* ---------- callout (a single highlighted note, e.g. CertCentral) ---------- */
.callout{ border-left: 3px solid var(--gold); padding: 4px 0 4px 24px; }

/* ---------- brand logo (certificate authority's own mark, "why choose" section) ---------- */
.brand-logo{ height: 32px; width: auto; margin: 0 0 20px; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-badge-wrap{ order:-1; }
  .hero-badge{ width: 150px; height:150px; margin: 0 auto; }
  .steps{ grid-template-columns: 1fr; }
  .step{ border-right:none; }
  .trust-bar{ grid-template-columns: 1fr 1fr; }
  .trust-item{ border-bottom: 1px solid var(--line); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .ledger-row{ grid-template-columns: 40px 1fr; }
  .ledger-row .ledger-cta{ grid-column: 2; margin-top: 6px; }
}
@media (max-width: 560px){
  .main-nav{ display:none; }
  .trust-bar{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .check-list{ grid-template-columns: 1fr; }
}