/**
 * @file
 * SharEd custom theme styles - matches the mockup design.
 */

/* ================================
   IMPORTS & BASE
   ================================ */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@300;400;600;700&display=swap');

/* ================================
   LAYOUT
   ================================ */

#page,
#main-wrapper {
  background: #ffffff !important;
}


/* ================================
   HEADER / SITE BRANDING
   ================================ */

/* Site name "SHARED" text */
.site-branding__name {
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 1px;
}

a.navbar-brand {
  text-transform: none;
  padding-top: .5rem;
  font-size: inherit;
  font-weight: 700;
  color: #737A80;
}

/* Tagline slogan under logo */
.site-branding__slogan {
  font-size: 12px !important;
  line-height: 1.3 !important;
  max-width: 200px;
}

/* Layout: logo + text side by side */
.navbar .site-branding,
.navbar .block-system-branding-block {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
}

.navbar .site-branding__logo {
  flex-shrink: 0;
}

.navbar img {
  max-height: 40px !important;
  width: auto;
}

/* Wrap name + slogan together with left divider */
.navbar .site-branding__text {
  border-left: 1px solid #ccc;
  padding-left: 12px;
  margin: 0 !important;
}

/* Nav links in header */
.menu--main .nav-item {
  font-weight: 50;
  color: #393939;
  letter-spacing: 0.5px;
}

.navbar-nav .nav-item {
  position: relative !important;
}

.navbar-nav .nav-item:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: 0;
  top: 25%;
  /* Centers the line vertically */
  height: 50%;
  /* Makes the line shorter than the link */
  width: 1px;
  background-color: #393939;
  display: block !important;
}

.menu--main .nav-item:last-child .nav-link {
  border-right: none !important;
}

/* Targeting via the class Drupal provides */
.nav-link.is-active {
  text-decoration: underline !important;
  text-underline-offset: 5px;
  /* Adds a little breathing room */
  text-decoration-thickness: 2px;
  /* Makes it pop */
}

/* Or targeting via accessibility attributes (cleaner) */
.nav-link[aria-current="page"] {
  text-decoration: underline !important;
}

/* This targets the wrapper in your twig file */
/* 1. Hide the menu by default on mobile (Bootstrap handles the toggle) */
@media (max-width: 1200px) {
  #CollapsingNavbar.collapse:not(.show):not(.in) {
    display: none !important;
  }

  /* Ensure that when it IS open on mobile, it stacks vertically */
  #CollapsingNavbar.show,
  #CollapsingNavbar.in {
    display: block !important;
    width: 100%;
  }

  #CollapsingNavbar .navbar-nav {
    display: block;
    float: none !important;
  }
}

.view h2 {
  padding: 10px !important;
}

/* 2. Desktop Styles: Only show and align right on screens 768px and up */
@media (min-width: 1200px) {
  #CollapsingNavbar {
    display: flex !important;
    justify-content: flex-end;
    width: 100%;
  }

  #CollapsingNavbar .navbar-nav {
    display: flex !important;
    flex-direction: row;
    float: none !important;
  }

  /* Hide the hamburger button on desktop if it's lingering */
  .navbar-toggler {
    display: none !important;
  }
}

.site-slogan-wrapper {
  display: inline-block;
  color: #737A80;
  /* Allows the span to respect width/wrapping */
  white-space: normal;
  /* Overrides Bootstrap's 'nowrap' rule */
  max-width: 330px;
  /* Adjust this number to force the break where you want it */
  vertical-align: middle;
  line-height: 1.2;
  /* Keeps the two lines from being too far apart */
}

/* ================================
   Resource NODE
   ================================ */

/* Header Area */
.node-resource-full .resource-meta-top {
  letter-spacing: 1px;
  color: #6c757d;
  font-weight: 300;
}

.node-resource-full .resource-title {
  color: #0d3266;
  line-height: 1.2;
  font-size: 2.5rem;
  ;
}

/* Main Content Area */
.node-resource-full .resource-image img {
  width: 100%;
  height: auto;
  display: block;
}

