/* assets/css/base.css
   Design tokens and foundational styles for Highlands Forward Quarterly
   Site Safety Inspection. Palette derived from the Highlands Forward
   brand mark: navy text, gold sunburst, blue accent. Internal-operations
   tone: white background, generous touch targets, no decoration that
   doesn't carry information.
*/

:root {
  /* Brand */
  --hf-navy: #1B3A5C;
  --hf-navy-dark: #122840;
  --hf-charcoal: #2D3748;
  --hf-gold: #E8A33D;
  --hf-gold-dark: #C4842A;
  --hf-blue: #2E6DA4;
  --hf-white: #FFFFFF;
  --hf-bg: #F5F6F8;
  --hf-border: #DCE1E7;
  --hf-text-muted: #5B6472;

  /* Status colors -- always paired with visible text, never color alone */
  --status-compliant: #1F8A4C;
  --status-compliant-bg: #E7F6EC;
  --status-not-compliant: #C4302B;
  --status-not-compliant-bg: #FBEAE9;
  --status-not-applicable: #6B7280;
  --status-not-applicable-bg: #F0F1F3;
  --status-draft: #6B7280;
  --status-draft-bg: #F0F1F3;
  --status-submitted: #2E6DA4;
  --status-submitted-bg: #E9F1F8;
  --status-standby: #B7791F;
  --status-standby-bg: #FCF3DF;
  --status-review: #6D4AA6;
  --status-review-bg: #F0EAF8;
  --status-finalized: #14532D;
  --status-finalized-bg: #E4EFE8;
  --status-reopened: #C2540A;
  --status-reopened-bg: #FCEBDF;
  --status-overdue: #C4302B;
  --status-overdue-bg: #FBEAE9;

  /* Layout */
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 3px rgba(27, 58, 92, 0.08), 0 1px 2px rgba(27, 58, 92, 0.06);
  --shadow-elevated: 0 4px 16px rgba(27, 58, 92, 0.12);
  --max-content-width: 720px;
  --footer-height: 56px;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  /* Mobile audit finding: nothing previously guaranteed a long,
     unbreakable string (a long site address, a long free-typed
     Inspection Area) couldn't force horizontal scroll on a narrow phone.
     This is the global safety net; individual components still wrap at
     natural word boundaries first via their own flex/grid layout. */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--hf-charcoal);
  background: var(--hf-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  padding-bottom: calc(var(--footer-height) + 12px);
  overflow-wrap: break-word;
  word-break: break-word;
}

h1, h2, h3, h4 {
  color: var(--hf-navy);
  margin: 0 0 0.5em 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1em 0; }

a { color: var(--hf-blue); }

button {
  font-family: inherit;
}

/* Visible focus states everywhere -- accessibility requirement */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--hf-gold);
  outline-offset: 2px;
}

.container {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 16px;
}

.container-wide {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Skip-to-content for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--hf-navy);
  color: white;
  padding: 8px 16px;
  z-index: 200;
}
.skip-link:focus {
  left: 8px;
}

/* ---- Site footer (present on every screen) ---- */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--footer-height);
  background: var(--hf-white);
  border-top: 1px solid var(--hf-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 0.8rem;
  color: var(--hf-text-muted);
  z-index: 50;
}
.site-footer .footer-brand {
  font-weight: 700;
  color: var(--hf-navy);
}
.site-footer .footer-powered {
  white-space: nowrap;
}

@media (max-width: 380px) {
  .site-footer {
    font-size: 0.72rem;
    padding: 0 10px;
  }
}