@charset "utf-8";
/* CSS Document */ :root {
  /* CORE COLOURS – we can refine hex values later */
  --bg: #f7f3ec;
  --bg-alt: #ffffff;
  --text-main: #1f252b;
  --text-soft: #5a646f;
  --accent-blue: #1F4D7A; /* Nut‑free food */
  --accent-green: #245C3C; /* Facilities / premises */
  --accent-gold: #8C6A2B; /* Always Nut Free */
  --border-soft: #ddd3c4;
  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.05);
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --max-width: 1120px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text-main);
  line-height: 1.6;
  font-size: 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
html {
  overflow-y: scroll;
}
/* HEADER / NAV */
/* Change header from sticky to static so content never scrolls under it */
header {
  position: static; /* was: sticky */
  top: 0;
  z-index: 999;
  background: rgba(247, 243, 236, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13px;
}
.nav-logo-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1.4px solid var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.nav-links {
  display: flex;
  gap: 18px;
  font-size: 14px;
}
.nav-links a {
  opacity: .72;
}
.nav-links a:hover {
  opacity: 1;
}
.nav-cta {
  display: flex;
  gap: 10px;
  align-items: center;
}
/* BUTTONS */
.btn {
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
}
.btn-primary {
  background: var(--text-main);
  color: #fff;
}
.btn-primary:hover {
  opacity: .92;
}
.btn-ghost {
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.7);
}
/* LAYOUT */
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 28px 20px 72px;
}
section {
  margin-bottom: 46px;
}
/* GENERIC ELEMENTS */
.main-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  gap: 16px;
}
.section-header h2 {
  font-size: 20px;
  margin: 0;
}
.section-header p {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
  max-width: 30rem;
}
.section-label {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 8px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
/* CARDS */
.card {
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  padding: 16px 16px 14px;
  font-size: 13px;
  box-shadow: var(--shadow-soft);
}
.card h3 {
  margin: 0 0 6px;
  font-size: 15px;
}
.card p {
  margin: 0;
}
.card small {
  font-size: 11px;
  color: var(--text-soft);
}
/* TAGS */
.tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 8px;
}
.tag-blue {
  background: rgba(31, 77, 122, 0.07);
  color: var(--accent-blue);
}
.tag-green {
  background: rgba(36, 92, 60, 0.07);
  color: var(--accent-green);
}
.tag-gold {
  background: rgba(140, 106, 43, 0.07);
  color: var(--accent-gold);
}
/* HERO (HOME) */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.4fr);
  gap: 40px;
  align-items: center;
  margin-top: 0px !important;
  margin-bottom: 48px;
}
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11px;
  color: var(--text-soft);
  margin-bottom: 10px;
}
.hero h1 {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.1;
  margin: 0 0 14px;
}
.hero-sub {
  font-size: 16px;
  color: var(--text-soft);
  max-width: 34rem;
  margin-bottom: 18px;
}
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 13px;
}
.pill {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.8);
}
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.hero-caption {
  font-size: 13px;
  color: var(--text-soft);
}
.hero-marks-card {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  padding: 20px 20px 14px;
}
.marks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-soft);
}
/* ICON ROW + LABELS */
.marks-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  align-items: flex-start;
  margin-top: 4px;
  margin-bottom: 0;
  flex-wrap: nowrap;
}
.mark {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.triangle {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.hero-icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block;
}
.mark-label {
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}
.mark-label span {
  display: block;
  font-size: 11px;
  color: var(--text-soft);
}
/* STEPS (HOME & STANDARDS) */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  font-size: 13px;
}
.step-num {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
/* FORMS (REGISTER / FACILITY / PREMISES / GET-CERTIFIED) */
.form-card, form-card {
  /* legacy alias, not required but harmless */
}
.form-container .card, .page-form-card {
  /* optional hook if you want a different card style */
}
.form-grid, form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  font-size: 14px;
}
.form-full {
  grid-column: 1 / -1;
}
label {
  display: block;
  font-size: 12px;
  margin-bottom: 3px;
  color: var(--text-soft);
}
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select, textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  font: inherit;
  background: #fff;
}
textarea {
  min-height: 80px;
  resize: vertical;
}
.help-text {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 2px;
}
.checkbox-row, .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
}
.checkbox-item, .radio-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.checkbox-row input {
  margin-top: 2px;
}
.section-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.form-actions p {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0;
}
/* DIRECTORY CARDS – icon + contact */
.filters-card {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  padding: 16px 10px 14px;
  margin-bottom: 24px;
  font-size: 14px;
}
.filters-row {
  display: grid;
  grid-template-columns: 3fr 1.5fr 1.2fr 1.2fr 1.2fr 1.2fr;
  gap: 14px 14px;
  align-items: flex-end;
}
.filters-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
  font-size: 13px;
}
.directory-layout {
  margin-top: 28px;
}
.directory-how {
  margin-top: 36px;
}
.directory-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.directory-card {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  background: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.03);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.directory-card-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.directory-card-main h3 {
  margin: 0 0 2px;
  font-size: 15px;
}
.directory-meta {
  margin: 0 0 2px;
  font-size: 12px;
  color: var(--text-soft);
}
.directory-tier {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-soft);
  margin: 9px 0 4px;
}
.directory-contact {
  margin: 0;
  font-size: 12px;
  color: var(--text-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.directory-contact span {
  display: inline-flex;
}
.directory-contact a {
  color: inherit;
  text-decoration: none;
}
.directory-contact a:hover {
  text-decoration: underline;
}
.directory-card-icon {
  flex: 0 0 auto;
}
.directory-card-icon img {
  width: 30px;
  height: 30px;
  display: block;
}
.directory-results {
  background: #fbf6ec;
  border-radius: var(--radius-lg);
  padding: 8px 10px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-soft);
}
/* Tier-colour halo */
.tier-blue .directory-card-icon {
  background: rgba(31, 77, 122, 0.06);
  border-radius: 999px;
  padding: 6px;
}
.tier-green .directory-card-icon {
  background: rgba(36, 92, 60, 0.06);
  border-radius: 999px;
  padding: 6px;
}
.tier-gold .directory-card-icon {
  background: rgba(140, 106, 43, 0.06);
  border-radius: 999px;
  padding: 6px;
}
.directory-card-link:hover .directory-card {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
  transition: box-shadow 120ms ease, transform 120ms ease;
}
/* STANDARDS PAGE */
.standard-hero {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.4fr);
  gap: 32px;
  align-items: center;
  margin-bottom: 40px;
}
.standard-hero-copy h1 {
  font-size: clamp(28px, 3.6vw, 36px);
  line-height: 1.2;
  margin: 0 0 10px;
}
.standard-hero-copy p {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--text-soft);
  max-width: 34rem;
}
.standard-hero-card {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  padding: 18px 18px 14px;
  font-size: 13px;
}
.standard-hero-card-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 10px;
}
.standard-hero-icons {
  display: flex;
  justify-content: center;
  gap: 32px;
  text-align: center;
}
.standard-hero-icons img {
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto 4px;
}
.standard-hero-icons span {
  display: block;
  font-size: 11px;
}
.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  font-size: 14px;
}
.two-column p {
  margin-top: 0;
}
.info-card {
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  padding: 14px 14px 12px;
  font-size: 13px;
}
.contact {
  width: 100%;
}
/* FOOTER */
footer {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: 16px 20px 26px;
  font-size: 11px;
  color: var(--text-soft);
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  margin-top: auto;
}
footer div {
  margin-bottom: 4px;
}
footer div:last-child {
  margin-bottom: 0;
}
footer a {
  color: inherit;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
/* LANG SWITCHER */
.lang-switcher {
  display: flex;
  align-items: center;
}
.lang-current {
  padding-inline: 10px;
  font-size: 12px;
  text-transform: uppercase;
}
/* NAVIGATION HIGHLIGHT */
.nav-links a {
  opacity: .72;
  position: relative;
  text-decoration: none;
}
.nav-links a.is-active {
  opacity: 1;
  font-weight: 600;
}
.nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--text-main);
  border-radius: 999px;
}
/* RESPONSIVE */
@media (max-width: 880px) {
  .nav-links {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-marks-card {
    order: -1;
  }
  .standard-hero {
    grid-template-columns: 1fr;
  }
  .standard-hero-card {
    order: -1;
  }
  .steps, .grid-3, .directory-list, .two-column {
    grid-template-columns: 1fr;
  }
  .filters-row {
    grid-template-columns: 1fr 1fr;
  }
  .results-layout {
    grid-template-columns: 1fr;
  }
  .form-grid, form {
    grid-template-columns: 1fr;
  }
  .form-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
@media (max-width: 640px) {
  .filters-row {
    grid-template-columns: 1fr;
  }
}
/* ACCOUNT PAGE */
.hero-narrow {
  margin-bottom: 18px;
}
.hero-narrow .intro {
  max-width: 34rem;
  font-size: 14px;
  color: var(--text-soft);
}
.section-header-with-action {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.section-header-with-action p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-soft);
}
.table-card {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  padding: 10px 12px;
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table th, .table td {
  padding: 6px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-soft);
}
.table tr:last-child td {
  border-bottom: none;
}
.table-compact th, .table-compact td {
  padding: 4px 4px;
}
.table-actions {
  white-space: nowrap;
  font-size: 12px;
}
.table-actions a {
  color: var(--text-main);
  text-decoration: none;
}
.table-actions a:hover {
  text-decoration: underline;
}
.card-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.muted {
  margin: 2px 0;
  font-size: 13px;
  color: var(--text-soft);
}
/* responsive tweaks */
@media (max-width: 880px) {
  .section-header-with-action {
    flex-direction: column;
    align-items: flex-start;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
}
/* messages */
.message-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}
.message-item + .message-item {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 8px;
  padding-top: 8px;
}
.message-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--text-soft);
  margin-bottom: 2px;
}
.message-badge {
  padding: 2px 6px;
  border-radius: 999px;
  background: #f3ede0;
}
.message-body p {
  margin: 2px 0 4px;
}
/* referrals */
.referral-row {
  margin: 8px 0 6px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.referral-row input[type="text"] {
  flex: 1;
  font-size: 12px;
}
/* ACCORDION */
.accordion {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-alt);
  box-shadow: var(--shadow-soft);
}
.accordion-toggle {
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.accordion-toggle:hover {
  background: rgba(0, 0, 0, 0.02);
}
.accordion-icon {
  font-size: 16px;
  line-height: 1;
}
.accordion-panel {
  display: none; /* this keeps them closed by default */
  padding: 0 10px 10px;
}
.accordion.is-open .accordion-panel {
  display: block;
}
.accordion.is-open .accordion-icon {
  transform: rotate(45deg); /* turns + into x */
}
/* BOTTOM BTN */
.muted-help {
  padding: 0 0 10px;
}