/* GlutenGuard styles. Loaded after Bootstrap so these rules win. */

:root {
  --gg-green: #2f7d4f;
  --gg-green-dark: #1d4d33;
  --gg-green-light: #e3f1e7;
  --gg-cream: #faf7f0;
  --gg-text: #23302a;
  --gg-muted: #5f6b64;
  --gg-safe: #2e8b57;
  --gg-caution: #d99a1e;
  --gg-risk: #c8423b;
  --gg-caution-dark: #a8740f;
  --gg-caution-ink: #3b2a05;

  /* Tints and shades mixed from the base colors above, so changing a base
     color updates every border, focus ring, and shadow built from it */
  --gg-border: color-mix(in srgb, var(--gg-green-dark) 10%, transparent);
  --gg-border-strong: color-mix(in srgb, var(--gg-green-dark) 25%, transparent);
  --gg-border-light: color-mix(in srgb, var(--gg-green) 15%, #fff);
  --gg-stripe: color-mix(in srgb, var(--gg-green) 4%, #fff);
  --gg-focus-ring: color-mix(in srgb, var(--gg-green) 20%, transparent);
  --gg-focus-outline: color-mix(in srgb, var(--gg-green) 45%, transparent);
  --gg-pulse: color-mix(in srgb, var(--gg-safe) 50%, transparent);
  --gg-dot-idle: color-mix(in srgb, var(--gg-muted) 45%, #fff);
  --gg-placeholder: color-mix(in srgb, var(--gg-muted) 65%, #fff);

  /* Text and overlays on the dark green header, footer, and hero */
  --gg-on-dark: rgba(255, 255, 255, 0.85);
  --gg-on-dark-hover: rgba(255, 255, 255, 0.12);

  --gg-radius: 0.75rem;
  --gg-shadow: 0 2px 10px color-mix(in srgb, var(--gg-green-dark) 8%, transparent);
  --gg-shadow-hover: 0 4px 18px color-mix(in srgb, var(--gg-green-dark) 12%, transparent);
}

/* ---------- Element selectors ---------- */

body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: var(--gg-cream);
  color: var(--gg-text);
}

h1,
h2,
h3,
h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--gg-green-dark);
}

/* Scales smoothly from 1.5rem on small phones up to 1.75rem. The rem part
   of the middle value keeps it responsive to browser zoom. */
h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 1.75rem);
}

h3 {
  font-size: 1.25rem;
}

a {
  color: var(--gg-green);
}

a:hover {
  color: var(--gg-green-dark);
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------- Page layout ---------- */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  padding-top: 2rem;
  padding-bottom: 3rem;
}

/* ---------- Header and navigation ---------- */

header {
  background-color: var(--gg-green-dark);
  box-shadow: var(--gg-shadow);
}

