/*
Theme Name: Tech Coach Media
Theme URI: https://techcoach.media
Author: Nick Meade
Author URI: https://techcoach.media
Description: Custom theme for Tech Coach Media — audio, visual, and workflow training for churches. Dark, production-booth aesthetic with an easily-updated Resources page. Includes a Home, Resources, and About template plus block patterns for adding resource links with no code.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
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: tech-coach-media
*/

:root{
  --base:#000000;--panel:#0e0e0e;--panel-2:#161616;
  --line:rgba(255,255,255,.12);--line-strong:rgba(255,255,255,.22);
  --ink:#ffffff;--ink-2:#a4a8ab;--ink-3:#84888b;--ink-4:#70747a;
  --orange:#f37021;--orange-press:#d95f14;--grey:#84888b;
  --maxw:1140px;--pad:clamp(1.25rem,4vw,2.5rem);
  --fd:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  --fb:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --fm:"Space Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--base);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--fd);line-height:1.04;font-weight:700;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
img{max-width:100%;height:auto}

/* header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:var(--fd);font-weight:800;font-size:1.12rem;text-decoration:none}
.brand .dot,.fbrand .dot{color:var(--orange)}
.nav-wrap{display:flex;align-items:center;gap:2rem}
.nav-wrap .menu,.nav-wrap .page_item_menu,.nav-wrap ul{display:flex;gap:2rem;align-items:center;list-style:none;margin:0;padding:0}
.nav-wrap li{margin:0}
.nav-wrap a{text-decoration:none;color:var(--ink-2);font-size:.94rem;font-weight:500;transition:color .15s}
.nav-wrap .menu a:hover,.nav-wrap .current-menu-item>a,.nav-wrap .current_page_item>a{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fb);font-weight:700;font-size:.94rem;border-radius:4px;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:background .15s,border-color .15s}
.btn-primary{background:var(--orange);color:#000;padding:.6rem 1.1rem}
.btn-primary:hover{background:var(--orange-press);color:#000}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);padding:.6rem 1.1rem}
.btn-ghost:hover{border-color:var(--ink-2)}
.menu-toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:4px;color:var(--ink);width:42px;height:40px;cursor:pointer}
.menu-toggle svg{display:block;margin:auto}

/* sections */
.site-main section{border-bottom:1px solid var(--line)}
.sec-pad{padding:clamp(3rem,7vh,5rem) 0}
.kicker,.eyebrow{font-family:var(--fm);font-size:.72rem;color:var(--orange);letter-spacing:.04em;margin-bottom:1rem;display:block}

/* hero */
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;padding:clamp(3rem,8vh,5.5rem) 0}
.hero-grid h1{font-size:clamp(2.4rem,5.4vw,3.9rem);font-weight:800}
.lede{color:var(--ink-2);font-size:clamp(1.02rem,1.6vw,1.18rem);margin-top:1.35rem;max-width:40ch}
.cta-row{display:flex;gap:.75rem;margin-top:2rem;flex-wrap:wrap}

/* order-of-service card */
.cue{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1.1rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.cue-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.cue-top .ttl{font-family:var(--fm);font-size:.7rem;color:var(--ink-3);letter-spacing:.06em}
.live{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fm);font-size:.68rem;color:var(--orange);font-weight:700}
.live .pulse{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(243,112,33,.6);animation:tcmpulse 2s infinite}
@keyframes tcmpulse{0%{box-shadow:0 0 0 0 rgba(243,112,33,.55)}70%{box-shadow:0 0 0 7px rgba(243,112,33,0)}100%{box-shadow:0 0 0 0 rgba(243,112,33,0)}}
@media (prefers-reduced-motion:reduce){.live .pulse{animation:none}html{scroll-behavior:auto}}
.cue-row{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--line)}
.cue-row:last-child{border-bottom:none}
.cue-row .tc{font-family:var(--fm);font-size:.78rem;color:var(--ink-4)}
.cue-row .nm{font-size:.98rem;color:var(--ink-2)}
.cue-row .st{font-family:var(--fm);font-size:.66rem;color:var(--ink-4)}
.cue-row.active{margin:0 -1.1rem;padding-left:1.1rem;padding-right:1.1rem;background:rgba(243,112,33,.08);border-left:2px solid var(--orange)}
.cue-row.active .nm{color:var(--ink);font-weight:600}
.cue-row.active .tc,.cue-row.active .st{color:var(--orange)}

