/* Educating Edgar public website pages (/feedback/, /help/, /info/ ...). Online-only: never precached (see sw.js ONLINE_ONLY).
   Same palette and font as the app, but a normal scrolling document page (no kids' touch guards). */
@font-face { font-family: "EduFoundation"; src: url("../shared/fonts/EduNSWACTFoundation.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
:root { --bg: #FFF4E0; --bg2: #FFE7C2; --ink: #4A3B32; --muted: #8a786a; --orange: #FF9F43; --teal: #2EC4B6; --line: #f0e4d4; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 20% 0%, #FFF9EE 0, var(--bg) 40%, var(--bg2) 100%);
  font: 18px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: #a3501b; } a:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.site-header, .site-main, .site-footer { max-width: 720px; margin: 0 auto; padding-left: calc(env(safe-area-inset-left, 0px) + 20px); padding-right: calc(env(safe-area-inset-right, 0px) + 20px); }
.site-header { display: flex; align-items: center; gap: 12px; padding-top: calc(env(safe-area-inset-top, 0px) + 18px); flex-wrap: wrap; }
.site-header .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: "EduFoundation", system-ui; font-size: 26px; margin-right: auto; }
.site-header .brand img { width: 44px; height: 44px; }
.site-nav { display: flex; gap: 4px 16px; flex-wrap: wrap; font-size: 17px; }
.site-nav a { color: var(--ink); text-decoration: none; padding: 8px 2px; border-bottom: 3px solid transparent; }
.site-nav a[aria-current=page] { border-bottom-color: var(--orange); font-weight: 600; }
.site-main { padding-top: 8px; padding-bottom: 32px; }
.site-main h1 { font-family: "EduFoundation", system-ui; font-size: 40px; line-height: 1.15; margin: 16px 0 8px; }
.site-main h2 { font-size: 22px; margin: 28px 0 8px; }
.card { background: #fff; border-radius: 28px; padding: 24px 28px; box-shadow: 0 8px 24px rgba(74,59,50,.08); }
.small { color: var(--muted); font-size: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 14px 22px; border: 0; border-radius: 14px;
  background: var(--orange); color: #fff; font: 600 18px system-ui, sans-serif; text-decoration: none; cursor: pointer; touch-action: manipulation; }
.btn.ghost { background: #f3e7d8; color: var(--ink); }
.links { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 16px 0; }
.links a.card { text-decoration: none; color: var(--ink); display: block; padding: 20px 22px; }
.links a.card b { display: block; font-size: 20px; margin-bottom: 4px; }
.faq details { background: #fff; border-radius: 18px; padding: 14px 20px; margin: 10px 0; }
.faq summary { font-weight: 600; cursor: pointer; min-height: 32px; }
.faq details p, .faq details ul { margin: 10px 0 4px; }
.offline-note { background: #fff1e0; border: 2px solid #f3c99a; border-radius: 16px; padding: 12px 16px; margin: 12px 0; }
.site-footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.site-footer a { color: var(--muted); }

/* ---------- feedback form ---------- */
.fb-form { display: grid; gap: 10px; }
.fb-form fieldset { border: 0; padding: 0; margin: 0; }
.fb-form legend { font-weight: 600; padding: 0 0 4px; }
.fb-form .fb-cats label { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.fb-form input[type=radio] { width: 28px; height: 28px; accent-color: var(--orange); }
.fb-form .fb-block { display: grid; gap: 6px; padding: 4px 0; }
.fb-form textarea, .fb-form input[type=email] { font: 18px system-ui, sans-serif; padding: 12px; border: 2px solid #e8d6c0; border-radius: 14px; width: 100%; background: #fffdf9; color: var(--ink); }
.fb-form textarea:focus, .fb-form input:focus { outline: 3px solid var(--orange); border-color: transparent; }
.fb-form .fb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fb-form .fb-send { justify-self: start; }
.fb-form .fb-send:disabled { opacity: .6; }
.fb-status { min-height: 1.4em; margin: 0; }
.fb-status.ok { color: #2e7d4f; font-weight: 600; } .fb-status.warn { color: #a3501b; }
.fb-context { margin: 0; }
.hidden { display: none !important; }