header .navbar-brand h1 {
  font-size: 1.5rem;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Inline SVG logo, hidden from screen readers since the name follows it */
.brand-icon {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  fill: var(--gg-green-light);
}

.brand-icon .brand-check {
  fill: none;
  stroke: var(--gg-green-dark);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

header .nav-link {
  color: var(--gg-on-dark);
  border-radius: 0.5rem;
  padding: 0.4rem 0.8rem !important;
}

header .nav-link:hover,
header .nav-link:focus-visible {
  color: #fff;
  background-color: var(--gg-on-dark-hover);
}

header .nav-link.active {
  color: #fff;
  background-color: var(--gg-green);
}

header .welcome {
  color: var(--gg-on-dark);
  margin: 0.5rem 0;
}

#username {
  display: inline-block;
  background-color: var(--gg-green-light);
  color: var(--gg-green-dark);
  font-weight: 600;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
}

@media (min-width: 768px) {
  header .welcome {
    margin: 0;
  }
}

/* ---------- Footer ---------- */

footer {
  background-color: var(--gg-green-dark);
  color: var(--gg-on-dark);
  padding: 1.25rem 0;
}

footer .footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

footer p {
  margin: 0;
}

footer a {
  color: #fff;
}

footer a:hover {
  color: var(--gg-green-light);
}

/* ---------- Shared components ---------- */

.gg-card {
  background-color: #fff;
  border-radius: var(--gg-radius);
  padding: 1.5rem;
}

.placeholder-note {
  color: var(--gg-muted);
  font-size: 0.875rem;
  font-style: italic;
  margin: 0.75rem 0 0;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- Home page ---------- */

.hero {
  padding: 2rem 1.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

.hero p {
  max-width: 40rem;
  margin: 0.75rem auto 1.25rem;
}

/* One column on phones, search and login side by side on wider screens */
.home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 768px) {
  .home-grid {
    grid-template-columns: 3fr 2fr;
  }
}

#search-card h4 {
  font-size: 1rem;
  margin: 1.5rem 0 0.75rem;
}

.list-group-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.list-group-item .address {
  font-size: 0.875rem;
}

/* ---------- Colors and details ---------- */

/* Match Bootstrap's green buttons to the GlutenGuard palette */
.btn-success {
  --bs-btn-bg: var(--gg-green);
  --bs-btn-border-color: var(--gg-green);
  --bs-btn-hover-bg: var(--gg-green-dark);
  --bs-btn-hover-border-color: var(--gg-green-dark);
  --bs-btn-active-bg: var(--gg-green-dark);
  --bs-btn-active-border-color: var(--gg-green-dark);
}

.btn-outline-success {
  --bs-btn-color: var(--gg-green);
  --bs-btn-border-color: var(--gg-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--gg-green);
  --bs-btn-hover-border-color: var(--gg-green);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--gg-green-dark);
  --bs-btn-active-border-color: var(--gg-green-dark);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--gg-green);
  box-shadow: 0 0 0 0.2rem var(--gg-focus-ring);
}

.gg-card {
  border: 1px solid var(--gg-border);
  box-shadow: var(--gg-shadow);
}

.hero {
  background: linear-gradient(135deg, var(--gg-green-dark), var(--gg-green));
  color: #fff;
  border-radius: var(--gg-radius);
  box-shadow: var(--gg-shadow);
}

.hero h2 {
  color: #fff;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem);
}

.hero p {
  color: var(--gg-on-dark);
  font-size: 1.1rem;
}

.hero .btn-light {
  color: var(--gg-green-dark);
  font-weight: 600;
}

#search-card {
  border-top: 4px solid var(--gg-green);
}

#login-card {
  border-top: 4px solid var(--gg-caution);
}

.list-group-item-action:hover {
  background-color: var(--gg-green-light);
}

.list-group-item strong {
  color: var(--gg-green-dark);
}

.list-group-item .address {
  color: var(--gg-muted);
}

/* ---------- Browse page ---------- */

.page-intro {
  margin-bottom: 1.5rem;
}

.page-intro p {
  color: var(--gg-muted);
  max-width: 45rem;
}

/* Phones stack everything; wide screens put the map and feed side by side
   with the restaurant table across the full width underneath. */
.browse-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    'map'
    'feed'
    'list';
  gap: 1.5rem;
}

#map {
  grid-area: map;
}

#recent-activity {
  grid-area: feed;
}

#restaurant-list {
  grid-area: list;
}

@media (min-width: 992px) {
  .browse-grid {
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      'map feed'
      'list list';
  }
}

.map-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 240px;
  background-color: var(--gg-green-light);
  border-radius: 0.5rem;
  overflow: hidden;
}

.table {
  margin-bottom: 0;
}

.table th {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  white-space: nowrap;
}

.live-feed {
  list-style: none;
  padding: 0;
  margin: 0;
}

.live-feed li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--gg-border);
}

.live-feed li:last-child {
  border-bottom: none;
}

/* ---------- Rating badges ---------- */

.rating-badge {
  display: inline-block;
  min-width: 4.5rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
  white-space: nowrap;
  color: #fff;
}

.rating-badge.safe {
  background-color: var(--gg-safe);
}

.rating-badge.caution {
  background-color: var(--gg-caution);
  color: var(--gg-caution-ink);
}

.rating-badge.risk {
  background-color: var(--gg-risk);
}

.answer-yes {
  color: var(--gg-safe);
  font-weight: 600;
}

.answer-no {
  color: var(--gg-risk);
  font-weight: 600;
}

.answer-na,
.answer-unsure {
  color: var(--gg-muted);
}

/* ---------- Live feed dot ---------- */

