/**
 * Layout Overrides
 * ----------------
 * Small layout patches kept in a separate file because `layout.css` is
 * periodically regenerated/overwritten by an upstream sync, wiping inline
 * edits made directly to it.
 *
 * Loaded AFTER layout.css (registered in gmu_libraries.libraries.yml under
 * the `global-styling` library, last entry) so these rules win by source order.
 *
 * Contains:
 *   1. Sticky footer — `.layout-container { min-height: 100vh; }` plus
 *      `.main-content { flex: 1 0 auto; }` so the footer pins to the
 *      viewport bottom on short pages.
 *   2. Spacing fix — removes the stacked top/bottom padding that was
 *      pushing the page title down and creating a large gap before the
 *      footer (was: `padding: var(--spacing-2xl) 0` on `.main-content`).
 *
 * TO REVERT: comment out (or remove) the `css/layout-overrides.css: {}`
 * line in gmu_libraries.libraries.yml under `global-styling`, then run
 * `vendor/bin/drush cr`. The file itself can stay on disk for easy
 * re-enabling.
 */

.layout-container {
  min-height: 100vh;
}

.main-content {
  padding: 0;
  flex: 1 0 auto;
}

/* ════════════════════════════════════════════════════════════════════
   Decorative heading accent bar (vertical, left side) — 2026-05-19 update
   Replaces the previous short horizontal underline with a vertical
   accent bar on the left of the heading text.
   ════════════════════════════════════════════════════════════════════ */
article .layout__region--content h1,
article .layout__region--content h2,
article .layout__region--content h2.title,
article .layout__region--content h3.title,
h1.page-header,
.page-content h1,
.page-content h2,
.quick-links__title,
#whats-happening-heading,
.events-section .section-title,
.branch-libraries h2,
.sidebar h2 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  text-decoration: none !important;
  border-left: 5px solid var(--gmu-accent-yellow) !important;
  padding-left: 0.85rem !important;
  background: none !important;
  line-height: 1.25;
}
/* Remove the previous short underline */
article .layout__region--content h1::after,
article .layout__region--content h2::after,
article .layout__region--content h2.title::after,
h1.page-header::after,
.page-content h1::after,
.page-content h2::after,
.quick-links__title::after,
#whats-happening-heading::after,
.events-section .section-title::after,
.branch-libraries h2::after,
.sidebar h2::after {
  content: none !important;
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   /policies-and-forms .narrowblock — match widerblocks2 card grid
   ════════════════════════════════════════════════════════════════════ */
.narrowblock > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.narrowblock > ul > li {
  display: flex;
  background: var(--gmu-white, #fff);
  border-top: 4px solid var(--gmu-primary-green, #005239);
  border-radius: 0 0 var(--radius-md, 6px) var(--radius-md, 6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 1rem 1.25rem;
  margin: 0;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.narrowblock > ul > li:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  transform: translateY(-3px);
}
.narrowblock > ul > li > a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  color: var(--gmu-primary-green);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-heading);
  line-height: 1.3;
}
.narrowblock > ul > li > a:hover {
  color: var(--gmu-accent-yellow);
  text-decoration: underline;
}
.narrowblock > ul > li img {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}
/* Strip the inline gray h2.title/h3.title background on policies page */
.is-path--policies-and-forms h2.title,
.is-path--policies-and-forms h3.title,
.is-path--policies-and-forms article h2.title,
.is-path--policies-and-forms article h3 {
  background-color: transparent !important;
  text-align: left !important;
}
/* ════════════════════════════════════════════════════════════════════
   Main nav divider before Philanthropy (last menu item)
   Replaces the hardcoded <li> divider that used to live in page.html.twig
   ════════════════════════════════════════════════════════════════════ */
.main-navigation #main-nav-menu > li:last-child {
  position: relative;
  margin-left: var(--spacing-md);
}
.main-navigation #main-nav-menu > li:last-child::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--spacing-sm));
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: #ccc;
}

/* ════════════════════════════════════════════════════════════════════
   layout_builder pages — broaden article body styles to also cover
   `.layout__region.content` (space-separated) in addition to
   `.layout__region--content`. Fixes bullets that escaped the content
   gutter on pages like /ask/item.
   ════════════════════════════════════════════════════════════════════ */
