/*
Theme Name:   James Lantos
Theme URI:    https://jameslantos.com/
Description:  Child theme of Astra for jameslantos.com. Design, colours and spacing are Jim Lantos's own (index.html, 8 Oct 2026 files) - ported, not redesigned. Pages are built from core blocks; all design lives here, keyed to block class names.
Author:       Codinative
Template:     astra
Version:      1.0.0
Text Domain:  jameslantos-child
License:      GNU General Public License v2 or later
*/

/* ---- Jim's tokens (index.html :root, unchanged) ---- */
:root{
  --ground:#F3EDE0;
  --panel:#FAF6EC;
  --ink:#23372F;
  --soft:#56605F;
  --rule:#DAD1BD;
  --red:#B3261E;
  --slate:#2F6DB5;
  --sage:#3E8E5A;
  --gold:#D49A1A;
  --red-t:#FBE9E6; --slate-t:#E6EFF9; --sage-t:#E5F2E9; --gold-t:#FBF0D4;
  --display:"Jost","Century Gothic","Futura","Trebuchet MS",sans-serif;
  --body:"IBM Plex Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
  /* Added for contrast (WCAG 4.5:1): sage as TEXT, same hue 11% darker (4.56:1 on --panel). Used only for coloured text in the Ventures band (the "Visit site" label). */
  --sage-text:#377E50;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.55}
a{color:inherit}
a:focus-visible{outline:3px solid var(--slate);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}

/* ---- top navigation (theme header: parts/header.php) ---- */
.top{display:flex;justify-content:space-between;align-items:center;padding:26px 0;border-bottom:1px solid var(--rule)}
.mark{display:flex;align-items:center;gap:14px;text-decoration:none;font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:.04em}
.mark svg{width:34px;height:34px}
.top nav{display:flex;gap:34px}
.top nav a{font-family:var(--display);font-size:20px;text-decoration:none;padding:6px 0 2px;border-bottom:2px solid transparent}
.top nav a:hover{border-bottom-color:var(--red)}

/* ---- hero (Group "hero": Heading 1 + Paragraph + List "lanes") ---- */
.hero{display:grid;grid-template-columns:1fr;padding:64px 0 70px}
.hero h1{font-family:var(--display);font-weight:300;font-size:clamp(64px,11vw,150px);line-height:.92;letter-spacing:-.01em;margin:0 0 34px}
/* Jim's <span>: the bold word of the heading (Bold in the editor) */
.hero h1 strong{display:block;font-weight:600;margin-top:.1em}
.hero p{font-size:24px;line-height:1.45;max-width:30em;margin:0 0 30px;color:var(--ink)}
.lanes{display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:0;list-style:none}
.lanes a{display:block;font-family:var(--display);font-size:20px;text-decoration:none;padding:11px 18px 7px;border:1.5px solid var(--ink);background:var(--panel)}
.lanes a:hover{background:var(--c-t)}
/* List items cannot carry a class, so each lane takes its colour from the section it points to */
.lanes a[href$="#books"]{--c:var(--red);--c-t:var(--red-t)}
.lanes a[href$="#consulting"]{--c:var(--slate);--c-t:var(--slate-t)}
.lanes a[href$="#ventures"]{--c:var(--sage);--c-t:var(--sage-t)}
.lanes a[href$="#testimonials"]{--c:#7A4E8A;--c-t:#F1E8F4}
/* Jim's file keeps an empty (hidden "Voice") list item before Testimonials: one extra 12px gap. Reproduced here without the empty item. */
.lanes li:has(> a[href$="#testimonials"]){margin-left:12px}
.chart{width:100%;height:auto;display:block;background:var(--panel);border:1px solid var(--rule)}
.chart text{font-family:var(--body);font-size:16px;fill:var(--ink)}
.chart .ttl{font-family:var(--display);font-size:22px;font-weight:500}
.chart .yr{fill:var(--soft)}
.chart a:hover rect,.chart a:focus rect{opacity:.75}

/* ---- bands (Group "band <colour>" > Group <header> + Group "tiles" > Group "tile") ---- */
.band{display:grid;grid-template-columns:250px 1fr;gap:40px;padding:54px 0;border-top:1px solid var(--rule)}
.band header{border-left:10px solid var(--c);padding-left:20px;align-self:start}
.band h2{font-family:var(--display);font-weight:400;font-size:38px;line-height:1.08;margin:4px 0 12px}
.band header p{margin:0;font-size:18px;color:var(--soft)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.tile{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--rule);padding:22px 22px 24px;position:relative;transition:transform .15s,border-color .15s}
.tile:hover{transform:translateY(-3px);border-color:var(--c)}
.tile .ico{width:68px;height:68px;background:var(--c-t);display:grid;place-items:center;margin-bottom:18px}
.tile .ico svg{width:40px;height:40px;stroke:var(--c);fill:none;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.tile h3{font-family:var(--display);font-weight:600;font-size:25px;line-height:1.15;margin:0 0 8px}
.tile p{margin:0;font-size:18px;line-height:1.45;color:var(--soft)}
.tile .out{position:absolute;top:20px;right:20px;font-size:16px;line-height:1.55;color:var(--c-text,var(--c));font-family:var(--display)}
/* In Jim's file the whole tile is one link. Here the link sits on the tile title (editable in the editor)
   and is stretched over the whole tile - same click area, same focus ring. Front end only (.wrap). */
.tile h3 a{color:inherit;text-decoration:none}
.wrap .tile h3 a::after{content:"";position:absolute;inset:0}
.wrap .tile h3 a:focus-visible{outline:none}
.wrap .tile:has(h3 a:focus-visible){outline:3px solid #D49A1A;outline-offset:2px}

.books{--c:var(--red);--c-t:var(--red-t)}
.consult{--c:var(--slate);--c-t:var(--slate-t)}
.ventures{--c:var(--sage);--c-t:var(--sage-t);--c-text:var(--sage-text)}
.voice{--c:var(--gold);--c-t:var(--gold-t)}
.testi{--c:#7A4E8A;--c-t:#F1E8F4}

/* ---- about (Group "about": Heading 2 + Group: Paragraphs + Buttons) ---- */
.about{display:grid;grid-template-columns:250px 1fr;gap:40px;padding:54px 0;border-top:1px solid var(--rule)}
.about h2{font-family:var(--display);font-weight:400;font-size:38px;margin:4px 0 0;border-left:10px solid var(--ink);padding-left:20px;line-height:1.08}
.about p{margin:0 0 16px;max-width:38em}
/* Jim's .btn - a Button block here; the block's wrappers are made to flow like Jim's single link */
.about .wp-block-buttons{display:block;margin:0}
.about .wp-block-buttons > .wp-block-button{display:inline;margin:0;width:auto}
.about .wp-block-button .wp-block-button__link,.btn{display:inline-block;width:auto;height:auto;align-content:normal;word-break:normal;text-align:left;font-family:var(--display);font-size:20px;line-height:inherit;font-weight:inherit;color:inherit;text-decoration:none;padding:12px 20px 8px;border:1.5px solid var(--ink);border-radius:0;background:var(--panel);margin:8px 12px 0 0}
.about .wp-block-button .wp-block-button__link:hover,.btn:hover{background:var(--red-t)}

/* ---- footer (synced pattern "Site footer": Group <footer> + 3 Paragraphs) ---- */
.site-foot{border-top:1px solid var(--rule);padding:34px 0 50px;display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between;font-size:18px;color:var(--soft)}
.site-foot p{margin:0}
.site-foot a{color:var(--ink);text-decoration:underline}

/* ---- page not found (theme fallback, not in Jim's files) ---- */
.notfound p{font-size:24px}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding:44px 0 54px}
  .hero .chart{max-width:520px}
  .band,.about{grid-template-columns:1fr;gap:24px;padding:40px 0}
  .top nav{gap:20px}
  .wrap{padding:0 20px}
}
@media (prefers-reduced-motion:reduce){.tile{transition:none}.tile:hover{transform:none}html{scroll-behavior:auto}}

/* ---- Jim's background (index.html <style id="jl-ground">, unchanged) ---- */
html{background:#F3EDE0}body{min-height:100vh;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.28  0 0 0 0 0.18  0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#F6F1E6 0%,#F3EDE0 45%,#EFE8D8 100%);background-color:#F3EDE0;background-attachment:scroll,fixed}

/* Jim's jl-mobile block, verbatim from his 10-27 index.html (29 Oct 2026): gold focus ring, mobile safety rules,
   reduced motion. The tile rule above uses the same gold ring for the stretched tile link. */
img,video,svg,canvas,iframe{max-width:100%;height:auto}body{overflow-wrap:break-word}pre,code{white-space:pre-wrap}@media(max-width:700px){table{display:block;max-width:100%;overflow-x:auto}input,select,textarea,button{font-size:16px}}.jl-skip{position:absolute;left:-9999px;top:0;z-index:999;background:#FFF8E6;color:#22332C;padding:10px 16px;border:2px solid #22332C}.jl-skip:focus{left:12px;top:12px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #D49A1A;outline-offset:2px}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}