.live-feed li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.live-feed li::before {
  content: '';
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-top: 0.45rem;
  background-color: var(--gg-safe);
  animation: pulse 2s ease-in-out infinite;
}

/* Only the newest item pulses; older items get a quiet gray dot */
.live-feed li:not(:first-child)::before {
  background-color: var(--gg-dot-idle);
  animation: none;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--gg-pulse);
  }
  50% {
    box-shadow: 0 0 0 0.4rem transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-feed li::before {
    animation: none;
  }
}

/* ---------- Restaurant page ---------- */

.restaurant-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    'profile'
    'live'
    'reviews';
  gap: 1.5rem;
}

#safety-profile {
  grid-area: profile;
}

#live-activity {
  grid-area: live;
}

#reviews {
  grid-area: reviews;
}

@media (min-width: 992px) {
  .restaurant-grid {
    grid-template-columns: 3fr 2fr;
    grid-template-areas:
      'profile live'
      'reviews reviews';
  }
}

.rating-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.rating-summary p {
  margin: 0;
}

.practice-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.practice-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--gg-border);
}

.confidence-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.confidence {
  flex: 1 1 10rem;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

.review-text {
  min-width: 16rem;
}

.table td:last-child {
  white-space: nowrap;
}

/* ---------- Restaurant page colors and details ---------- */

#safety-profile {
  border-top: 4px solid var(--gg-safe);
}

#safety-profile .rating-summary .rating-badge {
  font-size: 1.5rem;
  padding: 0.4rem 1rem;
}

/* Decorative status mark. The span is aria-hidden because the Yes / Usually /
   No answer on the same row already says this in words. */
.practice-icon {
  display: inline-block;
  width: 1.5rem;
  font-weight: 700;
}

.practice-yes .practice-icon::before {
  content: '✓';
  color: var(--gg-safe);
}

.practice-partial .practice-icon::before {
  content: '~';
  color: var(--gg-caution);
}

.practice-no .practice-icon::before {
  content: '✗';
  color: var(--gg-risk);
}

.answer-partial {
  color: var(--gg-caution-dark);
  font-weight: 600;
}

.practice-list li:hover {
  background-color: var(--gg-cream);
}

.confidence {
  background-color: var(--gg-cream);
  border-left: 4px solid var(--gg-muted);
}

.confidence-label {
  color: var(--gg-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.confidence strong {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
}

.confidence.high {
  background-color: var(--gg-green-light);
  border-left-color: var(--gg-safe);
}

.confidence.high strong {
  color: var(--gg-safe);
}

#live-activity {
  border-top: 4px solid var(--gg-caution);
}

.viewer-count {
  display: inline-block;
  background-color: var(--gg-green-light);
  color: var(--gg-green-dark);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
}

.reviewer {
  font-weight: 600;
  color: var(--gg-green-dark);
}

.review-text {
  color: var(--gg-muted);
}

/* ---------- Review form ---------- */

.review-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 56rem;
}

/* Bootstrap resets fieldsets; give them room to act as cards */
.review-form fieldset {
  min-width: 0;
}

/* The four yes/no/unsure questions: one column on phones, two on wider screens */
.question-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1.5rem;
}

@media (min-width: 768px) {
  .question-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Keep the dropdowns lined up when one question wraps to two lines */
  .question-grid .form-label {
    min-height: 3rem;
  }
}

.question {
  margin: 0 0 0.5rem;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1.5rem;
}

/* ---------- Review form colors and details ---------- */

.review-form legend {
  float: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--gg-green-dark);
  margin-bottom: 1rem;
}

/* A different accent stripe on each section of the form */
.review-form fieldset:nth-of-type(1) {
  border-top: 4px solid var(--gg-green);
}

.review-form fieldset:nth-of-type(2) {
  border-top: 4px solid var(--gg-caution);
}

.review-form fieldset:nth-of-type(3) {
  border-top: 4px solid var(--gg-green-dark);
}

.question {
  font-weight: 500;
}

/* Radio buttons shown as clickable chips. The real input stays in the page
   (just visually hidden) so keyboard and screen reader users can still use it. */
.choice-row .form-check {
  padding-left: 0;
  margin: 0;
}

.choice-row .form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-row .form-check-label {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--gg-border-strong);
  border-radius: 999px;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.choice-row .form-check-label:hover {
  border-color: var(--gg-green);
  background-color: var(--gg-green-light);
}

