/*
 * Sinclair Water Authority website
 * Colour variables, typography and basic layout definitions.
 */

:root {
  --navy: #002a5e;
  --darkgrey: #333333;
  /* --teal: #008080; */
  --lightgrey: #f7f9fc;
  --white: #ffffff;
  --max-width: 1200px;
  /* Default hero image used as background for all page hero sections. */
  --hero-image: url('images/hero-water.avif');
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--darkgrey);
  background-color: var(--white);
 
  overflow-y: scroll;
  min-height: 100vh;
}

a {
  color: var(--navy);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

header {
  background-color: var(--navy);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

nav li {
  position: relative;
}

nav a {
  color: var(--white);
  font-weight: 600;
}

nav a:hover {
  color: var(--lightgrey);
}

/* Mobile menu */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    gap: 0;
    background-color: var(--navy);
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    display: none;
  }
  nav ul.show {
    display: block;
  }
  .menu-toggle {
    display: block;
    /* Push the menu toggle button to the far right on narrow screens */
    margin-left: auto;
  }
  /* Ensure the header layout still uses flexbox with centered alignment */
  .nav-container {
    align-items: center;
  }
}

/* Additional mobile refinements for narrow screens */
@media (max-width: 600px) {
  /* Reduce hero padding and text size on small devices */
  .hero {
    padding: 2.5rem 1rem;
    min-height: 200px;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  /* Stack cards and staff members in a single column */
  .card-grid,
  .staff-grid {
    grid-template-columns: 1fr;
  }
  /* Make tables scrollable horizontally on small screens */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
  /* Center mobile nav links and add spacing */
  nav ul {
    text-align: center;
  }
  nav li {
    padding: 0.5rem 0;
  }

  /* Stack footer columns and center all content on very small screens */
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-column {
    flex: 1 1 100%;
  }

  /* Center the board meeting schedule table within its section */
  .schedule-table {
    display: table;
    margin-left: auto;
    margin-right: auto;
  }

  /* Override generic table behavior for pages with reports or schedules
     On very small screens the global table rule above makes all tables block level
     elements that span the full width. This overrides centering rules on some
     pages (e.g. Consumer Confidence Reports, Water Restrictions, Board Meeting
     Schedule and Billing & Water Quality). Explicitly reset these tables to
     display as regular tables and center them with auto margins. */
  body.ccr-page table,
  body.water-restrictions-page table,
  body.board-meeting-schedule-page table,
  body.billing-water-quality-page table {
    display: table;
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }
}

.hero {
  position: relative;
  color: var(--white);
  text-align: center;
  padding: 4rem 1rem;
  min-height: 275px;
  display: grid;
  place-items: center;
  background: var(--hero-image) no-repeat center/cover;
  background-size: cover;
  background-position: center;
}

@keyframes waveSlide {
  from { background-position: 0 0; }
  to   { background-position: 320px 0; }
}

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

.hero h1 {
  font-size: 2.5rem;
  margin: 0 0 1rem;
}

.hero p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 2rem;
}

.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--navy);
  color: var(--white);
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out;
}

.button:hover {
  background-color: #001d3a;
}

/* Generic section styling */
.section {
  padding: 3rem 1rem;
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--navy);
}