article .layout__region.content p {
  color: var(--gmu-dark-gray);
  line-height: 1.75;
  margin-bottom: 1rem;
  font-size: var(--font-size-16);
}
article .layout__region.content ul,
article .layout__region.content ol {
  padding-left: 1.75rem;
  margin-bottom: 1rem;
}
article .layout__region.content ul { list-style: disc; }
article .layout__region.content ol { list-style: decimal; }
article .layout__region.content li {
  margin-bottom: 0.4rem;
  line-height: 1.65;
  color: var(--gmu-dark-gray);
  font-size: var(--font-size-16);
}
article .layout__region.content a {
  color: var(--gmu-primary-green);
  text-decoration: underline;
  text-decoration-color: var(--gmu-accent-yellow);
}
article .layout__region.content h2,
article .layout__region.content h2.title {
  font-family: var(--font-heading);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-bold);
  color: var(--gmu-primary-green);
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  border-left: 5px solid var(--gmu-accent-yellow);
  padding-left: 0.85rem;
  line-height: 1.25;
}
article .layout__region.content h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  color: var(--gmu-dark-gray);
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
}

/* ════════════════════════════════════════════════════════════════════
   .prettyblocks — same card grid as widerblocks2/narrowblock so legacy
   pages (Locations & Hours, Group Study Rooms, etc.) look uniform.
   ════════════════════════════════════════════════════════════════════ */
.prettyblocks > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.prettyblocks > ul > li {
  background: var(--gmu-white, #fff);
  border-top: 4px solid var(--gmu-primary-green, #005239);
  border-radius: 0 0 var(--radius-md, 6px) var(--radius-md, 6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 1rem 1.25rem 1.25rem;
  list-style: none;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  overflow: hidden;
}
.prettyblocks > ul > li:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  transform: translateY(-3px);
}
.prettyblocks > ul > li > h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading);
  font-size: var(--font-size-20, 1.25rem);
  font-weight: var(--font-weight-bold);
  color: var(--gmu-primary-green);
  border-left: none !important;
  padding-left: 0 !important;
}
.prettyblocks > ul > li > h3 img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 180px;
  object-fit: cover;
  margin: 0 0 0.75rem 0 !important;
  float: none !important;
  border-radius: var(--radius-sm, 4px);
}
.prettyblocks > ul > li > h3 a {
  color: var(--gmu-primary-green);
  text-decoration: none;
}
.prettyblocks > ul > li > h3 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gmu-accent-yellow);
}
.prettyblocks > ul > li > p {
  margin: 0;
  color: var(--gmu-dark-gray);
  font-size: var(--font-size-16);
  line-height: 1.65;
}
.prettyblocks > ul > li > p a {
  color: var(--gmu-primary-green);
  text-decoration: underline;
  text-decoration-color: var(--gmu-accent-yellow);
}

