/* ==========================================================================
   Scan If Found — modern design system
   Ocean navy + orange accent. Replaces the old MDL/MDC mismatch.
   Targets legacy .mdl-* / .mdc-* classes so existing pages inherit the look.
   ========================================================================== */

:root {
  --navy:        #0d2b45;
  --navy-2:      #123a5c;
  --ocean:       #1565a0;
  --orange:      #ff6600;
  --orange-dark: #e25500;
  --bg:          #eef2f6;
  --card:        #ffffff;
  --ink:         #1f2d3a;
  --muted:       #5b6b7a;
  --border:      #e2e8f0;
  --danger:      #d92d20;
  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 1px 3px rgba(16, 33, 51, .08), 0 1px 2px rgba(16, 33, 51, .06);
  --shadow-md:   0 6px 18px rgba(16, 33, 51, .10);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

p, td, th { font-family: inherit; }

a { color: var(--ocean); text-decoration: none; }
a:hover { color: var(--orange-dark); text-decoration: underline; }

h1, h2, h3, h4, h5 { line-height: 1.25; color: var(--navy); margin: 1.2rem 0 .6rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

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

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.6rem 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0 clamp(1rem, 4vw, 2rem);
  min-height: 62px;
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%);
  box-shadow: var(--shadow-md);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff !important;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.brand:hover { color: #fff !important; text-decoration: none; }
.brand .material-symbols-outlined { color: var(--orange); font-size: 28px; }
.brand sup { font-size: .55em; font-weight: 600; opacity: .8; }

.site-header .spacer { flex: 1 1 auto; }

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: .35rem .5rem;
  cursor: pointer;
}
.nav-toggle .material-symbols-outlined { display: block; font-size: 26px; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem;
}

.site-nav a,
.mdc-navigation__link,
.mdl-navigation__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .8rem;
  color: rgba(255, 255, 255, .9) !important;
  font-weight: 600;
  font-size: .95rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.site-nav a:hover,
.mdc-navigation__link:hover,
.mdl-navigation__link:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff !important;
  text-decoration: none;
}
.site-nav a .material-symbols-outlined,
.site-nav a .material-symbols-rounded,
.site-nav a .material-icons { font-size: 20px; }

/* Highlight primary actions in the nav */
.site-nav a.nav-cta {
  background: var(--orange);
  color: #fff !important;
}
.site-nav a.nav-cta:hover { background: var(--orange-dark); }

/* --------------------------------------------------------------------------
   Main / content card
   -------------------------------------------------------------------------- */
.site-main,
main.mdc-layout__content {
  display: block;
  max-width: 1080px;
  margin: 1.75rem auto;
  padding: 0 clamp(1rem, 4vw, 1.5rem);
}

.page-content {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  overflow-x: auto; /* keep wide data tables from breaking the card */
}

/* Legacy narrow layout tables used for body copy -> readable column */
.content-narrow { width: 100% !important; max-width: 640px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Forms & buttons
   -------------------------------------------------------------------------- */
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search],
input[type=tel],
input[type=url],
select,
textarea,
.mdl-textfield__input {
  width: 100%;
  max-width: 420px;
  padding: .6rem .75rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus,
select:focus,
textarea:focus,
.mdl-textfield__input:focus {
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(21, 101, 160, .15);
}

/* Legacy MDL floating-label field -> simple stacked label + input */
.mdl-textfield {
  display: flex;
  flex-direction: column-reverse; /* label markup comes after input */
  align-items: flex-start;
  gap: .35rem;
  margin: .25rem 0 1rem;
}
.mdl-textfield__label {
  position: static;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
}

label { font-weight: 600; color: var(--ink); }

button,
input[type=submit],
input[type=button],
.mdl-button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: #fff !important;
  background: var(--orange);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .05s ease;
}
button:hover,
input[type=submit]:hover,
input[type=button]:hover,
.mdl-button:hover,
.btn:hover { background: var(--orange-dark); }
button:active,
input[type=submit]:active,
.mdl-button:active { transform: translateY(1px); }

/* Secondary / neutral button variant */
.btn-secondary {
  background: var(--navy);
}
.btn-secondary:hover { background: var(--navy-2); }

/* --------------------------------------------------------------------------
   Data tables  (covers both .mdl-data-table and .mdc-data-table)
   -------------------------------------------------------------------------- */
.mdl-data-table,
.mdc-data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin: 1rem 0 1.5rem;
  font-size: .92rem;
}

.mdl-data-table thead,
.mdc-data-table thead { background: var(--navy); }

.mdl-data-table th,
.mdc-data-table th {
  text-align: left;
  color: #fff;
  font-weight: 600;
  padding: .7rem .85rem;
  white-space: nowrap;
}

.mdl-data-table td,
.mdc-data-table td {
  padding: .65rem .85rem;
  border-top: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}

