/************************************************************
 * WHATCANYOUDO — CONTENT REGION LAYOUT + LINK STYLING
 ************************************************************/

/* Region-specific link styling (content + footer regions) */
.region--content a,
.region--footer a {
  color: #0580a3 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Hover + focus states */
.region--content a:hover,
.region--content a:focus,
.region--footer a:hover,
.region--footer a:focus {
  color: #034659 !important;
  text-decoration: underline !important;
  box-shadow: none !important; /* Olivero adds box-shadows */
}

/************************************************************
 * PAGE CONTENT WIDTH + PADDING (WP MATCH)
 ************************************************************/

/* The main content area wrapper */
.region--content,
.page-content,
main[role="main"] {
  display: block;
  max-width: 1315px; /* WP value */
  margin-left: auto;
  margin-right: auto;
  padding-left: 33.5px; /* WP internal padding */
  padding-right: 33.5px;
  box-sizing: border-box;
}

/* Nodes (pages/articles) inside content region */
.region--content article,
.page-content article,
main[role="main"] article {
  max-width: 100%; /* don’t restrict further */
  margin-left: 4px; /* WP outer spacing */
  margin-right: 4px;
  padding: 0; /* remove Olivero padding */
}

/* Headings, paragraphs align cleanly */
.region--content article p,
.region--content article li,
.region--content article h1,
.region--content article h2,
.region--content article h3,
.region--content article h4,
.region--content article h5,
.region--content article h6 {
  box-sizing: border-box;
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  color: #333;
  hyphens: none;
}

/* On Hero pages, don't add extra article margin.
   This lets us align hero text and body text cleanly. */
.node--type-hero-page main[role="main"] article,
.node--type-hero-page .region--content article,
.node--type-hero-page .page-content article {
  margin-left: 0;
  margin-right: 0;
}

/* Shared width container – matches main content + top bar */
.wcyd-container {
  max-width: 1315px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 90px; /* not 100.5px */
  box-sizing: border-box;
}

/* Header shouldn't add extra padding around that container */
.site-header {
  padding-left: 0;
  padding-right: 0;
}

/* Make branding (logo + slogan) align with body text */
.site-header .branding {
  margin-left: 110px; /* same as article margin-left */
}

.layout__region--second {
  width: auto;
}

/************************************************************
 * HOMEPAGE FULL-BLEED HERO CAROUSEL
 * - Full width (100vw)
 * - Fixed height: 578px
 * - Image anchored to BOTTOM (crop from TOP)
 ************************************************************/

/* 1) Break the hero block out of the 1315px container */
#block-whatcanyoudo-views-block-whatcanyoudo-homepage-carousel-block-1 {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  margin-left: -50vw;
  padding-left: 0;
  padding-right: 0;
}

/* 2) Carousel container: fixed height, no flex */
#homepageCarousel {
  position: relative;
  width: 100%;
  height: 578px;
  overflow: hidden;
  /* Kill any flex behavior applied elsewhere */
  display: block !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

/* 3) Inner and slides: fill height, hide overflow just in case */
#homepageCarousel .carousel-inner,
#homepageCarousel .carousel-item {
  height: 100%;
  overflow: hidden;
}

/* 4) Image: let it fill the 578px height, crop from top.
 * THIS IS THE IMPORTANT FIX – no absolute positioning, no bottom offset. */
#homepageCarousel .carousel-item img {
  width: 100%;
  height: 100%;              /* fills the 578px container */
  display: block;
  position: relative;        /* NOT absolute */
  object-fit: cover;         /* zoom + crop */
  object-position: center bottom; /* keep bottom visible, crop top */
}

/* 5) Caption: keep it inside, near bottom, override any Bootstrap/other styles */
#homepageCarousel .carousel-caption {
  position: absolute !important;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2rem;
  top: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  text-align: center !important;
}

/* 6) Optional: shorter hero on small screens */
@media (max-width: 768px) {
  #homepageCarousel {
    height: 320px;
  }
}

/* FIX: let Font Awesome use its own font for social icons */
.region--content article .contact-social-icon,
.region--content article .fa-brands {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 400 !important; /* 400 is normal for brands */
  margin-right: 10px;
}

/* Remove bullets + spacing for social icon list */
.region--content article .vc-el-contact-us-social ul,
.region--content article .vc-el-contact-us-social li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Optional: line up icons + labels nicer */
.region--content article .vc-el-contact-us-social li a {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space between icon + label */
}

/************************************************************
 * SOCIAL ICON LINKS (WP MATCH)
 ************************************************************/

/* Remove bullets + reset spacing */
.region--content article .vc-el-contact-us-social ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each item: horizontal layout and pointer behavior */
.region--content article .vc-el-contact-us-social li a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* spacing between icon + label */
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  color: black !important;
}

/* Text label: WP typography */
.region--content article .vc-el-contact-us-social .contact-social-label {
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 30.6px;
  color: #0580a3;
  text-indent: 0;
}

/* Icons stay Font Awesome */
.region--content article .vc-el-contact-us-social .contact-social-icon {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
  font-size: 22px; /* small bump so icon visually matches text height */
}

/* Hover color (your existing brand palette) */
.region--content article .vc-el-contact-us-social a:hover .contact-social-icon,
.region--content article .vc-el-contact-us-social a:hover .contact-social-label {
  color: #034659 !important;
  text-decoration: underline;
}

.c-red,
a.c-red {
  color: #96031e;
}

/************************************************************
 * CDE ADS GRID (PRINT + WEB ADS)
 ************************************************************/

.cde-ads {
  margin-top: 24px;
  margin-bottom: 24px;
}

.cde-ads__heading {
  text-align: center;
  margin: 40px 0 24px;
}

.cde-ads__heading--sub {
  margin-top: 48px;
}

/* Grid containers */
.cde-ads-grid {
  display: flex;
  flex-wrap: nowrap;      /* keep all cards on one line on desktop */
  /* margin-left: -12px; */     /* cancel out card padding so edges align with content */
  /* margin-right: -12px; */
}

/* 4-up on desktop for print ads */
.cde-ads-grid--print .cde-ads-card {
  flex: 0 0 25%;
  max-width: 25%;
}

/* 3-up on desktop for web ads */
.cde-ads-grid--web .cde-ads-card {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}

/* Card base – padding creates side-to-side gap */
.cde-ads-card {
  box-sizing: border-box;
  padding: 0 12px;        /* ← horizontal gap between cards */
  text-align: center;
}

.cde-ads-card__figure {
  margin: 0 0 12px;
}

.cde-ads-card__figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #ddd; /* similar to WP grey frame */
}

.cde-ads-card__title {
  font-size: 20px;
  font-weight: 700;
  margin: 8px 0 12px;
}

/* Links list */
.cde-ads-card__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cde-ads-card__links li {
  margin-bottom: 4px;
}

.cde-ads-card__links a {
  font-size: 14px;     /* like .f-smaller */
  font-weight: 400;
  line-height: 1.6;
  text-decoration: none;
}

.cde-ads-card__links a:hover,
.cde-ads-card__links a:focus {
  text-decoration: underline;
}

/* Responsive: stack at smaller widths */
@media (max-width: 992px) {
  .cde-ads-grid {
    flex-wrap: wrap;   /* allow wrapping on smaller screens */
  }

  .cde-ads-grid--print .cde-ads-card,
  .cde-ads-grid--web .cde-ads-card {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 600px) {
  .cde-ads-grid--print .cde-ads-card,
  .cde-ads-grid--web .cde-ads-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}