/*
Theme Name: Sue Shanly for Ward 2
Theme URI: https://sueshanly.ca/
Author: Sue Shanly Campaign
Description: Premium campaign theme for Sue Shanly for Ward 2 (Mississauga). Classic theme with editable Menus, Customizer header, and footer Widgets.
Version: 2.4.1
Requires at least: 6.0
Tested up to: 6.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sueshanly
*/

/* ==========================================================================
   Sue Shanly — Premium campaign theme
   Brand: Maroon #7a0019  •  Gold #e0a500
   ========================================================================== */

:root{
  --ss-maroon:#7a0019;
  --ss-maroon-2:#5c0013;
  --ss-maroon-deep:#43000e;
  --ss-gold:#e0a500;
  --ss-gold-2:#f6c445;
  --ss-ink:#20242a;
  --ss-muted:#5b6470;
  --ss-cream:#fbf8f4;
  --ss-line:rgba(122,0,25,.14);
  --ss-shadow:0 18px 44px -20px rgba(30,10,15,.45);
}

/* ---- Base polish ---------------------------------------------------------*/
body{
  color:var(--ss-ink);
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
main.wp-block-group, .site-main{ background:#ffffff; }
.entry-content > *{ scroll-margin-top:120px; }

/* ---- Classic theme layout (content width, block spacing, alignments) -----*/
.site-content{ background:#fff; }
.entry-content{ max-width:720px; margin-inline:auto; }
.entry-content > *{ margin-block:0; }
.entry-content > * + *{ margin-block-start:1.5rem; }
.entry-content .alignwide{ max-width:1100px; margin-inline:auto; }
.entry-content .alignfull{ max-width:none; }
.entry-content img{ max-width:100%; height:auto; }
.page-title{
  text-align:center; color:var(--ss-maroon); font-weight:700;
  margin:clamp(2rem,5vw,3rem) auto .3rem; max-width:900px;
}
.page-title::after{
  content:""; display:block; width:64px; height:3px; margin:.7rem auto 0;
  border-radius:3px; background:linear-gradient(90deg,var(--ss-gold),var(--ss-gold-2));
}

a{ transition:color .2s ease, background-color .2s ease, opacity .2s ease; }

/* ---- Header / hero banner ------------------------------------------------*/
header.wp-block-template-part{ position:relative; z-index:5; }

.ss-hero{
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(224,165,0,.16), transparent 55%),
    linear-gradient(160deg, var(--ss-maroon) 0%, var(--ss-maroon-2) 55%, var(--ss-maroon-deep) 100%);
  color:#fff;
  padding:clamp(2.4rem,6vw,4.6rem) 1.25rem clamp(2rem,5vw,3.4rem);
  text-align:center;
  border-bottom:4px solid var(--ss-gold);
  box-shadow:0 12px 30px -18px rgba(0,0,0,.55);
}
.ss-hero .ss-eyebrow{
  display:inline-block;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.72rem;
  font-weight:700;
  color:var(--ss-gold-2);
  margin-bottom:1rem;
}
.ss-hero h1{
  color:#fff;
  font-size:clamp(2.1rem,6vw,4.6rem) !important;
  line-height:1.05 !important;
  margin:0 auto .3rem !important;
  max-width:none;
  white-space:nowrap;
  text-shadow:0 2px 18px rgba(0,0,0,.28);
}
.ss-hero .ss-sub{
  max-width:60ch;
  margin:1.1rem auto 0;
  font-size:clamp(1rem,1.9vw,1.18rem);
  line-height:1.6;
  color:#ffe9c2;
}
.ss-hero .ss-sub strong{ color:#fff; }
.ss-hero .ss-quotee{ color:var(--ss-gold-2); font-style:italic; }

/* ---- Navigation ----------------------------------------------------------*/
.wp-block-navigation{
  background:#ffffff;
  padding:0;
  box-shadow:0 6px 20px -14px rgba(30,10,15,.5);
  border-bottom:1px solid var(--ss-line);
  position:sticky; top:0; z-index:40;
}
.wp-block-navigation a.wp-block-navigation-item__content{
  position:relative;
  color:var(--ss-maroon) !important;
  font-weight:600;
  font-size:.98rem;
  padding:.55rem .2rem;
}
.wp-block-navigation .wp-block-navigation-item__label{ font-weight:600; }
.wp-block-navigation a.wp-block-navigation-item__content::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:.15rem;
  height:2px; background:var(--ss-gold);
  transition:right .25s ease;
}
.wp-block-navigation a.wp-block-navigation-item__content:hover::after{ right:0; }
.wp-block-navigation__responsive-container.is-menu-open{ background:var(--ss-maroon); }
.wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content{ color:#fff !important; }

/* ---- Content rhythm ------------------------------------------------------*/
.entry-content{ padding-top:clamp(2rem,5vw,3.4rem) !important; }
.entry-content p{ color:#2a2f37; }
.entry-content > p:first-of-type{ font-size:1.05rem; }

/* Lead / letter — professional "message from Sue" card */
.ss-letter{
  position:relative;
  background:linear-gradient(180deg,#fffdfb, var(--ss-cream));
  border:1px solid var(--ss-line);
  border-left:5px solid var(--ss-gold);
  border-radius:16px;
  padding:clamp(1.8rem,4vw,2.8rem) clamp(1.4rem,4vw,2.6rem);
  box-shadow:var(--ss-shadow);
  margin:0 auto 2.4rem;
}
.ss-letter::before{
  content:"A message from Sue";
  display:block; text-transform:uppercase; letter-spacing:.2em; font-size:.72rem;
  font-weight:700; color:var(--ss-gold); margin-bottom:1rem;
}
.ss-letter p{ color:#2a2f37; line-height:1.8; }
.ss-letter p:first-of-type{
  font-family:"Source Serif 4","Source Serif Pro",serif;
  font-size:clamp(1.3rem,2.4vw,1.55rem); font-weight:600; color:var(--ss-maroon);
  line-height:1.3; margin:0 0 1.1rem;
}
.ss-letter p:last-of-type{
  margin-top:1.6rem; padding-top:1.2rem; border-top:1px dashed var(--ss-line);
  font-family:"Source Serif 4","Source Serif Pro",serif; font-style:italic;
  font-size:1.25rem; color:var(--ss-maroon); line-height:1.5;
}

/* Section headings (Family, Volunteerism, ...) */
.ss-section-title{
  text-align:center;
  color:var(--ss-maroon) !important;
  font-weight:700 !important;
  margin-top:2.6rem !important;
  position:relative;
}
.ss-section-title strong{ color:var(--ss-maroon); }
.ss-section-title::after{
  content:""; display:block; width:64px; height:3px;
  margin:.7rem auto 0; border-radius:3px;
  background:linear-gradient(90deg,var(--ss-gold),var(--ss-gold-2));
}

/* Blockquote */
.entry-content blockquote{
  border:0 !important;
  background:linear-gradient(180deg,#fff, var(--ss-cream));
  border-left:5px solid var(--ss-gold) !important;
  border-radius:0 14px 14px 0;
  padding:1.4rem 1.6rem !important;
  margin:2rem auto;
  box-shadow:var(--ss-shadow);
  max-width:760px;
}
.entry-content blockquote h5{
  text-transform:none !important;
  font-size:1.15rem !important;
  font-weight:500 !important;
  line-height:1.55 !important;
  color:var(--ss-ink);
  padding-left:0 !important;
}

/* Call to action links row (DONATE / VOLUNTEER / SIGN) */
.ss-cta{ text-align:center; margin:1.5rem 0 .5rem; }
.ss-cta a{
  display:inline-block;
  margin:.35rem .4rem;
  padding:.7rem 1.5rem;
  background:var(--ss-maroon);
  color:#fff !important;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 10px 22px -12px rgba(122,0,25,.7);
}
.ss-cta a:hover{ background:var(--ss-gold); color:var(--ss-maroon-deep) !important; transform:translateY(-1px); }

/* "Sue has:" list with custom check bullets */
.entry-content ul{ list-style:none; padding-left:0; max-width:680px; margin-inline:auto; }
.entry-content ul li{
  position:relative; padding:.5rem .5rem .5rem 2.2rem; margin:.25rem 0;
  border-bottom:1px dashed var(--ss-line);
}
.entry-content ul li::before{
  content:"✓"; position:absolute; left:0; top:.55rem;
  width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--ss-maroon); color:var(--ss-gold-2);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:700;
}
.entry-content ul li strong{ font-weight:600; }

/* Featured images */
.wp-block-image img{
  border-radius:16px;
  box-shadow:var(--ss-shadow);
}

/* Embedded map (City Info / Ward 2) */
.ss-map-embed{ margin:1.5rem 0; border-radius:16px; overflow:hidden; box-shadow:var(--ss-shadow); }
.ss-map-embed iframe{ display:block; width:100%; height:440px; border:0; }
@media (max-width:600px){ .ss-map-embed iframe{ height:320px; } }
.wp-block-image figcaption{ color:var(--ss-muted); }

/* ---- MetaSlider premium styling -----------------------------------------*/
.metaslider{
  margin:2.2rem auto 2.4rem !important;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(30,10,15,.6);
  background:#0d0406;
}
.metaslider .flexslider{ border:0 !important; border-radius:18px; background:#0d0406; margin:0; box-shadow:none; }
.metaslider .slides li{ position:relative; }
/* Show each photo in full (natural aspect ratio) like the original site */
.metaslider .slides img{
  width:100% !important;
  height:auto !important;
  object-fit:initial !important;
  display:block;
  margin:0 auto;
}
.metaslider .caption-wrap{
  position:absolute; left:0; right:0; bottom:0;
  margin:0 !important; padding:2.4rem 1.4rem 1.1rem !important;
  background:linear-gradient(0deg, rgba(67,0,14,.92) 0%, rgba(67,0,14,.55) 55%, transparent 100%) !important;
  opacity:1 !important;
}
.metaslider .caption-wrap .caption{
  color:#fff !important; font-size:1rem !important; line-height:1.5 !important;
  font-weight:500; text-align:center; max-width:60ch; margin:0 auto;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
/* Dots */
.metaslider .flex-control-nav{ bottom:12px; z-index:6; }
.metaslider .flex-control-paging li a{
  background:rgba(255,255,255,.5); box-shadow:none; width:11px; height:11px;
}
.metaslider .flex-control-paging li a.flex-active{ background:var(--ss-gold); }
/* Arrows — always visible, vertically centred, reliable chevron glyphs.
   High specificity + !important to beat any MetaSlider theme CSS. */
.metaslider .flexslider{ position:relative !important; }
.metaslider .flexslider .flex-direction-nav{ margin:0 !important; position:static !important; }
/* stop the <li> from being the positioning context so arrows anchor to the slider */
.metaslider .flexslider .flex-direction-nav li{ position:static !important; margin:0 !important; }
.metaslider .flexslider .flex-direction-nav a,
.metaslider .flexslider .flex-direction-nav a.flex-prev,
.metaslider .flexslider .flex-direction-nav a.flex-next{
  position:absolute !important; top:50% !important; bottom:auto !important;
  margin:0 !important; transform:translateY(-50%) !important;
  height:48px !important; width:48px !important; border-radius:50% !important;
  background:rgba(122,0,25,.85) !important; box-shadow:0 6px 16px -6px rgba(0,0,0,.5) !important;
  opacity:1 !important; visibility:visible !important; display:flex !important;
  align-items:center !important; justify-content:center !important;
  text-align:center !important; z-index:20 !important; text-indent:0 !important;
  overflow:hidden !important; background-image:none !important;
  font-size:0 !important; color:transparent !important; line-height:0 !important;
}
.metaslider .flexslider .flex-direction-nav a.flex-prev{ left:16px !important; right:auto !important; }
.metaslider .flexslider .flex-direction-nav a.flex-next{ right:16px !important; left:auto !important; }
.metaslider .flexslider .flex-direction-nav a:hover{ background:var(--ss-gold) !important; }
/* Replace the plugin's icon-font glyph with plain chevrons that always render */
.metaslider .flexslider .flex-direction-nav a:before,
.metaslider .flexslider .flex-direction-nav a.flex-prev:before,
.metaslider .flexslider .flex-direction-nav a.flex-next:before{
  color:#fff !important; font-family:Arial, Helvetica, sans-serif !important;
  font-size:28px !important; font-weight:700 !important; line-height:1 !important;
  width:auto !important; height:auto !important; margin:0 !important;
  text-shadow:0 1px 3px rgba(0,0,0,.4); opacity:1 !important;
}
.metaslider .flexslider .flex-direction-nav a.flex-prev:before{ content:"\2039" !important; }
.metaslider .flexslider .flex-direction-nav a.flex-next:before{ content:"\203A" !important; }
.metaslider .flexslider .flex-direction-nav a:hover:before{ color:var(--ss-maroon-deep) !important; }

/* ---- Footer --------------------------------------------------------------*/
footer.wp-block-template-part{ margin-top:0; }
.ss-footer{
  background:linear-gradient(160deg,var(--ss-maroon) 0%, var(--ss-maroon-deep) 100%);
  color:#f4e7d6;
  padding:clamp(2.6rem,6vw,4rem) 1.25rem 2rem;
  border-top:4px solid var(--ss-gold);
}
.ss-footer a{ color:#ffe9c2; }
.ss-footer a:hover{ color:#fff; }
.ss-foot-grid{
  max-width:1120px; margin:0 auto; display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:2.4rem 2rem; align-items:start;
}
@media (max-width:900px){ .ss-foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .ss-foot-grid{ grid-template-columns:1fr; gap:1.8rem; } }
.ss-foot-about{ max-width:340px; }
.ss-foot-brand{ font-family:"Source Serif Pro",serif; font-size:1.5rem; color:#fff; margin:0 0 .4rem; }
.ss-foot-tag{ color:var(--ss-gold-2); letter-spacing:.04em; }
.ss-foot-col h4{ color:#fff; font-size:1rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 .7rem; }
.ss-foot-col ul{ list-style:none; margin:0; padding:0; max-width:none; }
.ss-foot-col ul li{ border:0; padding:.22rem 0; margin:0; }
.ss-foot-col ul li::before{ display:none; }
.ss-foot-bottom{
  max-width:1120px; margin:clamp(1.6rem,3vw,2.2rem) auto 0; padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; align-items:center;
  font-size:.85rem; color:#e9d6bd;
}

/* ---- Contact page --------------------------------------------------------*/
/* Contain full-bleed children so they can't create a horizontal scrollbar.
   (main does not contain the sticky nav, so this is safe.) */
main.wp-block-group, .site-main{ overflow-x:clip; padding-bottom:clamp(3rem,7vw,5.5rem); }

/* ---- Classic navigation menu (Appearance → Menus) -----------------------*/
.main-nav{
  background:#fff; position:sticky; top:0; z-index:40;
  box-shadow:0 6px 20px -14px rgba(30,10,15,.5); border-bottom:1px solid var(--ss-line);
}
.main-nav .menu, .main-nav ul{
  list-style:none; margin:0 auto; padding:0 1rem; max-width:1320px;
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:0 clamp(.7rem,1.4vw,1.5rem);
  overflow-x:auto; scrollbar-width:none;
}
.main-nav .menu::-webkit-scrollbar, .main-nav ul::-webkit-scrollbar{ display:none; }
.main-nav li{ position:relative; margin:0; padding:0; border:0; flex:0 0 auto; }
.main-nav li::before{ content:none !important; }
.main-nav a{
  position:relative; display:block; color:var(--ss-maroon); font-weight:600;
  font-size:clamp(.82rem,1vw,.95rem); padding:.7rem .1rem; text-decoration:none; white-space:nowrap;
}
.main-nav a::after{
  content:""; position:absolute; left:.2rem; right:100%; bottom:.4rem; height:2px;
  background:var(--ss-gold); transition:right .25s ease;
}
.main-nav a:hover::after, .main-nav .current-menu-item > a::after{ right:.2rem; }
.main-nav .current-menu-item > a{ color:var(--ss-maroon-deep); }
/* mobile toggle */
.ss-nav-toggle{ display:none; }
@media (max-width:860px){
  .ss-nav-toggle{
    display:block; width:100%; background:var(--ss-maroon); color:#fff; border:0;
    padding:.7rem 1rem; font-weight:700; font-size:1rem; cursor:pointer; text-align:center; letter-spacing:.03em;
  }
  .main-nav .menu, .main-nav ul{ display:none; flex-direction:column; gap:0; padding:.4rem 0; }
  .main-nav.is-open .menu, .main-nav.is-open ul{ display:flex; }
  .main-nav a{ text-align:center; padding:.7rem 1rem; }
  .main-nav a::after{ display:none; }
}

/* ---- Newsletter (inside the maroon footer) -------------------------------*/
.ss-foot-news{
  max-width:1120px; margin:clamp(2rem,4vw,2.8rem) auto 0;
  padding-top:clamp(2rem,4vw,2.8rem);
  border-top:1px solid rgba(255,255,255,.16);
}
.ss-foot-news .ss-newsletter{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 2.5rem;
}
.ss-foot-news .ss-news-head{ flex:1 1 300px; }
.ss-foot-news .ss-news-head h3{ color:#fff; margin:0 0 .3rem; font-size:1.6rem; }
.ss-foot-news .ss-news-head p{ margin:0; color:var(--ss-gold-2); }
.ss-foot-news .ss-news-right{ flex:1 1 380px; max-width:520px; }
.ss-foot-news .ss-news-form{
  display:flex; gap:.6rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:.35rem .35rem .35rem 1.1rem;
}
.ss-foot-news .ss-news-form input{
  flex:1 1 auto; min-width:0; border:0; background:transparent; color:#fff;
  font-size:1rem; font-family:inherit; padding:.55rem 0;
}
.ss-foot-news .ss-news-form input::placeholder{ color:rgba(255,255,255,.6); }
.ss-foot-news .ss-news-form input:focus{ outline:none; }
.ss-foot-news .ss-news-form button{
  flex:0 0 auto; background:var(--ss-gold); color:var(--ss-maroon-deep); border:0; border-radius:999px;
  padding:.62rem 1.7rem; font-weight:700; font-size:1rem; cursor:pointer;
  transition:background .2s ease, transform .1s ease;
}
.ss-foot-news .ss-news-form button:hover{ background:#fff; transform:translateY(-1px); }
.ss-news-msg{ padding:.6rem 1rem; border-radius:10px; margin:.6rem 0 0; font-weight:600; }
.ss-news-ok{ background:rgba(233,247,236,.95); color:#1c6b2b; border:1px solid #bfe6c7; }
.ss-news-err{ background:rgba(253,236,236,.95); color:#a12020; border:1px solid #f2c4c4; }
@media (max-width:640px){
  .ss-foot-news .ss-news-form{ border-radius:16px; flex-wrap:wrap; padding:.5rem; }
  .ss-foot-news .ss-news-form input{ flex-basis:100%; padding:.6rem .8rem; }
  .ss-foot-news .ss-news-form button{ width:100%; }
}

/* ---- Footer widgets (Appearance → Widgets) ------------------------------*/
.ss-footer .widget{ margin:0 0 1.2rem; }
.ss-footer .widget:last-child{ margin-bottom:0; }
.ss-footer .widget-title, .ss-footer .widgettitle{
  color:#fff; font-size:1rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 .7rem;
  font-family:var(--wp--preset--font-family--system-font, sans-serif); font-weight:700;
}
.ss-footer .widget ul{ list-style:none; margin:0; padding:0; max-width:none; }
.ss-footer .widget ul li{ border:0; padding:.22rem 0; margin:0; }
.ss-footer .widget ul li::before{ content:none !important; display:none; }
.ss-footer .widget a{ color:#ffe9c2; text-decoration:none; }
.ss-footer .widget a:hover{ color:#fff; }
.ss-footer .textwidget p, .ss-footer .widget p{ margin:.3rem 0; line-height:1.6; }

/* Break the contact section out full-bleed, then centre the inner content */
.ss-contact-wrap{
  width:100vw; max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  transform:none !important;
  padding-left:0 !important; padding-right:0 !important;
}
.ss-contact{
  display:flex; gap:3rem; flex-wrap:wrap; align-items:stretch;
  max-width:1040px; margin:1rem auto 2rem; padding:0 clamp(1rem,4vw,2rem);
}
.ss-contact-info{ flex:1 1 300px; min-width:280px; align-self:center; }
.ss-contact-form{ flex:1 1 440px; min-width:300px; }
.ss-contact-form .ss-contact-card{ height:100%; }
@media (min-width:900px){ .ss-contact{ flex-wrap:nowrap; } }
.ss-contact .ss-lead{ font-size:1.12rem; line-height:1.6; color:#2a2f37; margin:0 0 1.6rem; }
.ss-contact-methods{ list-style:none; padding:0; margin:0 0 1.4rem; max-width:none; }
.ss-contact-methods li{ display:flex; gap:1rem; align-items:center; padding:.85rem 0; margin:0; border-bottom:1px dashed var(--ss-line); }
.ss-contact-methods li::before{ content:none !important; display:none !important; }
.ss-ic{ flex:0 0 46px; width:46px; height:46px; border-radius:50%; background:var(--ss-maroon);
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -10px rgba(122,0,25,.7); }
.ss-ic svg{ width:20px; height:20px; fill:var(--ss-gold-2); }
.ss-contact-methods .m-label{ font-weight:700; color:var(--ss-maroon); text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; display:block; }
.ss-contact-methods .m-val, .ss-contact-methods .m-val a{ color:var(--ss-ink); font-weight:600; text-decoration:none; }
.ss-contact-methods .m-val a:hover{ color:var(--ss-maroon); }
.ss-social{ display:flex; gap:.6rem; flex-wrap:wrap; }
.ss-social a{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border:1px solid var(--ss-line);
  border-radius:999px; color:var(--ss-maroon); font-weight:600; font-size:.9rem; text-decoration:none; }
.ss-social a:hover{ background:var(--ss-maroon); color:#fff; }
.ss-contact-card{ background:#fff; border:1px solid var(--ss-line); border-radius:18px; padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--ss-shadow); }
.ss-contact-card h3{ color:var(--ss-maroon); margin:0 0 1rem; }

/* Contact Form 7 fields */
.wpcf7-form p{ margin:0 0 1.1rem; }
.wpcf7-form label{ display:block; font-weight:600; color:var(--ss-ink); margin-bottom:.35rem; font-size:.95rem; }
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form input[type=url],
.wpcf7-form input[type=number],
.wpcf7-form textarea,
.wpcf7-form select{
  width:100%; box-sizing:border-box; padding:.72rem .9rem; margin-top:.15rem;
  border:1px solid #d8cfc9; border-radius:10px; font-size:1rem; font-family:inherit;
  background:#fdfbf9; color:var(--ss-ink); transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus{
  outline:none; border-color:var(--ss-maroon); background:#fff;
  box-shadow:0 0 0 3px rgba(122,0,25,.12);
}
.wpcf7-form textarea{ min-height:150px; resize:vertical; }
.wpcf7-form .wpcf7-submit,
.wpcf7-form input[type=submit]{
  width:auto; background:var(--ss-maroon) !important; color:#fff !important; border:0 !important; cursor:pointer;
  padding:.85rem 2.2rem; border-radius:999px; font-weight:700; font-size:1rem; letter-spacing:.02em;
  box-shadow:0 12px 24px -12px rgba(122,0,25,.7); transition:background .2s ease, color .2s ease, transform .1s ease;
  -webkit-appearance:none; appearance:none; text-shadow:none;
}
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus,
.wpcf7-form input[type=submit]:hover,
.wpcf7-form input[type=submit]:focus{
  background:var(--ss-gold) !important; color:var(--ss-maroon-deep) !important; transform:translateY(-1px);
}
.wpcf7-form .wpcf7-spinner{ margin:0 .6rem; }
.wpcf7 .wpcf7-response-output{ border-radius:10px; margin:1rem 0 0; padding:.7rem 1rem; }

/* Single centred form card (Volunteer / Lawn Sign pages) */
.ss-form-single{ max-width:640px; margin:2rem auto 0; }
.ss-form-single .ss-form-card{ margin:0; }

/* "(optional)" hints and standalone field labels */
.wpcf7-form .ss-opt{ font-weight:400; color:#8a8079; font-size:.85em; }
.wpcf7-form .ss-field-label{ font-weight:600; color:var(--ss-ink); font-size:.95rem; margin:0 0 .5rem; }

/* Checkbox / acceptance groups — readable stacked rows, not full-width boxes */
.wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-acceptance{ display:block; margin:.15rem 0 1.1rem; }
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item{
  display:block; margin:0 0 .55rem; }
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item label,
.wpcf7-form .wpcf7-acceptance label{
  display:flex; align-items:flex-start; gap:.6rem;
  font-weight:500; color:var(--ss-ink); font-size:.98rem; cursor:pointer; margin:0; }
.wpcf7-form .wpcf7-checkbox input[type=checkbox],
.wpcf7-form .wpcf7-acceptance input[type=checkbox]{
  width:1.1rem; height:1.1rem; margin-top:.15rem; flex:0 0 auto;
  accent-color:var(--ss-maroon); }
.wpcf7-form .wpcf7-acceptance{
  background:#faf7f5; border:1px solid var(--ss-line); border-radius:10px;
  padding:.9rem 1rem; margin-top:.4rem; }

@media (max-width:640px){ .ss-contact{ gap:1.6rem; } }

/* ---- Full-width override -------------------------------------------------*/
/* Remove Twenty Twenty-Two's outer spacing so the site is edge-to-edge. */
.is-root-container .wp-block[data-align="full"] > .wp-block-cover,
.is-root-container .wp-block[data-align="full"] > .wp-block-group,
.wp-block-cover.alignfull,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-site-blocks,
body > .is-root-container{
  padding-left:0 !important;
  padding-right:0 !important;
}
/* Keep body copy readable with a light gutter (does not affect full-bleed
   hero / slider / footer, which carry their own internal padding). */
.entry-content > :where(:not(.alignfull):not(.ss-cta):not(.metaslider)){
  padding-left:clamp(1rem,4vw,1.25rem);
  padding-right:clamp(1rem,4vw,1.25rem);
}

/* ---- Responsive ----------------------------------------------------------*/
/* Remove Twenty Twenty-Two's top-margin gap between top-level blocks */
:where(.wp-site-blocks) > *{ margin-block-start:0 !important; }

@media (max-width:600px){
  .ss-cta a{ display:block; margin:.4rem auto; max-width:280px; }
  .metaslider .flex-direction-nav a{ height:40px; width:40px; }
  .metaslider .flex-direction-nav a:before{ line-height:40px !important; font-size:22px !important; }
  /* allow the hero title to wrap on small phones so it never overflows */
  .ss-hero h1{ white-space:normal; }
}

/* ---- Donor Dashboard page (GiveWP) ---- */
.ss-dash-intro{
  max-width:640px; margin:0 auto 2rem; color:#2a2f37;
  font-weight:500; line-height:1.6;
}
/* give the dashboard iframe room + a soft frame */
.give-donor-dashboard,
.entry-content [class*="donor-dashboard"]{
  max-width:960px; margin-inline:auto;
}
.give-donor-dashboard iframe{
  border-radius:10px;
}
/* branded "Make Another Contribution" button */
.ss-dash-cta{ margin-top:1.6rem; }
.ss-dash-cta .wp-block-button__link,
.ss-dash-cta.wp-block-button a{
  background:var(--ss-maroon) !important;
  color:#fff !important;
  border:0; border-radius:999px;
  padding:.75rem 1.9rem; font-weight:600;
  letter-spacing:.02em; text-decoration:none;
  box-shadow:0 4px 14px rgba(122,0,25,.18);
  transition:background .2s ease, transform .2s ease;
}
.ss-dash-cta .wp-block-button__link:hover,
.ss-dash-cta.wp-block-button a:hover{
  background:var(--ss-gold) !important;
  color:var(--ss-maroon-deep) !important;
  transform:translateY(-1px);
}

/* ==========================================================================
   2026 campaign additions — candidate statement, priority planks, documents
   ========================================================================== */

/* ---- "A message from Sue" statement card (About Sue) ---------------------*/
.ss-statement{
  position:relative;
  background:linear-gradient(180deg,#fffdfb,var(--ss-cream));
  border:1px solid var(--ss-line);
  border-left:5px solid var(--ss-gold);
  border-radius:16px;
  padding:clamp(1.8rem,4vw,2.8rem) clamp(1.4rem,4vw,2.6rem);
  box-shadow:var(--ss-shadow);
  margin:0 auto 1.6rem;
}
.ss-statement::before{
  content:"A message from Sue";
  display:block; text-transform:uppercase; letter-spacing:.2em; font-size:.72rem;
  font-weight:700; color:var(--ss-gold); margin-bottom:1rem;
}
.ss-statement p{ color:#2a2f37; line-height:1.85; margin:0 0 1.1rem; }
.ss-statement p:last-child{ margin-bottom:0; }
.ss-statement .ss-statement-lead{
  font-family:"Source Serif 4","Source Serif Pro",serif;
  font-size:clamp(1.25rem,2.3vw,1.5rem); font-weight:600; color:var(--ss-maroon);
  line-height:1.35;
}
.ss-statement .ss-statement-sig{
  margin-top:1.5rem; padding-top:1.2rem; border-top:1px dashed var(--ss-line);
  font-family:"Source Serif 4","Source Serif Pro",serif;
  font-size:1.15rem; font-weight:600; color:var(--ss-maroon); line-height:1.55;
}

/* ---- Campaign slogan / handle sign-off -----------------------------------*/
.ss-slogan{
  text-align:center; margin:1.4rem auto 2rem; max-width:720px;
  font-family:"Source Serif 4","Source Serif Pro",serif;
  font-size:clamp(1.05rem,2vw,1.25rem); font-weight:600;
  color:var(--ss-maroon); line-height:1.5;
}
.ss-slogan::before{
  content:""; display:block; width:64px; height:3px; margin:0 auto .9rem;
  border-radius:3px; background:linear-gradient(90deg,var(--ss-gold),var(--ss-gold-2));
}
.ss-handle{
  display:inline-block; margin-left:.55rem; padding:.18rem .7rem;
  border-radius:999px; background:var(--ss-maroon); color:var(--ss-gold-2);
  font-family:inherit; font-size:.82em; font-weight:700; letter-spacing:.02em;
  vertical-align:.08em; white-space:nowrap;
}
@media (max-width:600px){
  .ss-handle{ display:block; width:max-content; margin:.6rem auto 0; }
}

/* ---- Priority plank: banner headline + closing kicker --------------------*/
.ss-banner{
  text-align:center; margin:1.2rem auto 1.6rem; max-width:760px;
  padding:1rem 1.2rem;
  background:linear-gradient(135deg,var(--ss-maroon),var(--ss-maroon-deep));
  border-radius:14px;
  color:var(--ss-gold-2) !important;
  font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(1rem,2.1vw,1.3rem); line-height:1.35;
  box-shadow:0 16px 34px -20px rgba(122,0,25,.85);
}
.ss-kicker{
  text-align:center; margin:1.6rem auto .6rem; max-width:720px;
  padding:1rem 1.2rem;
  border:1px solid var(--ss-line); border-left:5px solid var(--ss-gold);
  border-radius:0 14px 14px 0;
  background:linear-gradient(180deg,#fff,var(--ss-cream));
  font-family:"Source Serif 4","Source Serif Pro",serif;
  font-size:clamp(1.15rem,2.2vw,1.4rem); font-weight:600;
  color:var(--ss-maroon) !important; line-height:1.45;
}

/* Question list — swap the ✓ bullet for a ? marker */
.entry-content .ss-questions li::before{ content:"?"; }

/* ---- Document / PDF download card + inline viewer ------------------------*/
.ss-doc{ margin:1.5rem auto; max-width:720px; }
.ss-doc-link{
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.15rem;
  background:linear-gradient(180deg,#fffdfb,var(--ss-cream));
  border:1px solid var(--ss-line); border-left:5px solid var(--ss-gold);
  border-radius:14px; box-shadow:var(--ss-shadow);
  text-decoration:none; color:var(--ss-ink);
}
.ss-doc-link:hover{ border-left-color:var(--ss-maroon); transform:translateY(-1px); }
.ss-doc-icon{
  flex:0 0 auto; width:46px; height:46px; border-radius:10px;
  background:var(--ss-maroon); color:var(--ss-gold-2);
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:800; letter-spacing:.04em;
}
.ss-doc-text{ flex:1 1 auto; display:flex; flex-direction:column; line-height:1.35; }
.ss-doc-text strong{ color:var(--ss-maroon); font-size:1.02rem; }
.ss-doc-text span{ color:var(--ss-muted); font-size:.86rem; margin-top:.15rem; }
.ss-doc-cta{
  flex:0 0 auto; padding:.5rem 1.05rem; border-radius:999px;
  background:var(--ss-maroon); color:#fff; font-weight:700; font-size:.82rem;
  white-space:nowrap;
}
.ss-doc-link:hover .ss-doc-cta{ background:var(--ss-gold); color:var(--ss-maroon-deep); }
@media (max-width:600px){
  .ss-doc-link{ flex-wrap:wrap; }
  .ss-doc-cta{ width:100%; text-align:center; }
}
.ss-pdf-embed{
  margin:1.2rem 0; border-radius:16px; overflow:hidden;
  box-shadow:var(--ss-shadow); background:#f3f0ec;
}
.ss-pdf-embed object,
.ss-pdf-embed iframe{ display:block; width:100%; height:640px; border:0; }
@media (max-width:782px){
  /* Mobile browsers rarely render inline PDFs — the download card covers it. */
  .ss-pdf-embed{ display:none; }
}

/* Award photos on About Sue — cap the tall framed scan so the pair reads as a
   set rather than one dominating the page. */
.entry-content .ss-award-photo img{ max-width:420px; height:auto; }

/* Sub-headings inside a section (Proven Leadership in Ward 2) — the client
   writes these in caps, so render them as a small caps eyebrow rather than
   competing with the gold-underlined .ss-section-title above. */
.ss-subsection-title{
  text-align:center;
  color:var(--ss-maroon-deep) !important;
  font-weight:800 !important;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-size:1rem !important;
  margin:2.1rem auto .7rem !important;
}

/* Endorsement cards — long multi-paragraph testimonials, so body copy stays a
   readable paragraph and the attribution carries the maroon accent. */
.entry-content blockquote.ss-endorse{ padding:1.6rem 1.8rem !important; }
.entry-content blockquote.ss-endorse p{
  font-family:"Source Serif 4","Source Serif Pro",serif;
  font-size:1.06rem; line-height:1.7; color:var(--ss-ink);
  margin:0 0 .9rem;
}
.entry-content blockquote.ss-endorse ul{ margin:.2rem 0 1rem; }
.entry-content blockquote.ss-endorse li{ line-height:1.65; margin-bottom:.5rem; }
.entry-content blockquote.ss-endorse .ss-endorse-cite{
  font-family:inherit; font-size:.95rem; line-height:1.4;
  margin:1.1rem 0 0; padding-top:.8rem;
  border-top:1px dashed var(--ss-line);
}
.entry-content blockquote.ss-endorse .ss-endorse-cite strong{
  display:block; color:var(--ss-maroon); font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; font-size:.92rem;
}
.entry-content blockquote.ss-endorse .ss-endorse-cite span{
  display:block; color:var(--ss-muted); font-size:.88rem; margin-top:.15rem;
}

/* Sue's sons under the family photo on the Home page — deliberately smaller
   than the family shot, side by side on desktop, stacked on mobile. */
.ss-sons-intro{
  text-align:center; max-width:720px; margin:1.5rem auto .6rem;
  font-family:"Source Serif 4","Source Serif Pro",serif;
  font-size:1.12rem; line-height:1.65; color:var(--ss-maroon);
}
.entry-content .ss-sons{ max-width:620px; margin:0 auto 1.6rem; gap:1.6rem; }
.entry-content .ss-sons .wp-block-column{ flex-basis:50%; }
.entry-content .ss-sons img{
  max-width:250px; width:100%; height:auto;
  border-radius:12px; box-shadow:var(--ss-shadow);
}
.entry-content .ss-sons figcaption{
  text-align:center; color:var(--ss-maroon); font-size:.9rem;
  margin-top:.55rem; line-height:1.4;
}
@media (max-width:781px){
  .entry-content .ss-sons{ max-width:320px; }
}

/* Match the two portraits so the pair reads as a set: equal height (crop from
   the bottom, faces are up top) and captions on one line at column width. */
.entry-content .ss-sons figure{ width:100%; }
.entry-content .ss-sons img{
  height:320px; object-fit:cover; object-position:center top;
}
@media (max-width:781px){
  .entry-content .ss-sons img{ height:auto; }
}