/*===============================================================
HEADER & NAVIGATION STYLING
===============================================================*/
/* Set green background color for all header types */
.t4-header, /* Main header container */
.header-default, /* Default header class */
.header-block, /* Block-style header */
.header-1, /* First header variant */
.header-4, /* Fourth header variant */
.header-bottom { /* Bottom positioned header */
  background: #056839 !important; /* Dark green background color */
}
/* Set white text for main menu links */
.t4-megamenu .navbar-nav > li > a, /* Top-level menu link */
.t4-megamenu .navbar-nav > li > a .menu-item-title { /* Menu item title span */
  color: #ffffff !important; /* Set font color to white */
}

/*===============================================================
TRANSPARENCY FOR NON-HOMEPAGE VIEWS
===============================================================*/
/* Category page layout */
body.view-category .item-content-wrap {
  background: transparent !important; /* Remove any background */
  background-color: transparent !important; /* Ensure compatibility */
  --bg-content: transparent !important; /* Override CSS variable */
  box-shadow: none !important; /* Remove any drop shadow */
  border: none !important; /* Remove borders */
}
/* Article pages */
body.view-article .com-content-article.item-page {
  background: #ffffff !important; /* white card background */
  border-radius: 0.75rem !important; /* rounded corners like NPR */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* subtle shadow */
  max-width: 760px !important; /* readable width */
  margin: 2rem auto !important; /* center the card */
  padding: 2rem !important; /* spacing inside */
}

/* Footer */
.t4-footer {
  background: transparent !important; /* Make footer background transparent */
  background-color: transparent !important; /* Fallback */
  border-top: none !important; /* Remove top border */
  box-shadow: none !important; /* Remove shadow */
  padding-top: 0 !important; /* Remove top padding */
  padding-bottom: 0 !important; /* Remove bottom padding */
}
/* Search results page */
body.view-search .com-finder.finder {
  background: transparent !important; /* Remove background */
  background-color: transparent !important; /* Fallback */
  --bg-content: transparent !important; /* Clear variable background */
  box-shadow: none !important; /* Remove box shadow */
  border: none !important; /* Remove border */
  padding: 0 !important; /* Eliminate padding */
}

/*===============================================================
ARTICLE STYLING
===============================================================*/
/* Images inside the article body */
.com-content-article .article-body img {
  display: block;
  max-width: 100%; /* Ensures responsiveness within container */
  width: 100%; /* Ensures scaling within text container */
  height: auto !important; /* Preserves aspect ratio */
  max-height: 400px; /* Limits height if needed */
  object-fit: contain; /* Prevents cropping */
  margin: 1.5em auto;
}
/* First image in article header/intro */
.com-content-article figure.pull-left.item-image img {
  display: block;
  max-width: 100%;
  height: auto; /* Let height scale naturally */
  object-fit: contain; /* Only if needed */
  margin: 1em auto;
}
/* Style image container for consistency with the first image */
.com-content-article .article-body figure {
  display: table; /* Ensures figcaption wraps based on image */
  margin: 1.5em auto; /* Vertical space and center alignment */
  max-width: 700px; /* Prevent overly wide images */
  width: 100%; /* Fully responsive */
  box-sizing: border-box; /* Include padding in width */
  text-align: left; /* Align caption with article text */
  background: #f7f7f7; /* Light gray for visual separation */
  padding: 1rem; /* Breathing space around image and text */
  font-family: 'EB Garamond', serif; /* Match caption text font */
  color: #252424B3; /* Subtle gray tone for text */
}
/* Image inside figure styling */
.com-content-article .article-body figure img {
  display: block; /* Makes image behave like a block element */
  max-width: 100%; /* Prevents overflow and ensures responsiveness */
  height: auto; /* Maintains aspect ratio */
}