/* tracks */
.off-head h2{font-size:clamp(1.6rem,3.2vw,2.2rem);max-width:20ch}
.off-head p{color:var(--ink-2);margin-top:.7rem;max-width:50ch}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.4rem}
.pillar{border:1px solid var(--line);border-radius:8px;padding:1.5rem;background:var(--panel)}
.pillar .pico{width:36px;height:36px;border-radius:8px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--orange);margin-bottom:1rem}
.pillar h3{font-size:1.18rem;margin-bottom:.5rem}
.pillar p{color:var(--ink-2);font-size:.93rem}

/* home teaser + coming soon */
.teaser{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.teaser p{color:var(--ink-2);max-width:60ch}
.teaser h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.6rem}
.soon{display:flex;align-items:center;gap:.6rem;color:var(--ink-3);font-family:var(--fm);font-size:.8rem}
.soon .d{width:7px;height:7px;border-radius:50%;background:var(--grey);flex:none}

/* page header */
.phead{padding:clamp(3rem,7vh,4.5rem) 0 0}
.phead h1{font-size:clamp(2.2rem,4.6vw,3.2rem)}
.phead p{color:var(--ink-2);margin-top:1rem;max-width:56ch}

/* generic content */
.entry-content{max-width:70ch}
.entry-content p{margin-top:1rem;color:var(--ink-2)}
.entry-content a{color:var(--orange);text-decoration:none}
.entry-content a:hover{text-decoration:underline}
.entry-content h2{font-family:var(--fd);font-size:1.5rem;margin-top:2rem}
.entry-content h3{font-family:var(--fd);font-size:1.2rem;margin-top:1.6rem}

/* resources */
.tcm-resources .entry-content{max-width:none}
.tcm-resources .tcm-glabel,.tcm-resources .entry-content h2{font-family:var(--fm);font-size:.72rem;color:var(--orange);letter-spacing:.04em;font-weight:400;padding-bottom:.9rem;border-bottom:1px solid var(--line);margin:2.6rem 0 0}
.tcm-rcard{display:block;padding:1.15rem 0;border-bottom:1px solid var(--line);margin:0}
.tcm-rcard .tcm-rt{font-family:var(--fb);font-weight:600;font-size:1.08rem;margin:0;letter-spacing:0}
.tcm-rcard .tcm-rd{color:var(--ink-2);font-size:.92rem;margin:.2rem 0 0;max-width:64ch}
.tcm-rcard .tcm-rlink{margin:.5rem 0 0}
.tcm-rcard .tcm-rlink a{color:var(--orange);font-family:var(--fm);font-size:.85rem;text-decoration:none}
.tcm-rcard .tcm-rlink a:hover{text-decoration:underline}
.tcm-editnote{margin-top:2.4rem;border:1px dashed var(--line-strong);border-radius:8px;padding:1.1rem 1.2rem;color:var(--ink-3);font-size:.9rem;background:var(--panel)}

/* about */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:start}
.portrait{aspect-ratio:4/5;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 12px,transparent 12px 24px),var(--panel-2);display:flex;align-items:flex-end;padding:1.1rem;position:sticky;top:88px}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.portrait .cap{font-family:var(--fm);font-size:.68rem;color:var(--ink-4)}
.bio p:first-child{color:var(--ink);font-size:1.12rem}
.creds{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.6rem}
.creds span{font-family:var(--fm);font-size:.72rem;color:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:.32rem .6rem}

/* footer */
.site-footer{padding:2.6rem 0 3rem}
.site-footer .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.fbrand{font-family:var(--fd);font-weight:800;font-size:1.2rem}
.fdom{color:var(--ink-4);font-family:var(--fm);font-size:.8rem;margin-top:.35rem}
.fnav ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0}
.fnav a{color:var(--ink-2);text-decoration:none;font-size:.92rem}
.fnav a:hover{color:var(--ink)}
.foot-base{margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--line);color:var(--ink-4);font-family:var(--fm);font-size:.72rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}

@media (max-width:900px){
  .nav-wrap{position:absolute;top:64px;left:0;right:0;background:var(--panel);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--pad) 1rem;display:none}
  .nav-wrap.open{display:flex}
  .nav-wrap .menu,.nav-wrap ul{flex-direction:column;gap:0;align-items:stretch}
  .nav-wrap li{border-bottom:1px solid var(--line)}
  .nav-wrap a{padding:.75rem 0;display:block}
  .nav-wrap .btn-primary{margin-top:.6rem;justify-content:center}
  .menu-toggle{display:block}
  .hero-grid{grid-template-columns:1fr;gap:2.4rem}
  .pillars{grid-template-columns:1fr}
  .teaser{grid-template-columns:1fr;gap:1.2rem}
  .about{grid-template-columns:1fr;gap:2rem}
  .portrait{max-width:320px;position:static}
}