/* ============================================================
   /assets/seo-pages.css
   Page-specific styles for the standalone, crawlable /shop, /student-hub,
   /faqs, /contact and /blog(/<slug>) pages generated by build_seo_pages.py.
   Shared design tokens, nav, footer, and buttons live in /assets/site.css
   (loaded first) -- only genuinely page-specific rules live here, same
   convention as /assets/product-page.css.
   ============================================================ */

.sec{padding:32px 0 96px}

/* FORM INPUTS (contact page) -- copied from index.html's inline styles so
   the standalone contact form looks identical to the in-app one. */
.pi{width:100%;padding:12px 14px;border:2px solid var(--gb);border-radius:9px;font-size:14px;font-family:inherit;outline:none;transition:border-color .15s;background:#fff;color:var(--t);margin-bottom:10px;display:block}
.pi:focus{border-color:var(--g)}
select.pi{cursor:pointer}
textarea.pi{resize:vertical;min-height:110px}
.form-err{background:#fff1f1;border:1px solid #fca5a5;border-radius:8px;padding:9px 13px;color:#dc2626;font-size:13px;margin-bottom:10px;display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* FAQ ACCORDION -- copied from index.html's inline styles. */
.fw{display:flex;flex-direction:column;gap:8px}
.fi2{border:1.5px solid var(--gb);border-radius:11px;overflow:hidden}
.fi2.open{border-color:var(--g)}
.fq{width:100%;background:none;border:none;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;color:var(--t);text-align:left;gap:12px}
.fq:hover{background:var(--ba)}
.fch{color:var(--g);font-size:22px;flex-shrink:0;transition:transform .2s;line-height:1}
.fi2.open .fch{transform:rotate(45deg)}
.fa{display:none;padding:4px 20px 18px 20px;color:var(--tm);font-size:14px;line-height:1.8}
.fi2.open .fa{display:block}

/* SHOP -- reuses the related-grid/rcard card look from product-page.css
   (loaded alongside this file on /shop) for a consistent product-card
   feel, plus a couple of shop-specific additions (subtitle, CTA row). */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin-top:24px}
.shop-card{border:1.5px solid var(--gb);border-radius:var(--r);padding:0;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.shop-card img{width:100%;height:170px;object-fit:cover;display:block}
.shop-card-body{padding:16px;display:flex;flex-direction:column;flex:1}
.shop-card-title{font-weight:800;font-size:15px;margin-bottom:4px}
.shop-card-title a{color:inherit;text-decoration:none}
.shop-card-title a:hover{color:var(--g)}
.shop-card-sub{color:var(--tl);font-size:12.5px;margin-bottom:8px}
.shop-card-price{color:var(--gd);font-weight:800;font-size:16px;margin:auto 0 12px}
.shop-card-actions{display:flex;gap:8px}
/* .btn sets white-space:nowrap globally, which is right for a button sitting
   on its own but wrong inside a fixed-width grid cell: any label longer than
   the column simply overhangs the card. "Get Free Social History Guide"
   rendered 272px wide inside a 250px card at desktop widths. Allow the label
   to wrap here, and let the button grow to fit rather than clipping. */
.shop-card-actions .btn{flex:1;text-align:center;white-space:normal;min-width:0;line-height:1.3;padding-top:9px;padding-bottom:9px}

/* BLOG LIST + ARTICLE */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:24px}
.blog-card{border:1.5px solid var(--gb);border-radius:var(--r);padding:20px;background:#fff;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;display:block;transition:border-color .15s,box-shadow .15s}
.blog-card:hover{border-color:var(--g);box-shadow:var(--shadow)}
.blog-card-emoji{font-size:32px;margin-bottom:10px}
.blog-card-title{font-weight:800;font-size:16px;margin-bottom:6px;color:var(--t)}
.blog-card-excerpt{color:var(--tm);font-size:13.5px;line-height:1.6}
.blog-article-body{color:var(--tm);font-size:15px;line-height:1.8;max-width:680px}
.blog-article-body h3{color:var(--t);font-size:18px;font-weight:800;margin:24px 0 10px}
.blog-article-body ul{margin:0 0 16px 20px}
.blog-article-body a{color:var(--g);font-weight:600}
.blog-article-body p{margin-bottom:14px}

/* STUDENT HUB (content overview -- the interactive generator tools remain
   inside the app, this page links to them alongside real static content). */
.hub-tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:24px 0 40px}
.hub-tool-card{border:1.5px solid var(--gb);border-radius:var(--r);padding:18px;background:#fff;box-shadow:var(--shadow-sm)}
.hub-tool-card h3{font-size:15px;font-weight:800;margin-bottom:6px;color:var(--t)}
.hub-tool-card p{color:var(--tm);font-size:13.5px;line-height:1.6}
.mnem-list{display:grid;gap:10px;margin-top:16px;max-width:640px}
.mnem-list li{color:var(--tm);font-size:14px;line-height:1.6}

/* Generic keyboard-focus fallback + reduced-motion, matching the SPA's own
   accessibility rules (WCAG 2.4.7 / 2.3.3) -- these standalone pages have
   their own <head>, so they need the same rule restated. */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(67,133,90,.55);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* Clinical disclaimer on blog articles. Deliberately quiet -- it is a
   standing note about scope, not a warning, so it sits below the article
   in muted text rather than competing with the content. */
.blog-article-disclaimer{
  margin-top:32px;padding:14px 16px;
  border-left:3px solid var(--brass-ink);
  background:var(--ba);border-radius:0 8px 8px 0;
  font-size:13.5px;line-height:1.65;color:var(--tm);
}