.node-resource-full .resource-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}

/* Links and Files */
.node-resource-full .resource-links a {
  color: #2B4E91 !important;
  font-size: 1rem !important;
  text-decoration: underline !important;
  font-weight: 700;
}

/* Styles the metadata (the text in parentheses) */
.node-resource-full .resource-links .file-metadata {
  color: #2B4E91 !important;
  font-size: 1rem !important;
  font-weight: 700;
}


/* Authors */
.node-resource-full .resource-authors {
  color: #6c757d;
  font-size: 0.9rem;
}

.node-resource-full .resource-authors strong {
  color: #333;
}

/* Filed Under Section */
.node-resource-full .filed-under-title {
  color: #6c757d;
  letter-spacing: 1px;
}

.node-resource-full .filed-under p {
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.node-resource-full .filed-under strong {
  color: #333;
  margin-right: 5px;
}

.node-resource-full .filed-under a {
  color: #1E4F96 !important;
  text-decoration: underline;
}

/* ================================
   SECTION HEADING STYLE (divider + label)
   ================================ */

.block-views-blockfrontpage-block-1>h2,
.block-views-blockfrontpage-block-1 .block__title,
.views-element-container .block__title,
.sidebar_second .block__title,
.sidebar_first .block__title,
.sidebar_first h2,
.sidebar_second h2 {
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  padding-bottom: 8px !important;
  margin-bottom: 30px !important;
  padding-top: 18px !important;
  border-bottom: 1px solid black;
  margin-top: 1.5rem;
  font-size: 1.3rem;
  color: #5E676F;
}

.section {
  padding-right: 15px;
  padding-left: 15px;
}


@media (max-width: 768px) {
  .views-view-responsive-grid__item-inner {
    display: block !important;
  }

  .views-field-field-image {
    margin-bottom: 15px;
  }
}

/* ============================================================
   Commentary View Only: Side-by-Side Layout
   ============================================================ */

/* 1. Limit the grid container to the Commentary View ID */
.view-id-commentary .views-view-responsive-grid__item-inner {
  display: grid !important;
  grid-template-columns: 380px 1fr !important;
  /* Fixed width for image, flexible for text */
  grid-template-areas:
    "thumb meta"
    "thumb title"
    "thumb body";
  column-gap: 40px !important;
  row-gap: 5px !important;
  align-items: start;
  margin-bottom: 60px !important;
}

/* 2. Assign children to grid areas within the scope */
.view-id-commentary .views-field-field-image {
  grid-area: thumb;
}

.view-id-commentary .views-field-field-authored-by-1 {
  grid-area: meta;
}

.view-id-commentary .views-field-title {
  grid-area: title;
  display: block !important;
}

.view-id-commentary .views-field-body {
  grid-area: body;
}

/* 3. Scoped Image Styling */
.view-id-commentary .views-field-field-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 0;
  margin: 0px 30px 15px 15px;
}

/* 3. Scoped Image Styling */
.view-display-id-node_latest_commentary .views-field-field-image img,
.view-display-id-block_2 .views-field-field-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 0;
  margin-bottom: 15px;
}

/* 4. Scoped Meta (Author | Date) Styling */
.view-display-id-node_latest_commentary .views-field-field-authored-by-1,
.view-display-id-block_2 .views-field-field-authored-by-1,
.view-id-commentary .views-field-field-authored-by-1 {
  text-transform: uppercase;
  font-size: 1rem;
  color: #6c757d;
  letter-spacing: 1px;
  font-weight: 300;
  margin-bottom: 5px;
}

/* 5. Scoped Title Styling (Bold Dark Blue) */
.view-id-commentary .views-field-title a {
  color: #0d3266 !important;
  /* The specific dark blue from your site */
  font-size: 1.6rem !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  text-decoration: none;
  display: block;
  margin-bottom: 15px;
}

