/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import url("https://fonts.googleapis.com/css?family=Public+Sans&display=swap");

:root {
  --dc-primary: #3583c0;
  --link-color: #3583c0;
  --footer-background: #0d1b25;
  --dc-red-fade: #40d4e033;
}

body {
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- *
 * Default header: solid blue (used on all non-homepage pages).
 * ---------------------------------------------------------------- */

#main-header {
  background-color: var(--dc-primary);
  z-index: 100;
  position: sticky;
  top: 0;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#main-header,
#main-header a,
#main-header .header-logo a,
#main-header .nav-item .nav-link {
  transition: color 0.25s ease;
}

#main-header .header-logo a,
#main-header .header-logo a:hover {
  color: #fff;
}

#main-header .nav-item .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

#main-header .nav-item .nav-link:hover {
  color: #fff;
}

/* ---------------------------------------------------------------- *
 * Homepage header: starts transparent (hero shows through), fades
 * to white as the user scrolls. Positioned fixed so the hero can
 * extend behind it. --scroll-progress is set from 0..1 by
 * header_scroll.js as the user scrolls.
 * ---------------------------------------------------------------- */

#page-homepage #main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, var(--scroll-progress, 0));
  box-shadow: 0 2px 12px rgba(0, 0, 0, calc(var(--scroll-progress, 0) * 0.08));
}

/* Once scroll progress crosses the midpoint, switch text to the
   darker navy color so it's readable against the whitening header. */
#page-homepage #main-header.scrolled .header-logo a,
#page-homepage #main-header.scrolled .nav-item .nav-link {
  color: #294969;
}

#page-homepage #main-header.scrolled .nav-item .nav-link:hover {
  color: var(--dc-primary);
}

/* ---------------------------------------------------------------- *
 * Homepage layout: zero out the default .main-content top margin so
 * the first section (the blue hero) can sit flush against the top
 * of the viewport, allowing the fixed transparent header to overlay
 * the gradient rather than the white body background.
 * ---------------------------------------------------------------- */

#page-homepage .main-content {
  margin-top: 0;
  margin-bottom: 0;
}

#page-homepage #app-container {
  margin-top: 0;
}

/* The DC framework puts padding-top on #main to reserve space for
 * the header. On the homepage we want the hero to sit flush at the
 * top of the viewport so the transparent header overlays the
 * gradient, so we remove that padding here. */

#page-homepage #main {
  padding-top: 0 !important;
}