/* Blog/category view image width */
body.view-category .pull-left.item-image img,
body.view-category .item-image.pull-left img {
  width: 27% !important; /* Narrow image width for listing */
  height: auto; /* Preserve image proportions */
  display: block; /* Ensure layout behaves correctly */
}
/* Blog/category title font size */
.item-content h2.item-title,
.item-content h2[itemprop="headline"] {
  font-size: 27px; /* Set heading font size */
}
/* Background for article box */
.item-content-wrap.box-color {
  --bg-content: #8cc63e12; /* Light green with opacity */
  background: var(--bg-content); /* Apply background color */
}
/* Subform field color */
span.field-entry,
span.field-entry .field-value,
span.field-entry .field-label {
  color: #404040; /* Set text color for form fields */
}
/* Transparent background for modules (ads) */
div.t4-module.module:not(.no-background) > div.module-inner {
  background-color: #ffffff00 !important; /* Fully transparent white */
  padding: 2.25rem !important; /* Apply padding */
  border-radius: 1rem !important; /* Rounded corners */
}
/* Link styling in articles */
.com-content-article .article-body a {
  color: #009344 !important; /* Brand green for links */
  text-decoration: underline !important; /* Always underline */
  background: none !important; /* Remove link background */
  box-shadow: none !important; /* Remove shadows or borders */
}
/* Hide category label above articles */
.com-content-article .name-category {
  display: none !important; /* Hide category name */
}
/* Hide author blocks on all non-author pages */
body:not(.view-author) .section-author,
body:not(.view-author) .author-block-posts,
body:not(.view-author) .author-related-items,
body:not(.view-author) .title-sc-author {
  display: none !important; /* Hide author sections except on author page */
}
/* Tag dot color */
ul.tags li a::before {
  background-color: #009344 !important; /* Green dot */
}

/* ===============================================================
FORCE TRANSPARENT BACKGROUND ON ARTICLE INNER CONTAINER
=============================================================== */
/* On article views, remove background for the .box-inner block which is creating the white rounded-corner container seen in your screenshot */
body.view-article .box-inner {
  background: transparent !important; /* remove white background */
  background-color: transparent !important; /* fallback for compatibility */
  --bg-content: transparent !important; /* override any CSS variable */
  border: none !important; /* remove border if present */
  box-shadow: none !important; /* remove any shadow effect */
  padding: 0 !important; /* optionally remove inner padding if needed */
}

/* ========================================
ARTICLE WIDTH NPR-LIKE
======================================== */
body.view-article .com-content-article.item-page {
  max-width: 760px !important;
  margin: 2rem auto !important;
  padding: 2rem !important;
}

/* ========================================
PARAGRAPH STYLING
======================================== */
body.view-article .article-body p {
  font-family: 'EB Garamond', serif !important;
  font-size: 1.1rem !important;
  color: #252424 !important;
  line-height: 1.6 !important;
  margin-bottom: 1.25rem;
}

/* ========================================
PAGE BACKGROUND COLOR
======================================== */
body {
  background-color: #f7f7f7 !important;
}

/* ========================================
FORCE PAGE BACKGROUND COLOR ON ALL WRAPPERS
======================================== */
html {
  background-color: #f7f7f7 !important; /* root background */
}
body,
body > .site,
body > .container,
body > .wrapper {
  background-color: #f7f7f7 !important; /* outer containers */
}

