/*
Theme Name: Demery for SC House 64
Theme URI: https://demery4schouse.com
Author: Campaign Web Team
Description: A clean, accessible campaign theme for Dr. Michele Johnson Demery, candidate for South Carolina House District 64.
Version: 1.4.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: demery-campaign
*/

:root {
  --blue: #0756b8;
  --blue-dark: #063d85;
  --green: #079447;
  --green-dark: #067438;
  --white: #ffffff;
  --ink: #122033;
  --muted: #5b6675;
  --soft: #f3f7fb;
  --border: #dce5ef;
  --shadow: 0 18px 50px rgba(5, 50, 105, .14);
  --radius: 22px;
  --max: 1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.65}
a{color:var(--blue);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--green-dark)}
img{max-width:100%;height:auto}
.container{width:min(calc(100% - 36px),var(--max));margin-inline:auto}
.screen-reader-text{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;background:#fff;color:#000;padding:12px 16px;z-index:9999}
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(7,86,184,.1)}
.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--blue-dark)}
.brand-mark{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;font-weight:900;font-size:1.35rem}
.brand-copy strong{display:block;font-size:1.05rem;line-height:1.1}.brand-copy span{display:block;font-size:.77rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.site-nav ul{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}.site-nav a{text-decoration:none;color:var(--ink);font-weight:700;font-size:.95rem}.site-nav a:hover{color:var(--blue)}
.menu-toggle{display:none;border:0;background:var(--soft);border-radius:12px;padding:10px 13px;font-weight:800}
.btn,.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:13px 22px;font-weight:800;text-decoration:none;border:2px solid transparent;transition:.2s ease;background:var(--blue);color:#fff;box-shadow:none}
.btn:hover,.wp-block-button__link:hover{transform:translateY(-1px);background:var(--blue-dark);color:#fff}.btn-green{background:var(--green)}.btn-green:hover{background:var(--green-dark)}.btn-outline{background:transparent;color:var(--blue);border-color:var(--blue)}.btn-outline:hover{background:var(--blue);color:#fff}
.hero{background:linear-gradient(120deg,#eff7ff 0%,#fff 44%,#eefaf3 100%);overflow:hidden;position:relative}.hero:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(7,148,71,.16),transparent 66%);right:-140px;top:-140px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:54px;min-height:690px;padding:72px 0;position:relative}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:var(--green);font-size:.82rem}.hero h1{font-size:clamp(2.7rem,5.7vw,5.5rem);line-height:.96;margin:14px 0 22px;letter-spacing:-.045em;color:var(--blue-dark)}.hero h1 span{display:block;color:var(--green)}.hero-lede{font-size:clamp(1.05rem,1.8vw,1.35rem);max-width:680px;color:#33445a}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.hero-image{position:relative}.hero-image img{display:block;width:100%;max-height:610px;object-fit:cover;object-position:center 20%;border-radius:32px;box-shadow:var(--shadow);border:8px solid #fff}.hero-badge{position:absolute;left:-34px;bottom:34px;background:var(--blue);color:#fff;border-radius:18px;padding:16px 20px;box-shadow:var(--shadow);font-weight:900}.hero-badge span{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;opacity:.8}.section{padding:86px 0}.section-soft{background:var(--soft)}.section-blue{background:linear-gradient(135deg,var(--blue-dark),var(--blue));color:#fff}.section-green{background:linear-gradient(135deg,var(--green-dark),var(--green));color:#fff}.section-heading{max-width:760px;margin-bottom:36px}.section-heading.center{text-align:center;margin-inline:auto;margin-bottom:42px}.section-heading h2{font-size:clamp(2rem,4vw,3.35rem);line-height:1.05;letter-spacing:-.035em;margin:8px 0 16px;color:var(--blue-dark)}.section-blue .section-heading h2,.section-green .section-heading h2{color:#fff}.section-heading p{font-size:1.08rem;color:var(--muted)}.section-blue .section-heading p,.section-green .section-heading p{color:rgba(255,255,255,.82)}
.countdown-wrap{margin-top:-38px;position:relative;z-index:4}.countdown{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:14px;background:#fff;padding:20px;border-radius:22px;box-shadow:var(--shadow);align-items:stretch}.countdown-title{padding:15px 20px;display:flex;flex-direction:column;justify-content:center}.countdown-title strong{font-size:1.25rem;color:var(--blue-dark)}.countdown-title span{font-size:.9rem;color:var(--muted)}.time-box{background:var(--soft);border-radius:16px;padding:14px;text-align:center}.time-box strong{display:block;font-size:2rem;line-height:1;color:var(--blue)}.time-box span{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:800}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:0 10px 32px rgba(5,50,105,.07)}.card h3{margin:8px 0;color:var(--blue-dark);font-size:1.4rem}.card p{color:var(--muted)}.card-icon{width:48px;height:48px;border-radius:14px;background:#e8f2ff;color:var(--blue);display:grid;place-items:center;font-weight:900}.priority-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.priority-card{background:#fff;border-top:6px solid var(--green);border-radius:20px;padding:28px;box-shadow:0 12px 32px rgba(5,50,105,.08)}.priority-card h3{color:var(--blue-dark);font-size:1.55rem;margin-top:0}.priority-card ul{padding-left:20px}.priority-card li{margin:6px 0}.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}.portrait-small{border-radius:28px;box-shadow:var(--shadow)}.quote{font-size:1.45rem;line-height:1.45;font-weight:750;color:var(--blue-dark);border-left:6px solid var(--green);padding-left:22px}.map-frame{border:0;width:100%;height:480px;border-radius:28px;box-shadow:var(--shadow)}.map-note{font-size:.85rem;color:var(--muted);margin-top:10px}.cta{display:flex;justify-content:space-between;align-items:center;gap:28px}.cta h2{margin:0;font-size:clamp(2rem,4vw,3.2rem)}.cta p{margin:8px 0 0;max-width:650px;color:rgba(255,255,255,.86)}
.page-hero{padding:90px 0 60px;background:linear-gradient(135deg,#eaf4ff,#f4fbf7)}.page-hero h1{font-size:clamp(2.5rem,5vw,4.6rem);line-height:1;margin:0;color:var(--blue-dark);letter-spacing:-.04em}.page-content{padding:70px 0}.page-content h2{color:var(--blue-dark);font-size:2rem}.page-content h3{color:var(--blue-dark)}.page-content p,.page-content li{font-size:1.04rem}.content-narrow{max-width:860px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-field{display:flex;flex-direction:column;gap:7px}.form-field.full{grid-column:1/-1}.form-field label{font-weight:800}.form-field input,.form-field select,.form-field textarea{width:100%;padding:13px 14px;border:1px solid #b8c8da;border-radius:12px;font:inherit}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:3px solid rgba(7,86,184,.22);border-color:var(--blue)}.notice{padding:16px 18px;border-radius:14px;background:#edf9f1;border:1px solid #b8e5c8;margin-bottom:20px}.notice.error{background:#fff1f1;border-color:#f1b8b8}.donate-panel{background:linear-gradient(145deg,var(--blue-dark),var(--blue));color:#fff;border-radius:28px;padding:42px;box-shadow:var(--shadow)}.donate-panel h2{color:#fff;margin-top:0}.donate-panel p{color:rgba(255,255,255,.86)}.amounts{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}.amounts span{border:2px solid rgba(255,255,255,.55);border-radius:999px;padding:10px 18px;font-weight:900}.social-row{display:flex;gap:10px;flex-wrap:wrap}.social-row a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;font-weight:900}
.site-footer{background:#071a33;color:#fff;padding:52px 0 24px}.footer-grid{display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:36px}.site-footer h3{margin-top:0}.site-footer a{color:#fff}.site-footer ul{list-style:none;padding:0;margin:0}.site-footer li{margin:8px 0}.disclaimer{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);font-size:.84rem;color:rgba(255,255,255,.7)}
@media(max-width:900px){.menu-toggle{display:block}.site-nav{display:none;position:absolute;left:18px;right:18px;top:82px;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:18px}.site-nav.open{display:block}.site-nav ul{flex-direction:column;align-items:flex-start;gap:12px}.hero-grid,.split{grid-template-columns:1fr}.hero-grid{padding-top:48px}.hero-image{max-width:620px}.hero-badge{left:12px}.countdown{grid-template-columns:repeat(4,1fr)}.countdown-title{grid-column:1/-1}.cards{grid-template-columns:1fr 1fr}.cta{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.brand-copy span{display:none}.hero-grid{min-height:auto}.hero h1{font-size:3rem}.section{padding:62px 0}.countdown{grid-template-columns:repeat(2,1fr)}.cards,.priority-grid,.footer-grid,.form-grid{grid-template-columns:1fr}.form-field.full{grid-column:auto}.hero-image img{max-height:480px}.map-frame{height:360px}}

/* Team Demery photo and simplified footer */
.team-photo {
  margin: 0 0 2.5rem;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 45px rgba(8, 46, 95, 0.16);
}
.team-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.team-photo figcaption {
  padding: 0.85rem 1.1rem;
  color: #45566f;
  font-size: 0.95rem;
  text-align: center;
}
.site-footer-simple {
  padding: 1.15rem 0;
  text-align: center;
}
.site-footer-simple p {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
}


/* Version 1.3: official District 64 map and area list */
.district-section {
  overflow: hidden;
}
.district-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
  gap: 38px;
  align-items: center;
}
.district-map-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
}
.district-map-card a {
  display: block;
}
.district-map-card img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}
.district-map-card figcaption {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}
.district-areas {
  padding: 34px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(5,50,105,.09);
  border-top: 7px solid var(--green);
}
.district-areas h3 {
  margin: 8px 0 12px;
  color: var(--blue-dark);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}
.district-area-list {
  display: grid;
  gap: 10px;
  margin: 20px 0 26px;
  padding: 0;
  list-style: none;
}
.district-area-list li {
  position: relative;
  padding: 12px 14px 12px 44px;
  border-radius: 12px;
  background: var(--soft);
  color: var(--blue-dark);
  font-weight: 850;
}
.district-area-list li::before {
  content: "✓";
  position: absolute;
  left: 15px;
  top: 10px;
  color: var(--green);
  font-size: 1.15rem;
  font-weight: 900;
}
.district-check {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.65;
}
.volunteer-link-panel {
  padding: 34px;
  border-radius: 24px;
  background: linear-gradient(145deg, var(--blue-dark), var(--blue));
  color: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}
.volunteer-link-panel h3 {
  margin-top: 0;
  color: #fff;
  font-size: 1.8rem;
}
.volunteer-link-panel p {
  color: rgba(255,255,255,.88);
}
@media(max-width:900px) {
  .district-layout { grid-template-columns: 1fr; }
  .district-areas { padding: 28px; }
}
@media(max-width:620px) {
  .district-map-card, .district-areas { border-radius: 16px; }
  .district-areas { padding: 23px; }
}


/* Version 1.4: state house banner and community journey gallery */
.hero-banner {
  min-height: 650px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
}
.hero-banner::before {
  display: none;
}
.hero-banner-inner {
  width: min(calc(100% - 36px), var(--max));
  min-height: 650px;
  display: flex;
  align-items: center;
}
.hero-banner-copy {
  width: min(48%, 650px);
  padding: 60px 0;
}
.hero-banner .hero-lede {
  color: #26384d;
}
.gallery-page-hero p {
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.12rem;
}
.community-gallery-section {
  background: linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%);
}
.gallery-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 42px;
}
.gallery-intro > div {
  max-width: 760px;
}
.gallery-intro h2 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
}
.gallery-intro p {
  margin: 0;
  color: var(--muted);
}
.campaign-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 22px;
}
.campaign-gallery-item {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(5, 50, 105, .10);
}
.campaign-gallery-item-featured {
  grid-row: span 2;
}
.campaign-gallery-item a {
  display: block;
  overflow: hidden;
  background: #0b1e37;
}
.campaign-gallery-item img {
  display: block;
  width: 100%;
  height: 390px;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease, opacity .35s ease;
}
.campaign-gallery-item-featured img {
  height: 660px;
}
.campaign-gallery-item a:hover img,
.campaign-gallery-item a:focus img {
  transform: scale(1.025);
  opacity: .94;
}
.campaign-gallery-item figcaption {
  min-height: 68px;
  padding: 17px 19px;
  color: var(--blue-dark);
  font-weight: 800;
  line-height: 1.35;
}
.gallery-cta {
  margin-top: 64px;
  padding: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  color: #ffffff;
  box-shadow: var(--shadow);
}
.gallery-cta h2 {
  margin: 6px 0 8px;
  color: #ffffff;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}
.gallery-cta p {
  margin: 0;
  color: rgba(255,255,255,.84);
}
.gallery-cta .eyebrow {
  color: #70e0a1;
}
.gallery-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .hero-banner {
    min-height: 610px;
    background-position: 62% center;
  }
  .hero-banner-inner {
    min-height: 610px;
  }
  .hero-banner-copy {
    width: min(55%, 600px);
  }
  .campaign-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .campaign-gallery-item-featured {
    grid-row: auto;
  }
  .campaign-gallery-item img,
  .campaign-gallery-item-featured img {
    height: 520px;
  }
}

@media (max-width: 720px) {
  .hero-banner {
    min-height: 760px;
    align-items: flex-end;
    background-position: 70% center;
    position: relative;
  }
  .hero-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.96) 68%, #fff 100%);
  }
  .hero-banner-inner {
    min-height: 760px;
    align-items: flex-end;
    position: relative;
    z-index: 1;
  }
  .hero-banner-copy {
    width: 100%;
    padding: 50px 0 44px;
  }
  .gallery-intro,
  .gallery-cta {
    align-items: flex-start;
    flex-direction: column;
  }
  .campaign-gallery {
    grid-template-columns: 1fr;
  }
  .campaign-gallery-item img,
  .campaign-gallery-item-featured img {
    height: auto;
    max-height: 720px;
  }
  .gallery-cta-actions {
    justify-content: flex-start;
  }
}