.choice-row .form-check-input:checked + .form-check-label {
  background-color: var(--gg-green);
  border-color: var(--gg-green);
  color: #fff;
}

.choice-row .form-check-input:focus-visible + .form-check-label {
  outline: 3px solid var(--gg-focus-outline);
  outline-offset: 2px;
}

.form-check-input:checked {
  background-color: var(--gg-green);
  border-color: var(--gg-green);
}

.form-check-input:focus {
  border-color: var(--gg-green);
  box-shadow: 0 0 0 0.2rem var(--gg-focus-ring);
}

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232f7d4f'/%3e%3c/svg%3e");
}

.review-form textarea::placeholder {
  color: var(--gg-placeholder);
  font-style: italic;
}

.review-form input[type='file']::file-selector-button {
  background-color: var(--gg-green-light);
  color: var(--gg-green-dark);
  font-weight: 600;
}

/* ---------- My Reviews page ---------- */

.my-reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    'summary'
    'replies'
    'history';
  gap: 1.5rem;
}

#user-summary {
  grid-area: summary;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  border-top: 4px solid var(--gg-green);
}

#replies {
  grid-area: replies;
  border-top: 4px solid var(--gg-caution);
}

#review-history {
  grid-area: history;
}

@media (min-width: 992px) {
  .my-reviews-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'summary replies'
      'history history';
  }
}

.avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gg-green-dark), var(--gg-green));
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
}

.summary-text {
  flex: 1 1 12rem;
}

.summary-text p {
  margin: 0;
}

.signed-in strong {
  color: var(--gg-green-dark);
  font-size: 1.1rem;
}

.review-count {
  color: var(--gg-muted);
}

.review-count strong {
  color: var(--gg-safe);
}

.restaurant-link {
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.restaurant-link:hover {
  text-decoration: underline;
}

/* Review history is a list of cards: name, rating, and date across the
   top, then the text, photos, and buttons stacked underneath */
.review-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.review-item {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--gg-border-light);
  border-radius: 0.5rem;
  transition: border-color 0.2s;
}

.review-item:hover {
  border-color: var(--gg-green);
}

.review-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.review-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.review-head .restaurant-link {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  white-space: normal;
}

.review-head .rating-badge {
  flex-shrink: 0;
}

.review-date {
  color: var(--gg-muted);
  font-size: 0.85rem;
}

.review-item .review-text {
  min-width: 0;
  margin: 0;
  color: var(--gg-text);
}

.review-item .action-buttons {
  justify-content: flex-end;
}

.photo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.photo-row img {
  width: 7.5rem;
  height: 5.5rem;
  object-fit: cover;
  border-radius: 0.5rem;
  box-shadow: var(--gg-shadow);
  transition: transform 0.2s;
}

.photo-row img:hover {
  transform: scale(1.05);
}

.action-buttons {
  display: flex;
  gap: 0.4rem;
}

/* ---------- Polish ---------- */

/* Grid items default to min-width: auto, so a wide table inside one would
   stretch the whole column past the screen. min-width: 0 lets the column
   shrink and the table scroll inside .table-responsive instead. */
.home-grid > *,
.browse-grid > *,
.restaurant-grid > *,
.my-reviews-grid > * {
  min-width: 0;
}

/* Zebra stripes on every data table */
.table > tbody > tr:nth-child(even) > * {
  --bs-table-bg: var(--gg-stripe);
}

.table > thead th {
  color: var(--gg-green-dark);
  border-bottom: 2px solid var(--gg-green);
}

/* Clear keyboard focus outlines everywhere */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--gg-focus-outline);
  outline-offset: 2px;
  box-shadow: none;
}

::selection {
  background-color: var(--gg-green-light);
  color: var(--gg-green-dark);
}

.gg-card {
  transition: box-shadow 0.2s;
}

.gg-card:hover {
  box-shadow: var(--gg-shadow-hover);
}

/* Tighter spacing on small phones (heading sizes scale on their own with clamp) */
@media (max-width: 575.98px) {
  main {
    padding-top: 1.25rem;
  }

  .gg-card {
    padding: 1.1rem;
  }

  .hero {
    padding: 1.5rem 1rem;
  }
}