/*
Theme Name: Senior Tech Help Martinez
Theme URI: https://example.com/
Author: OpenAI
Description: A friendly, accessible WordPress theme for a free senior technology support volunteer service in Martinez and Contra Costa County.
Version: 1.0.8
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: senior-tech-help
*/
:root {
  --navy: #17324d;
  --blue: #246b8e;
  --teal: #dff3ef;
  --cream: #fbf8f1;
  --ink: #243342;
  --muted: #536575;
  --white: #fff;
  --line: #dce5e8;
  --radius: 18px;
  --shadow: 0 12px 35px rgba(23, 50, 77, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.65; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #e5a93d; outline-offset: 3px; }
img { max-width: 100%; height: auto; }
.container { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.header-inner { display:flex; align-items:center; justify-content:center; gap:24px; padding: 18px 0; }
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--navy); font-weight:800; font-size:1.1rem; line-height:1.2; }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; color:var(--navy); background:var(--teal); font-size:25px; }
.brand small { display:block; color:var(--muted); font-size:.75rem; font-weight:600; margin-top:4px; }
.site-nav { width:100%; display:flex; justify-content:center; }
.site-nav ul { display:flex; align-items:center; justify-content:center; gap:28px; list-style:none; margin:0 auto; padding:0; }
.site-nav a { text-decoration:none; color:var(--navy); font-weight:650; font-size:.95rem; }
.site-nav a:hover { text-decoration:underline; }
.menu-toggle { display:none; border:1px solid var(--line); background:#fff; color:var(--navy); padding:10px 12px; border-radius:10px; font:inherit; }
.hero { background:linear-gradient(120deg, var(--cream), #f0f8f7); padding:76px 0 68px; }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:55px; align-items:center; }
.eyebrow { display:inline-block; color:var(--blue); text-transform:uppercase; letter-spacing:.09em; font-weight:800; font-size:.78rem; margin-bottom:14px; }
h1,h2,h3 { color:var(--navy); line-height:1.16; letter-spacing:-.025em; }
h1 { font-size:clamp(2.4rem, 5vw, 4.25rem); margin:0 0 20px; }
h2 { font-size:clamp(1.8rem, 3vw, 2.6rem); margin:0 0 16px; }
h3 { font-size:1.25rem; margin:0 0 9px; }
.hero p { font-size:1.15rem; max-width:650px; color:#405668; }
.button-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 20px; border-radius:999px; text-decoration:none; font-weight:800; border:2px solid var(--blue); }
.button-primary { background:var(--blue); color:white; }
.button-primary:hover { background:var(--navy); color:white; border-color:var(--navy); }
.button-secondary { background:transparent; color:var(--blue); }
.hero-card { background:white; border:1px solid var(--line); border-radius:26px; padding:30px; box-shadow:var(--shadow); }
.hero-illustration { display:grid; place-items:center; background:var(--teal); border-radius:22px; min-height:190px; margin-bottom:20px; font-size:5rem; }
.check-list { list-style:none; padding:0; margin:18px 0 0; }
.check-list li { padding:8px 0 8px 32px; position:relative; }
.check-list li:before { content:"✓"; position:absolute; left:0; top:7px; width:23px; height:23px; border-radius:50%; display:grid; place-items:center; background:var(--teal); color:var(--navy); font-weight:900; font-size:.85rem; }
.section { padding:72px 0; }
.section-soft { background:var(--cream); }
.section-intro { max-width:700px; margin-bottom:34px; }
.section-intro p { color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { background:white; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:0 5px 20px rgba(23,50,77,.035); }
.card-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:15px; background:var(--teal); font-size:1.7rem; margin-bottom:18px; }
.card p { color:var(--muted); margin-bottom:0; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
.note-panel { background:var(--teal); border-radius:var(--radius); padding:28px; }
.steps { counter-reset:step; list-style:none; padding:0; margin:24px 0 0; }
.steps li { position:relative; padding:0 0 24px 58px; counter-increment:step; }
.steps li:before { content:counter(step); position:absolute; left:0; top:0; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--navy); color:white; font-weight:800; }
.steps strong { display:block; color:var(--navy); margin-bottom:3px; }
.contact-band { background:var(--navy); color:white; padding:55px 0; }
.contact-band h2 { color:white; }
.contact-band p { color:#e3edf3; max-width:720px; }
.contact-band .button-secondary { color:white; border-color:white; }
.contact-band .button-secondary:hover { background:white; color:var(--navy); }
.site-footer { padding:28px 0; background:#10263a; color:#d9e5ed; font-size:.9rem; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap; }
.site-footer a { color:white; }
.content-area { padding:55px 0 75px; }
.entry-content { max-width:800px; }
.entry-content h2 { margin-top:1.7em; }
.entry-title { margin-bottom:20px; }
.form-note { background:var(--cream); border-left:4px solid var(--blue); padding:16px 20px; border-radius:0 12px 12px 0; }
.screen-reader-text { clip:rect(1px,1px,1px,1px); position:absolute!important; height:1px; width:1px; overflow:hidden; }
@media (max-width: 850px) {
 .hero-grid,.two-col { grid-template-columns:1fr; gap:30px; }
 .hero { padding:52px 0; }
 .cards { grid-template-columns:repeat(2,1fr); }
 .site-nav ul { gap:13px; }
}
@media (max-width: 640px) {
 .container { width:min(100% - 30px, 1120px); }
 .header-inner { flex-wrap:wrap; }
 .menu-toggle { display:block; }
 .site-nav { display:none; width:100%; }
 .site-nav.is-open { display:block; }
 .site-nav ul { align-items:flex-start; flex-direction:column; padding:10px 0 4px; }
 .cards { grid-template-columns:1fr; }
 .section { padding:52px 0; }
 .hero-card { padding:20px; }
}


/* Komomai brand banner and friendly decorative graphics */
.brand-banner-wrap { background:#fff; overflow:hidden; border-bottom:1px solid #e5edf0; }
.brand-banner-link { display:block; max-width:1600px; margin:0 auto; line-height:0; }
.brand-banner { display:block; width:100%; height:auto; max-height:290px; object-fit:contain; object-position:center; }
.site-header { position:relative; }
.service-ribbon { background:linear-gradient(90deg,#eff8f2,#f0f8fb); border-bottom:1px solid #e0ecec; color:#21445a; font-size:.92rem; font-weight:700; }
.service-ribbon-inner { min-height:48px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px 36px; padding:8px 0; }
.service-ribbon span { display:inline-flex; align-items:center; gap:8px; }
.service-ribbon b { display:inline-grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#d9edcf; color:#2f8b48; font-size:1.1rem; }
.hero { position:relative; overflow:hidden; background:radial-gradient(circle at 92% 10%,rgba(185,225,239,.48),transparent 24%),linear-gradient(120deg,#fbf8f1,#eef8f5); }
.hero:after { content:""; position:absolute; width:230px; height:230px; right:-95px; bottom:-125px; border:28px solid rgba(69,155,91,.10); border-radius:50%; pointer-events:none; }
.hero-card { position:relative; overflow:hidden; }
.hero-card:before { content:""; position:absolute; width:150px; height:150px; right:-65px; top:-65px; border-radius:50%; background:#e5f3df; }
.hero-card h3,.hero-card p { position:relative; }
.hero-illustration { position:relative; display:flex; align-items:center; justify-content:center; min-height:190px; background:linear-gradient(145deg,#e8f5f0,#e6f4fb); overflow:hidden; }
.device-art { position:relative; width:220px; height:155px; }
.device-sun { position:absolute; width:90px; height:90px; right:30px; top:0; border-radius:50%; background:#cfe8c6; }
.device-laptop { position:absolute; width:145px; height:95px; left:24px; bottom:10px; border:8px solid #174c79; border-bottom-width:13px; border-radius:12px 12px 5px 5px; background:#fff; transform:perspective(180px) rotateY(-8deg); box-shadow:0 10px 0 -4px #83b6c5; }
.device-heart { position:absolute; inset:0; display:grid; place-items:center; color:#4b9b54; font-size:38px; }
.device-phone { position:absolute; right:12px; bottom:15px; width:38px; height:67px; border:5px solid #2f8b48; border-radius:9px; background:#fff; box-shadow:0 5px 0 rgba(23,50,77,.08); }
.device-phone:after { content:""; position:absolute; width:10px; height:3px; left:9px; bottom:4px; border-radius:3px; background:#b7d6e1; }
.device-spark { position:absolute; color:#4b9b54; font-size:24px; }
.spark-one { left:0; top:8px; }.spark-two { right:0; top:58px; color:#246b8e; }
.section-art { float:right; width:88px; height:68px; position:relative; margin:0 0 8px 18px; border-radius:24px; background:#e7f4e3; color:#32884a; display:grid; place-items:center; font-size:32px; transform:rotate(4deg); }
.section-art i { position:absolute; right:10px; top:3px; color:#246b8e; font-style:normal; font-size:20px; }
.section-art b { position:absolute; right:13px; bottom:5px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#fff; color:#246b8e; font-size:15px; }
.mini-illustration { display:flex; align-items:center; gap:12px; margin:0 0 20px; padding:18px 22px; border-radius:18px; background:linear-gradient(110deg,#e8f5f0,#f0f8fb); color:#246b8e; }
.mini-person { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#d8e9c9; color:#32884a; font-size:35px; }
.mini-laptop { display:grid; place-items:center; width:76px; height:43px; border:5px solid #246b8e; border-bottom-width:9px; border-radius:7px; font-size:0; background:#fff; }
.mini-heart { margin-left:auto; color:#32884a; font-size:30px; }
.card { transition:transform .18s ease, box-shadow .18s ease; }
.card:hover { transform:translateY(-4px); box-shadow:0 12px 26px rgba(23,50,77,.09); }
@media (max-width:700px) {
  .brand-banner { max-height:none; width:100%; }
  .service-ribbon-inner { justify-content:flex-start; gap:8px 16px; font-size:.82rem; }
  .service-ribbon span { width:100%; }
  .hero { padding:45px 0; }
}
@media (prefers-reduced-motion:reduce) { .card { transition:none; } .card:hover { transform:none; } }

/* Centered navigation after removing the duplicate left-side brand mark */
@media (min-width:641px) {
  .header-inner { justify-content:center; }
  .site-nav { flex:1 1 100%; }
  .site-nav ul { justify-content:center; flex-wrap:wrap; }
}
.privacy-request-button { margin:22px 0 0; }
.contact-band .button-primary { background:#fff; color:var(--navy); border-color:#fff; }
.contact-band .button-primary:hover { background:#dff3ef; border-color:#dff3ef; color:var(--navy); }

.audience-photo {display:block;width:100%;height:auto;margin-top:24px;border-radius:18px;box-shadow:0 8px 24px rgba(23,50,77,.09)}

/* Audience image in right column above the volunteer assistance panel */
.audience-right {min-width:0;display:flex;flex-direction:column;gap:20px;}
.audience-right .audience-photo {margin:0;object-fit:contain;}
.audience-right .note-panel {width:100%;}
/* Simplified, single-column contact section */
.contact-single {max-width:820px;}
.contact-single p {max-width:100%;}
.contact-action {display:flex;justify-content:center;margin-top:30px;}

/* Audience details moved from image to accessible HTML text */
.audience-details {margin-top:28px}
.audience-details h3 {margin-bottom:16px}
.audience-detail {padding:12px 0;border-bottom:1px solid rgba(24,53,80,.12)}
.audience-detail strong {display:block;color:#153858;font-size:1.05rem}
.audience-detail p {margin:5px 0 0}
.audience-right .audience-photo {width:100%;object-fit:cover;aspect-ratio:1.02/1}