/* ============================================================
   Council Meeting Page - Visual Enhancements
   Paste into: Admin > Config > Development > Asset Injector
   Path: /admin/config/development/asset-injector/css/custom
   ============================================================ */

/* BootstrapBackground Colors */

/* dark blue */
.bs_input-circles .bs-text-darkblue {background-color: #121c4d !important;}

.bs-bg-darkblue {background-color: #121c4d !important;}
.bs-bg-darkblue {color: #121c4d;}
.bs-bg-darkblue.field-content {color: #fff;margin-top: 5px;}
.bs-bg-darkblue .field-content {color: #fff; padding:10px;}


/* black background */
.bs_input-circles .bs-text-dark-blue {background-color: #000 !important;}
.bs-bg-black {background-color: #000 !important;}
.bs-bg-black {color: #fff;}

/* white background */
.bs_input-circles .bs-text-dark-blue {background-color: #fff !important;}
.bs-bg-black {background-color: #fff !important;}
.bs-bg-black {color: #000;}

/* Black Text */
.bs-text-black .bs_tooltip {background-color: #000 !important;}
.bs-text-black h2 {color: #000;}
.bs-text-black h3 {color: #000;}
.bs-text-black h4 {color: #000;}
.bs-text-black h5 {color: #000;}
.bs-text-black h6 {color: #000;}
.bs-text-black p {color: #000;}
.bs-text-white {color: #000;}

/* White Text */
/*.bs-text-white {background-color: #ffffff !important;}*/
.bs-text-white h2 {color: #ffffff;}
.bs-text-white h3 {color: #fff;}
.bs-text-white h4 {color: #fff;}
.bs-text-white h5 {color: #fff;}
.bs-text-white h6 {color: #fff;}
.bs-text-white p {color: #fff;}
.bs-text-white {color: #fff;}


/* ----------------------------------------------------------
   1. MEETING DATE — info badge
   ----------------------------------------------------------
   Converts the label-inline clearfix layout into a clean
   horizontal badge that matches the navy brand palette.
   ---------------------------------------------------------- */

.block-field-blocknodemeetingsfield-meeting-date > .block-hr {
  display: none;
}

.block-field-blocknodemeetingsfield-meeting-date .field--name-field-meeting-date {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #e6f1fb;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 1.25rem;
  clear: both;
  overflow: hidden;
}

.block-field-blocknodemeetingsfield-meeting-date .field--name-field-meeting-date::after {
  display: none;
}

.block-field-blocknodemeetingsfield-meeting-date .field__label {
  font-size: 20px;
  color: #185fa5;
  font-weight: 400;
  float: none !important;
  margin-right: auto;
  white-space: nowrap;
}

.block-field-blocknodemeetingsfield-meeting-date .field__item {
  font-size: 20px;
  font-weight: 600;
  color: #0c447c;
  float: none !important;
  text-align: right;
}

/* Make Meeting Location match Meeting Date styling */
.field--name-field-meeting-location {
  display: flex;
  align-items: center;
  background-color: #e6f1fb; /* match the light blue background */
  padding: 0.5rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.field--name-field-meeting-location .field__label {
  font-weight: 600;
  color: #185fa5; /* match the dark blue label color */
  margin-right: 1rem;
  margin-bottom: 0; /* override label-above default */
  white-space: nowrap;
}

.field--name-field-meeting-location .field__item {
  color: #0c447c; font-weight:bold;  margin-left: auto;
}

.field--name-field-meeting-location .field__item a {
  color: #0c447c;
  text-decoration: none;
}

.field--name-field-meeting-location .field__item::after {
  content: "Click the location for a map";
  display: block;
  font-size: 0.75rem;
  color: #555;
  font-style: italic;
  margin-top: 2px;
}


/* ----------------------------------------------------------
   2. AGENDA & OTHER FILES — card panels
   ----------------------------------------------------------
   Adds a light background card behind each file section,
   turns the h2 into a small uppercase eyebrow label,
   and hides the decorative HR that's now redundant.
   ---------------------------------------------------------- */

.block-field-blocknodemeetingsfield-meeting-agenda,
.block-field-blocknodemeetingsfield-other-files {
  background: #f5f4f1;
  border: 1px solid #e2e0db;
  border-radius: 8px;
  padding: 14px 16px !important;
  margin-bottom: 12px;
}

.block-field-blocknodemeetingsfield-meeting-agenda > .block-hr,
.block-field-blocknodemeetingsfield-other-files > .block-hr {
  display: none;
}

.block-field-blocknodemeetingsfield-meeting-agenda .block-title,
.block-field-blocknodemeetingsfield-other-files .block-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #454545 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  line-height: 1;
}

.block-field-blocknodemeetingsfield-meeting-agenda .field__item a,
.block-field-blocknodemeetingsfield-other-files .field__item a {
  font-size: 21px;
}

.views-view-grid .views-row {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.views-view-grid .views-col {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px 20px 30px;
  box-sizing: border-box;
  flex: 1;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.views-view-grid .views-col:hover {
  border-color: #154360;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
/* hover state */
.views-view-grid .views-row {
  display: flex;
  gap: 30px;
}

.views-view-grid .views-col {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  flex: 1;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.views-view-grid .views-col:hover {
  border-color: #154360;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}