.view-display-id-node_latest_commentary .views-field-title a,
.view-display-id-block_2 .views-field-title a {
  color: #0d3266 !important;
  /* The specific dark blue from your site */
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  text-decoration: none;
  display: block;
  margin-bottom: 15px;
}

/* 6. Scoped Body Text Styling */
.view-id-commentary .views-field-body {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.6;
}

/* 7. Responsive Reset (Stack on Mobile) */
@media screen and (max-width: 992px) {
  .view-id-commentary .views-view-responsive-grid__item-inner {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "thumb"
      "meta"
      "title"
      "body";
    row-gap: 15px !important;
  }
}

/* ================================
   FRONTPAGE VIEW - FEATURED FIRST + TWO SMALLER
   ================================ */

.view-frontpage .view-content {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}

/* All view columns: default half width */
.view-frontpage .views-col {
  width: 50% !important;
  padding: 0 10px 20px 0 !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* First article: full width — featured */
.view-frontpage .views-col:first-child {
  width: 100% !important;
  padding-right: 0 !important;
  margin-bottom: 20px !important;
  padding-bottom: 20px !important;
}

/* First article image: full width and taller */
.view-frontpage .views-col:first-child .field--name-field-image img,
.view-frontpage .views-col:first-child .views-field-field-image img {
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin-bottom: 12px !important;
}

/* Smaller article images */
.view-frontpage .views-col:not(:first-child) .field--name-field-image img,
.view-frontpage .views-col:not(:first-child) .views-field-field-image img {
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin-bottom: 10px !important;
}



/* Featured article title: larger */
.view-frontpage .views-col:first-child .field--name-title a,
.view-frontpage .views-col:first-child .views-field-title a {
  color: #0d3266 !important;
  font-size: 1.9rem !important;
  font-weight: bold !important;
  text-decoration: none !important;
  display: block !important;
}

/* Smaller article titles */
.view-frontpage .views-col:not(:first-child) .field--name-title a,
.view-frontpage .views-col:not(:first-child) .views-field-title a {
  color: #0d3266 !important;
  font-size: 1.9rem !important;
  font-weight: bold !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  display: block !important;
}

.view-id-frontpage_small .views-col:not(:first-child) .field--name-title a,
.view-id-frontpage_small .views-col:not(:first-child) .views-field-title a {
  color: #0d3266 !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  display: block !important;
}

.view-id-frontpage_small .views-col:first-child .field--name-title a,
.view-id-frontpage_small .views-col:first-child .views-field-title a {
  color: #0d3266 !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  display: block !important;
}

.view-id-frontpage_small .views-col:not(:first-child) .views-row {
  padding: 0 0 0 15px;
}

.view-id-frontpage_small .views-col:first-child .views-row {
  padding: 0 15px 0 0;
}

.view-frontpage .field--name-title a:hover,
.view-frontpage .views-field-title a:hover {
  color: #0071b3 !important;
  text-decoration: underline !important;
}

/* Author / date */
.view-frontpage .field--name-field-authored-by-1,
.view-frontpage .views-field-field-authored-by-1 {
  font-size: 13px !important;
  color: #555 !important;
  margin-top: 6px !important;
}

/* "View all Commentary" button */
.view-frontpage .more-link {
  clear: both;
  display: block;
  margin-top: 15px;
}

.view-frontpage .more-link a {
  display: inline-block !important;
  background-color: #1a6fa0 !important;
  color: #fff !important;
  padding: 8px 20px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.view-frontpage .more-link a:hover {
  background-color: #145a82 !important;
}

.more-link {
  margin-top: 35px;
}

/* Designing the anchor tag (the actual button) */
.more-link a {
  display: inline-block;
  padding: 12px 20px;
  background-color: #1A4D96;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 99px;
  font-family: 'Inter', 'Helvetica', sans-serif;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.2s ease;
}

/* Hover and focus states for user interaction */
.more-link a:hover,
.more-link a:focus {
  background-color: #164282;
}


/* ================================
   SIDEBAR SECOND
   ================================ */

.sidebar_second .block {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 25px !important;

}

.sidebar_second .block__content p,
.sidebar_second .block__content {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #444 !important;
}

/* ================================
   LATEST RESOURCES SIDEBAR VIEW
   ================================ */

.view-related-resources .views-row,
.view-latest-resources .views-row {
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.view-related-resources .views-row:last-child,
.view-latest-resources .views-row:last-child {
  border-bottom: none;
}

/* "REPORTS | JANUARY 27, 2025" meta line */
.view-related-resources .views-field-created,
.view-resources .views-field-created,
.view-commentary .views-field-created,
.view-latest-resources .views-field-created {
  font-size: 0.9rem !important;
  font-weight: 200 !important;
  color: #666 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 4px !important;
}

/* Resource title */
.view-related-resources h4 a,
.view-related-resources .views-field-title a,
.view-latest-resources h4 a,
.view-latest-resources .views-field-title a {
  color: #0d3266 !important;
  font-size: 1.3rem !important;
  font-weight: bolder !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

.view-related-resources h4 a:hover,
.view-related-resources .views-field-title a:hover,
.view-latest-resources h4 a:hover,
.view-latest-resources .views-field-title a:hover {
  color: #0071b3 !important;
  text-decoration: underline !important;
}

/* Resource excerpt */
.view-related-resources .views-field-field-artifact-description-abstr,
.view-latest-resources .views-field-field-artifact-description-abstr {
  font-size: 0.9rem !important;
  color: #555 !important;
  line-height: 1.5 !important;
  margin-top: 5px !important;
}

/* Resource file link */
.view-related-resources .views-field-field-resource,
.views-field .views-field-field-resource,
.view-latest-resources .views-field-field-resource {
  /* margin: 5px; */
  display: flex;
}

.view-related-resources .views-field-field-resource a,
.view-latest-resources .views-field-field-resource a {
  color: #2B4E91 !important;
  font-size: 0.9rem !important;
  text-decoration: underline !important;
  font-weight: bolder;

}

/* "View all Resources" button 
.view-latest-resources .more-link a {
  display: inline-block !important;
  background-color: #1a6fa0 !important;
  color: #fff !important;
  padding: 8px 20px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.view-latest-resources .more-link a:hover {
  background-color: #145a82 !important;
}
*/

.file-metadata {
  margin-left: 5px;
  color: #666;

}

.views-field-field-associated-photo {
  float: left;
  margin: 0px 30px 15px 15px;
  border: 1px solid black;
}

/* ================================
   Resources page
   ================================ */
/*
.block-system-main-block {
  margin-top: 120px; 
}
*/
h1.page-title--commentary,
h1.page-title--resources {
  color: #0d3266 !important;
  font-size: 1.9rem !important;
  font-weight: bold !important;
  text-decoration: none !important;
  display: block !important;
  margin: 45px 0 45px 0;
}

.view-commentary .views-view-responsive-grid__item,
.view-resources .views-view-responsive-grid__item {
  margin-bottom: 25px;
}

.view-id-commentary .views-row h4 a,
.view-id-commentary h4 a,
.view-id-resources .views-row h4 a,
.view-id-resources h4 a {
  color: #0d3266 !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  display: block !important;
}

.view-commentary .views-field-field-commentary .field-content a,
.view-resources .views-field-field-resource .field-content a {
  color: #2B4E91 !important;
  font-size: 0.9rem !important;
  text-decoration: underline !important;
  font-weight: bolder;
}

/* Styles the metadata (the text in parentheses) */
.view-resources .views-field-field-resource .file-metadata {
  color: #2B4E91 !important;
  font-size: 0.9rem !important;
  font-weight: 400;
}

/* ================================
   view pager
   ================================ */

/* 1. Reset the pagination container */
.pagination.js-pager__items {
  display: flex !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 30px 0 !important;
  gap: 8px !important;
  border: none !important;
}

/* 2. Style every item (Numbers and Arrows) as a Box */
.pagination .page-item .page-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px !important;
  height: 50px !important;
  background-color: #5c6670 !important;
  /* Dark slate grey */
  color: #ffffff !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

/* 3. The ACTIVE Page (White background, Black border) */
.pagination .page-item.active .page-link,
.pagination .page-item.active span {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  cursor: default;
}

/* 4. Handle Arrows properly */
/* We keep the arrows but hide the extra "First/Last" text to keep them as clean squares */
.pagination .page-item .page-link .visually-hidden {
  display: none !important;
}

/* 5. Hide "First" and "Last" entirely to match your clean 1 2 3 > style */
/* We target them by their 'title' attribute so it works on every page */
.pagination .page-item a[title*="first"],
.pagination .page-item a[title*="last"] {
  display: none !important;
}

/* 6. Clean up the "Previous" and "Next" arrows so they are just single characters */
/* This prevents the "‹‹" and "››" look */
.pagination .page-item a[rel="prev"] span[aria-hidden="true"],
.pagination .page-item a[rel="next"] span[aria-hidden="true"] {
  font-size: 1.8rem !important;
}

/* ================================
   FOOTER
   ================================ */

.site-footer {
  background-color: #3a3a3a !important;
  padding: 25px 0 15px !important;
  margin-top: 30px !important;
}

.site-footer p,
.site-footer span,
.site-footer li {
  color: #fff !important;
  font-size: 0.8rem !important;
  line-height: 1.6 !important;
}

.site-footer a {
  color: #fff !important;
  text-decoration: none !important;
}

.site-footer a:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

.site-footer h2,
.site-footer .block__title {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none;
  margin-bottom: 10px !important;
  border: none !important;
  padding: 0 !important;
}

/* Footer menu inline */
.site-footer .menu--footer,
.site-footer .menu--account {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}

.site-footer .menu--footer li,
.site-footer .menu--account li {
  display: inline !important;
}

.site-footer .menu--footer li a,
.site-footer .menu--account li a {
  color: #bbb !important;
}

.region-footer-first {
  width: 25% !important;
}

.region-footer-second {
  width: 30% !important;
}

.region-footer-third {
  width: 50% !important;
}

.site-footer .block {
  border: none;
  margin: 0;
  padding: 0;
}

/* ================================
   MAIN CONTENT AREA BORDER
   ================================ */

/* Vertical divider between content and sidebar */
.sidebar_second {
  border-left: 1px solid black;
  padding-left: 25px !important;

}


/* Vertical divider between content and sidebar */
.sidebar_first {
  border-right: 1px solid black;
}


/* ================================
   Search block
   ================================ 


/* 1. Force all block wrappers to be 100% width */
#block-shared-custom-search-form-wide,
#block-shared-custom-search-form-wide .content,
#block-shared-custom-search-form-wide .container-inline {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* 2. Style the form as the pill container */
#block-shared-custom-search-form-wide #search-block-form {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 44px !important;
  /* Slimmer profile */
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 50px;
  padding: 0 10px 0 20px !important;
  box-sizing: border-box !important;
  margin-top: 10px !important;
}

/* 3. Force the input wrapper to take up all remaining horizontal space */
#block-shared-custom-search-form-wide .js-form-item-keys {
  flex: 1 1 auto !important;
  margin: 0 !important;
  display: block !important;
}

/* 4. Fix the input field width so text is not truncated */
#block-shared-custom-search-form-wide .form-search {
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 1.1rem !important;
  height: 100% !important;
}

/* 5. Pin the magnifying glass to the absolute right */
#block-shared-custom-search-form-wide .form-actions {
  flex: 0 0 40px !important;
  /* Fixed width for the icon area */
  margin: 0 !important;
  display: flex !important;
  justify-content: center;
}