/* ========================================
UNIFIED NPR-LIKE PHOTO CAPTIONS
======================================== */
.com-content-article figure figcaption {
  font-family: 'EB Garamond', serif !important; /* your brand font */
  font-size: 0.95rem !important;
  color: #555 !important;
  text-align: left !important;
  margin-top: 0.25rem !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1.4;
  display: block !important;
  text-transform: none !important;
  text-shadow: none !important; /* kill blur */
  letter-spacing: normal !important; /* kill weird spacing */
}
@media (min-width: 992px) {
  body.view-article .col-lg-4.sidebar-r {
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
}
@media (min-width: 1200px) {
  body.view-article .col-xl-3.sidebar-r {
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
}

/* ===========================
AUTHOR PAGE: stacked + centered
=========================== */
/* Put the whole author header in a single centered column */
.view-author .author-detail,
.view-author .author-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px;
}
/* Title (author name) – full width, centered, above everything */
.view-author .top-lead,
.view-author .title-sc-author,
.view-author h1.page-title {
  order: 1;
  width: 100%;
  margin: 0 0 6px 0 !important;
  text-align: center !important;
  line-height: 1.2;
  font-size: clamp(28px, 4vw, 44px);
}
/* Photo container centered, below name */
.view-author .author-other-info,
.view-author .author-img,
.view-author .author-avatar,
.view-author .author-photo {
  order: 2;
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
}
/* Photo: perfect circle, never cropped weirdly */
.view-author .author-img img {
  display: block !important;
  width: 120px;
  height: 120px;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 50%;
}
/* Bio block: centered column, but readable left-aligned text */
.view-author .author-about-me {
  order: 3;
  max-width: 70ch;
  margin: 8px auto 0 auto !important;
  text-align: left !important;
  line-height: 1.7;
  font-size: 1rem;
}
.view-author .author-about-me p {
  margin: 0 0 1rem;
}
/* Prevent earlier horizontal flex rules from interfering */
.view-author .author-detail > *,
.view-author .author-block > * {
  flex: none !important;
  min-width: auto !important;
}
/* Make the author page container a bit wider so it breathes */
body.view-author .t4-main-body .container,
body.view-author .t4-content,
body.view-author .com-content {
  max-width: 1140px;
  margin: 0 auto;
}
/* Mobile tweaks */
@media (max-width: 600px) {
  .view-author .author-img img {
    width: 96px;
    height: 96px;
  }
}

/* =========================================================
   ARTICLE PAGES: no sidebar + optimal reading width + spacing
   (Append this block at the VERY END of your custom CSS)
========================================================= */

/* 1) Remove the right sidebar on single-article pages */
body.view-article .content-right,
body.view-article .sidebar-r,
body.view-article .col-lg-4.sidebar-r,
body.view-article .col-xl-3.sidebar-r {
  display: none !important;
}

/* 2) Let the content column span the full grid */
body.view-article .content-left {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* 3) Give the page a bit more horizontal room (outer container) */
body.view-article .t4-main-body .container,
body.view-article .t4-content,
body.view-article .com-content {
  max-width: 1240px;
  margin: 0 auto;
}

/* 4) Widen the article card itself (overrides your old 760px) */
body.view-article .com-content-article.item-page {
  max-width: 1040px !important;   /* try 980–1120px if you want more/less */
  margin: 2.25rem auto !important;
  padding: 2.25rem !important;
}

/* 5) Keep the reading column “easy on the eyes” */
body.view-article .article-body {
  max-width: 90ch;         /* ~optimal line length for readability */
  margin: 0 auto;          /* centered within the wider card */
  text-align: left;
  line-height: 1.75;
  white-space: normal;     /* prevents vertical text issues */
  word-break: normal;
  overflow-wrap: anywhere; /* long URLs won’t overflow */
}

/* 6) Consistent whitespace rhythm inside the article body */
body.view-article .article-body p {
  margin: 0 0 1.25rem;
}
body.view-article .article-body h2,
body.view-article .article-body h3,
body.view-article .article-body h4 {
  margin: 2rem 0 .75rem;   /* clear air above headings */
  line-height: 1.3;
}
body.view-article .article-body ul,
body.view-article .article-body ol {
  margin: 0 0 1.25rem 1.25rem; /* space below list + indent */
}
body.view-article .article-body li + li {
  margin-top: .35rem;          /* avoid cramped lists */
}
body.view-article .article-body blockquote {
  margin: 1.5rem auto;
  padding: .75rem 1rem;
  border-left: 3px solid #ddd;
  background: transparent;     /* keeps your existing look clean */
}
body.view-article .article-body figure {
  margin: 1.5rem auto;         /* unify image spacing with text rhythm */
}

/* Make the grey wrapper hug the image */
body.view-article .article-body figure {
  display: inline-block !important;   /* shrink to content */
  width: auto !important;
  max-width: 100% !important;         /* still responsive */
  margin: 1.25rem auto !important;    /* center the block */
  padding: .75rem !important;         /* adjust the grey frame thickness */
  background: #f7f7f7 !important;     /* or transparent if you don't want grey */
  border-radius: .5rem;               /* optional */
  text-align: left !important;        /* caption flush-left */
  box-sizing: border-box;
}

/* Center the image inside the figure */
body.view-article .article-body figure > img {
  display: block !important;
  margin: 0 auto !important;
  height: auto !important;
  max-width: 100% !important;
  width: auto !important;
}



/* Footer pages: hide author/date/meta ========
============================================================ */
.item-page.footerpage .article-aside,
.item-page.footerpage .hero-byline,
.item-page.footerpage dl.article-info,
.item-page.footerpage .article-info,
.item-page.footerpage .published,
.item-page.footerpage .createdby,
.item-page.footerpage .modified,
.item-page.footerpage .tags,
.item-page.footerpage .name-category,
.item-page.footerpage time {
  display: none !important;
}


/* ----------------------------------------
   Clean & Branded Newsletter Styling
   Targeting: Module ID Mod127 (Newsletter)
---------------------------------------- */

/*   Newsletter Module Full Branding + Error Override */

/* Container background + border + text alignment */
#Mod127.t4-module.module.modulenewsletter-box > .module-inner,
#Mod127 .module-inner {
  background-color: rgba(140, 198, 62, 0.07) !important;  /* Soft green tint */
  border: 2px solid #8cc63e !important;                     /* Soft green border */
  padding: 2rem !important;
  border-radius: 1rem !important;
  box-shadow: none !important;
  color: #252424 !important;
  text-align: center !important;
}

