/* ============================================================
   Page grid
   ============================================================ */
#wrapper #container {
  display: grid !important;
  grid-template-columns: 250px minmax(0, 1fr) 280px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "left    content right"
    "footer  footer  footer";
  gap: 0 16px;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 12px 16px;
}

#wrapper #container > #header        { grid-area: header; }
#wrapper #container > #sidebar-left  { grid-area: left; }
#wrapper #container > #center        { grid-area: content; }
#wrapper #container > #sidebar-right { grid-area: right; }
#wrapper #container > #site-footer {
  grid-area: footer;
  text-align: center;
  color: #898989;
  font-size: 0.88em;
  padding: 1.5em 0 1em;
  border-top: 1px solid #d3e7f4;
  margin-top: 1em;
}

/* Cancel legacy float rules */
#wrapper #container #center,
#wrapper #container #sidebar-left,
#wrapper #container #sidebar-right,
#wrapper #container .sidebar {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
}
body.sidebars #center,  body.sidebar-left #center,  body.sidebar-right #center,
body.sidebars #squeeze, body.sidebar-left #squeeze, body.sidebar-right #squeeze {
  margin: 0 !important;
}
#wrapper #container #center #squeeze { min-height: 400px; }
#center img { max-width: 100%; height: auto; }
#sidebar-left .block, #sidebar-right .block { margin-bottom: 12px !important; }


/* ============================================================
   HEADER — desktop
   CSS Grid on #header itself:
     [toggle] [branding................] [account]
     [nav.....................................nav]
   ============================================================ */
#wrapper #container > #header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "toggle  branding  account"
    "nav     nav       nav";
  align-items: center;
  padding: 8px 12px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Flatten Drupal's clearfix region wrappers only — not the button */
#wrapper #container > #header > .clearfix {
  display: contents;
}

/* Place each block into its grid cell */
#mobile-menu-toggle                    { grid-area: toggle;   display: none; align-self: center; }
#block-garland-site-branding-custom    { grid-area: branding; align-self: center; }
#block-garland-account-menu-custom     { grid-area: account;  align-self: center; justify-self: end; }
#block-garland-primary-links-custom    { grid-area: nav; }

/* Strip clearfix / block wrapper interference */
#block-garland-site-branding-custom,
#block-garland-account-menu-custom,
#block-garland-primary-links-custom {
  float: none !important;
  clear: none !important;
  width: auto !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Branding ── */
#logo-floater { display: block; }

#branding {
  font-family: Helvetica, Arial, sans-serif;
}
#branding strong { font-weight: normal; }

#branding a,
#branding a:link,
#branding a:visited {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  text-shadow: #1659ac 0 1px 3px;
  line-height: 1.15;
  padding: 4px 0;
}
#branding a:hover { text-decoration: none; }

#logo {
  width: 64px;
  height: auto;
  flex-shrink: 0;
}

#branding span {
  font-size: 1.9rem;
  font-weight: bold;
  white-space: nowrap;
}

/* ── Account menu ── */
#block-garland-account-menu-custom ul:not(.contextual-links) {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#block-garland-account-menu-custom ul:not(.contextual-links) > li {
  margin: 0; padding: 0;
  background: none; list-style: none; float: none;
}
#block-garland-account-menu-custom ul:not(.contextual-links) > li > a,
#block-garland-account-menu-custom ul:not(.contextual-links) > li > a:link,
#block-garland-account-menu-custom ul:not(.contextual-links) > li > a:visited {
  color: #cde3f1;
  font-size: 0.82em;
  text-decoration: none;
  white-space: nowrap;
}
#block-garland-account-menu-custom ul:not(.contextual-links) > li > a:hover { text-decoration: underline; }

/* ── Primary nav ── */
#block-garland-primary-links-custom ul:not(.contextual-links) {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
#block-garland-primary-links-custom ul:not(.contextual-links) > li {
  margin: 0; padding: 0;
  background: none; list-style: none; float: none;
}
/* #block-garland-primary-links-custom ul:not(.contextual-links) > li > a,
#block-garland-primary-links-custom ul:not(.contextual-links) > li > a:link,
#block-garland-primary-links-custom ul:not(.contextual-links) > li > a:visited {
  display: block;
  padding: 0.55em 1em;
  color: #fff;
  font-size: 0.88em;
  text-decoration: none;
  white-space: nowrap;
  background: transparent url(../images/bg-navigation-item.png) no-repeat 50% 0;
}
#block-garland-primary-links-custom ul:not(.contextual-links) > li > a:hover,
#block-garland-primary-links-custom ul:not(.contextual-links) > li > a.is-active {
  background-image: url(../images/bg-navigation-item-hover.png);
} */


