/*
Theme Name: FFMI Calculator Pro
Theme URI: https://ffmicalculatorpro.com/
Description: Lightweight theme for FFMI Calculator Pro. Handles the header, hero, footer, colours and fonts. Page text lives in the block editor and the calculator comes from the FFMI Calculator plugin.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ffmi-pro
*/

/* Brand tokens. Dark values apply when the visitor's system is dark, or when they pick dark with the header button. */
:root {
  --navy: #101923;
  --graphite: #1B2A38;
  --lime: #C4F56A;
  --chalk: #F4F6F3;
  --steel: #8D9AAA;
  --amber: #E0A54B;

  --bg: var(--chalk);
  --surface: #FFFFFF;
  --field: #F4F6F3;
  --ink: #101923;
  --muted: #536170;
  --line: #DDE2E6;
  --focus: #101923;
  --dark: var(--navy);
  --dark-2: var(--graphite);
  --on-dark: #F4F6F3;
  --on-dark-muted: #A9B4C1;
  --dark-line: #2A3A4A;
  --warn-bg: #FBEFD9; --warn-ink: #6A4710;
  --link: #3F7A12;

  --display: "Sora", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0B1219; --surface: #1B2A38; --field: #101923; --ink: #F4F6F3; --muted: #A9B4C1; --line: #2A3A4A; --focus: #C4F56A;
  --dark: #101923; --dark-2: #22344A; --dark-line: #2E4054;
  --warn-bg: #3A2C14; --warn-ink: #F2C98A; --link: #C4F56A; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0B1219; --surface: #1B2A38; --field: #101923; --ink: #F4F6F3; --muted: #A9B4C1; --line: #2A3A4A; --focus: #C4F56A;
  --dark: #101923; --dark-2: #22344A; --dark-line: #2E4054;
  --warn-bg: #3A2C14; --warn-ink: #F2C98A; --link: #C4F56A; color-scheme: dark }

/* Base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bg); color: var(--ink); font: 16px/1.6 var(--body); margin: 0; }
img { max-width: 100%; height: auto; }
.shell { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 40px); }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.1; text-wrap: balance; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
.eyebrow { font: 600 .75rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; background: var(--lime); color: var(--navy); padding: 10px 14px; border-radius: 8px; font-weight: 700; }

/* Header and hero (always dark) */
.brand-top { background: var(--dark); color: var(--on-dark); overflow-x: clip; }
.brand-top > .shell { position: relative; }
.models { position: absolute; right: calc(clamp(16px, 3vw, 40px) + 56px); top: 64px; width: min(44%, 500px); aspect-ratio: 2 / 3; z-index: 0; pointer-events: none; }
.models::before { content: ""; position: absolute; inset: 18% 8% 20% 14%; background: radial-gradient(closest-side, rgba(196, 245, 106, .16), transparent); filter: blur(10px); }
.models img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right top; opacity: 0; transition: opacity .4s ease; -webkit-mask-image: linear-gradient(to left, transparent 0, #000 9%); mask-image: linear-gradient(to left, transparent 0, #000 9%); }
.models img.on { opacity: 1; }
.ribbon { position: absolute; top: 9%; right: -4%; width: 26%; height: 80%; transform: skewX(-33deg); transform-origin: top right; background: linear-gradient(to bottom, rgba(150, 230, 110, .5) 0%, rgba(60, 200, 130, .38) 30%, rgba(24, 140, 125, .16) 62%, rgba(16, 25, 35, 0) 90%); }
nav.bar, .hero, .page-hero { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .models { top: 56px; right: 0; width: min(62%, 340px); opacity: .5; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 70%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 70%, transparent 100%); mask-composite: intersect; }
  .models::before { display: none; }
}
@media (max-width: 600px) { .models { top: 132px; width: 60%; } }

nav.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { display: block; height: 44px; width: auto; max-width: 100%; }
@media (max-width: 420px) { .logo img { height: 36px; } }
.navlinks { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.navlinks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.navlinks a { display: block; text-decoration: none; color: var(--on-dark-muted); font-weight: 500; font-size: .95rem; padding: 10px 12px; border-radius: 8px; }
.navlinks a:hover { color: var(--on-dark); }
.navlinks a.active, .navlinks .current-menu-item > a, .navlinks .current_page_item > a { color: var(--navy); background: var(--lime); }
.theme-btn { min-height: 44px; min-width: 44px; border: 1px solid var(--dark-line); background: transparent; color: var(--on-dark); border-radius: 10px; cursor: pointer; font: 500 .85rem var(--body); padding: 0 12px; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 40px 104px; max-width: 58%; }
@media (max-width: 860px) { .hero { max-width: none; } }
.hero .eyebrow { color: var(--lime); }
.hero h1 { font-size: clamp(2.15rem, 5.4vw, 4rem); font-weight: 800; margin-top: 16px; }
.hero .slogan { font: 700 clamp(1.1rem, 2.2vw, 1.5rem)/1.3 var(--display); color: var(--lime); margin-top: 12px; }
.hero .lede { color: var(--on-dark-muted); font-size: 1.1rem; margin-top: 16px; max-width: 54ch; }
.tagline { justify-self: start; font: 700 clamp(1rem, 1.8vw, 1.3rem)/1.35 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--on-dark); border-left: 3px solid var(--lime); padding-left: 16px; }
@media (max-width: 760px) { .hero { padding-block: 24px 88px; } }

.page-hero { padding-block: 32px 104px; display: grid; gap: 14px; max-width: 640px; }
.page-hero .eyebrow { color: var(--lime); }
.page-hero h1 { font-size: clamp(2.15rem, 5vw, 3.4rem); font-weight: 800; }
.page-hero p { color: var(--on-dark-muted); font-size: 1.1rem; }
@media (max-width: 860px) { .page-hero { padding-block: 16px 88px; } }

/* Landing page: calculator sits over the hero, article below with a sticky "On this page" menu */
.landing { display: grid; gap: 24px; padding-block: 0 24px; }
.landing > .ffmi-app { margin-top: -64px; position: relative; z-index: 1; }
.content { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 40px; padding-block: 48px; border-top: 1px solid var(--line); margin-top: 24px; }
@media (max-width: 860px) { .content { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); align-self: start; display: grid; gap: 4px; font-size: .9rem; }
.toc .eyebrow { color: var(--muted); margin-bottom: 4px; }
.toc ul { list-style: none; margin: 0; padding: 0; display: contents; }
.toc li { display: contents; }
.toc a { color: var(--muted); text-decoration: none; padding: 6px 0 6px 10px; margin-left: -13px; border-left: 3px solid transparent; transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--link); border-left-color: var(--link); font-weight: 600; }
.toc a.toc-back { color: var(--link); font-weight: 700; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.toc a.toc-back:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 0 16px; }
  .toc a { margin-left: 0; padding: 8px 0; border-left: 0; }
  .toc .eyebrow { flex-basis: 100%; }
  .toc a.toc-back { flex-basis: 100%; margin-top: 6px; padding-top: 10px; }
}

