/*
Theme Name: City of Hiawassee
Theme URI: https://hiawasseega.gov/
Author: Freedman Design Group
Description: Block theme for the City of Hiawassee, Georgia. Ported from the Astro rebuild of hiawasseega.gov. Palette is blue, green and white only; every foreground/background pair is checked against WCAG 2.1 AA and the ratios are noted in theme.json.
Version: 1.3.3
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hiawassee
Tags: full-site-editing, block-patterns, accessibility-ready
*/

/* ==========================================================================
   City of Hiawassee — component styles

   Colour, type and spacing tokens live in theme.json and arrive as
   --wp--preset--* custom properties. Only what the block editor cannot express
   is written here: the hero scrim, the card grid, the staff and notice lists.

   Every ratio noted in theme.json was checked against WCAG 2.1 AA. If you
   change a value, re-check it.
   ========================================================================== */

:root {
  --blue: var(--wp--preset--color--blue);
  --navy: var(--wp--preset--color--navy);
  --blue-wash: var(--wp--preset--color--blue-wash);
  --green: var(--wp--preset--color--green);
  --green-deep: var(--wp--preset--color--green-deep);
  --green-wash: var(--wp--preset--color--green-wash);
  --ink: var(--wp--preset--color--ink);
  --ink-soft: var(--wp--preset--color--ink-soft);
  --paper: var(--wp--preset--color--paper);
  --surface: var(--wp--preset--color--surface);
  --surface-sunk: var(--wp--preset--color--surface-sunk);
  --rule: var(--wp--preset--color--rule);

  --font-body: var(--wp--preset--font-family--body);
  --font-display: var(--wp--preset--font-family--display);

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: 1.9rem;
  --step-4: 2.4rem;

  --measure: 68ch;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 3px;
}

/* --- base ---------------------------------------------------------------- */

img { max-width: 100%; height: auto; display: block; }
p, li { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
a { text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* --- focus --------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
  transition: top 120ms ease-in;
}

.skip-link:focus { top: 0.5rem; }

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

main:focus { outline: none; }

/* --- layout primitives --------------------------------------------------- */

.hia-wrap {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hia-section { padding-block: clamp(2.5rem, 6vw, 4rem); }
.hia-section--tint { background: var(--surface); }
.hia-section-head { max-width: 52ch; margin-block-end: 2rem; }

.hia-standfirst {
  max-width: var(--measure);
  margin-block-start: 0.75rem;
  font-size: var(--step-1);
  color: var(--ink-soft);
}

/* Prose sits at a readable measure and stays flush left.
   Deliberately not WordPress's "constrained" layout: that centres each child
   at contentSize while letting headings take the wide width, which left the
   heading flush and the paragraphs indented under it. */
.hia-prose { max-width: var(--measure); }
.hia-prose > * + * { margin-block-start: 1rem; }
.hia-prose > h2 { margin-block-end: 1rem; }
.hia-section-head > p { margin: 0.65rem 0 0; color: var(--ink-soft); }

.hia-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

/* --- utility bar --------------------------------------------------------- */

.hia-utility {
  background: var(--surface-sunk);
  font-size: 0.8rem;
  border-block-end: 1px solid var(--rule);
}

.hia-utility__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  justify-content: space-between;
  padding-block: 0.4rem;
}

.hia-utility p { margin: 0; color: var(--ink-soft); }
.hia-utility a { display: inline-block; padding-block: 0.2rem; }

/* --- text bar ------------------------------------------------------------ */

.hia-textbar {
  font-size: var(--step--1);
  border-block-end: 1px solid var(--rule);
  background: var(--surface-sunk);
  color: var(--ink);
}

.hia-textbar--accent { background: var(--blue-wash); border-block-end-color: var(--blue); }

.hia-textbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.25rem;
  padding-block: 0.5rem;
}

.hia-textbar p { margin: 0; }
.hia-textbar a { font-weight: 700; padding-block: 0.2rem; }

/* --- alert / emergency banner -------------------------------------------- */

/* The palette has no yellow, so this is deep green — which means colour alone
   cannot signal urgency. The label word is part of the content, not
   decoration. Do not remove it. */
.hia-alert { background: var(--green-deep); color: #fff; }

.hia-alert__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  padding-block: 0.7rem;
}

.hia-alert__text { margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }

.hia-alert__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgb(255 255 255 / 0.6);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius);
  flex: none;
}