/* ── Left-side drawer — always present, hidden off-screen ── */
#mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 999;
}
#mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100%;
  background: linear-gradient(180deg, #2a0f00 0%, #9a1b08 100%);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.28s ease;
  overflow-y: auto;
  padding: 0;
  box-shadow: 3px 0 16px rgba(0,0,0,0.35);
  /* reset any inherited font/color */
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: #fff;
}
body.mobile-nav-open #mobile-nav-drawer {
  transform: translateX(0);
}
body.mobile-nav-open #mobile-nav-overlay {
  display: block;
}

/* Close button */
#mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
}
#mobile-nav-close:hover { color: #fff; }

/* Reset the Drupal block wrapper inside the drawer */
#mobile-nav-drawer .block {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

/* The nav menu list */
#mobile-nav-drawer ul:not(.contextual-links) {
  display: block !important;
  list-style: none !important;
  list-style-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#mobile-nav-drawer ul:not(.contextual-links) > li {
  display: block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-image: none !important;
  list-style: none !important;
  list-style-image: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
#mobile-nav-drawer ul:not(.contextual-links) > li > a,
#mobile-nav-drawer ul:not(.contextual-links) > li > a:link,
#mobile-nav-drawer ul:not(.contextual-links) > li > a:visited {
  display: block !important;
  padding: 13px 20px !important;
  color: #fff !important;
  font-size: 0.95em !important;
  font-weight: normal !important;
  text-decoration: none !important;
  background: none !important;
  background-image: none !important;
  line-height: 1.4 !important;
  white-space: normal !important;
}
#mobile-nav-drawer ul:not(.contextual-links) > li > a:hover,
#mobile-nav-drawer ul:not(.contextual-links) > li > a.is-active {
  background: rgba(255,255,255,0.12) !important;
}


/* ── Mobile drawer content ──
   The drawer renders {{ page.header }}, so hide branding and account
   menu; force the primary-nav block visible regardless of mobile rules. */
#mobile-nav-drawer #block-garland-site-branding-custom,
#mobile-nav-drawer #block-garland-account-menu-custom { display: none !important; }
#mobile-nav-drawer #block-garland-primary-links-custom { display: block !important; }
/* Ensure the region wrapper inside the drawer is a plain block */
#mobile-nav-drawer .region { display: block !important; padding: 0 !important; margin: 0 !important; }


/* ============================================================
   Tablet ≤ 1180px
   ============================================================ */
@media (max-width: 1180px) {
  #wrapper #container {
    grid-template-columns: 220px minmax(0, 1fr) 240px;
  }
  #branding span { font-size: 1.6rem; }
}


/* ============================================================
   Mobile ≤ 900px
   ============================================================ */
@media (max-width: 900px) {

  #wrapper #container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content"
      "left"
      "right"
      "footer";
    padding: 0 8px 12px;
    gap: 10px;
  }

  #wrapper #container > #center,
  #wrapper #container > #sidebar-left,
  #wrapper #container > #sidebar-right { width: 100% !important; }

  /* Header: branding left, hamburger right — no nav row in header */
  #wrapper #container > #header {
    grid-template-columns: 1fr auto;
    grid-template-areas: "branding toggle";
    grid-template-rows: auto;
    padding: 10px 12px;
    gap: 0 10px;
    align-items: center;
  }

  /* Hide account menu on mobile */
  #block-garland-account-menu-custom { display: none !important; }

  /* Nav block removed from header grid flow — becomes a fixed drawer */
  #block-garland-primary-links-custom { display: none !important; }

  /* Smaller branding */
  #logo { width: 40px; }
  #branding span { font-size: 1.15rem; white-space: normal; }

  /* Show hamburger on the RIGHT */
  #mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
  }
  #mobile-menu-toggle:hover,
  #mobile-menu-toggle:focus-visible {
    background: rgba(0,0,0,0.4);
    outline: 2px solid rgba(255,255,255,0.7);
    outline-offset: 2px;
  }
  .mobile-menu-toggle__icon {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    box-shadow: 0 5px 0 #fff, 0 -5px 0 #fff;
  }

  /* Content */
  #wrapper #container #center .right-corner { left: 0; background: none; }
  #wrapper #container #center .right-corner .left-corner {
    margin-left: 0; left: 0; padding: 12px; background: none; min-height: 0;
  }
  #wrapper #container #center #squeeze { background: #fff; min-height: 0; }

  #sidebar-left .block, #sidebar-right .block {
    margin-bottom: 10px !important;
    border: 1px solid #d6d6d6;
    background: #f8f8f8;
    border-radius: 4px;
    padding: 10px;
  }
}


/* ============================================================
   Small mobile ≤ 640px
   ============================================================ */
@media (max-width: 640px) {
  #wrapper #container { padding-left: 6px; padding-right: 6px; }
  #logo { width: 32px; }
  #branding span { font-size: 1rem; }
  #wrapper #container > #site-footer { font-size: 0.78em; }
  #mobile-nav-drawer { width: 230px; }
}