/*
Theme Name: Bold TAM Portfolio
Description: A bold, text-first single-page portfolio. Edit everything under Appearance → Customize → Portfolio Content.
Author: [Your Name]
Version: 1.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bold-tam
Tags: portfolio, one-column, custom-colors, custom-menu, translation-ready
*/

/* ============================================================
   THEME VARIABLES
   These are the fallbacks. The values you pick in
   Appearance → Customize → Colours & Font override them.
   ============================================================ */
:root{
  --ink:    #0b0b0c;
  --paper:  #ffffff;
  --muted:  #6b6b74;
  --line:   #e6e6ea;
  --accent: #1a3aff;
  --max:    1140px;
  --pad:    clamp(20px, 5vw, 72px);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:clamp(16px, 0.35vw + 15px, 18px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}
section[id]{ scroll-margin-top:84px; }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; height:64px;
}
.nav-name{
  font-weight:800; letter-spacing:-.02em; text-decoration:none;
  font-size:.95rem; white-space:nowrap;
}
.nav-links{
  display:flex; gap:clamp(14px, 2.5vw, 28px);
  font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.nav-links a{ text-decoration:none; color:var(--muted); }
.nav-links a:hover{ color:var(--ink); }
@media (max-width:520px){ .nav-links .hide-sm{ display:none; } }

/* Push sticky nav below the WP admin bar when logged in */
.admin-bar .nav{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .nav{ top:46px; } }

/* ---------- HERO ---------- */
.hero{ padding:clamp(56px,11vw,132px) 0 clamp(48px,7vw,88px); }
.eyebrow{
  font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 clamp(20px,3.5vw,34px);
}
h1{
  margin:0;
  font-size:clamp(2.4rem, 8.2vw, 6.2rem);
  line-height:.95;
  letter-spacing:-.045em;
  font-weight:900;
  text-wrap:balance;
}
h1 .accent{ color:var(--accent); }
.lede{
  margin:clamp(24px,3.5vw,38px) 0 0;
  max-width:48ch;
  font-size:clamp(1.05rem, 1.5vw, 1.35rem);
  line-height:1.45;
  font-weight:500;
  text-wrap:pretty;
}
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,4vw,44px); }
.btn{
  display:inline-block;
  padding:14px 26px;
  border-radius:999px;
  font-weight:700; font-size:.92rem;
  text-decoration:none;
  border:2px solid var(--ink);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--accent); border-color:var(--accent); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }

/* ---------- METRICS ---------- */
.metrics{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(40px,6.5vw,72px) 0;
}
.metrics-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,4.5vw,48px);
}
@media (min-width:820px){ .metrics-grid{ grid-template-columns:repeat(4,1fr); } }
.metric-num{
  display:block;
  font-size:clamp(2.5rem, 6vw, 4.25rem);
  font-weight:900;
  letter-spacing:-.055em;
  line-height:.9;
}
.metric-label{
  margin:14px 0 0;
  font-size:.76rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  max-width:22ch;
}

/* ---------- SECTIONS ---------- */
.section{ padding:clamp(56px,9vw,116px) 0; }
.section-title{
  font-size:clamp(1.85rem, 4.4vw, 3.15rem);
  font-weight:900;
  letter-spacing:-.038em;
  line-height:1.02;
  margin:0 0 clamp(28px,4.5vw,56px);
  max-width:22ch;
  text-wrap:balance;
}

/* ---------- CASE STUDIES ---------- */
.case{
  border-top:1px solid var(--line);
  padding:clamp(32px,5.5vw,56px) 0;
  display:grid;
  gap:clamp(18px,3.5vw,44px);
}
@media (min-width:900px){
  .case{ grid-template-columns:minmax(0,0.85fr) minmax(0,1.3fr); }
}
.case-kicker{
  font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 14px;
}
.case-title{
  font-size:clamp(1.3rem, 2.5vw, 1.95rem);
  font-weight:800; letter-spacing:-.03em;
  line-height:1.12; margin:0; text-wrap:balance;
}
.case-title a{ text-decoration:none; }
.case-title a:hover{ color:var(--accent); }
.case-body p{ margin:0 0 18px; max-width:62ch; }
.case-body p:last-child{ margin-bottom:0; }
.case-body ul{ margin:0 0 18px; padding-left:1.15em; max-width:62ch; }
.case-body li{ margin-bottom:8px; }
.case-body li::marker{ color:var(--accent); }
.case-empty{ color:var(--muted); }

.result{
  margin-top:clamp(24px,3.5vw,36px);
  border-left:5px solid var(--accent);
  padding-left:clamp(16px,2.5vw,24px);
}
.result-num{
  display:block;
  font-size:clamp(2.3rem, 6.5vw, 4rem);
  font-weight:900;
  letter-spacing:-.055em;
  line-height:.9;
}
.result-text{
  margin:12px 0 0;
  font-weight:600;
  font-size:clamp(1rem, 1.3vw, 1.12rem);
  max-width:46ch;
}

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; gap:clamp(28px,4.5vw,56px); }
@media (min-width:900px){ .about-grid{ grid-template-columns:1fr 1fr; } }
.about-grid p{ margin:0 0 18px; max-width:56ch; }
.principles{ margin:0; display:grid; gap:20px; }
.principles dt{
  font-weight:800; letter-spacing:-.015em;
  font-size:1.05rem; margin-bottom:4px;
}
.principles dd{ margin:0; color:var(--muted); max-width:52ch; }

/* ---------- CONTACT ---------- */
.contact{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(64px,11vw,132px) 0;
}
.contact .eyebrow{ color:rgba(255,255,255,.55); }
.contact .section-title{ color:var(--paper); max-width:18ch; }
.contact-email{
  display:inline-block;
  font-size:clamp(1.35rem, 4.5vw, 2.9rem);
  font-weight:900;
  letter-spacing:-.04em;
  text-decoration:none;
  border-bottom:4px solid var(--accent);
  padding-bottom:6px;
  word-break:break-word;
}
.contact-email:hover{ color:var(--accent); }
.contact-links{
  margin-top:clamp(28px,4vw,44px);
  display:flex; flex-wrap:wrap; gap:22px;
  font-size:.82rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.contact-links a{ text-decoration:none; color:rgba(255,255,255,.7); }
.contact-links a:hover{ color:var(--paper); }

/* ---------- FOOTER ---------- */
.footer{
  padding:28px 0;
  font-size:.78rem;
  color:var(--muted);
  border-top:1px solid var(--line);
}

/* ---------- WORDPRESS CORE CLASSES ---------- */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute !important; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:var(--paper); border-radius:3px; box-shadow:0 0 2px 2px rgba(0,0,0,.6);
  clip:auto !important; clip-path:none; color:var(--ink); display:block;
  font-size:.875rem; font-weight:700; height:auto; left:5px; line-height:normal;
  padding:15px 23px 14px; text-decoration:none; top:5px; width:auto; z-index:100000;
}
.alignleft{ float:left; margin:0 24px 16px 0; }
.alignright{ float:right; margin:0 0 16px 24px; }
.aligncenter{ display:block; margin:16px auto; }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-size:.8rem; color:var(--muted); text-align:center; }
.sticky .case-title::after{ content:" ★"; color:var(--accent); }