/*
Theme Name: TNL Visibility (Editable)
Theme URI: https://tnlvisibility.com
Author: FindGrows
Description: Editable TNL Visibility theme. All page content is managed through ACF field groups, so text and images can be changed from the WordPress admin without editing code. Blog and Case Study use reusable, category-driven templates. Brand: Deep Petrol Teal / Soft Aqua Mint / Signal Amber, Poppins.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tnl
*/

:root{
  --ink:#0A1A1E;
  --petrol:#0E3A42;
  --petrol-2:#0B2E35;
  --teal:#13808E;
  --mint:#7FE3D0;
  --amber:#F5A623;
  --off:#F4F1EA;
  --off-dim:#C9D4D3;
  --line:rgba(127,227,208,0.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--ink);color:var(--off);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.mono{font-family:'JetBrains Mono',monospace}

/* NAV */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:20px 28px;background:rgba(10,26,30,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.04em;font-size:1.05rem;text-decoration:none;color:var(--off)}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 14px var(--mint)}
.logo small{font-weight:400;color:var(--off-dim);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;display:block;margin-top:1px}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--off-dim);text-decoration:none;font-size:.9rem;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--mint)}
.nav-cta{background:var(--mint);color:var(--ink)!important;padding:10px 20px;border-radius:6px;font-weight:600!important;font-size:.85rem!important}
.nav-toggle{display:none;background:none;border:none;color:var(--off);font-size:1.5rem;cursor:pointer}
@media(max-width:820px){.nav-links{position:fixed;top:0;right:0;height:100vh;width:min(78vw,320px);flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;background:var(--petrol-2);padding:0 40px;transform:translateX(100%);transition:transform .3s;border-left:1px solid var(--line)}.nav-links.open{transform:translateX(0)}.nav-toggle{display:block;z-index:60}}

/* BUTTONS */
.btn{font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;padding:15px 28px;border-radius:8px;text-decoration:none;display:inline-flex;align-items:center;gap:9px;transition:transform .2s,box-shadow .2s,border-color .2s,color .2s;border:none}
.btn-primary{background:var(--mint);color:var(--ink)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(127,227,208,.28)}
.btn-ghost{background:transparent;color:var(--off);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--mint);color:var(--mint)}

/* HERO */
.hero{padding:160px 0 90px;background:radial-gradient(120% 90% at 80% -10%,var(--petrol) 0%,var(--ink) 55%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:44px}}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);font-weight:500;margin-bottom:24px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--mint)}
h1{font-size:clamp(2.5rem,5.2vw,4rem);font-weight:700;line-height:1.04;letter-spacing:-.02em;margin-bottom:24px}
h1 .accent{background:linear-gradient(100deg,var(--mint),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:1.12rem;color:var(--off-dim);font-weight:300;max-width:480px;margin-bottom:34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.page-hero{padding:150px 0 60px;background:radial-gradient(120% 90% at 80% -10%,var(--petrol) 0%,var(--ink) 60%)}
.page-hero h1{max-width:880px}.page-hero .lede{max-width:620px;font-size:1.15rem}

/* SECTIONS */
section{padding:96px 0}
.sec-eyebrow{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);font-weight:500;margin-bottom:16px}
.sec-title{font-size:clamp(1.9rem,3.5vw,2.7rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin-bottom:18px;max-width:720px}
.sec-sub{font-size:1.05rem;color:var(--off-dim);font-weight:300;max-width:600px;margin-bottom:54px}
.prose{max-width:740px}
.prose p{color:var(--off-dim);font-weight:300;font-size:1.05rem;margin-bottom:20px}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.card{background:var(--petrol-2);border:1px solid var(--line);border-radius:14px;padding:30px 26px}
.card .num{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--mint);margin-bottom:18px;display:block}
.card h3{font-size:1.18rem;font-weight:600;margin-bottom:10px}
.card p{font-size:.95rem;color:var(--off-dim);font-weight:300}

/* STEPS */
.approach{background:linear-gradient(180deg,var(--ink),var(--petrol-2))}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{padding:38px 32px;border-right:1px solid var(--line)}
.step:last-child{border-right:none}
@media(max-width:900px){.step{border-right:none;border-bottom:1px solid var(--line)}}
.step .marker{font-family:'JetBrains Mono',monospace;font-size:2rem;font-weight:500;color:var(--teal);margin-bottom:20px}
.step h3{font-size:1.25rem;font-weight:600;margin-bottom:12px}
.step p{color:var(--off-dim);font-weight:300;font-size:.95rem}

/* METRICS */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center}
@media(max-width:760px){.metrics{grid-template-columns:1fr;gap:48px}}
.metric .big{font-size:clamp(2.6rem,5vw,3.6rem);font-weight:800;letter-spacing:-.03em;background:linear-gradient(120deg,var(--mint),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.metric .cap{font-size:.95rem;color:var(--off-dim);font-weight:300;margin-top:6px}

/* INDEX GRID */
.index-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:760px){.index-grid{grid-template-columns:1fr}}
.index-card{display:block;background:var(--petrol-2);border:1px solid var(--line);border-radius:14px;padding:30px 28px;text-decoration:none;color:var(--off);transition:transform .25s,border-color .25s}
.index-card:hover{transform:translateY(-4px);border-color:rgba(127,227,208,.32)}
.index-card .tag{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--mint);letter-spacing:.1em;text-transform:uppercase}
.index-card h3{font-size:1.3rem;font-weight:600;margin:12px 0 10px;line-height:1.25}
.index-card p{color:var(--off-dim);font-weight:300;font-size:.95rem;margin-bottom:16px}
.index-card .read{color:var(--mint);font-size:.88rem;font-weight:500}
.index-card .thumb{border-radius:12px;aspect-ratio:16/9;object-fit:cover;margin-bottom:16px;width:100%}

