/*##############################################################################
# Script:        brand.css    (Tech It Forward Foundation)
# Created by:    Matthew Boucher
# Start date:    2026-10-16
# Location:      <project root>/techitforward/css/brand.css   (published copy: <project root>/frontend/techitforward/css/brand.css)
# Description:   Shared Forward emblem theme with a distinct site accent.
# Reads:         original layout stylesheet.
# Writes:        nothing.
##############################################################################*/
:root {
 --ink:#15191a; --deep:#090d0e; --navy:#15191a; --navy-deep:#090d0e;
 --accent:#126c4e; --accent-bright:#3bd39a; --accent-light:#a4e7c7; --shade:#10251c;
 --teal:var(--accent); --mint:var(--accent-light); --light:var(--accent-light);
 --paper:#f7f0e5; --muted:#545a59; --line:#d3c8b7; --cream:#fff5e3;
}
body { background:var(--paper); color:var(--ink); }
h1,h2,h3 { font-weight:750; }
em { font-family:inherit; font-style:normal; font-weight:750; color:var(--accent); }
a:focus-visible,button:focus-visible,[tabindex="-1"]:focus-visible { outline-color:var(--accent); }
.site-header { color:var(--cream); background:#15191a; border-color:#46453e; }
.announcement { background:#090d0e; color:#e7ddcd; }
.announcement a,.announcement > span,.announcement > .status-dot { color:var(--accent-light); }
.header-inner { flex-wrap:wrap; }
.brand { color:var(--cream); }
.brand-symbol { width:66px; height:54px; object-fit:contain; border-radius:7px; border:1px solid #6e6a60; background:#13191b; flex-shrink:0; }
.brand strong { color:var(--cream); }
.brand small,.brand-subtitle,.brand-tagline { color:#d4c8b6; }
.primary-navigation .nav-parent,.primary-navigation .nav-cta { color:var(--cream); border-color:#8b8172; }
.primary-navigation a:hover { color:var(--accent-light); }
.menu-toggle { color:var(--cream); border-color:#8b8172; }
.site-header a:focus-visible,.site-header button:focus-visible { outline-color:var(--accent-light); }
.hero-shell { color:var(--cream); background:radial-gradient(ellipse at 80% 45%,var(--shade) 0%,#15191a 66%); background-color:#15191a; border-bottom:2px solid var(--accent-bright); }
.hero { padding-block:64px 58px; gap:54px; }
.hero h1 { color:var(--cream); font-weight:800; letter-spacing:-.05em; line-height:1.08; }
.hero h1 em { color:var(--accent-bright); font-weight:800; letter-spacing:-.05em; }
.hero .eyebrow { color:var(--accent-light); }
.hero .short-line { background:var(--accent-bright); }
.hero-description { color:#ded5c8; }
.hero .button,.hero .button-primary { background:var(--accent-bright); border-color:var(--accent-bright); color:#111719; font-weight:750; box-shadow:0 3px 0 #060a0b; }
.hero .button:hover,.hero .button-primary:hover { background:var(--accent-light); border-color:var(--accent-light); }
.hero .text-link { color:var(--cream); }
.hero .launch-note { color:#d4c8b6; }
.hero .launch-note strong,.hero .status-dot { color:var(--accent-light); }
.hero .status-dot { background:var(--accent-bright); }
.hero a:focus-visible { outline-color:var(--accent-light); }
.hero-art { width:100%; max-width:540px; margin-inline:auto; }
.hero-art img { width:100%; height:auto; border-radius:22px; border:2px solid #e7d9c2; background:#13191b; box-shadow:0 14px 38px #0006; }
.hero-art figcaption { color:#d4c8b6; font-size:.6rem; }
.principle-band,.purpose-band { background:#eee2cf; border-color:#d3c3ab; }
.principle-inner p:first-child,.purpose-inner p:first-child { color:var(--accent); }
.principle-inner p:nth-child(2),.purpose-inner p:last-child { color:var(--ink); }
.services-section { background:#fcf6ec; border-color:var(--line); }
.focus-grid article { border-color:var(--accent); }
.audience-section { background:var(--shade); color:var(--cream); border-block:2px solid var(--accent); }
.audience-copy em,.audience-inner em,.audience-copy .eyebrow,.audience-inner .eyebrow { color:var(--accent-light); }
.audience-copy > p:not(.eyebrow),.audience-inner > div:last-child,.audience-list p { color:#ded5c8; }
.audience-list li { border-color:#696154; }
.audience-list li > span { color:var(--accent-light); }
.contact-panel { background:#fff9ee; border-color:#d3c3ab; border-left:3px solid var(--accent); }
.contact-panel .eyebrow,.contact-status { color:var(--accent); }
.contact-status { border-color:var(--accent); }
.site-footer { background:#090d0e; color:var(--cream); border-top:2px solid var(--accent-bright); }
.footer-top p,.footer-tagline,.family-label,.status-disclaimer,.footer-bottom { color:#d4c8b6; }
.parent-link,.family-links a[aria-current="page"] { color:var(--accent-light); }
.footer-bottom { border-color:#5c5549; }
.site-footer a:focus-visible { outline-color:var(--accent-light); }
.forward-family-label { margin-top:32px; font-size:.63rem; letter-spacing:.12em; color:#d4c8b6; }
.forward-family-links { display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:12px; font-size:.8rem; }
.forward-family-links a { padding-block:5px; }
.forward-family-links a[aria-current="page"] { color:var(--accent-light); font-weight:700; }
@media(max-width:1100px) { .hero { gap:35px; } }
@media(max-width:960px) { .hero { padding-block:46px; gap:28px; } }
@media(max-width:600px) {
 .brand-symbol { width:44px; height:38px; border-radius:5px; }
 .brand strong { font-size:.94rem; }
 .hero { padding-block:38px; gap:34px; }
 .hero-art { max-width:430px; }
 .hero-art img { border-radius:16px; }
 .forward-family-links { flex-direction:column; gap:6px; }
}
@media print { .hero-shell,.site-header,.audience-section,.site-footer { background:white; color:black; } .hero h1,.hero-description { color:black; } }
/* Request intake and public page-view total. */
.request-panel{margin-top:38px;padding:32px;border:1px solid #b8a991;border-left:4px solid var(--accent);background:#fff9ee;scroll-margin-top:30px}
.request-intro{max-width:760px}.request-intro p{margin-top:12px;color:#545a59;line-height:1.8}.request-intro h3{font-size:1.6rem}
.request-form{margin-top:24px}.request-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.request-field{display:flex;flex-direction:column;gap:8px;min-width:0}.request-field label{font-size:.85rem;font-weight:700;color:#15191a}
.request-field input,.request-field textarea{width:100%;min-width:0;min-height:46px;padding:12px;border:1px solid #82735f;border-radius:4px;background:#fffdf9;color:#15191a;font:inherit;line-height:1.5}
.request-field textarea{min-height:145px;resize:vertical}.request-field-full{grid-column:1/-1}
.request-field input:focus-visible,.request-field textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.request-form button{margin-top:22px;min-height:46px;padding:12px 20px;border:2px solid var(--accent);background:var(--accent);color:#fff;font:700 .9rem/1.5 system-ui,sans-serif;cursor:pointer}
.request-form button:disabled{cursor:wait;opacity:.7}.request-form button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.request-note,.form-status{margin-top:16px;font-size:.85rem;line-height:1.7;color:#454b49}.request-note a{text-decoration:underline}
.form-status:not(:empty){padding:14px;border:1px solid var(--accent);background:#fffdf9;color:#15191a}
.request-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.public-counter{margin-top:24px;padding-block:15px;border-top:1px solid #5c5549;color:#fff5e3}
.public-counter p{font-size:.85rem;margin:0 0 5px}.public-counter strong{color:var(--accent-light);font-variant-numeric:tabular-nums}
.public-counter small{display:block;font-size:.7rem;color:#d4c8b6}.public-counter iframe{border:0;display:block;max-width:100%}
@media(max-width:600px){.request-panel{padding:22px 18px}.request-grid{grid-template-columns:1fr}.request-form button{width:100%}}


/* Shared accounts are handled by Tech It Forward. */
.forward-hub-bar{background:var(--shade);color:var(--cream);border-bottom:1px solid #676a5c;font-size:13px;padding:10px 0}.forward-hub-bar .container{display:flex;gap:10px 24px;align-items:center;flex-wrap:wrap}.forward-hub-bar a{color:var(--accent-light);font-weight:700}.forward-hub-bar span{overflow-wrap:anywhere;max-width:100%}.forward-hub-bar button{font:inherit;background:transparent;color:var(--cream);padding:4px 9px;border:1px solid #999b88;border-radius:4px;cursor:pointer}.forward-hub-bar a:focus-visible,.forward-hub-bar button:focus-visible{outline:3px solid var(--cream);outline-offset:4px}
/* The Tech It Forward login, right in the bar (forward-account.js; every Forward site logs in through Tech It Forward). */
.forward-login{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex-basis:100%}.forward-login[hidden]{display:none}.forward-login label{display:flex;gap:6px;align-items:center;font-weight:600}.forward-login input{font:inherit;padding:4px 8px;border:1px solid #999b88;border-radius:4px;background:#fffdf8;color:#15191a;width:13em;max-width:100%}.forward-login input:focus-visible{outline:3px solid var(--cream);outline-offset:2px}.forward-login .forward-login-status{flex-basis:100%;color:var(--cream);font-size:12px;min-height:1em}
/*##############################################################################
# End of brand.css
##############################################################################*/