/* ==========================================================================
   Parkerville Feedback and Complaints - site styles
   Brand colours taken from parkerville.org.au: navy #1b2657, teal #20b1b5.
   Accessibility: teal (#20b1b5) on white is only 2.6:1, so it is used for
   accents, borders and large fills only. Text and buttons use navy (14.4:1
   on white) or navy on teal (5.5:1). Keep it that way to stay WCAG 2.2 AA.
   ========================================================================== */

/* Roboto variable font, self-hosted (SIL OFL, see /fonts/ROBOTO-OFL-LICENSE.txt).
   Self-hosted so visitors' browsers make no request to a third-party font CDN. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --pk-navy: #1b2657;
  --pk-navy-dark: #121a3d;
  --pk-teal: #20b1b5;
  --pk-teal-hover: #1a9a9e;
  --pk-teal-dark: #0e7c80;
  --pk-teal-tint: #e6f6f7;
  --pk-ink: #1d2433;
  --pk-muted: #4b5563;
  --pk-line: #d5dae3;
  --pk-field-border: #6b7280;
  --pk-focus: #1b2657;
}

html {
  font-size: 16px;
  position: relative;
  min-height: 100%;
}

body {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--pk-ink);
  background: #fff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main#main-content { flex: 1 0 auto; width: 100%; }
main#main-content:focus { outline: none; }

h1, h2, h3, h4, h5, h6 { color: var(--pk-navy); font-weight: 700; line-height: 1.25; }
h1 { font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem); }

a { color: var(--pk-navy); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--pk-teal-dark); }

.text-muted { color: var(--pk-muted) !important; }

/* Keyboard focus: a visible 2-ring indicator that works on light and dark fills */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .btn:focus-visible, .form-check-input:focus-visible,
.navbar-toggler:focus-visible {
  outline: 3px solid var(--pk-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
.top-bar a:focus-visible, .global-footer a:focus-visible, .hero a:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 2px var(--pk-navy);
}
.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus,
.form-check-input:focus, .navbar-toggler:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--pk-focus);
  outline: none;
  border-color: var(--pk-navy);
}

/* ---- Skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 2000;
  background: #fff;
  color: var(--pk-navy);
  padding: 0.5rem 1rem;
  border: 2px solid var(--pk-navy);
  border-radius: 4px;
  font-weight: 600;
}
.skip-link:focus { top: 0.5rem; }

/* ---- Test-system banner -------------------------------------------------- */
.test-banner {
  background: #fff3cd;
  color: #4d3b00;
  border-bottom: 1px solid #e6c65c;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.4rem 1rem;
}