/* Article text from the block editor */
.entry { display: grid; gap: 14px; max-width: 760px; min-width: 0; }
.entry > * { margin: 0; }
.entry > h2 { margin-top: 34px; scroll-margin-top: 12px; }
.entry > h2:first-child { margin-top: 0; }
.entry > h3 { margin-top: 10px; }
.entry p, .entry li { max-width: 68ch; }
.entry ul, .entry ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.entry a:not(.wp-block-button__link) { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.entry a:not(.wp-block-button__link):hover { text-decoration-thickness: 2px; }
.entry img { border-radius: 12px; }
.formula, .entry pre { font: 500 .92rem/1.8 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; background: var(--dark); color: var(--on-dark); border-radius: 12px; padding: 16px 18px; overflow-x: auto; white-space: pre; margin: 0; }
.formula .hl { color: var(--lime); }
.entry .wp-block-table { margin: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.entry table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: .95rem; background: var(--surface); }
.entry th, .entry td { text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.entry tr:last-child td { border-bottom: 0; }
.entry thead { border: 0; }
.entry th { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; background: var(--graphite); color: var(--chalk); }
.entry .ffmi-collapse td:first-child { white-space: nowrap; }
.entry .ffmi-collapse tr.is-folded { display: none; }
.ht-toggle { justify-self: start; }
.ht-toggle .chev { display: inline-block; transition: transform .2s; }
.ht-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.entry details, .entry .wp-block-details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.entry details summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.entry details > :not(summary) { margin: 0 0 10px; color: var(--muted); }
.entry .wp-block-details + .wp-block-details { margin-top: -14px; }
.entry ol.refs { font-size: .92rem; color: var(--muted); gap: 8px; }
.entry .hint, .hint { color: var(--muted); font-size: .88rem; }
.entry .updated { color: var(--muted); font-size: .9rem; }

/* Cards and buttons for theme pages */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; min-width: 0; }
.page-card { max-width: 780px; margin-top: -64px; margin-bottom: 56px; position: relative; z-index: 1; line-height: 1.65; }
.page-card.entry > h2 { font-size: 1.3rem; margin-top: 14px; }
.page-card.entry > h2:first-child { margin-top: 0; }
.page-wide { margin-top: -64px; margin-bottom: 56px; position: relative; z-index: 1; }
.btn { font: 600 1rem var(--body); min-height: 48px; padding: 0 20px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn.primary { background: var(--lime); color: var(--navy); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.back-link, .entry a.back-link { color: var(--link); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Block editor helpers: add the class "ffmi-card" to a Group or Column block to get a card */
.ffmi-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px !important; }
.page-wide .wp-block-columns { gap: 24px; margin: 0; align-items: flex-start !important; }
.page-wide .wp-block-column { display: grid; gap: 14px; align-content: start; }
.page-wide .wp-block-column > * { margin: 0; }
.email-addr a, a.email-addr { color: var(--link); font-weight: 700; font-size: 1.05rem; text-decoration: none; overflow-wrap: anywhere; }
.page-wide .wp-block-column ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--muted); }
.page-wide .wp-block-column a:not(.btn) { color: var(--link); }
.email-box { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.email-box .eyebrow { color: var(--muted); }
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
a.email-addr { user-select: all; }
a.email-addr:hover { text-decoration: underline; text-underline-offset: 3px; }
.form-missing { color: var(--muted); }
.email-copy { min-height: 40px; padding: 0 14px; font-size: .9rem; }
@media (max-width: 781px) { .page-wide .wp-block-columns { flex-direction: column; } }

/* Contact forms (Contact Form 7 and WPForms) styled to match */
.wpcf7 form, .wpforms-form { display: grid; gap: 16px; }
.wpcf7 p { margin: 0; }
.wpcf7 label, .wpforms-field-label { font-weight: 600; font-size: .92rem; display: grid; gap: 8px; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 select, .wpcf7 textarea,
.wpforms-form input[type="text"], .wpforms-form input[type="email"], .wpforms-form select, .wpforms-form textarea {
  width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--ink); font: 500 1rem var(--body); padding: 10px 14px; max-width: none !important; }
.wpcf7 textarea, .wpforms-form textarea { min-height: 160px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus, .wpforms-form input:focus, .wpforms-form select:focus, .wpforms-form textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus); }
.wpcf7 input[type="submit"], .wpforms-form button[type="submit"] { font: 600 1rem var(--body) !important; min-height: 48px; padding: 0 20px !important; border-radius: 12px !important; border: 0 !important; background: var(--lime) !important; color: var(--navy) !important; cursor: pointer; justify-self: start; }

/* Floating button back to the calculator (phones and tablets) */
.to-calc { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 20; display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--lime); color: var(--navy); font-weight: 700; font-size: .92rem; text-decoration: none; box-shadow: 0 6px 20px rgba(11, 18, 25, .25); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.to-calc.show { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 860px) { .to-calc { display: inline-flex; } }

/* Blog and archive lists, for future articles */
.post-list { display: grid; gap: 16px; margin-top: -64px; margin-bottom: 56px; position: relative; z-index: 1; }
.post-list .card h2 { font-size: 1.3rem; }
.post-list .card h2 a { text-decoration: none; }
.post-list .card { display: grid; gap: 10px; }
.pagination { display: flex; gap: 12px; }

/* Footer */
.site-footer { background: var(--navy); color: var(--on-dark-muted); font-size: .88rem; }
.site-footer .shell { padding-block: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.site-footer .logo img { height: 36px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.foot-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 16px; }
.foot-links a { display: block; padding: 10px 0; color: var(--lime); font-weight: 600; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .models img, .toc a, .ht-toggle .chev, .to-calc { transition: none; } }