.hia-alert a { color: #fff; font-weight: 700; margin-inline-start: auto; }
.hia-alert :focus-visible { outline-color: #fff; }

/* --- header -------------------------------------------------------------- */

.hia-header { background: var(--paper); border-block-end: 1px solid var(--rule); }

.hia-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  padding-block: 0.9rem;
}

.hia-brand { display: flex; align-items: center; gap: 0.9rem; color: var(--ink); }
.hia-brand__link { display: block; text-decoration: none; flex: none; }
.hia-brand__logo { height: auto; flex: none; }

.hia-brand__sub {
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-inline-start: 0.9rem;
  border-inline-start: 1px solid var(--rule);
  max-width: 7rem;
  line-height: 1.3;
}

@media (max-width: 30rem) {
  .hia-brand__logo { width: 118px !important; }
  .hia-brand__sub { display: none; }
}

/* A rule and a weight change mark the current page, never colour alone. */
.hia-nav .wp-block-navigation-item__content {
  padding: 0.6rem 0.8rem;
  color: var(--ink);
  text-decoration: none;
  border-block-end: 3px solid transparent;
}

.hia-nav .wp-block-navigation-item__content:hover {
  color: var(--blue);
  border-block-end-color: var(--blue);
}

.hia-nav .current-menu-item .wp-block-navigation-item__content {
  color: var(--blue);
  border-block-end-color: var(--blue);
}

/* --- hero ---------------------------------------------------------------- */

.hia-hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(118deg, #0a5b91 0%, #123f63 38%, #1d5e3d 78%, #2f6b45 100%);
  padding-block: clamp(3rem, 9vw, 6rem);
  overflow: hidden;
  color: #fff;
}

.hia-hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Tuned against a real photograph, not by eye. A blue-hour aerial is dark
   overall but its sky band peaks bright, and white text needs the background
   below 0.183 luminance to clear 4.5:1. 0.50 is the first top stop where every
   sampled block passes with margin. */
.hia-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(9 19 37 / 0.50) 0%, rgb(9 19 37 / 0.64) 100%);
}

.hia-hero__inner > * + * { margin-block-start: 0.6rem; }

.hia-hero__welcome {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  color: #dbe7f2;
  margin: 0;
}

.hia-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 9vw, 5.5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 1px 12px rgb(9 19 37 / 0.6);
  margin: 0;
}

.hia-hero__lede {
  max-width: 42ch;
  font-size: var(--step-1);
  color: #e2ebf4;
  margin-block-start: 1rem;
}

.hia-hero__jump {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.hia-hero__jump a {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  background: rgb(255 255 255 / 0.12);
  border: 1.5px solid rgb(255 255 255 / 0.55);
  border-radius: var(--radius);
  color: #fff;
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
}

.hia-hero__jump a:hover { background: #fff; color: #14284b; border-color: #fff; }
.hia-hero :focus-visible { outline-color: #fff; }

/*
 * A labelled row of the same buttons. The label sits on the same line on a
 * wide screen and drops above the buttons on a narrow one, which flex-wrap
 * does on its own — no media query, and no width at which the label ends up
 * orphaned beside a single button.
 */
.hia-hero__jumpgroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-block-start: 0.9rem;
}

.hia-hero__jumpgroup .hia-hero__jump { margin-block-start: 0; }

.hia-hero__jump-label {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: var(--step--1);
}

/* --- cards --------------------------------------------------------------- */

.hia-cardgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}

.hia-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  padding: 1.4rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(9 19 37 / 0.06);
}

.hia-card__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.hia-card__title a { color: var(--ink); text-decoration: none; }
.hia-card__title a:hover { color: var(--blue); text-decoration: underline; }

/* The whole card is clickable, but only the title is the real link — so the
   accessible name stays the title rather than the card's entire text. */
.hia-card__title a::after { content: ''; position: absolute; inset: 0; }

.hia-card__desc { margin: 0; font-size: var(--step--1); color: var(--ink-soft); flex: 1; }
.hia-card__more { margin: 0.5rem 0 0; font-size: var(--step--1); font-weight: 700; color: var(--blue); }

/* --- topics -------------------------------------------------------------- */

.hia-topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-block-start: 1px solid var(--rule);
}

.hia-topics li { border-block-end: 1px solid var(--rule); }
.hia-topics a { display: block; padding: 0.9rem 0.25rem; font-weight: 700; text-decoration: none; }
.hia-topics a:hover { text-decoration: underline; }

/* Marks the one topic that leaves the site. Real text, not an icon, so it is
   announced rather than merely seen. */
.hia-topics__ext {
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* --- staff --------------------------------------------------------------- */

.hia-officials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}

.hia-official {
  padding: 1rem 1.15rem;
  background: var(--surface);
  border-block-start: 4px solid var(--green);
  border-radius: var(--radius);
}

.hia-official__role {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hia-official__name {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.2;
}

.hia-official__bio { margin: 0.5rem 0 0; font-size: var(--step--1); color: var(--ink-soft); }

/* Photographs are cropped to a square and given an explicit height, so an
   upload whose file dimensions differ from the display size cannot stretch
   into an oval. This is the exact failure the old ConsultStreet team grid
   shipped: max-width with no height, and a 500x500 portrait rendering
   160 wide by 500 tall. */
.hia-official__photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  margin-block-end: 0.75rem;
}