.mdl-data-table tbody tr:nth-child(even),
.mdc-data-table tbody tr:nth-child(even) { background: #f7fafc; }

/* Clickable rows (dashboards/search use onclick row navigation) */
.mdl-data-table tbody tr[onclick],
.mdc-data-table tbody tr[onclick] { cursor: pointer; }
.mdl-data-table tbody tr[onclick]:hover,
.mdc-data-table tbody tr[onclick]:hover { background: #fff3ea; }

/* "Life in danger" cells flagged with legacy bgcolor */
td[bgcolor] {
  background: var(--danger) !important;
  color: #fff !important;
  font-weight: 700;
  text-align: center;
}

/* Plain (layout) tables: keep neutral */
table:not(.mdl-data-table):not(.mdc-data-table) { border-collapse: collapse; }
table:not(.mdl-data-table):not(.mdc-data-table) td { padding: .25rem .4rem; }

/* --------------------------------------------------------------------------
   Login / simple form card
   -------------------------------------------------------------------------- */
.login {
  max-width: 380px;
  margin: 1rem auto;
  text-align: left;
}
.login h2 { text-align: center; margin-top: 0; }
.login .field { margin-bottom: 1rem; }
.login label { display: block; margin-bottom: .3rem; }
.login input[type=submit] { width: 100%; max-width: none; margin-top: .5rem; }
.login .form-footer { text-align: center; margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, .8);
  margin-top: 2.5rem;
}
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.footer-inner a { color: #fff; font-weight: 600; }
.footer-inner a:hover { color: var(--orange); text-decoration: none; }
.footer-links { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.footer-links a { display: inline-flex; align-items: center; gap: .35rem; }
.footer-links .material-symbols-outlined { font-size: 20px; color: var(--orange); }
.footer-spacer { flex: 1 1 auto; }
.footer-copy { font-size: .85rem; color: rgba(255, 255, 255, .6); }

/* Tame the injected Google Translate widget */
.footer-translate { font-size: .85rem; }
.footer-translate img { display: none; }
.goog-te-gadget { color: rgba(255, 255, 255, .6) !important; font-size: 0; }
.goog-te-gadget .goog-te-combo {
  font: inherit; color: var(--ink);
  padding: .35rem .5rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: #fff; max-width: 180px;
}

/* --------------------------------------------------------------------------
   Legacy content polish (applies to every page rendered in the card)
   -------------------------------------------------------------------------- */
.page-content > center,
.page-content form { display: block; }

/* Public forms read better as a centered, comfortable column */
.page-content form { max-width: 480px; }
.page-content form .mdl-textfield { width: 100%; }
.page-content form .mdl-textfield__input { max-width: 100%; }

/* Old PNG submit buttons -> give them room; new pages use real buttons */
input[type=image] { cursor: pointer; }

ul, ol { padding-left: 1.25rem; }
li { margin: .35rem 0; }

p { margin: .6rem 0; }

/* Deprecated <font> tags still appear in legacy markup */
font[color="red"], font[color="#f00"] { color: var(--danger) !important; }

/* Inline alert tables generated by sif.php (emergency / public-contact) */
.page-content table[bordercolor] {
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  background: #fff5f5;
  margin: 1rem auto;
  max-width: 480px;
}
.page-content table[bordercolor] td { padding: .75rem 1rem; }

/* --------------------------------------------------------------------------
   Material Symbols baseline
   -------------------------------------------------------------------------- */
.material-symbols-outlined,
.material-symbols-rounded,
.material-icons {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    padding-bottom: 0;
  }
  .site-nav.open {
    max-height: 80vh;
    overflow-y: auto;
    padding-bottom: .75rem;
  }
  .site-nav a,
  .mdc-navigation__link { width: 100%; }
}

/* --------------------------------------------------------------------------
   Home page — content sections as separate cards
   -------------------------------------------------------------------------- */

/* On the home page, let the inner cards be the cards: drop the outer
   white page-content shell so the cards stand out against the page bg. */
.page-content:has(.home-cards) {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.home-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 760px;
  margin: 0 auto;
}

/* Stack to a single column on narrow screens */
@media (max-width: 600px) {
  .home-cards { grid-template-columns: 1fr; }
}

.info-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.1rem, 3.5vw, 1.75rem);
  border-top: 3px solid var(--orange);
  transition: box-shadow .15s ease, transform .15s ease;
}
.info-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Accent strip now applies to every card via .info-card; keep the
   modifier as a harmless no-op so existing markup still validates. */
.info-card--accent { /* accent inherited from .info-card */ }

/* Tidy spacing inside cards */
.info-card > h3:first-child,
.info-card > h4:first-child,
.info-card > center:first-child h3 { margin-top: 0; }
.info-card > p:last-child,
.info-card > em:last-child { margin-bottom: 0; }
.info-card[align="center"] { text-align: center; }

/* Brand QR icon used inside a card (matches the title-bar logo) */
.card-icon {
  display: block;
  color: var(--orange);
  font-size: 48px;
  line-height: 1;
  margin-top: .5rem;
}