.section p {
  margin-bottom: 1rem;
text-align: center
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* Staff page card grid*/
.staff-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Resources page card grid*/
.resources-page .card-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card {
  background-color: var(--lightgrey);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.card h3 {
  margin-top: 0;
  color: var(--navy);
}

.card ul {
  padding-left: 1.2rem;
}

.card ul li {
  margin-bottom: 0.5rem;
}

/* Table styling */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

th, td {
  padding: 0.75rem;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
}

th {
  background-color: var(--lightgrey);
  color: var(--navy);
}

/* Footer */
footer {
  background-color: var(--navy);
  color: var(--white);
  padding: 2rem 1rem;
}

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-column {
  flex: 1 1 200px;
}

.footer-column h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 0.5rem;
}

.footer-column a {
  color: var(--white);
}

.credit {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.875rem;
}

/* Certifications card styling for board members and staff pages */
.card .name {
  margin: 0 0 0.25rem 0;
  color: var(--navy);
  font-size: 1.125rem;
  font-weight: 700;
}

.card .role {
  margin: 0 0 0.75rem 0;
  color: var(--darkgrey);
  font-weight: 600;
}

/* Certification block container inside each card */
.cert-block {
  margin-top: 0.75rem;
  background: var(--white);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  border: 1px solid #e8edf5;
}

/* Centered certification header */
.cert-title {
  margin: 0 0 0.5rem 0;
  text-align: center;
  font-weight: 700;
  color: var(--navy);
}

/* Divider line below the certification title */
.cert-divider {
  height: 1px;
  background: #e3e7ef;
  margin: 0.25rem 0 0.5rem 0;
}

/* List styling for certification items */
.cert-list {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
}

.cert-list li {
  margin: 0.25rem 0;
}

.board-grid .card {
  text-align: center;
}

.board-grid .name,
.board-grid .role,
.board-grid .card p {
  text-align: center;
  margin-left: 0;
  margin-right: 0;
}

.notice-grid .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.notice-grid .card h3 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.notice-grid .card .button {
  margin-top: 1rem;
}

.quick-links-title {
  text-align: center;
}

.quick-links-grid .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.quick-links-grid .card h3 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.quick-links-grid .card .button {
  margin-top: 1rem;
}

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.footer-column:nth-child(1) {
  text-align: center;
}

.footer-column:nth-child(2) {
  text-align: center;
}

.footer-column:nth-child(3) {
  text-align: center;
}

.staff-grid .name,
.staff-grid .role {
  text-align: center;
}

.history-page h2 {
  text-align: center;
}

.about-page .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about-page .card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.about-page .card .button {
  margin-top: 1rem;
}

.about-page .section h2 {
  text-align: center;
}

.resources-page .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.resources-page .card h3 {
  font-size: 1.1rem;
  white-space: nowrap;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.resources-page .card .button {
  margin-top: 1rem;
}

.ccr-page table {
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

.ccr-page th,
.ccr-page td {
  text-align: center;
}

.ccr-page .container > p {
  text-align: center;
}

.home-page .section h2 {
  text-align: center;
}

.home-page .schedule-table {
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

.home-page .schedule-table th,
.home-page .schedule-table td {
  text-align: center;
}

.careers-page .section h2 {
  text-align: center;
}

.careers-page .card {
  margin-left: auto;
  margin-right: auto;
}

.careers-page .card h3,
.careers-page .card h4 {
  text-align: center;
}

.careers-page .card > div {
  text-align: center;
}

.careers-page .card .button,
.careers-page .section .button {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

.contact-page .section h2 {
  text-align: center;
}

.contact-page .section p {
  text-align: center;
}

.contact-page form > div:last-child {
  text-align: center;
}

.contact-page form button {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

.board-page .card-grid .card {
  text-align: center;
}

.board-page .card-grid .card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.board-page .card-grid .card p {
  text-align: center;
  margin-left: 0;
  margin-right: 0;
}

.board-page .card-grid .card * {
  text-align: center;
}

.home-page .hero {
  padding-top: 6rem;
}

.home-page header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: transparent;
  box-shadow: none;
  z-index: 999;
}

.home-page header .nav-container {
  padding-top: 0.5rem;
}

.home-page header .logo,
.home-page header nav a {
  font-size: 1.0rem;
  color: var(--white);
}

.home-page header .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .home-page header nav ul {
    position: absolute;
    top: 60px;
    right: 1rem;
    left: 1rem;
    background: rgba(0, 42, 94, 0.85);
    border-radius: 0.5rem;
    padding: 1rem;
  }

  /* Stack and center the footer on mid-sized screens and smaller
     The footer uses a CSS grid by default with three columns to align
     content left, center and right. On tablet and mobile widths we
     collapse the grid into a single column using flexbox so that each
     section stacks vertically and is centered. The justify-content
     property centers the entire stack within its container. */
  .footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
  }
  .footer-column {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.home-page header.scrolled {
  background: rgba(0, 42, 94, 0.92);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  backdrop-filter: saturate(120%) blur(6px);
}

@media (max-width: 768px) {
  .home-page header nav ul.show {
    z-index: 1000;
  }
}

.hero { position: relative; overflow: hidden; }
.hero .waves {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 10vh;
  min-height: 70px;
  max-height: 110px;
  pointer-events: none;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}


@keyframes move-forever {
  0% { transform: translate3d(-90px,0,0); }
  100% { transform: translate3d(85px,0,0); }
}

@media (max-width: 768px) {
  .hero .waves {
    height: 32px;
    min-height: 32px;
  }
}

.hero h1, .hero h2, .hero h3, .hero .heading, .hero .title {
  text-shadow: 0 2px 4px rgba(0,0,0,0.35);
}

.hero {
  color: #ffffff;
}
.hero a { color: rgba(255,255,255,0.95); }
.hero .btn, .hero .button { color: #ffffff; }

header .brand, header .brand a, header .site-title, header .site-title a, header .logo, header .logo a, header .logo-text {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

header nav a {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

header nav a:hover,
header nav a:focus {
  opacity: 0.9;
  text-decoration: underline;
}

nav, nav a, .nav, .nav a, .navbar, .navbar a, .menu, .menu a, .site-nav, .site-nav a, header nav, header nav a {
  font-size: 1.0em; /* ~10% smaller */
  line-height: 1.2em;
}

.text-center { text-align: center; }
.mt-4 { margin-top: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.container-narrow { max-width: 800px; margin-inline: auto; }
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}

.skip-link:focus {
  position: static; width: auto; height: auto; padding: .5rem .75rem; background: #0a4d8c; color: #fff; border-radius: .25rem;
}

@media (max-width: 768px) {
  nav ul { display: none; position: absolute; right: 0; top: 100%; background: rgba(10, 77, 140, 0.98); padding: .75rem 1rem; border-radius: .5rem; }
  nav ul.show { display: block; }
  .menu-toggle { display: inline-flex; }
}

.home-page .hero {
  background-image: image-set(
    url('images/hero-water.avif') type('image/avif') 1x,
    url('images/hero-water.webp') type('image/webp') 1x
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* === Strategy 1: Center ULs as a left-aligned column inside .section ===
   Centers the <ul> block within .section .container on pages with <body class="home-page">,
   while keeping the list items left-aligned (ragged-right look).
*/
.home-page .section .container ul {
  inline-size: fit-content;              /* shrink-wrap to content */
  max-inline-size: min(60ch, 100%);      /* don't overflow small screens */
  margin-inline: auto;                   /* center the UL as a block */
  text-align: left;                      /* keep text left-aligned */
  padding-left: 1.25rem;                 /* preserve bullet indent */
}



/* === Board Meeting Schedule table: centered column, left-aligned tbody, centered thead === */
.board-meeting-schedule-page .section .container table {
  width: auto;                         /* override global 100% width */
  inline-size: fit-content;            /* hug content like Strategy 1 */
  max-inline-size: min(72ch, 100%);    /* readable column, avoid overflow */
  margin-inline: auto;                 /* center the table as a block */

}

.board-meeting-schedule-page thead th {
  text-align: center;                  /* center the header labels */
}

.board-meeting-schedule-page tbody td {
  text-align: center;                    /* center-ragged look for all body cells */
}