#block-shared-custom-search-form-wide #edit-submit {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230d3266' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'%3E%3C/circle%3E%3Cline x1='22' y1='22' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
  color: transparent !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  cursor: pointer;
  padding: 0 !important;
}


.page-vocabulary-subtitle {
  margin-top: 40px;
  margin-bottom: -30px;
  /* Pull the title closer if needed, or adjust to match the design */
  font-size: 1rem;
  font-weight: normal;
  color: #6c757d;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#block-shared-custom-page-title .title {
  margin: 40px 0 40px 0;
  font-size: 2.5rem !important;
  color: #0d3266;
}

/* Adjusting styles for screens smaller than 768px */
@media screen and (max-width: 768px) {

  h1.page-title--commentary,
  h1.page-title--resources,
  #block-shared-custom-page-title .title {
    margin-top: 40px !important;
    font-size: 1.5rem !important;
  }

  #block-shared-custom-search-form-wide #search-block-form {
    max-width: 100%;
    padding: 8px 15px;
  }

  #block-shared-custom-search-form-wide .form-search {
    font-size: 1.1rem !important;
  }
}

.sidebar .block {
  border-style: solid;
  border-width: 1px;
  padding: 0;
  margin: 0;
}


/* ================================
   Custom Pill Search Styling
   ================================ */