/* Heading styling */
#Mod127 .module-title,
#Mod127 h3.module-title span {
  color: #056839 !important;
  font-size: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Tagline */
#Mod127 .module-ct p {
  font-size: 1.05rem !important;
  color: #252424 !important;
  margin-bottom: 1.5rem !important;
}

/* Input fields */
#Mod127 input[type="email"],
#Mod127 input[type="text"] {
  width: 100% !important;
  padding: 0.75rem !important;
  border-radius: 8px !important;
  border: 1px solid #ccc !important;  /* neutral border when no error */
  font-size: 1rem !important;
  margin-bottom: 1rem !important;
  box-sizing: border-box !important;
}

/* Placeholder text color */
#Mod127 input::placeholder {
  color: #888 !important;
  opacity: 1 !important;
}

/* Submit button styling */
#Mod127 input[type="submit"],
#Mod127 button {
  background-color: #056839 !important;
  color: #ffffff !important;
  font-weight: bold !important;
  border-radius: 8px !important;
  padding: 0.75rem 1.25rem !important;
  border: none !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background 0.3s ease !important;
}

/* Submit hover */
#Mod127 input[type="submit"]:hover,
#Mod127 button:hover {
  background-color: #044e2d !important;
}

/* Error style override: input with error state (remove red) */
#Mod127 input[type="email"].acym__error,
#Mod127 input[type="text"].acym__error {
  background-color: rgba(140, 198, 62, 0.1) !important;
  border: 2px solid #8cc63e !important;
  color: #252424 !important;
}

/* Error message text override */
#Mod127 .acym__form__error {
  color: #056839 !important;
  font-size: 0.9rem !important;
  margin-top: 0.5rem !important;
  text-align: center !important;
}

/* Ensure all inner text is the correct brand color */
#Mod127 .module-inner,
#Mod127 .module-inner * {
  color: #252424 !important;
}

/* 💚 Replace red error background with light green tint */
#Mod127 input[type="email"].acym__error,
#Mod127 input[type="text"].acym__error {
  background-color: rgba(140, 198, 62, 0.15) !important; /* soft green instead of red */
  border: 2px solid #8cc63e !important;
  color: #252424 !important;
}

/* 🔤 Placeholder styling for better visibility */
#Mod127 input::placeholder {
  color: #777 !important;
  opacity: 1 !important;
  font-style: italic;
}

/* ✅ Submit button active state (ensure always branded) */
#Mod127 input[type="submit"],
#Mod127 button {
  background-color: #056839 !important;  /* Brand green */
  color: #ffffff !important;
  font-weight: bold !important;
  border-radius: 8px !important;
  padding: 0.75rem 1.25rem !important;
  border: none !important;
  width: 100% !important;
  box-shadow: 2px 2px 0 #333 !important;
  cursor: pointer !important;
  opacity: 1 !important; /* fixes greying out */
  transition: background 0.3s ease;
}

/* 🖱️ Hover state */
#Mod127 input[type="submit"]:hover,
#Mod127 button:hover {
  background-color: #044e2d !important;
}

/* 🚫 Optional: disabled state override if necessary */
#Mod127 input[type="submit"]:disabled,
#Mod127 button:disabled {
  background-color: #056839 !important;
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

/* ✅ Replace default red error background with brand-matching style */
#Mod127 input.acym_invalid_field {
  background-color: rgba(140, 198, 62, 0.15) !important;  /* soft green */
  border: 2px solid #8cc63e !important;  /* brand green */
  color: #252424 !important;
}

/* ✅ Adjust placeholder to be readable and styled */
#Mod127 input::placeholder {
  color: #777 !important;
  font-style: italic;
  opacity: 1 !important;
}