/* PULL QUOTE */
.pullquote{background:linear-gradient(180deg,var(--petrol-2),var(--ink));text-align:center}
.pullquote blockquote{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:600;line-height:1.25;max-width:900px;margin:0 auto 18px}
.pullquote blockquote .accent{color:var(--mint)}
.pullquote cite{font-style:normal;color:var(--off-dim);font-size:.9rem}

/* ARTICLE / SINGLE (blog + case study) */
.article{max-width:760px;margin:0 auto;padding:0 28px}
.article .featured{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin-bottom:28px}
.article h1{font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1.04;margin-bottom:14px}
.article .meta{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--off-dim);letter-spacing:.06em;margin-bottom:30px}
.article .standfirst{font-size:1.2rem;color:var(--off);font-weight:400;line-height:1.55;margin-bottom:24px;padding-left:18px;border-left:3px solid var(--mint)}
.article h2{font-size:1.5rem;font-weight:600;color:var(--mint);margin:38px 0 14px}
.article h3{font-size:1.2rem;font-weight:600;margin:24px 0 10px}
.article p{color:var(--off-dim);font-weight:300;font-size:1.05rem;line-height:1.7;margin-bottom:18px}
.article ul,.article ol{color:var(--off-dim);font-weight:300;font-size:1.05rem;line-height:1.7;margin:0 0 18px 22px}
.article li{margin-bottom:8px}
.article img{border-radius:12px;margin:24px 0}
@media(max-width:760px){.article h2{font-size:1.3rem}.article p,.article ul,.article ol{font-size:1rem}}

/* CTA + FOOTER */
.final{text-align:center;background:radial-gradient(100% 120% at 50% 0%,var(--petrol) 0%,var(--ink) 60%)}
.final h2{font-size:clamp(2rem,4vw,3rem);font-weight:700;letter-spacing:-.02em;margin-bottom:18px;max-width:680px;margin-inline:auto}
.final p{color:var(--off-dim);font-weight:300;font-size:1.08rem;margin-bottom:34px;max-width:500px;margin-inline:auto}
.final .hero-actions{justify-content:center}
.site-footer{border-top:1px solid var(--line);padding:46px 0}
.foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.foot-inner small{color:var(--off-dim);font-size:.82rem;font-weight:300}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{color:var(--off-dim);text-decoration:none;font-size:.85rem}
.foot-links a:hover{color:var(--mint)}

/* ---------- QA v1.3 fixes ---------- */
/* #10 align cards to top so an image-less card doesn't stretch */
.index-grid{align-items:start}
/* #8 blockquote styling inside articles (WordPress wp-block-quote + plain blockquote) */
.article blockquote,.article .wp-block-quote{
  margin:24px 0;padding:6px 0 6px 20px;border-left:3px solid var(--mint);
  font-size:1.25rem;font-weight:400;color:var(--off);line-height:1.5;font-style:normal;
}
.article blockquote p,.article .wp-block-quote p{font-size:1.25rem;color:var(--off);margin-bottom:8px}
.article blockquote cite,.article .wp-block-quote cite{font-style:normal;color:var(--mint);font-size:.9rem}
/* #13 in-text links use mint accent */
.article-body a{color:var(--mint);text-decoration:underline;text-underline-offset:2px}
.article-body a:hover{color:var(--off)}
/* #3 report: body weight 300 is thin on dark — nudge article body to 400 for readability */
.article p,.article ul,.article ol{font-weight:400}
/* category pill on cards */
.index-card .cat{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--mint);letter-spacing:.1em;text-transform:uppercase}
/* #7 category filter row on insights */
.cat-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.cat-filter a{font-size:.85rem;color:var(--off-dim);border:1px solid var(--line);border-radius:30px;padding:7px 16px;text-decoration:none;transition:border-color .2s,color .2s}
.cat-filter a:hover,.cat-filter a.active{border-color:var(--mint);color:var(--mint)}
/* stats + built-for + quote page-builder layouts */
.pb-stats .metrics{margin-top:10px}
.pb-builtfor{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0}
.pb-builtfor .trust-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.pb-builtfor .trust-label{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--off-dim)}
.pb-builtfor .trust-logos{display:flex;gap:42px;flex-wrap:wrap;opacity:.75}
.pb-builtfor .trust-logos span{font-weight:600;letter-spacing:.06em;color:var(--off-dim);font-size:.95rem}