/* 1. Kill the extra spacing Drupal/CKEditor adds */
.pill-search-wrapper p {
  margin: 0 !important;
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
}

/* 2. The Pill Container */
.pill-search-wrapper form {
  display: flex !important;
  width: 100% !important;
  height: 46px !important;
  /* Fixed height for consistent centering */
  align-items: center !important;
  background-color: #fff !important;
  border: 1px solid #ced4da !important;
  border-radius: 50px !important;
  padding: 0 5px 0 20px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 3. Center the Typing Text */
.pill-search-wrapper input[type="text"] {
  flex: 1 !important;
  height: 100% !important;
  /* Takes full height of the 46px pill */
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 1.1rem !important;
  color: #333 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 46px !important;
  /* Matches height to force vertical centering */
  display: flex !important;
  align-items: center !important;
}

/* 4. The Magnifying Glass (Looking Glass) */
.pill-search-wrapper .pill-search-submit {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230d3266' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'%3E%3C/circle%3E%3Cline x1='22' y1='22' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  display: block !important;
  /* Ensure it's not hidden */
  opacity: 1 !important;
  visibility: visible !important;
}

/* 5. Placeholder vertical alignment */
.pill-search-wrapper input::placeholder {
  line-height: 46px !important;
  vertical-align: middle !important;
}




.hidden-searchbox {
  display: none !important;
}

/* ================================
   PAGE TITLE HIDDEN ON FRONT
   ================================ 

.path-frontpage .block-page-title-block,
.path-frontpage h1.page-header {
  display: none !important;
}
*/
/* ================================
   BREADCRUMB HIDDEN ON FRONT
   ================================ */



/* ================================
   MISC
   ================================ */

/* Ensure images are fluid */
img {
  max-width: 100%;
  height: auto;
}

.view-frontpage .views-col:not(:first-child) img {

  object-fit: cover;
  width: 100%;
}

/* ---------------------------------------------------
   Article Node Specific Styles
----------------------------------------------------- */
.node-article-full .article-meta-top {
  font-size: 0.95rem;
}

.node-article-full .article-date {
  letter-spacing: 0.5px;
}

.node-article-full .article-title {
  color: #0d3266;
}

.node-article-full .article-body {
  font-size: 1.1rem;
  line-height: 1.6;
}

/* ---------------------------------------------------
   View Exposed Filters Styling (Tighter BEF Checkboxes)
----------------------------------------------------- */
.view-filters ul,
.view-filters li,
.bef-checkboxes ul,
.bef-checkboxes li {
  list-style-type: none !important;
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.view-filters .bef-checkboxes .form-item,
.view-filters .form-checkboxes .form-item {
  margin-bottom: 8px !important;
  display: flex;
  align-items: flex-start;
}

.view-filters .bef-checkboxes input[type="checkbox"],
.view-filters .form-checkboxes input[type="checkbox"] {
  margin-top: 4px;
  margin-right: 8px;
}

.view-filters .bef-checkboxes label,
.view-filters .form-checkboxes label {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #333;
}