/*
Theme Name: Floor Forge Garage
Theme URI: https://getfloorforge.com/
Author: Floor Forge Garage
Description: A WordPress theme for Floor Forge garage-floor planning guides, budget calculations, and manual project reviews.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: floor-forge-garage
*/

:root {
  --ff-ink: #111418;
  --ff-ink-2: #20252b;
  --ff-paper: #f7f5ef;
  --ff-white: #ffffff;
  --ff-muted: #66717c;
  --ff-line: #dfe3e6;
  --ff-accent: #d6a24a;
  --ff-accent-dark: #855812;
  --ff-soft: #ece8df;
  --ff-radius: 18px;
  --ff-shadow: 0 18px 50px rgba(17,20,24,.12);
  --ff-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ff-ink);
  background: var(--ff-paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }

.ff-wrap { width: min(calc(100% - 40px), var(--ff-max)); margin-inline: auto; }
.ff-narrow { width: min(calc(100% - 40px), 820px); margin-inline: auto; }
.ff-section { padding: 88px 0; }
.ff-section--tight { padding: 58px 0; }
.ff-section--dark { background: var(--ff-ink); color: var(--ff-white); }
.ff-section--white { background: var(--ff-white); }
.ff-kicker { margin: 0 0 12px; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ff-accent-dark); }
.ff-section--dark .ff-kicker { color: #f0c77f; }
.ff-title { margin: 0; font-size: clamp(2rem, 5vw, 4.2rem); line-height: .98; letter-spacing: -.05em; }
.ff-title--section { font-size: clamp(1.85rem, 3vw, 3.1rem); }
.ff-lede { max-width: 720px; margin: 20px 0 0; color: var(--ff-muted); font-size: clamp(1.05rem, 1.4vw, 1.23rem); }
.ff-section--dark .ff-lede { color: #c8ced4; }
.ff-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.ff-btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 48px; padding: 12px 20px; border: 1px solid transparent; border-radius: 999px; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.ff-btn:hover { transform: translateY(-1px); }
.ff-btn--primary { color: #17130d; background: var(--ff-accent); }
.ff-btn--primary:hover { background: #e1b25e; }
.ff-btn--ghost { background: transparent; border-color: #7a838b; color: inherit; }
.ff-btn--ghost:hover { border-color: currentColor; }
.ff-btn--dark { color: var(--ff-white); background: var(--ff-ink); }

/* Header */
.ff-header { position: sticky; top: 0; z-index: 100; background: rgba(247,245,239,.94); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(17,20,24,.08); }
.ff-nav { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 22px; }
.ff-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.ff-brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid var(--ff-ink); border-radius: 10px; font-weight: 900; letter-spacing: -.08em; }
.ff-brand-copy { display: grid; line-height: 1; }
.ff-brand-copy strong { font-size: 1rem; letter-spacing: .02em; }
.ff-brand-copy span { margin-top: 5px; font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ff-muted); }
.ff-nav-links { display: flex; align-items: center; gap: 22px; }
.ff-nav-links ul { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.ff-nav-links a { text-decoration: none; font-weight: 700; font-size: .92rem; }
.ff-nav-links a:hover { color: var(--ff-accent-dark); }
.ff-menu-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; font-size: 1.5rem; }

/* Hero */
.ff-hero { overflow: hidden; background: radial-gradient(circle at 82% 28%, rgba(214,162,74,.28), transparent 27%), linear-gradient(145deg,#161a1f,#0f1114 60%); color: white; }
.ff-hero-grid { min-height: 650px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 60px; }
.ff-hero .ff-kicker { color: #e8bd72; }
.ff-hero-copy p { max-width: 660px; color: #cbd1d6; font-size: 1.16rem; }
.ff-hero-visual { position: relative; min-height: 460px; }
.ff-hero-photo { position:absolute; inset:8% 0 0 5%; margin:0; border-radius:28px; overflow:hidden; box-shadow:0 32px 100px rgba(0,0,0,.35); background:#4a4e51; }
.ff-hero-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(17,20,24,.02),rgba(17,20,24,.18)); pointer-events:none; }
.ff-hero-photo img { display:block; width:100%; height:100%; min-height:430px; object-fit:cover; object-position:center; }
.ff-visual-note { position:absolute; z-index:2; right:14px; bottom:5px; padding:5px 8px; border-radius:999px; background:rgba(17,20,24,.72); color:#d8dde1; font-size:.66rem; letter-spacing:.02em; }
.ff-stat { position: absolute; z-index: 2; padding: 15px 17px; border-radius: 15px; background: rgba(255,255,255,.94); color: var(--ff-ink); box-shadow: var(--ff-shadow); }
.ff-stat strong { display:block; font-size: 1.35rem; line-height:1.1; }
.ff-stat span { color:var(--ff-muted); font-size:.78rem; }
.ff-stat--one { left: 0; bottom: 13%; }
.ff-stat--two { right: -2%; top: 11%; }
.ff-service-line { margin-top: 26px; color: #aeb6bd; font-size: .86rem; }

/* Visual showcase */
.ff-section--showcase { background:#ede9df; }
.ff-showcase-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:64px; align-items:center; }
.ff-showcase-copy .ff-lede { max-width:590px; }
.ff-checks { list-style:none; margin:28px 0 0; padding:0; display:grid; gap:13px; }
.ff-checks li { position:relative; padding-left:30px; color:#424a52; }
.ff-checks li::before { content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:#dfbd7b; color:#17130d; font-size:.75rem; font-weight:900; }
.ff-showcase-visual { margin:0; overflow:hidden; border-radius:24px; background:#d4d0c7; box-shadow:0 22px 60px rgba(17,20,24,.13); }
.ff-showcase-visual img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.ff-showcase-visual figcaption { padding:10px 14px 12px; background:#171b20; color:#aeb6bd; font-size:.72rem; }

/* Cards */
.ff-grid { display: grid; gap: 22px; }
.ff-grid--4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.ff-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.ff-card { padding: 28px; border: 1px solid var(--ff-line); border-radius: var(--ff-radius); background: var(--ff-white); }
.ff-card h3 { margin: 13px 0 8px; font-size: 1.14rem; }
.ff-card p { margin: 0; color: var(--ff-muted); }
.ff-icon { width: 42px; height: 42px; display:grid; place-items:center; border-radius:12px; background:#f0e5cf; font-size:1.15rem; font-weight:900; }
.ff-number { font-size: .8rem; font-weight: 900; letter-spacing:.08em; color:var(--ff-accent-dark); }
.ff-link { display:inline-flex; margin-top:16px; font-weight:800; color:var(--ff-accent-dark); text-decoration:none; }

/* Split section */
.ff-split { display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items:center; }
.ff-compare { border-radius:24px; background:#e9e6de; padding:32px; }
.ff-compare-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid rgba(17,20,24,.12); }
.ff-compare-row:last-child { border-bottom:0; }
.ff-compare-row b:nth-child(2) { font-size:.76rem; color:var(--ff-muted); text-transform:uppercase; letter-spacing:.08em; }

/* Location pills */
.ff-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.ff-pill { padding:10px 14px; border-radius:999px; background:var(--ff-white); border:1px solid var(--ff-line); font-weight:750; text-decoration:none; }
.ff-pill:hover { border-color: var(--ff-accent-dark); }

/* CTA */
.ff-cta { position:relative; overflow:hidden; border-radius:28px; padding:55px; background:linear-gradient(135deg,#171b20,#282e34); color:#fff; }
.ff-cta::after { content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(214,162,74,.22); right:-70px; top:-90px; }

/* Inner pages */
.ff-page-hero { padding: 80px 0 54px; background:#171b20; color:#fff; }
.ff-page-hero .ff-lede { color:#c8ced4; }
.ff-prose { font-size:1.05rem; }
.ff-prose h2 { margin-top:2.2em; font-size:clamp(1.55rem,2.6vw,2.25rem); line-height:1.1; }
.ff-prose h3 { margin-top:1.7em; }
.ff-prose p, .ff-prose li { color:#424a52; }
.ff-prose a:not(.ff-btn) { color:var(--ff-accent-dark); font-weight:700; }
.ff-callout { margin:28px 0; padding:22px 24px; border-left:4px solid var(--ff-accent); border-radius:0 14px 14px 0; background:#f0ece3; }
.ff-table-wrap { overflow-x:auto; margin:28px 0; }
.ff-table { width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; }
.ff-table th,.ff-table td { padding:15px; text-align:left; border-bottom:1px solid var(--ff-line); vertical-align:top; }
.ff-table th { background:#20252b; color:#fff; }

/* Calculator */
.ff-calculator-hint { display:inline-flex; align-items:center; gap:8px; margin:20px 0 0; padding:8px 12px; border:1px solid #3c444b; border-radius:999px; color:#d8dde1; font-size:.86rem; font-weight:700; }
.ff-calculator-hint::before { content:"↻"; color:#f1c676; font-size:1rem; }
.ff-calculator { display:grid; grid-template-columns:1fr .9fr; gap:26px; margin-top:24px; }
.ff-panel { padding:28px; background:#fff; border:1px solid var(--ff-line); border-radius:18px; }
.ff-field { margin-bottom:18px; }
.ff-field label { display:block; margin-bottom:7px; font-weight:800; }
.ff-field input,.ff-field select,.ff-field textarea { width:100%; padding:12px 13px; border:1px solid #cbd1d6; border-radius:10px; background:#fff; }
.ff-field textarea { min-height:120px; resize:vertical; }
.ff-result { display:grid; place-items:center; text-align:center; min-height:280px; background:#171b20; color:#fff; }
.ff-result-number { margin:8px 0; font-size:clamp(2rem,5vw,3.8rem); line-height:1; letter-spacing:-.05em; color:#f1c676; }
.ff-fine { font-size:.82rem; color:#707983; }
.ff-result .ff-fine { color:#b9c0c6; }

/* Forms */
.ff-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ff-form-message { margin: 18px 0; padding:14px 16px; border-radius:10px; background:#e5f4e7; border:1px solid #afcfb5; }
.ff-form-message--error { background:#fde8e7; border-color:#e5b4b1; }
.ff-honeypot { position:absolute !important; left:-9999px !important; }

/* Footer */
.ff-footer { background:#0e1012; color:#c6ccd1; padding:54px 0 24px; }
.ff-footer-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:40px; }
.ff-footer h4 { color:#fff; margin:0 0 12px; }
.ff-footer a { color:#c6ccd1; text-decoration:none; }
.ff-footer a:hover { color:#fff; }
.ff-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.ff-footer-bottom { margin-top:40px; padding-top:20px; border-top:1px solid #2a2f34; font-size:.82rem; color:#89929a; }

@media (max-width: 900px) {
  .ff-nav-links { display:none; position:absolute; left:0; right:0; top:74px; padding:20px; background:var(--ff-paper); border-bottom:1px solid var(--ff-line); }
  .ff-nav-links.is-open { display:block; }
  .ff-nav-links ul { align-items:flex-start; flex-direction:column; }
  .ff-menu-toggle { display:block; }
  .ff-hero-grid,.ff-split,.ff-calculator,.ff-showcase-grid { grid-template-columns:1fr; }
  .ff-hero-grid { padding:74px 0; min-height:auto; }
  .ff-hero-visual { min-height:390px; }
  .ff-grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ff-grid--3 { grid-template-columns:1fr; }
  .ff-footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px) {
  .ff-wrap,.ff-narrow { width:min(calc(100% - 28px),var(--ff-max)); }
  .ff-section { padding:64px 0; }
  .ff-hero-grid { gap:24px; padding:55px 0; }
  .ff-hero-visual { min-height:300px; }
  .ff-hero-photo { inset:5% 2% 0 4%; }
  .ff-hero-photo img { min-height:280px; }
  .ff-stat { padding:12px; }
  .ff-stat--two { right:0; }
  .ff-grid--4,.ff-footer-grid,.ff-form-grid { grid-template-columns:1fr; }
  .ff-cta { padding:34px 26px; }
  .ff-brand-copy span { display:none; }
}

/* Version 1.2: readable controls, accessible navigation and narrow-screen layouts. */
[hidden] { display:none !important; }
.ff-skip { position:fixed; top:-120px; left:16px; z-index:1000; padding:12px 18px; background:#fff; color:#111418; border:3px solid #855812; }
.ff-skip:focus { top:12px; }
:focus-visible { outline:3px solid #855812; outline-offset:4px; }
.ff-section--dark :focus-visible,.ff-footer :focus-visible,.ff-result :focus-visible { outline-color:#f1c676; }
#main-content:focus { outline:none; }
.ff-nav-links [aria-current="page"]:not(.ff-btn) { text-decoration:underline; text-underline-offset:7px; }
.ff-nav-links a.ff-btn--dark:hover { color:white; background:#30363d; }
.ff-breadcrumbs { margin:0 0 20px; color:#d5dbe0; font-size:.9rem; }
.ff-breadcrumbs a { color:inherit; text-underline-offset:4px; }
.ff-page-hero .ff-lede { max-width:800px; }
.ff-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ff-prose .ff-card h2 { margin:0 0 12px; font-size:1.35rem; }
.ff-first-heading { margin-top:0 !important; }
.ff-process { margin:32px 0; }
.ff-process h2 { margin:8px 0 12px; font-size:1.3rem; }
.ff-process p { margin:0; }
.ff-calculator { grid-template-columns:1fr 1fr; align-items:stretch; }
.ff-calculator>* { min-width:0; }
.ff-calc-fields { color:#111418; }
.ff-field small { display:block; margin-top:6px; font-size:.85rem; color:#53606a; }
.ff-field input,.ff-field select,.ff-field textarea { color:#111418; min-width:0; }
.ff-result .ff-kicker,.ff-cta .ff-kicker { color:#f1c676; }
.ff-result .ff-result-number { color:#f1c676; font-size:clamp(1.55rem,3vw,2.65rem); line-height:1.25; overflow-wrap:anywhere; }
.ff-result .ff-model-link,.ff-prose .ff-result .ff-model-link { display:block; color:#e8c993; margin:16px 0 24px; }
.ff-result .ff-fine { color:#c8ced4; }
.ff-btn--primary,.ff-prose a.ff-btn--primary { background:#d6a24a; color:#17130d; }
.ff-btn--dark,.ff-prose a.ff-btn--dark { background:#111418; color:#fff; }
.ff-btn[aria-disabled="true"],button:disabled { opacity:.65; cursor:default; transform:none; }
.ff-check { display:flex; align-items:flex-start; gap:12px; margin:18px 0 24px; color:#303941; font-weight:500; }
.ff-check input { flex:0 0 auto; width:20px; height:20px; margin:3px 0 0; accent-color:#855812; }
.ff-check span { min-width:0; }
.ff-project-fieldset { margin:28px 0; padding:0; border:0; min-width:0; }
.ff-project-fieldset legend { font-size:1.55rem; font-weight:800; padding:0; }
.ff-project-fieldset .ff-calculator { margin-top:18px; }
.ff-quote-form .ff-panel h2 { font-size:1.55rem; }
.ff-form-message { color:#183c22; }
.ff-form-message--error { color:#751b16; }
.ff-form-message:focus { outline-offset:2px; }
.ff-next { border-top:1px solid #dfe3e6; margin-top:48px; padding-top:12px; }
.ff-next h2 { margin-top:24px; }
.ff-source-note { background:#f7f5ef; border-radius:14px; margin-top:36px; padding:24px; font-size:.9rem; }
.ff-source-note h2 { margin:0 0 12px; font-size:1.1rem; }
.ff-source-note p { margin:0; }
.ff-table caption { text-align:left; font-weight:700; padding:0 0 12px; }
.ff-table tbody th { background:#f4f3ef; color:#20252b; }
.ff-table-wrap { max-width:100%; }
.ff-faq { padding:20px 0; border-bottom:1px solid #dfe3e6; }
.ff-faq summary { font-weight:800; cursor:pointer; min-height:28px; }
.ff-faq p { margin-bottom:0; }
.ff-footer-heading { font-size:1rem; color:#fff; margin:0 0 12px; }
.ff-footer .ff-brand-mark { color:#fff; border-color:#fff; }
.ff-footer .ff-brand-copy strong { color:#fff; }
.ff-footer .ff-brand-copy span { color:#bdc4cb; }
.ff-footer p { max-width:440px; }
.ff-footer a { overflow-wrap:anywhere; }
.ff-cta .ff-lede { color:#c8ced4; }
.ff-cta::after { pointer-events:none; }
.ff-steps li { margin-bottom:18px; }
@media (max-width:900px) {
 .ff-calculator { grid-template-columns:1fr; }
 .ff-nav { flex-wrap:wrap; }
 .ff-nav-links { display:block; position:static; flex-basis:100%; padding:16px 0; }
 .ff-menu-toggle { display:none; }
 .ff-js .ff-menu-toggle { display:block; }
 .ff-js .ff-nav-links { display:none; position:absolute; top:74px; left:0; right:0; padding:20px; max-height:calc(100dvh - 74px); overflow-y:auto; }
 .ff-js .ff-nav-links.is-open { display:block; }
 .ff-nav-links ul { gap:4px; }
 .ff-nav-links ul a { display:block; padding:10px 0; }
 .ff-nav-links .ff-btn { margin-top:16px; }
 .ff-result { min-height:230px; }
}
@media (max-width:620px) {
 .ff-grid--2 { grid-template-columns:1fr; }
 .ff-page-hero { padding:42px 0; }
 .ff-section { padding:48px 0; }
 .ff-panel { padding:22px; }
 .ff-table { min-width:580px; }
 .ff-actions { flex-direction:column; align-items:stretch; }
 .ff-actions .ff-btn { width:100%; }
 .ff-brand-copy strong { font-size:.95rem; }
 .ff-compare { padding:22px; }
 .ff-compare-row { grid-template-columns:1fr; gap:5px; }
 .ff-source-note { padding:20px; }
 .ff-footer-grid { gap:30px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }

/* 1.3 content repair: anchored guides and longer optional project fields. */
.ff-prose [id] { scroll-margin-top: 110px; }
.ff-on-page { padding:20px 24px; border:1px solid #dfe3e6; border-radius:14px; background:#f7f5ef; }
.ff-on-page ul { margin-bottom:0; }
.ff-calc-fields .ff-fine { color:#53606a; }
.ff-calc-fields h3 { margin-top:28px; }
.ff-result { align-self:stretch; }
.ff-result a:not(.ff-btn) { color:#e8c993; }
.ff-footer-grid>div { min-width:0; }

/* Core content sequence: problem, solution, benefits, process, next step. */
.ff-content-block { margin:0 0 40px; }
.ff-content-block > h2:first-child { margin-top:0; }
.ff-content-block h3 { margin-top:28px; line-height:1.3; }
.ff-content-block .ff-card h3 { margin-top:0; }
.ff-content-block .ff-grid { margin:24px 0; }

/* 1.5 estimate funnel and narrow-screen action. */
.ff-quote-form { display:grid; gap:20px; }
.ff-quote-form .ff-panel { min-width:0; }
.ff-quote-form .ff-field input[type="file"] { padding:12px; }
.ff-extra-details summary { cursor:pointer; font-weight:800; font-size:1.2rem; }
.ff-extra-details[open] summary { margin-bottom:18px; }
.ff-submit-panel .ff-btn { min-width:min(100%,280px); }
.ff-mobile-estimate { display:none; }
#project-request { scroll-margin-top:96px; }
@media (max-width:900px) {
 body { padding-bottom:84px; }
 .ff-mobile-estimate { display:block; position:fixed; z-index:110; bottom:0; left:0; right:0; padding:10px 14px max(10px,env(safe-area-inset-bottom)); background:#171b20; box-shadow:0 -6px 24px rgba(0,0,0,.2); }
 .ff-mobile-estimate .ff-btn { display:flex; width:100%; min-height:50px; }
}