@media (max-width: 600px) {
  .prettyblocks > ul {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Don't apply the left accent bar to the homepage Today's Hours title.
   It lives inside article > .layout__region.content but it's its own
   styled component (white text, centered, on the photo background).
   ════════════════════════════════════════════════════════════════════ */
.hours-section .hours-section__title,
.hours-section__title {
  border-left: none !important;
  padding-left: 0 !important;
  text-align: center !important;
}

/* ════════════════════════════════════════════════════════════════════
   Study Rooms locations table (and generic article body tables)
   Replaces the legacy gray-box table headers with brand-styled cells.
   ════════════════════════════════════════════════════════════════════ */
article table.locations,
article .layout__region.content table.locations,
article .layout__region--content table.locations {
  width: 100%;
  max-width: 100%;
  margin: 1rem 0 1.5rem;
  border-collapse: collapse;
  font-size: var(--font-size-16);
  background: var(--gmu-white, #fff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
}
article table.locations thead th {
  background: var(--gmu-primary-green, #005239) !important;
  color: var(--gmu-white, #fff) !important;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  text-align: left;
  padding: 0.75rem 1rem;
  border: none;
}
article table.locations tbody th,
article table.locations tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gmu-light-gray, #e5e5e5);
  background: transparent !important;
  vertical-align: top;
  color: var(--gmu-dark-gray);
}
article table.locations tbody th {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  color: var(--gmu-primary-green);
  white-space: nowrap;
}
article table.locations tbody tr:nth-child(even) th,
article table.locations tbody tr:nth-child(even) td {
  background: rgba(0, 82, 57, 0.04) !important;
}
article table.locations tbody tr:last-child th,
article table.locations tbody tr:last-child td {
  border-bottom: none;
}
article table.locations a {
  color: var(--gmu-primary-green);
  text-decoration: underline;
  text-decoration-color: var(--gmu-accent-yellow);
}
article table.locations p {
  margin: 0 0 0.35rem;
  line-height: 1.55;
}
article table.locations p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  article table.locations { font-size: var(--font-size-14); }
  article table.locations thead th,
  article table.locations tbody th,
  article table.locations tbody td { padding: 0.5rem 0.6rem; }
}

/* ════════════════════════════════════════════════════════════════════
   table.locations responsive tightening — 2026-05-19
   Reduce excess white space; let table size to its content rather than
   stretching full-width; horizontal scroll on narrow viewports.
   ════════════════════════════════════════════════════════════════════ */
article table.locations,
article .layout__region.content table.locations,
article .layout__region--content table.locations {
  width: auto !important;
  max-width: 100% !important;
  margin: 1rem 0 1.5rem !important;
  table-layout: auto;
}
article table.locations thead th,
article table.locations tbody th,
article table.locations tbody td {
  padding: 0.5rem 0.75rem !important;
}
article table.locations tbody th {
  white-space: nowrap;
}
/* Make the table scrollable on small screens instead of overflowing */
article .layout__region.content > div:has(> table.locations),
article .layout__region--content > div:has(> table.locations) {
  overflow-x: auto;
}
@media (max-width: 700px) {
  article table.locations,
  article .layout__region.content table.locations,
  article .layout__region--content table.locations {
    width: 100% !important;
    font-size: var(--font-size-14) !important;
  }
  article table.locations thead th,
  article table.locations tbody th,
  article table.locations tbody td {
    padding: 0.45rem 0.55rem !important;
  }
  article table.locations tbody th {
    white-space: normal;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Extra breathing room under the page H1 — applied site-wide except
   on the homepage (is-front). The page-title block renders the H1
   immediately above the page-content, so margin-bottom on the block
   keeps the H1 itself unchanged but pushes content down.
   ════════════════════════════════════════════════════════════════════ */
body:not(.is-front) #block-gmu-libraries-pagetitle,
body:not(.is-front) .block-page-title-block {
  margin-bottom: 2rem;
}
body:not(.is-front) #block-gmu-libraries-pagetitle h1,
body:not(.is-front) .block-page-title-block h1 {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
}

/* ════════════════════════════════════════════════════════════════════
   Webform polish — radio/checkbox labels next to the input (not below),
   plus consistent application across every webform on the site.
   The generic `.webform-submission-form label { display: block }` rule
   in basic-page.css was forcing radio/checkbox labels onto a new line.
   ════════════════════════════════════════════════════════════════════ */
.webform-submission-form .js-form-type-radio,
.webform-submission-form .js-form-type-checkbox,
.webform-submission-form .form-item--radio,
.webform-submission-form .form-item--checkbox {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.5rem;
}
.webform-submission-form .js-form-type-radio > input,
.webform-submission-form .js-form-type-checkbox > input,
.webform-submission-form .form-item--radio > input,
.webform-submission-form .form-item--checkbox > input {
  margin: 0;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--gmu-primary-green);
  cursor: pointer;
}
.webform-submission-form .js-form-type-radio > label,
.webform-submission-form .js-form-type-checkbox > label,
.webform-submission-form .js-form-type-radio > label.option,
.webform-submission-form .js-form-type-checkbox > label.option,
.webform-submission-form .form-item--radio > label,
.webform-submission-form .form-item--checkbox > label {
  display: inline-block !important;
  margin: 0 !important;
  font-weight: normal !important;
  color: var(--gmu-dark-gray) !important;
  font-size: var(--font-size-16);
  cursor: pointer;
  line-height: 1.4;
}

/* Group of radios/checkboxes (e.g. the institution selector) — stack
   the rows with a touch of breathing room. */
.webform-submission-form .js-webform-radios,
.webform-submission-form .js-webform-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.35rem;
}
/* Two-column radios when the source specifies it via webform settings. */
.webform-submission-form .webform-options-display-two-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1.5rem;
}

/* Fieldset legends used as section titles (e.g. "Contact Information",
   "Affiliation") — match the same look as h2.title elsewhere on the
   site so legacy webforms read consistently. */
.webform-submission-form fieldset > legend {
  font-family: var(--font-heading);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  color: var(--gmu-primary-green);
  border-left: 5px solid var(--gmu-accent-yellow);
  padding-left: 0.85rem;
  line-height: 1.25;
  margin: 1.5rem 0 1rem;
}
/* Don't apply the section-title look to the inner radios/checkboxes
   wrapper legends (those just label the field, not a section). */
.webform-submission-form .js-webform-type-radios > legend,
.webform-submission-form .js-webform-type-checkboxes > legend,
.webform-submission-form .webform-type-radios > legend,
.webform-submission-form .webform-type-checkboxes > legend {
  font-family: var(--font-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  color: var(--gmu-primary-green);
  border-left: none;
  padding-left: 0;
  margin: 0 0 0.35rem;
}

/* Make textareas and selects size consistently with text inputs across
   wrappers (some forms wrap fields differently than scrc/appointment). */
.webform-submission-form input[type="tel"],
.webform-submission-form input[type="number"],
.webform-submission-form input[type="date"],
.webform-submission-form input[type="time"],
.webform-submission-form input[type="search"] {
  width: 100%;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-body);
  font-size: var(--font-size-16);
  color: var(--gmu-black);
  background: #fafafa;
  border: 1.5px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.webform-submission-form input[type="tel"]:focus,
.webform-submission-form input[type="number"]:focus,
.webform-submission-form input[type="date"]:focus,
.webform-submission-form input[type="time"]:focus,
.webform-submission-form input[type="search"]:focus {
  border-color: var(--gmu-primary-green);
  box-shadow: 0 0 0 3px rgba(0, 82, 57, 0.12);
  outline: none;
  background: #fff;
}

/* Container width so all webforms have a consistent reading line length,
   not just the page-content default. */
.webform-submission-form {
  max-width: 720px;
}

/* ════════════════════════════════════════════════════════════════════
   Webform consistency pass — 2026-05-19
   Some webforms (/contact, /suggest, etc.) live INSIDE <article>; other
   webforms (/scrc/appointment) live OUTSIDE. The generic article body
   rules in basic-page.css were leaking into the embedded forms and
   making them look different from /scrc/appointment. This block
   isolates the form, then fills in a few field types that were never
   styled to begin with (date, time, file, password, number, range).
   ════════════════════════════════════════════════════════════════════ */

/* 1) Insulate webform from article body rules — the form is its own
      typographic system, the surrounding article shouldn't reach in. */
article .webform-submission-form p,
article .layout__region.content .webform-submission-form p,
article .layout__region--content .webform-submission-form p {
  color: inherit;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  font-size: var(--font-size-16);
}
article .webform-submission-form ul,
article .webform-submission-form ol,
article .layout__region.content .webform-submission-form ul,
article .layout__region.content .webform-submission-form ol,
article .layout__region--content .webform-submission-form ul,
article .layout__region--content .webform-submission-form ol {
  padding-left: 0;
  margin: 0;
  list-style: none;
}
article .webform-submission-form ul li,
article .webform-submission-form ol li,
article .layout__region.content .webform-submission-form li,
article .layout__region--content .webform-submission-form li {
  margin: 0;
  line-height: 1.4;
  color: inherit;
  font-size: inherit;
}
article .webform-submission-form a,
article .layout__region.content .webform-submission-form a,
article .layout__region--content .webform-submission-form a {
  color: var(--gmu-primary-green);
  text-decoration: underline;
  text-decoration-color: var(--gmu-accent-yellow);
}

/* 2) Description / help text — same look on every form, sits directly
      under the input regardless of wrapper context. */
.webform-submission-form .description,
.webform-submission-form .form-item--description,
.webform-submission-form .form-item__description {
  display: block;
  font-size: var(--font-size-14) !important;
  color: #666 !important;
  line-height: 1.5 !important;
  margin-top: 0.3rem !important;
  font-weight: normal !important;
}

/* 3) Fill in input types missing from basic-page.css. /suggest and
      /contact use textfield for what should be email/tel, but other
      forms use the proper types — and those proper types weren't
      styled, so they showed up as bare browser defaults. */
.webform-submission-form input[type="password"],
.webform-submission-form input[type="number"],
.webform-submission-form input[type="date"],
.webform-submission-form input[type="time"],
.webform-submission-form input[type="datetime-local"],
.webform-submission-form input[type="month"],
.webform-submission-form input[type="week"] {
  width: 100%;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-body);
  font-size: var(--font-size-16);
  color: var(--gmu-black, #1a1a1a);
  background: #fafafa;
  border: 1.5px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.webform-submission-form input[type="password"]:focus,
.webform-submission-form input[type="number"]:focus,
.webform-submission-form input[type="date"]:focus,
.webform-submission-form input[type="time"]:focus,
.webform-submission-form input[type="datetime-local"]:focus,
.webform-submission-form input[type="month"]:focus,
.webform-submission-form input[type="week"]:focus {
  border-color: var(--gmu-primary-green);
  box-shadow: 0 0 0 3px rgba(0, 82, 57, 0.12);
  outline: none;
  background: #fff;
}

/* Date + time often appear side by side in a wrapper (.webform-datelist,
   .container-inline) — keep them inline at consistent widths. */
.webform-submission-form .container-inline > .js-form-item,
.webform-submission-form .form--inline > .form-item,
.webform-submission-form .webform-time {
  display: inline-block;
  margin-right: 0.75rem;
  vertical-align: top;
}
.webform-submission-form input[type="date"],
.webform-submission-form input[type="time"] {
  width: auto;
  min-width: 180px;
}

/* 4) File upload styling — every form was rendering this raw. */
.webform-submission-form input[type="file"],
.webform-submission-form .form-managed-file {
  font-family: var(--font-body);
  font-size: var(--font-size-14);
  padding: 0.5rem 0;
}
.webform-submission-form input[type="file"]::file-selector-button {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-14);
  background: var(--gmu-primary-green);
  color: var(--gmu-white);
  border: none;
  border-radius: 3px;
  padding: 0.4rem 0.9rem;
  margin-right: 0.75rem;
  cursor: pointer;
  transition: background 0.18s ease;
}
.webform-submission-form input[type="file"]::file-selector-button:hover {
  background: #003d29;
}

/* 5) Required asterisk — make it consistent (was sometimes rendered as
      the word "(Required)" in tooltips, sometimes a red *). */
.webform-submission-form .form-required::after,
.webform-submission-form label.js-form-required::after {
  content: " *";
  color: #c0392b;
  font-weight: bold;
}

/* 6) Multi-button row (Submit + Reset/Preview) — align consistently. */
.webform-submission-form .webform-actions,
.webform-submission-form .form-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}
.webform-submission-form .button:not(.button--primary):not(.webform-button--submit),
.webform-submission-form input[type="reset"] {
  background: transparent;
  color: var(--gmu-primary-green);
  border: 1.5px solid var(--gmu-primary-green);
  font-weight: var(--font-weight-bold);
  padding: 0.55rem 1.4rem;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: var(--font-size-16);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.webform-submission-form .button:not(.button--primary):not(.webform-button--submit):hover,
.webform-submission-form input[type="reset"]:hover {
  background: var(--gmu-primary-green);
  color: var(--gmu-white);
}

/* 7) Error messages — consistent placement and color. */
.webform-submission-form .form-item--error-message,
.webform-submission-form .form-item__error-message {
  color: #c0392b;
  font-size: var(--font-size-14);
  margin-top: 0.25rem;
  font-weight: normal;
}
.webform-submission-form input.error,
.webform-submission-form textarea.error,
.webform-submission-form select.error {
  border-color: #c0392b;
}

/* 8) Make sure the form width cap applies inside <article> too — the
      article default uses the full content gutter and made /contact look
      much wider than /scrc/appointment. */
article .webform-submission-form,
article .layout__region.content .webform-submission-form,
article .layout__region--content .webform-submission-form {
  max-width: 720px;
}

/* ════════════════════════════════════════════════════════════════════
   Webform fieldset cleanup — 2026-05-19
   1. Strip the browser-default thin gray border around <fieldset>
      sections (visible on /learn/request, /ask/request).
   2. Override the legacy inline gray-bg <h3> section headers used as
      pseudo-fieldset titles on /suggest. Use the same green + yellow
      accent treatment as proper <legend> elements.
   ════════════════════════════════════════════════════════════════════ */

/* 1. Strip default fieldset border on every webform. The <legend>
      itself carries the section indicator (green text + yellow left
      accent), so the box is redundant. */
.webform-submission-form fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem !important;
  background: transparent !important;
}
.webform-submission-form fieldset > legend {
  width: 100%;
  display: block;
}
/* Add a touch of inner padding for sections that contain multiple fields */
.webform-submission-form fieldset.js-webform-type-fieldset,
.webform-submission-form fieldset.webform-type-fieldset {
  margin-bottom: 1.75rem !important;
}

/* 2. /suggest legacy h2/h3 section headers — strip the gray background
      and Word-style centering, then style to match the legend look. */
.webform-submission-form h2.rtecenter,
.webform-submission-form h3.rtecenter,
.webform-submission-form h2[style*="background-color"],
.webform-submission-form h3[style*="background-color"],
.webform-submission-form .form-item .rtecenter {
  background: transparent !important;
  background-color: transparent !important;
  text-align: left !important;
  font-family: var(--font-heading);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  color: var(--gmu-primary-green);
  border-left: 5px solid var(--gmu-accent-yellow) !important;
  padding-left: 0.85rem !important;
  line-height: 1.25;
  margin: 1.75rem 0 1rem !important;
}

/* ════════════════════════════════════════════════════════════════════
   /library-hours polish — 2026-05-19
   Reduce excess white space on the Today panel and add the new
   panel title "Today's Hours" so the LibCal widget's prev/next row
   shows the actual date.
   ════════════════════════════════════════════════════════════════════ */
/* Tighter panel padding — was 2rem on all sides */
.library-hours__panel {
  padding: 1rem 1.25rem 1.25rem !important;
  min-height: 0 !important;
}
/* Tighter Today table — was full-width with sparse rows */
#lc-hours-day .s-lc-w-today {
  max-width: 720px;
  margin: 0;
}
#lc-hours-day .s-lc-w-times td {
  padding: 0.45rem 0.85rem;
}
/* Make the prev/next + date row read as a single bar */
#lc-hours-day .s-lc-w-head {
  padding: 0.55rem 0.85rem !important;
  font-weight: var(--font-weight-bold);
}