/* --- notices ------------------------------------------------------------- */

.hia-notices-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }

@media (min-width: 52rem) {
  .hia-notices-layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: 3rem; }
}

.hia-notices { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.hia-notice { padding-block: 0.9rem; border-block-end: 1px solid var(--rule); }

.hia-notice__date {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.hia-notice__title { margin: 0.15rem 0 0; font-size: var(--step-1); }
.hia-more { margin-block-start: 1.5rem; font-weight: 700; }
.hia-more a, .hia-notice__title a { display: inline-block; padding-block: 0.2rem; }

/* --- year navigation ----------------------------------------------------- */

.hia-years ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  border-block-end: 1px solid var(--rule);
}

.hia-years a,
.hia-years [aria-current] {
  display: block;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
}

.hia-years a:hover { border-color: var(--blue); color: var(--blue); }

/* The current year is marked by fill and weight, not colour alone. */
.hia-years [aria-current] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.hia-count {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* --- sidebar ------------------------------------------------------------- */

.hia-sidebar > * + * { margin-block-start: 0.6rem; }

.hia-sidebar__heading {
  font-size: var(--step-1);
  margin-block-start: 1.75rem;
  padding-block-end: 0.4rem;
  border-block-end: 2px solid var(--green);
}

.hia-sidebar__heading:first-child { margin-block-start: 0; }
.hia-sidebar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.hia-sidebar__meta { font-size: var(--step--1); color: var(--ink-soft); margin: 0.15rem 0 0; }
.hia-sidebar address { font-style: normal; }
.hia-sidebar p { margin: 0; }

/* --- logo strip ---------------------------------------------------------- */

.hia-logos__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
}

.hia-logos__list--left { justify-content: flex-start; }
.hia-logos__list--center { justify-content: center; }
.hia-logos__list--right { justify-content: flex-end; }

/* Height follows from the width, so a logo cannot arrive at its file's pixel
   height and stretch the row. */
.hia-logos__list img { display: block; height: auto; max-width: 100%; }

/* --- bids and documents -------------------------------------------------- */

.hia-doclist { list-style: none; margin: 0; padding: 0; }
.hia-doc { padding-block: 0.9rem; border-block-end: 1px solid var(--rule); }
.hia-doc__title { margin: 0; font-size: var(--step-0); font-weight: 700; }
.hia-doc__meta { margin: 0.2rem 0 0; font-size: var(--step--1); color: var(--ink-soft); }

/* Said plainly rather than hidden: an untagged scan is unusable with a screen
   reader, and the city is better served by a visible backlog than a silent
   compliance gap. */
.hia-doc__unchecked {
  display: inline-block;
  margin-block-start: 0.3rem;
  font-size: var(--step--1);
  color: var(--green-deep);
  background: var(--green-wash);
  border-radius: var(--radius);
  padding: 0.15rem 0.5rem;
}

/* The hoisted form: one note for the whole list, so it reads as a heading
   for what follows rather than as a tag on a single entry. */
.hia-doc__unchecked--all {
  display: block;
  margin-block: 0 1.25rem;
  padding: 0.6rem 0.9rem;
}

.hia-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid currentColor;
}

.hia-status--open { color: var(--green-deep); }
.hia-status--closed { color: var(--ink-soft); }

/* --- department pages ---------------------------------------------------- */

.hia-dept {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
}

/* Both dimensions are set, so the badge cannot arrive at its file's own
   proportions and stretch. */
.hia-dept__badge { width: 124px; height: auto; flex: none; }

.hia-dept__body { flex: 1 1 22rem; }
.hia-dept__body > * + * { margin-block-start: 0.75rem; }
.hia-dept__body address { font-style: normal; }

.hia-dept__urgent {
  font-family: var(--font-display);
  font-size: var(--step-2);
  margin: 0;
}

.hia-figure { margin: 0; }
.hia-figure img { width: 100%; height: auto; border-radius: var(--radius); }

/* --- footer -------------------------------------------------------------- */

.hia-footer { background: var(--navy); color: #fff; padding-block: clamp(2.5rem, 6vw, 3.5rem); }
.hia-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem; }
.hia-footer a { color: #fff; }
.hia-footer :focus-visible { outline-color: #fff; }
.hia-footer address { font-style: normal; }

.hia-footer__heading {
  font-size: var(--step-1);
  margin-block-end: 0.75rem;
  padding-block-end: 0.4rem;
  border-block-end: 2px solid rgb(255 255 255 / 0.3);
}

.hia-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.hia-footer__legal {
  margin-block-start: 2.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgb(255 255 255 / 0.2);
  font-size: var(--step--1);
  color: #dbe7f2;
}

/* --- print --------------------------------------------------------------- */

@media print {
  .hia-utility, .hia-textbar, .hia-nav, .hia-hero__jump, .skip-link { display: none; }
  .hia-hero { background: none; color: #000; }
}