/*
Theme Name: Haik for Chanhassen
Description: Campaign site theme for Paul Haik for Chanhassen City Council. Blue and green palette, Roboto Condensed and Lato, card-style photo galleries and auto-numbered Q&A lists. The header, footer and all styling live here so every page matches without any per-page work.
Version: 1.2.0
Author: OAC Technology
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: haik
*/

/* ==========================================================================
   Palette and base
   ========================================================================== */
:root {
  --blue: #02027E;        /* headline blue from the flyer */
  --navy: #002D69;        /* solid bars */
  --navy-dark: #00234F;
  --navy-deep: #001A3D;
  --green: #006B42;
  --green-dark: #004F31;
  --green-soft: #9FD8B8;  /* green on navy */
  --white: #FFFFFF;
  --off-white: #F4F7F6;
  --line: #DDE3EA;
  --ink: #212236;
  --muted: #5A6175;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
img { max-width: 100%; height: auto; }
section { scroll-margin-top: 76px; }
a { color: var(--blue); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 2px 12px rgba(0, 29, 69, 0.4);
}
/* keep the sticky bar below the WordPress admin bar when logged in */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.nav { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.brand { display: flex; align-items: baseline; gap: 9px; color: var(--white); text-decoration: none; white-space: nowrap; }
.brand .star { color: var(--green-soft); font-size: 1.05rem; }
.brand .name { font-family: 'Roboto Condensed', Arial, sans-serif; font-weight: 700; font-size: 1.55rem; letter-spacing: 0.08em; }
.brand .sub  { font-family: 'Roboto Condensed', Arial, sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase; color: #A9C2E6; }
nav.links { display: flex; gap: 20px; }
nav.links a {
  color: var(--white); text-decoration: none; white-space: nowrap;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700; font-size: 1.02rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
nav.links a:hover, nav.links a.active { border-bottom-color: var(--green-soft); }
#navtoggle { display: none; }
.burger { display: none; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 24px; height: 3px; background: var(--white); margin: 5px 0; border-radius: 2px; }

/* ==========================================================================
   Hero (home page)
   ========================================================================== */
.hero { background: var(--white); border-bottom: 1px solid var(--line); }
.masthead-wrap { max-width: 1080px; margin: 0 auto; }
.masthead { display: block; width: 100%; height: auto; }
.hero-copy { text-align: center; padding: 44px 24px 56px; }
.kicker {
  display: inline-block;
  color: var(--green);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700; font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: 0.22em;
  border-bottom: 3px solid var(--green);
  padding-bottom: 4px;
  margin-bottom: 18px;
}
.tagline {
  color: var(--blue);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700; font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 22px;
}
.tagline .dot { color: var(--green); margin: 0 10px; }
.hero-quote {
  max-width: 640px;
  margin: 0 auto 30px;
  font-size: 1.15rem;
  color: var(--muted);
  border-left: 4px solid var(--green);
  padding-left: 18px;
  text-align: left;
}
.hero-quote strong { color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-block;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700; font-size: 1.18rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  text-decoration: none;
  padding: 13px 32px;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-green { background: var(--green); color: var(--white); }
.btn-green:hover { background: var(--green-dark); color: var(--white); }
.btn-outline { border: 2px solid var(--navy); color: var(--navy); padding: 11px 30px; }
.btn-outline:hover { background: var(--navy); color: var(--white); }

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
.section { padding: 84px 0; }
.eyebrow {
  color: var(--green);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700; font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.26em;
  margin-bottom: 10px;
}
.section-title {
  color: var(--blue);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.rule { width: 74px; height: 5px; background: var(--green); margin-bottom: 30px; }
.center { text-align: center; }
.center .rule { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   About
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: start; }
.about p { margin-bottom: 18px; }
.pull {
  background: var(--off-white);
  border-left: 5px solid var(--green);
  padding: 26px 28px;
  font-size: 1.22rem; line-height: 1.5;
  font-weight: 700; font-style: italic;
  color: var(--blue);
}
.pull .attr { display: block; margin-top: 14px; font-style: normal; font-weight: 700; font-family: 'Roboto Condensed', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-size: 1rem; color: var(--green); }

/* ==========================================================================
   Priorities
   ========================================================================== */
.priorities { background: var(--off-white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--green);
  padding: 34px 30px 30px;
  box-shadow: 0 6px 18px rgba(0, 29, 69, 0.07);
  display: flex; gap: 22px; align-items: flex-start;
}
.card .icon { flex: 0 0 68px; width: 68px; height: 68px; border-radius: 50%; overflow: hidden; }
.card .icon img { display: block; width: 100%; height: 100%; }
.card h3 {
  color: var(--blue);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700; font-size: 1.45rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.card p { color: var(--muted); font-size: 1.02rem; }

/* ==========================================================================
   Vision
   ========================================================================== */
.vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.vision p { margin-bottom: 18px; }
.ask { background: var(--navy); color: var(--white); padding: 34px 34px 30px; }
.ask h3 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700; font-size: 1.3rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--green-soft);
  margin-bottom: 18px;
}
.ask ul { list-style: none; }
.ask li { position: relative; padding: 0 0 0 30px; margin-bottom: 16px; font-size: 1.12rem; line-height: 1.45; }
.ask li:last-child { margin-bottom: 0; }
.ask li::before { content: "\2605"; position: absolute; left: 0; top: 1px; color: var(--green-soft); font-size: 1rem; }

/* ==========================================================================
   Closer and strip
   ========================================================================== */
.closer { padding: 78px 0 64px; text-align: center; }
.closer .big {
  color: var(--blue);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  text-transform: uppercase; letter-spacing: 0.14em;
  display: inline-flex; align-items: center; gap: 20px;
}
.closer .big .star { color: var(--green); font-size: 0.6em; }
.closer .trio { margin-top: 16px; color: var(--blue); font-size: 1.18rem; font-weight: 700; font-style: italic; }
.closer .trio .dot { color: var(--green); margin: 0 10px; font-style: normal; }
/* uppercase variant used on the Q&A page */
.closer .trio-caps {
  color: var(--blue);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.closer .trio-caps .dot { color: var(--green); margin: 0 14px; }
.strip {
  background: var(--navy); color: var(--white);
  padding: 22px 24px;
  text-align: center;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 700; font-style: italic;
  letter-spacing: 0.02em;
}
.strip a { color: var(--white); text-decoration: none; border-bottom: 2px solid var(--green-soft); }
.strip a:hover { color: var(--green-soft); }

/* ==========================================================================
   Get involved
   ========================================================================== */
.involve { padding: 84px 0; }
.involve p.lead { max-width: 620px; margin: 0 auto 30px; font-size: 1.12rem; color: var(--muted); }
.involve .email-line { margin-top: 18px; font-size: 1.05rem; }
.involve .email-line a { color: var(--blue); font-weight: 700; text-decoration: none; }
.involve .email-line a:hover { text-decoration: underline; }

/* ==========================================================================
   Page head (theme-rendered title on block-built pages)
   ========================================================================== */
.page-head { padding: 64px 0 40px; border-bottom: 1px solid var(--line); }
.page-head .section-title { font-size: clamp(2rem, 5vw, 3rem); }
.page-head .lead { max-width: 680px; font-size: 1.15rem; color: var(--muted); }

/* ==========================================================================
   Block content (pages the client builds in the editor, e.g. Gallery)
   ========================================================================== */
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 {
  color: var(--blue);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.1;
  text-transform: uppercase; letter-spacing: 0.03em;
  margin-top: 2.2em;
}
.entry-content h2:first-child { margin-top: 0; }
.entry-content h2::after { content: ""; display: block; width: 74px; height: 5px; background: var(--green); margin-top: 14px; }
.entry-content h3 {
  color: var(--blue);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700; font-size: 1.35rem;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.entry-content p { max-width: 760px; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; max-width: 760px; }
.entry-content .wp-block-image figcaption { color: var(--muted); font-size: 0.95rem; margin-top: 8px; }
.entry-content .alignwide { max-width: none; }
.entry-content .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }

/* ==========================================================================
   Photo galleries
   Styles both the WordPress core Gallery block and the .gallery markup from
   the static gallery.html, so either works. No extra class is needed.
   ========================================================================== */
.gallery-section.alt { background: var(--off-white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.group-title {
  color: var(--blue);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.1;
  text-transform: uppercase; letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.group-text { max-width: 720px; color: var(--muted); margin-bottom: 28px; }
.group-rule { width: 74px; height: 5px; background: var(--green); margin: 14px 0 34px; }

.gallery,
.wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 22px !important;
  margin: 26px 0 40px;
  /* Each card sizes to its own content. Without this, every card in a row is
     stretched to match the tallest, and a card whose caption runs to two lines
     drags the rest with it. */
  align-items: start !important;
}
.gallery figure,
.wp-block-gallery .wp-block-image {
  width: auto !important;
  margin: 0 !important;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--green);
  box-shadow: 0 6px 18px rgba(0, 29, 69, 0.07);
  overflow: hidden;
  cursor: zoom-in;
  display: flex; flex-direction: column;
}
.gallery figure a,
.wp-block-gallery .wp-block-image a { display: block; }

/* The card is a column flexbox, and WordPress ships two defaults that fight it:
   the image gets `flex: 1 0 0%` and the caption gets `flex: 1 1 100%`. With the
   caption promoted to a normal block (below), it claims the card's whole height
   and squeezes the image to zero, so a captioned photo renders as an empty card
   showing only the caption text. Pin both to their natural size instead.
   Selectors match WordPress's own specificity so they win regardless of the
   order the stylesheets happen to load in. */
.gallery figure > a,
.gallery figure > img,
.wp-block-gallery.has-nested-images figure.wp-block-image > a,
.wp-block-gallery.has-nested-images figure.wp-block-image > img { flex: 0 0 auto !important; }

/* WordPress also forces `height: 100%` on cropped gallery images. Let the
   4:3 aspect-ratio below decide the height instead. */
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img { height: auto !important; }

/* When a caption exists, WordPress paints a blurred gradient scrim over the
   bottom of the photo so white overlay text stays readable. Our caption sits
   below the photo on white, so the scrim is just a smear across the image.
   WordPress kills it the same way for its own rounded style. */
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before { content: none !important; }

.gallery figure img,
.wp-block-gallery .wp-block-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Crop from slightly above centre. Thumbnails are 4:3, so a portrait photo
     loses about half its height; taking that from the bottom keeps faces,
     which sit in the upper third, inside the frame. */
  object-position: center 30%;
  transition: transform 0.25s ease;
}

/* Per-image overrides. Select one image inside a Gallery block, open
   Advanced in the sidebar, and type the word into "Additional CSS class(es)".
     uncropped - show the whole photo, whatever its shape. Use for panoramas
                 and for any picture the 4:3 crop spoils.
     wide      - let this photo span two columns of the grid. */
.gallery figure.uncropped,
.wp-block-gallery .wp-block-image.uncropped { align-self: start; }
.gallery figure.uncropped img,
.wp-block-gallery .wp-block-image.uncropped img { aspect-ratio: auto; }

.wp-block-gallery .wp-block-image.wide { grid-column: span 2; }
.gallery figure:hover img,
.wp-block-gallery .wp-block-image:hover img { transform: scale(1.03); }
/* WordPress overlays the caption on the photo in a dark gradient. We put it
   below the photo instead, on white. */
.gallery figcaption,
.wp-block-gallery .wp-block-image figcaption,
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  position: static !important;
  background: none !important;
  color: var(--muted) !important;
  padding: 12px 16px 14px !important;
  margin: 0 !important;
  font-size: 0.98rem;
  line-height: 1.45;
  text-align: left;
  /* take only the height the text needs, and never scroll inside the card */
  flex: 0 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
  width: auto !important;
}
.gallery figure.wide { grid-column: span 2; }
.gallery figure:focus-visible,
.wp-block-gallery .wp-block-image:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* ==========================================================================
   Q&A list: H3 question + P answer pairs, auto-numbered
   ========================================================================== */
.qa-section.alt { background: var(--off-white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.qa-list { counter-reset: q; max-width: 880px; }
.qa-list h3 {
  position: relative;
  counter-increment: q;
  padding: 28px 0 0 70px;
  margin: 0 0 8px;
  border-top: 1px solid var(--line);
  color: var(--blue);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.qa-list h3:first-child { border-top: 0; padding-top: 0; }
.qa-list h3::before {
  content: counter(q);
  position: absolute; left: 0; top: 28px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; letter-spacing: 0;
}
.qa-list h3:first-child::before { top: 0; }
.qa-list p { padding-left: 70px; margin: 0 0 28px; color: var(--ink); max-width: none; }
.qa-list p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Lightbox (markup lives in footer.php, behaviour in assets/js/lightbox.js)
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(0, 26, 61, 0.94);
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: min(1100px, 100%); max-height: 78vh; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); background: var(--white); }
.lb-cap { color: var(--white); margin-top: 14px; text-align: center; font-size: 1.05rem; max-width: 800px; }
.lb-btn {
  position: absolute;
  background: none; border: 0;
  color: var(--white); font-size: 2.4rem; line-height: 1;
  cursor: pointer; padding: 12px 16px; opacity: 0.85;
  font-family: 'Lato', Arial, sans-serif;
}
.lb-btn:hover { opacity: 1; color: var(--green-soft); }
.lb-close { top: 10px; right: 12px; }
.lb-prev  { left: 6px;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: 6px; top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy-deep); color: var(--white); padding: 40px 0 34px; text-align: center; }
.site-footer .foot-name { display: inline-flex; align-items: baseline; gap: 10px; }
.site-footer .foot-name .star { color: var(--green-soft); }
.site-footer .foot-name .t { font-family: 'Roboto Condensed', Arial, sans-serif; font-weight: 700; font-size: 1.3rem; letter-spacing: 0.08em; }
.site-footer .foot-sub {
  margin-top: 4px;
  font-family: 'Roboto Condensed', Arial, sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.9rem; color: #8FA8CF;
}
.site-footer .foot-email { margin-top: 12px; font-size: 0.98rem; }
.site-footer .foot-email a { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); }
.site-footer .foot-email a:hover { border-bottom-color: var(--green-soft); }
.site-footer .disclaimer {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.84rem; color: #8FA8CF;
  max-width: 640px; margin-left: auto; margin-right: auto;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* seven nav items need about 1,062px on one line, so switch to the burger menu below 1,080px */
@media (max-width: 1080px) {
  .burger { display: block; }
  nav.links {
    position: absolute; top: 62px; left: 0; right: 0;
    background: var(--navy-dark);
    flex-direction: column; gap: 0;
    display: none;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  #navtoggle:checked ~ nav.links { display: flex; }
  nav.links a { padding: 15px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .nav { position: relative; }
}
@media (max-width: 860px) {
  .about-grid, .vision-grid { grid-template-columns: 1fr; gap: 34px; }
  .cards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero-copy { padding: 30px 20px 40px; }
  .section, .involve { padding: 60px 0; }
  .page-head { padding: 44px 0 30px; }
  .card { flex-direction: column; align-items: center; text-align: center; }
  .qa-list h3 { padding-left: 54px; }
  .qa-list h3::before { width: 38px; height: 38px; font-size: 1.05rem; top: 30px; }
  .qa-list p { padding-left: 54px; }
  .closer .trio-caps .dot { display: block; margin: 4px 0; font-size: 0.8em; }
}
@media (max-width: 640px) {
  /* one column on phones, so a "wide" photo cannot overflow the screen */
  .gallery figure.wide,
  .wp-block-gallery .wp-block-image.wide { grid-column: span 1; }
  .lb-btn { font-size: 2rem; padding: 10px 12px; }
}