/* ---- Top bar -------------------------------------------------------------- */
.top-bar { background: var(--pk-navy); color: #fff; font-size: 0.875rem; }
.top-bar-links {
  list-style: none;
  margin: 0;
  padding: 0.45rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  justify-content: flex-end;
}
.top-bar a { color: #fff; text-decoration: none; }
.top-bar a:hover { color: #fff; text-decoration: underline; }

/* ---- Header --------------------------------------------------------------- */
.site-header { background: #fff; border-bottom: 4px solid var(--pk-teal); }
.site-header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.header-logo-link { flex: 0 0 auto; line-height: 0; }
.full-logo { height: 96px; width: auto; max-width: 100%; }
.site-header-main { flex: 1 1 auto; min-width: 0; }
.header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pk-navy);
  margin: 0;
}
.icon-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.6rem; }
.icon-menu img { width: 30px; height: 30px; display: block; }

.main-nav { padding: 0; }
.main-nav .navbar-nav { gap: 0.25rem; }
.main-nav .nav-link {
  color: var(--pk-navy);
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-bottom: 3px solid transparent;
  text-decoration: none;
}
.main-nav .nav-link:hover { color: var(--pk-teal-dark); border-bottom-color: var(--pk-teal); }
.main-nav .nav-link[aria-current="page"] { border-bottom-color: var(--pk-teal); }
.main-nav .nav-link-staff {
  border: 2px solid var(--pk-navy);
  border-radius: 999px;
  padding: 0.3rem 1rem;
  margin-top: 0.15rem;
}
.main-nav .nav-link-staff:hover { background: var(--pk-navy); color: #fff; border-color: var(--pk-navy); }
.navbar-toggler { border: 2px solid var(--pk-navy); margin-left: auto; }
.main-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231b2657' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 767.98px) {
  .full-logo { height: 64px; }
  .site-header-inner { gap: 1rem; }
  .top-bar-links { justify-content: flex-start; }
  .main-nav .nav-link { border-bottom: 0; border-left: 3px solid transparent; }
  .main-nav .nav-link[aria-current="page"] { border-left-color: var(--pk-teal); }
}

/* ---- Hero ----------------------------------------------------------------- */
.hero {
  background: var(--pk-navy);
  color: #fff;
  border-radius: 12px;
  border-top: 6px solid var(--pk-teal);
  padding: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 2rem;
}
.hero h1 { color: #fff; margin-bottom: 0.75rem; }
.hero p { max-width: 46rem; font-size: 1.125rem; margin-bottom: 1.25rem; }
.hero a:not(.btn) { color: #fff; }

/* ---- Cards ---------------------------------------------------------------- */
.card { border: 1px solid var(--pk-line); border-radius: 10px; }
.card-title { color: var(--pk-navy); font-weight: 700; }
.choice-card { border-top: 4px solid var(--pk-teal); }

.safety-note {
  background: var(--pk-teal-tint);
  border-left: 5px solid var(--pk-teal-dark);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  color: var(--pk-ink);
}

/* ---- Buttons (Bootstrap 5.1 has no CSS-variable buttons, so set each state) */
.btn { font-weight: 600; border-radius: 999px; padding: 0.5rem 1.25rem; }
.btn-sm { padding: 0.3rem 0.9rem; }
.btn-lg { padding: 0.65rem 1.75rem; }

.btn-primary { background: var(--pk-navy); border-color: var(--pk-navy); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--pk-navy-dark); border-color: var(--pk-navy-dark); color: #fff; }
.btn-primary:active, .btn-primary.active { background: #0c1230 !important; border-color: #0c1230 !important; color: #fff; }
.btn-primary:disabled { background: var(--pk-navy); border-color: var(--pk-navy); opacity: 0.6; }

.btn-teal { background: var(--pk-teal); border-color: var(--pk-teal); color: var(--pk-navy); }
.btn-teal:hover, .btn-teal:focus { background: var(--pk-teal-hover); border-color: var(--pk-teal-hover); color: var(--pk-navy); }

.btn-outline-primary, .btn-outline-secondary {
  color: var(--pk-navy);
  border-color: var(--pk-navy);
  border-width: 2px;
  background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background: var(--pk-navy);
  border-color: var(--pk-navy);
  color: #fff;
}
.btn-link { color: var(--pk-navy); }

/* ---- Forms ---------------------------------------------------------------- */
.form-label { font-weight: 600; color: var(--pk-navy); }
.form-control, .form-select {
  border: 1px solid var(--pk-field-border);
  border-radius: 6px;
  color: var(--pk-ink);
}
.form-control::placeholder { color: #6b7280; opacity: 1; }
.form-check-input { border: 1px solid var(--pk-field-border); }
.form-check-input:checked { background-color: var(--pk-navy); border-color: var(--pk-navy); }
.form-text { color: var(--pk-muted); }
.text-danger { color: #a61b1b !important; }

.form-section {
  border: 1px solid var(--pk-line);
  border-left: 5px solid var(--pk-teal);
  border-radius: 8px;
  padding: 1.25rem 1.25rem 0.5rem;
  margin-bottom: 1.5rem;
  background: #fff;
}
.form-section > legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.9rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--pk-navy);
}
/* Clear every following sibling, not just the first: the first one may be hidden
   (display:none) by the form script, which would leave the next one floating beside the legend. */
.form-section > legend ~ * { clear: left; }
/* Make sure the hidden attribute always wins over Bootstrap's display rules. */
[hidden] { display: none !important; }

/* ---- Tables and state badges ---------------------------------------------- */
.table > :not(caption) > * > * { padding: 0.75rem 0.75rem; }
.table thead th { color: var(--pk-navy); border-bottom: 2px solid var(--pk-navy); white-space: nowrap; }
.table-hover > tbody > tr:hover > * { background: var(--pk-teal-tint); }
tr.clickable-row { cursor: pointer; }

.badge { font-weight: 600; font-size: 0.8rem; padding: 0.35em 0.7em; border-radius: 999px; }
.badge-state { background: var(--pk-teal-tint); color: var(--pk-navy); border: 1px solid var(--pk-teal-dark); }

/* AA contrast on white */
.triage-Low { color: #1b6e3a; font-weight: 600; }
.triage-Medium { color: #7a5200; font-weight: 600; }
.triage-High { color: #a33800; font-weight: 600; }
.triage-Critical { color: #a61b1b; font-weight: 700; }

.stat-tile {
  border: 1px solid var(--pk-line);
  border-top: 4px solid var(--pk-teal);
  border-radius: 8px;
  padding: 0.9rem;
  text-align: center;
  height: 100%;
}
.stat-tile .stat-number { font-size: 1.75rem; font-weight: 700; color: var(--pk-navy); line-height: 1.1; }

.audit-log { font-size: 0.875rem; }
.audit-log li { padding: 6px 0; border-bottom: 1px dashed var(--pk-line); }

.defect-note {
  background: #fff8e1;
  border: 1px solid #e6c65c;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  color: var(--pk-ink);
}

/* ---- Footer --------------------------------------------------------------- */
.global-footer {
  background: var(--pk-navy);
  color: #fff;
  margin-top: 3rem;
  border-top: 6px solid var(--pk-teal);
  flex-shrink: 0;
}
.global-footer a { color: #fff; }
.global-footer a:hover { color: #fff; text-decoration-thickness: 2px; }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  padding: 2rem 0 1.5rem;
}
.footer-logo-link {
  display: inline-block;
  background: #fff;
  border-radius: 10px;
  padding: 0.5rem;
  line-height: 0;
}
.footer-logo-link .full-logo { height: 80px; }
.footer-col h2 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.3rem; }
.footer-cultural {
  display: flex;
  gap: 1rem;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding: 1.25rem 0;
}
.footer-cultural p { margin: 0; max-width: 52rem; font-size: 0.95rem; }
.footer-end {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding: 1rem 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-size: 0.875rem;
}
.footer-end p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}