/* ✅ Force consistent border-radius and padding even in error state */
#Mod127 input.acym_invalid_field {
  border-radius: 8px !important;
  padding: 0.75rem !important;
  font-size: 1rem !important;
}

/* Override default button styling for AcyMailing inside Mod127 */
#Mod127 input.subbutton,
#Mod127 input.button,
#Mod127 input.btn-primary {
  background-color: #056839 !important;  /* Brand green */
  color: #fff !important;
  font-weight: bold;
  border-radius: 8px !important;
  padding: 0.75rem 1.25rem !important;
  border: none !important;
  box-shadow: 2px 2px 0 #333 !important;
  width: 100% !important;
  text-align: center;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

/* Hover effect */
#Mod127 input.subbutton:hover,
#Mod127 input.button:hover,
#Mod127 input.btn-primary:hover {
  background-color: #044e2d !important;
}

/* ========================================
FORCE Newsletter Consistency on Author Pages
======================================== */

/* Full width constraints + compact padding on desktop & tablet */
body.view-author #Mod127.t4-module.module.modulenewsletter-box > .module-inner,
body.view-author #Mod127 .module-inner {
  max-width: 320px !important;
  width: 90% !important;
  margin: 0 auto !important;
  padding: 1.5rem 1.25rem !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Inputs and button: consistent padding and not too tall */
body.view-author #Mod127 input[type="email"],
body.view-author #Mod127 input[type="text"],
body.view-author #Mod127 input[type="submit"],
body.view-author #Mod127 button {
  padding: 0.6rem 1rem !important;
  margin-bottom: 1rem !important;
  font-size: 1rem !important;
}

/* Responsive: ensure it remains compact on small screens too */
@media (max-width: 991px) {
  body.view-author #Mod127 .module-inner {
    width: 90% !important;
    padding: 1.25rem 1rem !important;
  }
  body.view-author #Mod127 input[type="submit"],
  body.view-author #Mod127 button {
    padding: 0.6rem 1rem !important;
  }
}



/* =========================================
📱 FINAL RESPONSIVE FIX: Newsletter Module (Mod127)
========================================= */
@media (max-width: 991px) {
  /* Ensure entire module is responsive and centered */
  #Mod127 .module-inner {
    width: 90% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 1.5rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Input field: centered and full-width */
  #Mod127 input[type="email"],
  #Mod127 input[type="text"] {
    width: 100% !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    text-align: center !important;
    margin-bottom: 1rem !important;
  }

  /* Button: full-width and styled */
  #Mod127 input[type="submit"],
  #Mod127 button {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border-radius: 12px !important;
    font-size: 1.1rem !important;
    background-color: #056839 !important;
    color: #fff !important;
    font-weight: bold !important;
    box-shadow: 2px 2px 0 #333 !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
  }

  #Mod127 input[type="submit"]:hover,
  #Mod127 button:hover {
    background-color: #044e2d !important;
  }

  /* Fix spacing under headings */
  #Mod127 .module-title {
    margin-bottom: 0.5rem !important;
    font-size: 1.5rem !important;
  }

  #Mod127 .module-ct p {
    font-size: 1.05rem !important;
    margin-bottom: 1.25rem !important;
  }
}


/* ========================================
MOBILE-ONLY HEADER BACKGROUND FIX
======================================== */
/* Fix off-canvas (mobile) header background and logo visibility */
.t4-offcanvas .t4-off-canvas-header {
  background-color: #056839 !important; /* brand green */
}

/* Ensure the logo image is visible in mobile menu */
.t4-offcanvas .t4-off-canvas-header img {
  filter: brightness(1.1) contrast(1.2) !important;
}

/* Menu links inside the off-canvas menu */
.t4-offcanvas .t4-off-canvas-body .navbar-nav > li > a {
  color: #252424 !important; /* brand body text color */
  font-weight: 500;
  font-size: 1.1rem;
  display: block;
  padding: 0.75rem 0;
}

/* Hover/focus state for menu items */
.t4-offcanvas .t4-off-canvas-body .navbar-nav > li > a:hover {
  color: #8cc63e !important; /* brand accent green */
}

/* Optional: spacing between items */
.t4-offcanvas .t4-off-canvas-body .navbar-nav > li {
  margin-bottom: 0.75rem;
}


/* ========================================
HIDE SHARE SECTION ON FOOTER PAGES ONLY
======================================== */
.footerpage .share-social,
.footerpage .title-txt {
  display: none !important;
}