/* ════════════════════════════════════════════════════════════════════
   Philanthropy section — suppress left accent bar on h2/h3 (keep on h1)
   ════════════════════════════════════════════════════════════════════ */
body[class*="is-path--philanthropy"] article .layout__region--content h1,
body[class*="is-path--philanthropy"] article .layout__region--content h2,
body[class*="is-path--philanthropy"] article .layout__region--content h3,
body[class*="is-path--philanthropy"] article .layout__region--content h2.title,
body[class*="is-path--philanthropy"] article .layout__region--content h3.title,
body[class*="is-path--philanthropy"] .page-content h2,
body[class*="is-path--philanthropy"] .page-content h3 {
  border-left: none !important;
  padding-left: 0 !important;
}


/* ════════════════════════════════════════════════════════════════════
   Display Suite multi-column layouts — responsive stacking on mobile.
   DS ships ds-3col / ds-2col with fixed % floats and no breakpoint, so
   on narrow viewports the columns overlap (e.g. /research-posters where
   Related Pages + main + workshop_calendar sidebar squash side-by-side).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ds-3col > .group-left,
  .ds-3col > .group-middle,
  .ds-3col > .group-right,
  .ds-2col > .group-left,
  .ds-2col > .group-right {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .ds-3col > .group-left,
  .ds-2col > .group-left {
    margin-bottom: 1.5rem !important;
  }
  .ds-3col > .group-middle {
    margin-bottom: 1.5rem !important;
  }
  .ds-3col::after,
  .ds-2col::after {
    content: "";
    display: block;
    clear: both;
  }
}


/* ════════════════════════════════════════════════════════════════════
   Mobile search bar — scale input + placeholder to fit narrow viewports.
   layout.css line 1510 forces font-size: 20px !important on
   .search-bar__input, which beats the same-specificity rule in
   search-bar.css on source-order. layout-overrides.css loads after both,
   so this is the only place a mobile override actually wins.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .search-bar__input {
    font-size: var(--font-size-14) !important;
    height: 42px !important;
    /* Right padding must clear the absolute-positioned 45px button
       plus a clearly-visible gap. 45 + ~20 = 65 keeps the placeholder
       comfortably away from the search icon. */
    padding: 0 65px 0 0.75rem !important;
    /* Show ellipsis when the placeholder is too long for the input. */
    text-overflow: ellipsis !important;
  }
  .search-bar__input::placeholder {
    font-size: var(--font-size-14) !important;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

@media (max-width: 380px) {
  .search-bar__input,
  .search-bar__input::placeholder {
    font-size: 0.8125rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Touch devices — kill the :hover-based dropdown display.
   layout.css lines 171/200 set `.menu-item-dropdown:hover .dropdown-menu
   { display: block !important }` for desktop. On phones, the first tap
   triggers :hover (showing the menu) so the user has to tap a SECOND
   time to fire the JS click handler that toggles the class. With this
   override the dropdown only opens when the .mobile-submenu-open class
   is added by mobile-menu.js — a single tap.
   ════════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .menu-item-dropdown:hover .dropdown-menu {
    display: none !important;
  }
  .menu-item-dropdown.mobile-submenu-open .dropdown-menu {
    display: block !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Mobile main menu — smooth accordion expand/collapse.
   layout.css uses `display: none / block !important` to show submenus,
   which makes the max-height transition snap instead of glide. Here we
   keep display:block always but animate max-height/opacity/visibility
   so the dropdown slides open and fades.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .main-navigation .menu-item-dropdown .dropdown-menu {
    /* Stay rendered so the transition can run; just collapse it. */
    display: block !important;
    max-height: 0 !important;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition:
      max-height 0.32s ease,
      opacity    0.22s ease 0.02s,
      visibility 0s linear   0.32s;
    will-change: max-height, opacity;
  }

  .main-navigation .menu-item-dropdown.mobile-submenu-open .dropdown-menu {
    max-height: 800px !important;
    opacity: 1;
    visibility: visible;
    transition:
      max-height 0.35s ease,
      opacity    0.25s ease,
      visibility 0s linear   0s;
  }

  /* Animate the rotation of the expand caret if one is present. */
  .main-navigation .menu-item-dropdown > a::after {
    transition: transform 0.25s ease;
  }
}


/* ════════════════════════════════════════════════════════════════════
   Mobile main menu — dedicated caret toggle button.
   On mobile, tapping the top-level link USED to expand the submenu,
   which meant the landing page (e.g. /search-and-access) was unreachable
   without using a desktop browser. mobile-menu.js now injects a
   <button class="mobile-submenu-toggle"> next to each top-level <a>, so:
     • Tapping the link text  → navigates to the section landing page.
     • Tapping the caret      → expands/collapses the submenu.
   Desktop is unaffected — the button is hidden by `display: none` above
   1230px so hover still drives the dropdown.
   ════════════════════════════════════════════════════════════════════ */
.mobile-submenu-toggle {
  display: none;
}

@media (max-width: 900px) {
  /* Each top-level <li> uses flex so link + button sit on one row.
     `width: 100%` is needed because layout.css makes the <li> a flex
     child of the menu (column direction), so we explicitly size it. */
  .main-navigation .menu-item-dropdown {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    width: 100%;
  }

  /* layout.css forces `width: 100%` on the <a> which would push the
     button to a new line — override so the link occupies the remaining
     row width and the button can sit beside it. */
  .main-navigation .menu-item-dropdown > a {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* The toggle button — yellow chevron beside the link. Tapping here
     only expands/collapses; tapping the link still navigates. */
  .mobile-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--gmu-accent-yellow, #ffc733);
    cursor: pointer;
    min-width: 56px;   /* WCAG minimum tap target + visual weight */
    padding: 0 1rem;
    font: inherit;
    /* Separator hairline between link and button */
    border-left: 1px solid rgba(255, 199, 51, 0.35);
  }

  .mobile-submenu-toggle:hover,
  .mobile-submenu-toggle:active {
    background: rgba(255, 199, 51, 0.12);
  }

  .mobile-submenu-toggle__icon {
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 700;
    display: inline-block;
    color: var(--gmu-accent-yellow, #ffc733);
    transition: transform 0.25s ease;
  }

  /* Rotate the "+" 45° to read as "×" when open. */
  .menu-item-dropdown.mobile-submenu-open .mobile-submenu-toggle__icon {
    transform: rotate(45deg);
  }

  .mobile-submenu-toggle:focus-visible {
    outline: 2px solid var(--gmu-accent-yellow, #ffc733);
    outline-offset: -2px;
  }

  /* Hide the old ::after pseudo-caret on the <a> so the toggle button
     is the sole caret on mobile (avoids the double-chevron look). */
  .main-navigation .menu-item-dropdown > a::after {
    display: none !important;
    content: none !important;
  }

  /* The submenu (.dropdown-menu) is the third flex child after the
     link + button; force it to break to a new row so it appears
     beneath both. */
  .main-navigation .menu-item-dropdown .dropdown-menu {
    flex: 1 0 100% !important;
    width: 100% !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Mobile overflow fixes — prevent content from being cut off on the
   right side at narrow viewports (phones).
   ════════════════════════════════════════════════════════════════════ */

/* Search bar: ensure tabs wrap earlier and container doesn't bleed */
.search-bar {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .search-bar__tabs {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .search-bar__tab {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  /* Prevent widerblocks inline-block elements from overflowing */
  .widerblocks2 ~ .widerblocks2,
  .widerblocks2:has(~ .widerblocks2),
  .widerblocks2:has(+ .widerblocks2) {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
  /* Prevent tables from causing horizontal overflow */
  .field--type-text-long table,
  .text-formatted table,
  .layout__region--content table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Subject librarians and staff directory grid: full-width on mobile */
@media (max-width: 640px) {
  .subject-librarians--cards,
  .staff-directory--cards {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .staff-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Location pages — tighten vertical spacing between sections.
   `.location-page` is a CSS grid with `row-gap: 2rem` AND most child
   sections in location-pages.css also carry `margin-bottom: 2rem`
   (and `margin-top: 1–2rem` on .location-address / .location-quick-links).
   The two stack additively, producing ~4rem between every section.
   Zero out the per-section margins and let row-gap own the spacing.
   ════════════════════════════════════════════════════════════════════ */
.location-page {
  row-gap: 1.25rem !important;
}
.location-page .location-info,
.location-page .location-description,
.location-page .location-contact,
.location-page .location-quick-links,
.location-page .location-address,
.location-page .mercer-gallery {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.location-page .location-description h2 {
  margin-bottom: 0.75rem !important;
}
.location-page .location-description p:last-child {
  margin-bottom: 0 !important;
}
@media (max-width: 768px) {
  .location-page {
    row-gap: 1rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   /welcome — image floats left at 300px. At narrow viewports the
   floated image leaves only a tiny strip beside it, so the first word
   ("The") wraps onto its own line beside the image and the rest of the
   paragraph drops below — an ugly orphan. Disable the float on phones
   so the image stacks above the text full-width.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .layout__region--content img[style*="float"],
  .layout__region--content img[style*="float: left"],
  .layout__region--content img[style*="float:left"],
  .layout__region--content img[style*="float: right"],
  .layout__region--content img[style*="float:right"] {
    float: none !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 1rem auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Mobile cutoff fix — staff cards (subject-librarians and friends).
   Existing overrides handled the wrapper, but at <400px the cards
   themselves overflow because:
     • `grid-template-columns: 1fr` resolves to `minmax(auto, 1fr)` and
       the auto-min lets long words (emails, hyphenated names, the long
       "Schedule an Appointment with …" button label) blow out the col.
     • The button + email anchors have no explicit overflow-wrap, so a
       single long token (e.g. the encoded mailto URL text inside the
       button) prevents the card from shrinking below content min-width.
     • `.content-with-sidebar` keeps a 3% horizontal padding, eating
       precious px on narrow phones — drop that further at <=420px.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .staff-directory__cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .staff-card,
  .staff-card--subject-lib {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .staff-card__body,
  .staff-card__contacts,
  .staff-card__contact,
  .staff-card__name,
  .staff-card__title,
  .staff-card__button,
  .staff-card__actions a {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .staff-card__subjects {
    max-width: 100%;
  }
  .staff-card__subject-tag {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 420px) {
  /* Reclaim horizontal space — the 3% gutters in .content-with-sidebar
     leave only ~340px of inner width at 362px viewport. */
  body .content-with-sidebar {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .staff-card,
  .staff-card--subject-lib {
    padding: 1rem 0.85rem !important;
  }
  .staff-card--subject-lib .staff-card__avatar {
    width: 72px;
    height: 72px;
  }
}