/**
 * Critical above-the-fold CSS. Linked from html.html.twig before every other
 * stylesheet so the rest of the theme overrides it as before.
 */

/* CSS Variables — theme tokens needed before stylesheets arrive */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-header: #ffffff;
  --bg-navbar: #1c6e8c;
  --bg-footer: #0b1a2d;
  --text-primary: #1a1e21;
  --text-secondary: #3b3f44;
  --text-light: #ffffff;
  --text-muted: #545b62;
  --accent-primary: #0d6efd;
  --accent-secondary: #1c6e8c;
  --border-color: #dee2e6;
  --shadow-color: rgba(0,0,0,0.1);
  --card-bg: #ffffff;
}

/* Base layout — prevents content jumping */
*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--spfo-header-height, 155px) + var(--drupal-displace-offset-top, 0px));
}

body {
  margin: 0;
  min-height: 100%;
  font-family: 'Noto Sans', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  -webkit-text-size-adjust: 100%;
}

/* Skip link — accessibility, must appear before header */
.skip-link {
  position: absolute;
  top: -100px;
  left: 10px;
  z-index: 9999;
  background: var(--accent-primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 4px 4px;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus { top: var(--drupal-displace-offset-top, 0px); }

/* Header shell — sit below admin toolbar when logged in */
header.spfo-main-header {
  position: fixed;
  top: var(--drupal-displace-offset-top, 0px);
  left: 0;
  z-index: 999;
  width: 100%;
  height: var(--spfo-header-height, 155px);
  background: var(--bg-header);
  box-shadow: 0 2px 8px var(--shadow-color);
}
body.toolbar-fixed header.spfo-main-header {
  top: var(--drupal-displace-offset-top, 39px);
}
body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open header.spfo-main-header {
  top: var(--drupal-displace-offset-top, 79px);
}

/* Top toolbar strip */
#block-spfogov-modern-topheader {
  height: var(--spfo-top-toolbar-height, 34px);
  background-color: #1e3a8a;
  overflow: visible;
}

/* Navbar bar colour */
#spfo-main-navigation.navbar.spfo-navbar,
#spfo-main-navigation.spfo-custom-navbar {
  background-color: #1e3a8a !important;
  box-shadow: 0 2px 10px var(--shadow-color);
}

/* Push content below fixed header (desktop); tablet uses full stylesheet */
main.spfo-main {
  padding-top: var(--spfo-header-height, 155px);
}

@media (max-width: 1199.98px) {
  header.spfo-main-header {
    height: auto;
    min-height: 0;
    flex-shrink: 0;
  }

  main.spfo-main {
    padding-top: 0;
  }
}

/* Footer background — prevents white flash at bottom */
footer, .spfo-footer {
  background-color: var(--bg-footer);
  color: var(--text-light);
  margin-top: auto;
}

/* Marquee — prevent bright flash before CSS arrives */
.marquee-wrapper, .spfo-marquee, .whatsnew-wrapper {
  background: linear-gradient(90deg, #1649c4 0%, #0d36a1 100%);
  min-height: 36px;
}

/* Prevent images from stretching before CSS */
img { max-width: 100%; height: auto; }

/* Page loading state — hides content shift, removed when full CSS loads */
body.css-loading * {
  animation-duration: 0s !important;
  transition-duration: 0s !important;
}

/* Mobile responsive base */
@media (max-width: 991px) {
  header.spfo-main-header { height: auto; position: relative; top: 0; }
  main.spfo-main { padding-top: 0; }
}