/* =============================================================================
   Piedmont Natural Gas / Power Pages (Bootstrap 5)
   THEME.CSS  —  Clean, Modern, Heavily Commented, Production-Ready

   HEADER LAYOUT (matches your template)
   ---------------------------------------------------------------------------
   TOP BLUE BANNER  (.top-banner-piedmont)
      [BACK TO PIEDMONTNG.COM]               [Sign In (small)]
   WHITE STRIP       (.header-white-separator)
      [LOGO via "Mobile Header" snippet, left-aligned]
   MAIN NAVBAR       (.navbar.navbar-dark.static-top)
      [Nav links only — no logo]

   BRAND TOKENS
     Primary (Piedmont Blue):      #0074B3
     Hover Blue (buttons/hover):   #3390C2
     Accent (electric underline):  #2F5FEF
     Logo target height:           32px

   ========================================================================== */


/* ============================================================================
   1) GLOBAL TOKENS & VARIABLES
   ========================================================================== */
:root {
  --png-blue:        #0074B3;   /* Piedmont Blue (Primary) */
  --png-blue-hover:  #3390C2;   /* Hover blue (links/buttons/nav hover) */
  --png-electric:    #2F5FEF;   /* Optional accent underline */

  --png-black:       #232222;
  --png-text:        #000000;
  --png-text-inv:    #FFFFFF;
  --png-border:      #BCBCBC;
  --png-light:       #EEEEEE;

  --png-focus-ring:  #2F5FEF;

  --png-navbar-height: 64px;
  --png-logo-height:   36px;
}

body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: var(--png-text);
  background-color: #FFFFFF;
  margin: 0;
  min-height: 100%;
}

*:focus { outline: 2px dashed #000; outline-offset: 2px; }
:focus-visible { outline: 3px solid var(--png-focus-ring); outline-offset: 2px; }


/* ============================================================================
   2) BASE TYPE & LINKS
   ========================================================================== */
h1, h2, h3, h4, h5, h6 { color: inherit; margin-top: 21px; margin-bottom: 10.5px; }
p { font-size: 16px; line-height: 1.6; }

h1.underline, h4.underline { border-bottom: 1px solid var(--png-border); padding-bottom: 21px; }

a { color: var(--png-electric); text-decoration: underline; }
a:hover, a:focus { color: var(--png-electric); text-decoration: underline; }

/* Chrome links (nav/footer/tiles) drop underline */
[role="navigation"] a, [role="contentinfo"] a, .toolbar a, a.list-group-item { text-decoration: none; }

/* Skip to content is hidden unless focused (keeps a11y) */
.skip-to-content a { position: absolute; left: -9999px; }
.skip-to-content a:focus { position: absolute; left: 0; top: 0; z-index: 2000; }


/* ============================================================================
   3) TOP BLUE BANNER (Back to PNG + small Sign-In)
   ========================================================================== */
.top-banner-piedmont {
  width: 100%;
  background-color: var(--png-blue);
  color: #FFF;
  padding: 6px 0;
}
.top-banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.top-banner-content a { color: #FFF; text-decoration: none; font-size: .85rem; font-weight: 600; letter-spacing: .3px; }
.top-banner-content a:hover { text-decoration: underline; }

/* Small Sign-In button inside top banner */
.top-banner-content .headerSignInButton {
  padding: 4px 12px !important;
  font-size: .80rem !important;
  line-height: 1.1 !important;
  background-color: var(--png-blue) !important;
  color: #FFF !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: background-color .15s ease-in-out;
}
.top-banner-content .headerSignInButton:hover,
.top-banner-content .headerSignInButton:focus { background-color: var(--png-blue-hover) !important; color: #FFF !important; }


/* ============================================================================
   4) WHITE STRIP WITH LOGO (left-aligned under “Back to PiedmontNG.com”)
   ========================================================================== */
/* ============================================================================
   WHITE BAR: LOGO (inside hamburger row)
   ========================================================================== */

/* Ensure editable snippet wrappers don't break layout */
.header-logo-container .xrm-editable-html,
.header-logo-container .xrm-attribute,
.header-logo-container .xrm-attribute-value,
.header-logo-container a {
  display: flex;
  align-items: center;
}

.header-logo-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* LEFT */
}
.header-logo-container img {
  height: var(--png-logo-height);
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.header-logo-container .siteTitle { font-size: 1rem; font-weight: 600; margin: 0 0 0 10px; color: var(--png-black); }


/* ============================================================================
   5) MAIN NAVBAR (links only — no brand/logo)
   ========================================================================== */
.navbar.navbar-dark.static-top {
  background-color: var(--png-blue) !important;
  border: 0;
  min-height: var(--png-navbar-height);
}

.menu-bar .navbar-nav .nav-link {
  color: var(--png-text-inv);
  padding: .75rem 1rem;
  line-height: 1.2;
}
.menu-bar .navbar-nav .nav-link:hover,
.menu-bar .navbar-nav .nav-link:focus {
  color: var(--png-text-inv);
  background-color: var(--png-blue-hover);
  text-decoration: none;
}
/* Accent underline for wide screens */
@media (min-width: 1200px) {
  .menu-bar .navbar-nav .nav-link:hover,
  .menu-bar .navbar-nav .nav-link:focus { box-shadow: inset 0 -3px 0 var(--png-electric); }
}

/* Dropdown menus: light surface on dark header */
.navbar-dark .dropdown-menu {
  color: #000; background-color: #FFF; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.navbar-dark .dropdown-item { color: #000; }
.navbar-dark .dropdown-item:hover, .navbar-dark .dropdown-item:focus { color: #000; background-color: #F5F7F9; }

/* Mobile toggler: solid blue chip with custom bars */
.navbar-dark .navbar-toggler {
  background-color: var(--png-blue);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px;
  padding: 6px 10px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.navbar-dark .navbar-toggler:focus-visible { outline: 3px solid var(--png-focus-ring); outline-offset: 2px; }
.navbar-dark .navbar-toggler .navbar-toggler-icon {
  background-image: none !important; width: 24px; height: 2px; background-color: #FFF; position: relative; box-shadow: none !important;
}
.navbar-dark .navbar-toggler .navbar-toggler-icon::before,
.navbar-dark .navbar-toggler .navbar-toggler-icon::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background-color: #FFF; }
.navbar-dark .navbar-toggler .navbar-toggler-icon::before { top: -7px; }
.navbar-dark .navbar-toggler .navbar-toggler-icon::after  { bottom: -7px; }

@media (max-width: 1199.98px) { #navbar.navbar-collapse { padding-block: .5rem; } }


/* ============================================================================
   6) BUTTON SYSTEM (Primary / Secondary / Shared CTAs)
   ========================================================================== */
.btn-primary {
  color: #FFF;
  background-color: var(--png-blue);
  border: 1px solid var(--png-blue);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  color: #FFF;
  background-color: var(--png-blue-hover);
  border-color: var(--png-blue-hover);
}

/* Secondary / outlined */
.btn-secondary, .btn-default {
  color: var(--png-blue);
  background-color: #FFF;
  border: 1px solid var(--png-blue);
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
.btn-default:hover,   .btn-default:focus,   .btn-default:active {
  color: var(--png-blue);
  background-color: #F2F4F7;
  border-color: var(--png-blue);
}

/* Global header CTA fallback (outside top banner usage) */
.headerSignInButton {
  display: inline-block;
  color: #FFF !important;
  background-color: var(--png-blue) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 4px;
  font-weight: 600;
  font-size: .95rem;
  padding: 8px 18px;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  transition: background-color .15s, box-shadow .15s;
}
.headerSignInButton:hover, .headerSignInButton:focus, .headerSignInButton:active {
  background-color: var(--png-blue-hover) !important; color: #FFF !important;
}

/* Card gallery "Register" button — unified with header button */
.button1 {
  display: inline-block;
  color: #FFF !important;
  background-color: var(--png-blue) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 4px;
  font-weight: 600; font-size: .95rem; line-height: 1.2;
  padding: 8px 18px; text-decoration: none !important; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  transition: background-color .15s, box-shadow .15s;
}
.button1:hover, .button1:focus, .button1:active { background-color: var(--png-blue-hover) !important; color: #FFF !important; }

/* Focus ring for clickables */
.btn:focus-visible, .headerSignInButton:focus-visible, .button1:focus-visible, a.btn:focus-visible {
  outline: 3px solid var(--png-focus-ring); outline-offset: 2px;
}

/* Treat WebForm submit buttons like .button1 */
#NextButton,
input.submit-btn,
input.next.submit-btn {
  /* same as .button1 */
  display: inline-block;
  color: #FFF !important;
  background-color: var(--png-blue) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 4px;
  font-weight: 600; font-size: .95rem; line-height: 1.2;
  padding: 8px 18px; text-decoration: none !important; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  transition: background-color .15s, box-shadow .15s;
}
#NextButton:hover, #NextButton:focus, #NextButton:active,
input.submit-btn:hover, input.submit-btn:focus, input.submit-btn:active,
input.next.submit-btn:hover, input.next.submit-btn:focus, input.next.submit-btn:active {
  background-color: var(--png-blue-hover) !important;
  color: #FFF !important;
}



/* ============================================================================
   7) FORMS & INPUTS (LIGHT)
   ========================================================================== */
.help-block.error,
label.col-form-label.required:before,
.crmEntityFormView .cell div.info.required label:after,
.crmEntityFormView .cell div.info div.validators,
.crmEntityFormView .validator-text { color: #A94442; }

.crmEntityFormView, .entitylist { background-color: #FFF; color: #000; border: 1px solid #F2F2F2; }

/* Optional inline search “pill” */
.section-inline-search .input-group .input-group-text { background-color: #FFF; border-right: none; }
.section-inline-search .input-group .form-control { height: 60px; border-left: none; box-shadow: none; }
.section-inline-search .input-group .form-control:focus { border-color: #CCC; border-right: none; box-shadow: none; }


/* ============================================================================
   8) CARDS & CONTENT SURFACES (LIGHT)
   ========================================================================== */
.card { border: none; border-radius: 0; box-shadow: none; }
.card-header { border-bottom: 0; background-color: transparent; }
.card-body { border-top: none; }


/* ============================================================================
   9) FOOTER (Duke/Piedmont BS5 Footer)
   ========================================================================== */
.duke-footer { color: #FFF; background-color: var(--png-blue); font-family: "Segoe UI", Arial, sans-serif; }
.duke-footer .footer-top { width: 100%; min-height: 130px; background-color: var(--png-blue); display: flex; align-items: center; }
.duke-footer .footer-heading { font-size: 18px; font-weight: 600; color: #FFF; margin-bottom: 12px; }
.duke-footer .footer-links li { margin-bottom: 6px; }
.duke-footer .footer-links a { font-size: 15px; color: #FFF !important; text-decoration: none; }
.duke-footer .footer-links a:hover { text-decoration: underline; }
.duke-footer .footer-social i { font-size: 1.5rem; color: #FFF !important; }
.duke-footer .footer-bottom { width: 100%; min-height: 36px; background-color: var(--png-blue); font-size: 12px; display: flex; align-items: center; }
.duke-footer .footer-bottom a { color: #FFF !important; font-size: 15px; text-decoration: none; }
.duke-footer .footer-bottom a:hover { text-decoration: underline; }
.list-social-links { list-style: none; padding-left: 0; margin: 0; }
.list-social-links li { display: inline-block; margin: 0 10px; }
.list-social-links a { color: #FFF; }


/* ============================================================================
   10) MISCELLANEOUS (KEEP TIGHT)
   ========================================================================== */
.breadcrumb, .page-heading .breadcrumb { display: none !important; } /* hidden by request */
.homelink, a.homelink:hover, a.homelink:focus { color: #FFF; text-decoration: none; }

.pagination .page-link {
  background-color: transparent; border: 0; margin-left: 10px; width: 40px; height: 40px; text-align: center;
}
.pagination .page-link:hover, .pagination .page-link:focus { background-color: transparent; border-color: transparent; }
.pagination .page-item.active .page-link { border-color: transparent; border-radius: 50%; }

.apo-feedback { display: none !important; } /* internal UX badge off */

/* =============================================================================
  REQUEST RESERVATION — TILE UI (Building / Room / Layout + Suggested Times)
  Makes selected choices very obvious.
============================================================================= */

.tile-grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.tile{
  position: relative;                 /* enables badge positioning */
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: .9rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 120px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
}

/* Stronger selected visuals */
.tile.selected{
  border: 2px solid var(--png-blue) !important;
  background: #f5f9ff; /* subtle blue tint */
  box-shadow: 0 0 0 4px rgba(0,116,179,.20);
  transform: translateY(-1px);
}

.tile .title{
  font-weight: 600;
  line-height: 1.2;
}

.tile .meta{
  color: #6c757d;
  font-size: .9rem;
}

.tile.selected .title{
  color: #0b5ed7; /* slightly deeper blue for emphasis */
}

/* Selected badge (top-right) */
.tile .selected-badge{
  display: none;
  position: absolute;
  bottom: .6rem;
  right: .6rem;
  background: var(--png-blue);
  color: #fff;
  border-radius: 999px;
  font-size: .75rem;
  padding: .2rem .55rem;
  font-weight: 700;
  line-height: 1;
  align-items: center;
  gap: .35rem;
}

.tile.selected .selected-badge{
  display: inline-flex;
}

.tile .selected-badge .check{
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  font-size: .85rem;
}

/* Tile actions row */
.tile .actions{
  margin-top: auto;
  display: flex;
  gap: .5rem;
  justify-content: space-between;
  align-items: center;
}

/* Pills */
.pill{
  display: inline-block;
  font-size: .75rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: #e9f7ef;
  color: #198754;
  font-weight: 700;
}

.pill.muted{
  background: #f1f3f5;
  color: #6c757d;
  font-weight: 600;
}

/* Suggested time chips */
.time-grid{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.time-btn{
  border: 1px solid var(--png-blue);
  background: #fff;
  color: var(--png-blue);
  padding: .45rem .65rem;
  border-radius: 999px;
  font-size: .9rem;
  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.time-btn:hover{
  background: #f2f7fb;
}

.time-btn.selected{
  background: var(--png-blue);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(0,116,179,.18);
}

.time-sub{
  display: block;
  font-size: .75rem;
  opacity: .85;
}

/* Optional: make buttons look “selected” as well */
.tile.selected .btn.btn-primary{
  box-shadow: 0 0 0 3px rgba(0,116,179,.18);
}

/* Optional: keyboard focus visibility for tiles/chips */
.tile:focus-within{
  outline: 3px solid var(--png-focus-ring);
  outline-offset: 2px;
}
.time-btn:focus-visible{
  outline: 3px solid var(--png-focus-ring);
  outline-offset: 2px;
}

/* Duke Energy themed active list-group item */
.list-group-item.active {
  background-color:  var(--png-blue) !important;
  border-color: transparent;
  color: #ffffff !important;
  font-weight: 600;
}

/* Hamburger button container */
.whitebar-toggler {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
}

/* The hamburger bars */
.whitebar-toggler-bars,
.whitebar-toggler-bars::before,
.whitebar-toggler-bars::after {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #005986; /* Duke blue */
  position: relative;
  transition: all 0.25s ease-in-out;
  content: '';
}

/* Top bar */
.whitebar-toggler-bars::before {
  position: absolute;
  top: -7px;
  left: 0;
}

/* Bottom bar */
.whitebar-toggler-bars::after {
  position: absolute;
  top: 7px;
  left: 0;
}

/* Soften transition between hero and content */
.hero + .container,
.hero + .container-fluid {
  margin-top: -12px;
}

/* Give the list group a cleaner card feel */
.list-group {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* ============================================================================
   HEADER FIX PACK (hamburger + logo alignment)
   Paste at END of theme.css so it wins.
   ========================================================================== */

/* White bar wrapper: match your previous separator spacing */
.header-whitebar {
  width: 100%;
  background: #fff;
  padding: 14px 0;               /* tweak to taste (was 24px in old separator) */
}

/* Row: force correct layout */
.header-whitebar-row {
  display: flex;
  align-items: center;           /* vertical centering */
  justify-content: flex-start;
  gap: 12px;
}

/* Hamburger stays fixed size and doesn't stretch row */
.header-whitebar-row .whitebar-toggler {
  flex: 0 0 auto;
}

/* Logo container should take remaining space but not wrap oddly */
.header-whitebar-row .header-logo-container {
  flex: 1 1 auto;
  min-width: 0;                  /* prevents flex overflow weirdness */
  display: flex;
  align-items: center;
}

/* Power Pages editable wrappers: make them behave like inline-flex */
.header-whitebar-row .header-logo-container .xrm-editable-html,
.header-whitebar-row .header-logo-container .xrm-attribute,
.header-whitebar-row .header-logo-container .xrm-attribute-value,
.header-whitebar-row .header-logo-container a {
  display: flex;
  align-items: center;
}

/* Kill the EMPTY H1 spacing that is breaking header height */
.header-whitebar-row .header-logo-container h1.siteTitle,
.header-whitebar-row .header-logo-container .siteTitle {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  height: auto !important;
}

/* Override inline margin from snippet image */
.header-whitebar-row .header-logo-container img {
  height: 41px;                  /* matches your snippet */
  width: auto;
  margin: 0 !important;          /* overrides inline margin */
  display: block;
}

/* Optional: if you still want a little gap between icon and logo */
.header-whitebar-row .header-logo-container a {
  gap: 10px;
  text-decoration: none;
}

/* Hamburger bars: use Piedmont blue token */
.whitebar-toggler-bars,
.whitebar-toggler-bars::before,
.whitebar-toggler-bars::after {
  background-color: var(--png-blue) !important;
}

/* ============================================================================
   OFFCANVAS NAV — Duke/Piedmont “Navigation” style
   Applies to your: .offcanvas.png-offcanvas + .png-offcanvas-nav
   ========================================================================== */

/* Offcanvas panel sizing + typography */
.png-offcanvas.offcanvas-start {
  width: 360px;              /* adjust to match screenshot (320–380 is common) */
  max-width: 90vw;
  background: #fff;
}

/* Header (Navigation + close X) */
.png-offcanvas .offcanvas-header {
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.png-offcanvas .offcanvas-title {
  font-size: 28px;
  font-weight: 300;          /* light like your screenshot */
  color: #5a5a5a;
  margin: 0;
}

/* Make the close button look like the screenshot (simple X) */
.png-offcanvas .btn-close {
  opacity: 1;
  filter: none;              /* ensure it’s visible on white */
}

/* Body spacing */
.png-offcanvas .offcanvas-body {
  padding: 0;                /* we’ll pad the list items instead */
}

/* Navigation list container */
.png-offcanvas-nav {
  margin: 0;
  padding: 10px 0;
}

/* Nav items */
.png-offcanvas-nav .nav-item {
  margin: 0;
}

/* Links (list-like rows with separators) */
.png-offcanvas-nav .nav-link {
  display: flex;
  align-items: center;          /* was invalid: left */
  justify-content: flex-start;  /* IMPORTANT: keep content left */
  gap: 12px;                    /* spacing between accent + text */

  padding: 14px 18px;
  margin: 0;

  color: var(--png-blue);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none !important;

  border-bottom: 1px solid rgba(0,0,0,.10);
  background: #fff;
  transition: background-color .15s ease, color .15s ease;

  text-align: left;             /* force left text alignment */
}

.png-offcanvas-nav .nav-link:hover,
.png-offcanvas-nav .nav-link:focus {
  background: rgba(0,116,179,.06);        /* soft blue tint */
  color: var(--png-blue);
}

/* Focus ring consistent */
.png-offcanvas-nav .nav-link:focus-visible {
  outline: 3px solid var(--png-focus-ring);
  outline-offset: 2px;
}

/* Optional: a left accent bar like the screenshot */
.png-offcanvas-nav .nav-link::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 20px;
  margin-right: 12px;
  background: transparent;
  border-radius: 2px;
  flex: 0 0 auto;
}

.png-offcanvas-nav .nav-link:hover::before,
.png-offcanvas-nav .nav-link:focus::before {
  background: var(--png-blue);
}

/* Chevron on items that have subnav (your markup has nested ULs) */
.png-offcanvas-nav .nav-item:has(ul) > .nav-link::after {
  content: "›";
  font-size: 22px;
  line-height: 1;
  color: rgba(0,0,0,.55);
  margin-left: 12px;
}

/* If you have nested ULs (children), indent + lighter look */
.png-offcanvas-nav ul.nav {
  padding-left: 0;
  margin: 0;
}

.png-offcanvas-nav ul.nav.ms-3 {
  margin-left: 0 !important;          /* remove Bootstrap ms-3 push */
  border-left: 4px solid rgba(0,116,179,.18);
  background: rgba(0,116,179,.03);
}

.png-offcanvas-nav ul.nav.ms-3 .nav-link {
  padding-left: 32px;                 /* visual indent */
  font-weight: 400;
  color: var(--png-blue);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* If you want “section headers” like For Your Home / For Your Business
   you’ll need to add a class in markup. See section 3 below. */
.png-offcanvas-nav .nav-section-title {
  padding: 12px 18px 8px;
  font-size: 14px;
  color: rgba(0,0,0,.55);
  font-weight: 600;
  text-transform: none;
}

h2.tab-title {
  display: none !important;
}

/* ============================================================================
   LOCATIONS HEADER POLISH (left-aligned, cleaner hierarchy)
   Paste at END of theme.css so it wins.
   ========================================================================== */

/* Ensure these pages stay left-aligned (container centered, text left) */
#buildingShell,
#roomShell {
  text-align: left !important;
}

/* Make the first “Building” header block feel like a proper section */
#buildingShell > .mb-3:first-child,
#roomShell > .mb-3:first-child {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.10);
  margin-bottom: 16px !important;
}

/* Reduce the “Building” label and make it look like a section label */
#buildingShell .fw-semibold,
#roomShell .fw-semibold {
  letter-spacing: .2px;
}

/* Make the building/room title feel like the main heading without huge whitespace */
#buildingShell .h4,
#roomShell .h4,
#roomShell .h5 {
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin: 6px 0 6px !important;
}

/* Make the metadata lines tighter and slightly softer */
#buildingShell .text-muted,
#roomShell .text-muted {
  margin: 2px 0 !important;
  color: rgba(0,0,0,.65) !important;
}

/* Building-level request button should sit naturally on the left, not “orphaned” */
#buildingShell .mt-2 {
  margin-top: 10px !important;
}

#buildingShell .mt-2 a.btn,
#buildingShell .mt-2 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px !important;
  border-radius: 10px;
}

/* If your tile action rule is pushing buttons to the right, do NOT affect header buttons */
#buildingShell .mt-2 .btn,
#buildingShell .mt-2 a.btn {
  margin-left: 0 !important;
}

/* Keep action buttons grouped on the right as a neat cluster */
#locationsShell .tile .actions,
#buildingShell .tile .actions,
#roomShell .tile .actions {
  justify-content: flex-start;
}

#locationsShell .tile .actions .btn,
#locationsShell .tile .actions a.btn,
#buildingShell .tile .actions .btn,
#buildingShell .tile .actions a.btn,
#roomShell .tile .actions .btn,
#roomShell .tile .actions a.btn {
  margin-left: 0 !important;
}

#locationsShell .tile .actions .pill,
#buildingShell .tile .actions .pill,
#roomShell .tile .actions .pill {
  margin-right: auto; /* pill left, buttons stay together on right */
}
/* Re-enable breadcrumbs inside our custom Locations breadcrumb wrapper */
.png-breadcrumb-wrap .breadcrumb {
  display: flex;
}

/* Make sure breadcrumbs can be clicked */
.png-breadcrumb-wrap {
  position: relative;
  z-index: 10;
}

.png-breadcrumb-wrap a {
  pointer-events: auto !important;
}

/* ============================================================================
   CONTENT RAIL ALIGNMENT (match header hamburger/logo left inset)
   Goal: left-aligned content inside a centered max-width container
   ========================================================================== */

/* One source of truth for page width + side padding */
:root{
  --content-max: 1320px;     /* pick 960–1200; 1100 matches your screenshot well */
  --content-pad: 24px;       /* matches the “logo inset” feel */
}

/* Apply rail to your Locations page shells */
#locationsShell,
#buildingShell,
#roomShell{
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-pad);
  padding-right: var(--content-pad);
  padding-bottom: 32px;
}

/* Breadcrumb rail should align exactly with content */
.png-breadcrumb-wrap{
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-pad);
  padding-right: var(--content-pad);
}

/* If your breadcrumb <ol> has default padding/margins, zero them */
.png-breadcrumb{
  margin: 10px 0 16px !important;
  padding: 0 !important;
}

/* Make sure the tile grids fill the rail */
#locationsShell .tile-grid,
#buildingShell .tile-grid,
#roomShell .tile-grid{
  width: 100%;
}

/* Optional: tighten the "Building" header block to the rail and improve spacing */
#buildingShell .loc-header,
#roomShell .loc-header{
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,.10);
}

/* Mobile: reduce padding so it doesn’t feel cramped */
@media (max-width: 575.98px){
  :root{ --content-pad: 12px; }
}

/* ===== Layout alignment ===== */
.container{
  max-width: 1200px;
}

.pp-topbar{
  background: #0b74b8;
  color: #fff;
  font-size: 13px;
}
.pp-topbar-inner{
  display: flex;
  align-items: center;
  padding: 6px 0;
}
.pp-topbar-link{
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}
.pp-topbar-link:hover{ text-decoration: underline; }

/* ===== Header ===== */
.pp-header{
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}
.pp-header-inner{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
}

/* Brand area */
.pp-brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.pp-title{
  color: #0b74b8;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}

/* Center nav */
.pp-nav{
  flex: 1;
}
.pp-nav-list{
  list-style: none;
  display: flex;
  align-items: right;
  justify-content: flex-end;  /* <-- key change */
  gap: 18px;
  margin: 0;
  padding: 0;
}
.pp-nav-link{
  color: #1f2a37;
  font-size: 13px;
  text-decoration: none;
  padding: 6px 2px;
  white-space: nowrap;
}
.pp-nav-link:hover{
  color: #0b74b8;
  text-decoration: underline;
}

/* Right actions */
.pp-actions{
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.pp-cta{
  display: inline-block;
  background: #ffffff;
  border: 1px solid #0b74b8;
  color: #0b74b8;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
}
.pp-cta:hover{
  background: rgba(11,116,184,0.06);
}
.pp-auth,
.pp-cu{
  color: #0b74b8;
  font-size: 13px;
  text-decoration: none;
}
.pp-auth:hover{ text-decoration: underline; }

/* Skip link (keep accessible, can be visually subtle) */
.skip-to-content a{
  position: absolute;
  left: -999px;
  top: 0;
}
.skip-to-content a:focus{
  left: 12px;
  top: 12px;
  z-index: 10000;
  background: #fff;
  padding: 8px 10px;
  border: 1px solid #ccc;
}

/* Header row */
.pp-header-inner{
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Brand (logo + title) */
.pp-brand{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* CENTER NAV — this is the key fix */
.pp-nav{
  flex: 1;                 /* take available space */
  display: flex;
  justify-content: right; /* center links horizontally */
}



/* Nav links */
.pp-nav-link{
  color: #1f2a37;
  font-size: 13px;
  text-decoration: none;
  padding: 6px 2px;
  white-space: nowrap;
}

.pp-nav-link:hover{
  color: #0b74b8;
  text-decoration: underline;
}

/* Right-side actions */
.pp-actions{
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}


/* Primary nav link color in header */
.pp-header .pp-nav-link,
.pp-header .pp-nav-link:visited {
  color: #1f2a37 !important;  /* dark gray */
  text-decoration: none;
}

/* Hover/active */
.pp-header .pp-nav-link:hover,
.pp-header .pp-nav-link:focus {
  color: #0b74b8 !important;  /* your blue */
  text-decoration: underline;
}

/* Optional: show active page */
.pp-header .pp-nav-link[aria-current="page"],
.pp-header .pp-nav-link.active {
  color: #0b74b8 !important;
  font-weight: 600;
}

/* ============================
   FIX: Header primary nav link color
   ============================ */

/* Set a base color for header navigation context */
header.pp-header nav[role="navigation"] {
  color: #1f2a37; /* dark gray */
}

/* Explicitly color the links */
header.pp-header nav[role="navigation"] a {
  color: #1f2a37;
  text-decoration: none;
}

/* Hover / focus */
header.pp-header nav[role="navigation"] a:hover,
header.pp-header nav[role="navigation"] a:focus {
  color: var(--png-blue);
  text-decoration: underline;
}

/* Visited links should NOT turn purple */
header.pp-header nav[role="navigation"] a:visited {
  color: #1f2a37;
}

/* =========================================================
   FINAL OVERRIDE: Header primary nav link colors (BLUE)
   Put this at the absolute END of theme.css
   ========================================================= */

header.pp-header a.pp-nav-link,
header.pp-header a.pp-nav-link:link,
header.pp-header a.pp-nav-link:visited {
  color: var(--png-blue) !important;     /* #0074B3 */
  opacity: 1 !important;                /* prevents “greyed” look */
  text-decoration: none !important;
}

header.pp-header a.pp-nav-link:hover,
header.pp-header a.pp-nav-link:focus {
  color: var(--png-blue-hover) !important;  /* #3390C2 */
  text-decoration: underline !important;
}

header.pp-header a.pp-nav-link:focus-visible {
  outline: 3px solid var(--png-focus-ring);
  outline-offset: 2px;
}
/* =========================================================
   HEADER RIGHT GROUP — FINAL (place at VERY END of theme.css)
   ========================================================= */

.pp-header-inner{
  display: flex;
  align-items: center;
  gap: 24px;
}

.pp-brand{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* This pushes nav+actions as a single cluster to the right */
.pp-right{
  margin-left: auto;           /* <-- key */
  display: flex;
  align-items: center;
  gap: 18px;                   /* spacing between nav and actions */
}

.pp-nav{
  flex: 0 0 auto;              /* nav no longer stretches */
  display: flex;
}

.pp-nav-list{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
}

.pp-actions{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

/* =========================================================
   HEADER TITLE: "Events & Seminars" (Duke Energy header-sm)
   Put this at the absolute END of theme.css
   ========================================================= */

.pp-title{
  color: var(--text-brand, #0074B3);

  /* header/header-sm */
  font-family: var(--header-sm-family, "Duke Energy");
  font-size: var(--header-sm-size, 28px);
  font-style: normal;
  font-weight: var(--header-sm-weight, 400);
  line-height: var(--header-sm-line-height, 39.2px); /* 140% */
  letter-spacing: var(--header-xs-letter-spacing, 0);

  /* keep it behaving nicely in the header row */
  white-space: nowrap;
  margin: 0;
}


/* =========================================================
   FINAL: Header logo sizing (balances 28px "Events & Seminars")
   Put at VERY END of theme.css
   ========================================================= */

:root{
  --header-logo-height-desktop: 36px;
  --header-logo-height-mobile:  30px;
}

/* Apply only in the header white bar / brand area */
.pp-header .header-logo-container img,
.pp-header .pp-brand img,
.header-whitebar .header-logo-container img{
  height: var(--header-logo-height-desktop) !important;
  width: auto !important;
  max-height: none !important;
}

/* Slightly smaller on small screens */
@media (max-width: 991.98px){
  .pp-header .header-logo-container img,
  .pp-header .pp-brand img,
  .header-whitebar .header-logo-container img{
    height: var(--header-logo-height-mobile) !important;
  }
}

/* =========================================================
   FOOTER — Duke / Piedmont (Bootstrap 5)
   ========================================================= */

.duke-footer{
  background-color: var(--png-blue);
  color: #fff;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* Top footer */
.footer-top{
  padding: 32px 0;
}

.footer-top-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Brand */
.footer-brand-text{
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

/* Footer nav */
.footer-nav{
  flex: 1;
}

.footer-links{
  list-style: none;
  display: flex;
  gap: 24px;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

.footer-links a{
  color: #fff !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.footer-links a:hover,
.footer-links a:focus{
  text-decoration: underline;
}

/* Bottom bar */
.footer-bottom{
  background-color: #005986; /* slightly darker Duke blue */
  font-size: 12px;
  padding: 10px 0;
}

.footer-bottom-inner{
  display: flex;
  justify-content: center;
  text-align: center;
}

/* Responsive tweaks */
@media (max-width: 767.98px){
  .footer-top-inner{
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links{
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px;
  }

  .footer-bottom-inner{
    text-align: left;
  }
}

/* =========================================================
   FOOTER BAR — single-row inline links like screenshot
   Put at VERY END of theme.css so it wins
   ========================================================= */

.duke-footer {
  background: var(--png-blue);
  color: #fff;
}

/* The blue bar container */
.duke-footer-bar {
  background: var(--png-blue);
  padding: 14px 0;
}

/* Layout: left copyright + right links */
.duke-footer-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* left block + right block */
  gap: 24px;
}

/* Left text */
.duke-footer-left {
  font-size: 12px;
  white-space: nowrap;
}

/* Right nav wrapper */
.duke-footer-right {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Links list: single row, consistent spacing */
.duke-footer-links {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;         /* IMPORTANT: prevents wrapping on desktop */
  gap: 22px;                 /* IMPORTANT: consistent spacing */
  margin: 0;
  padding: 0;
  white-space: nowrap;       /* IMPORTANT: keep link text on one line */
}

/* Link styling */
.duke-footer-links a,
.duke-footer-links a:visited {
  color: #fff !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 500;
}

.duke-footer-links a:hover,
.duke-footer-links a:focus {
  text-decoration: underline !important;
}

/* Responsive: allow wrapping on smaller screens */
@media (max-width: 991.98px) {
  .duke-footer-bar-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .duke-footer-links {
    flex-wrap: wrap;         /* allow wrap on small screens */
    white-space: normal;
    gap: 12px 18px;
  }

  .duke-footer-left {
    white-space: normal;
  }
}

/* =========================================================
   LOCATIONS UI (Shared) — Buildings / Building / Room
   Put at VERY END of theme.css so it wins
   ========================================================= */

/* Scope all location pages */
.png-locations .loc-wrap,
.png-building  .loc-wrap,
.png-room      .loc-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 24px;
}

/* Breadcrumb rail */
.png-locations .png-breadcrumb-wrap,
.png-building  .png-breadcrumb-wrap,
.png-room      .png-breadcrumb-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.png-breadcrumb{
  margin: 10px 0 16px !important;
  padding: 0 !important;
}

/* Header */
.png-locations .loc-header,
.png-building  .loc-header,
.png-room      .loc-header{
  margin: 10px 0 16px;
}

.png-locations .loc-title,
.png-building  .loc-title,
.png-room      .loc-title{
  font-size: 1.35rem;
  font-weight: 650;
  margin: 0 0 6px;
}

.png-locations .loc-subtitle,
.png-building  .loc-subtitle,
.png-room      .loc-subtitle{
  color: #667085;
  margin: 0;
}

.png-locations .loc-actions,
.png-building  .loc-actions,
.png-room      .loc-actions{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Grid */
.png-locations .loc-grid,
.png-building  .loc-grid,
.png-room      .loc-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1100px){
  .png-locations .loc-grid,
  .png-building  .loc-grid,
  .png-room      .loc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  .png-locations .loc-grid,
  .png-building  .loc-grid,
  .png-room      .loc-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   BUILDING page: force 2 columns (Rooms grid)
   Put AFTER the shared loc-grid rules
   ========================================================= */

.png-building .loc-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Keep existing breakpoints */
@media (max-width: 680px){
  .png-building .loc-grid{ grid-template-columns: 1fr !important; }
}

/* Cards */
.png-locations .loc-card,
.png-building  .loc-card,
.png-room      .loc-card{
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  display: flex !important;
  flex-direction: column !important;
  min-height: 180px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.png-locations .loc-card:hover,
.png-building  .loc-card:hover,
.png-room      .loc-card:hover{
  border-color: #b9d1ee;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  transform: translateY(-1px);
}

.png-locations .loc-card-title,
.png-building  .loc-card-title,
.png-room      .loc-card-title{
  line-height: 1.25;
  font-size: 1.02rem;
  font-weight: 650;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.png-locations .loc-meta,
.png-building  .loc-meta,
.png-room      .loc-meta{
  color: #667085;
  font-size: .92rem;
}
.png-locations .loc-meta div,
.png-building  .loc-meta div,
.png-room      .loc-meta div{ margin-bottom: 6px; }

.png-locations .loc-card-footer,
.png-building  .loc-card-footer,
.png-room      .loc-card-footer{
  margin-top: auto;
  padding-top: 14px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.png-locations .loc-pill,
.png-building  .loc-pill,
.png-room      .loc-pill{
  border: 1px solid #e5e7eb;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .85rem;
  color: #667085;
}

.png-locations .loc-btns,
.png-building  .loc-btns,
.png-room      .loc-btns{
  display: flex !important;
  gap: 10px;
  align-items: center;
}

/* Buttons */
.png-locations .loc-primary,
.png-building  .loc-primary,
.png-room      .loc-primary{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: #0b66c3;
  color: #fff !important;
  text-decoration: none !important;
  font-size: .92rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.png-locations .loc-primary:hover,
.png-building  .loc-primary:hover,
.png-room      .loc-primary:hover{ background: #084f97; }

.png-locations .loc-link,
.png-building  .loc-link,
.png-room      .loc-link{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: #fff;
  color: #0b66c3 !important;
  text-decoration: none !important;
  font-size: .92rem;
  font-weight: 600;
  border: 1px solid #c9ddf5;
  cursor: pointer;
  white-space: nowrap;
}
.png-locations .loc-link:hover,
.png-building  .loc-link:hover,
.png-room      .loc-link:hover{ background: #f6f9fc; }

/* =========================================================
   ROOM PAGE: De-congest / add breathing room
   Put at VERY END of theme.css
   ========================================================= */

.png-room .loc-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 44px; /* more top/bottom space */
}

.png-room .png-breadcrumb-wrap{
  padding-top: 10px;
  padding-bottom: 6px;
}

/* Give sections some vertical rhythm */
.png-room .loc-header{
  margin: 14px 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.png-room .loc-grid{
  gap: 22px; /* more space between cards */
  margin-top: 10px;
}

/* Title a bit smaller + cleaner line-height */
.png-room .loc-title{
  font-size: 1.55rem;          /* down from feeling “heavy” */
  line-height: 1.15;
  margin-bottom: 10px;
  letter-spacing: .1px;
}

/* Turn Building/Capacity lines into a calm meta row */
.png-room .loc-subtitle{
  margin: 4px 0;
  color: rgba(0,0,0,.62);
  font-size: .95rem;
}

/* Make the action buttons feel like a “toolbar”, not a pile */
.png-room .loc-actions{
  margin-top: 14px;
  gap: 10px;
}

.png-room .room-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 8px 0 0;
}
.png-room .room-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: rgba(0,0,0,.02);
  color: rgba(0,0,0,.70);
  font-size: .92rem;
}
.png-room .room-chip strong{
  font-weight: 650;
  color: rgba(0,0,0,.80);
}

/* Softer cards */
.png-room .loc-card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 18px;
  min-height: 160px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.png-room .loc-card:hover{
  border-color: rgba(0,116,179,.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* Make layout title breathe */
.png-room .loc-card-title{
  font-size: 1.05rem;
  margin-bottom: 12px;
}

/* Reduce meta noise */
.png-room .loc-meta{
  font-size: .92rem;
  color: rgba(0,0,0,.62);
}

/* Footer spacing */
.png-room .loc-card-footer{
  padding-top: 16px;
}

/* Make the pill less prominent */
.png-room .loc-pill{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}

/* Buttons: slightly smaller and consistent */
.png-room .loc-primary,
.png-room .loc-link{
  height: 36px;       /* a touch taller = less cramped */
  border-radius: 12px;
}



.png-room .room-section{
  margin-top: 18px;
  margin-bottom: 10px;
}
.png-room .room-section-title{
  font-weight: 650;
  color: rgba(0,0,0,.80);
  font-size: .95rem;
}
.png-room .room-section-count{
  font-weight: 500;
  color: rgba(0,0,0,.55);
}
.png-room .room-section-sub{
  margin-top: 2px;
  font-size: .90rem;
  color: rgba(0,0,0,.55);
}

.png-building .loc-card{
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: none;
}

.png-building .loc-card:hover{
  border-color: rgba(0,116,179,.35);
  box-shadow: none;
}

.png-building .loc-card-title{
  font-size: 0.98rem;
  font-weight: 600;
}


/* ============================
   Building header meta
   ============================ */
.png-building .building-meta{
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: .92rem;
  color: rgba(0,0,0,.55);
}

.png-building .building-meta span + span::before{
  content: "·";
  margin-right: 14px;
  color: rgba(0,0,0,.35);
}

/* ============================
   Rooms section divider
   ============================ */
.png-building .rooms-section{
  margin-top: 24px;
  margin-bottom: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.png-building .rooms-title{
  font-size: .95rem;
  font-weight: 650;
  color: rgba(0,0,0,.75);
  margin: 0;
}

/* Building page: make room title the "details" link */
.png-building .room-title-link{
  color: inherit;
  text-decoration: none;
}

.png-building .room-title-link:hover{
  color: var(--png-blue);
  text-decoration: underline;
}

/* =========================================================
   LOCATIONS: Whole-card overlay (clean, predictable)
   Put at VERY END of theme.css so it wins
   ========================================================= */

.png-locations .loc-card{
  position: relative;
  cursor: pointer;
}

.png-locations .card-overlay-link{
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 14px; /* match card radius */
  text-decoration: none;
}

/* Only direct children above overlay (predictable stacking) */
.png-locations .loc-card > *{
  position: relative;
  z-index: 2;
}

/* =========================================================
   LOCATIONS PAGE: De-congest / add breathing room (like Rooms)
   Put at VERY END of theme.css so it wins
   ========================================================= */

/* More top/bottom space like Rooms */
.png-locations .loc-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 44px; /* match Rooms vibe */
}

.png-locations .png-breadcrumb-wrap{
  padding-top: 10px;
  padding-bottom: 6px;
}

/* Header rhythm (optional divider like Rooms) */
.png-locations .loc-header{
  margin: 14px 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Title styling consistent with Rooms calm spacing */
.png-locations .loc-title{
  font-size: 1.55rem;
  line-height: 1.15;
  margin-bottom: 10px;
  letter-spacing: .1px;
}

/* Subtitle lighter + tighter */
.png-locations .loc-subtitle{
  margin: 4px 0;
  color: rgba(0,0,0,.62);
  font-size: .95rem;
}

/* Grid spacing slightly larger to reduce “busy” feeling */
.png-locations .loc-grid{
  gap: 22px;
  margin-top: 10px;
}

/* Softer cards like Rooms */
.png-locations .loc-card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 18px;
  min-height: 180px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.png-locations .loc-card:hover{
  border-color: rgba(0,116,179,.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* Make title breathe (slightly bigger than shared) */
.png-locations .loc-card-title{
  font-size: 1.05rem;
  margin-bottom: 12px;
}

/* Reduce meta noise */
.png-locations .loc-meta{
  font-size: .92rem;
  color: rgba(0,0,0,.62);
}

/* Footer spacing */
.png-locations .loc-card-footer{
  padding-top: 16px;
}

/* If you keep the "Click to view rooms" hint, keep it subtle */
.png-locations .loc-card-footer .loc-meta{
  margin: 0 !important;
  font-size: .9rem !important;
  color: rgba(0,0,0,.55) !important;
}

/* Buttons (if/when you add them back on Locations) */
.png-locations .loc-primary,
.png-locations .loc-link{
  height: 36px;
  border-radius: 12px;
}

/* LOCATIONS: put footer content on the bottom-right */
.png-locations .loc-card-footer{
  justify-content: flex-end !important;
}

/* Optional: keep the hint looking subtle */
.png-locations .loc-card-footer .loc-meta{
  margin: 0 !important;
  text-align: right;
}

/* =========================================================
   BREADCRUMB ALIGNMENT — Locations / Building / Room
   Put at VERY END of theme.css so it wins
   ========================================================= */

/* Make breadcrumb wrapper share the same rail as loc-wrap */
.png-locations .png-breadcrumb-wrap,
.png-building  .png-breadcrumb-wrap,
.png-room      .png-breadcrumb-wrap{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 6px 24px 0 !important; /* tighter top padding */
}

/* Tighten breadcrumb spacing (this is the main “odd” feeling) */
.png-locations .png-breadcrumb,
.png-building  .png-breadcrumb,
.png-room      .png-breadcrumb{
  margin: 0 0 10px !important;    /* remove the 10px top margin */
  padding: 0 !important;
}

/* Ensure it shows even if you have global breadcrumb hiding */
.png-breadcrumb-wrap .breadcrumb{
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}

/* Optional: make it visually lighter */
.png-breadcrumb-wrap .breadcrumb-item,
.png-breadcrumb-wrap .breadcrumb-item a{
  font-size: 12px;
  color: rgba(0,0,0,.55);
  text-decoration: none;
}

.png-breadcrumb-wrap .breadcrumb-item a:hover{
  text-decoration: underline;
}

/* =========================================================
   RESPONSIVE HEADER (AUTO-COLLAPSE WHEN IT DOESN'T FIT)
   Paste at VERY END of theme.css so it wins
   ========================================================= */

/* Base header layout (always) */
.pp-header { background:#fff; border-bottom:1px solid #e6e6e6; position:relative; }
.pp-header-inner{
  display:flex;
  align-items:center;
  gap:18px;
  padding:10px 0;
  max-width:100%;
  box-sizing:border-box;
}

/* Brand should be allowed to shrink (prevents pushing toggle offscreen) */
.pp-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;              /* CRITICAL for overflow logic */
}
.pp-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:60vw;           /* keeps title from eating the whole row */
}

/* Desktop default: show right cluster, hide hamburger */
.pp-menu-toggle{ display:none; }
.pp-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
}

/* Nav list inline */
.pp-nav{ display:flex; }
.pp-nav-list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:18px;
  margin:0;
  padding:0;
}
.pp-actions{
  display:flex;
  align-items:center;
  gap:14px;
  white-space:nowrap;
}

/* ---------- Collapsed mode (JS toggles body.pp-collapsed) ---------- */
/* ---------- Collapsed mode (JS toggles body.pp-collapsed) ---------- */
body.pp-collapsed .pp-menu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;

  margin-left: 0;        /* ✅ stop pushing right */
  margin-right: 10px;    /* ✅ create space before logo */

  background:transparent;
  border:none;
  color: var(--png-blue, #0074B3);
  font-size:26px;
  line-height:1;
  cursor:pointer;
}

/* When collapsed, hide the inline right cluster (we'll show it in the dropdown) */
body.pp-collapsed .pp-right{
  display:none;
}

/* Dropdown panel (only when collapsed + menu open) */
body.pp-collapsed.pp-menu-open .pp-right{
  display:block;
  position:absolute;
  left:0;
  right:0;
  top:100%;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.10);
  box-shadow:0 12px 24px rgba(0,0,0,.12);
  z-index:2000;

  /* padding includes safe-area to prevent “half off screen” issues */
  padding:12px calc(12px + env(safe-area-inset-right, 0px)) 16px
           calc(12px + env(safe-area-inset-left, 0px));
  box-sizing:border-box;
}

/* Stack nav vertically in dropdown */
body.pp-collapsed.pp-menu-open .pp-nav{ display:block; }
body.pp-collapsed.pp-menu-open .pp-nav-list{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
body.pp-collapsed.pp-menu-open .pp-nav-link{
  display:block;
  padding:10px 6px;
  font-size:16px;
}

/* Stack actions under nav */
body.pp-collapsed.pp-menu-open .pp-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}
body.pp-collapsed.pp-menu-open .pp-cta,
body.pp-collapsed.pp-menu-open .pp-auth{
  width:100%;
  text-align:center;
}

/* Optional: prevent horizontal scroll caused by header panel */
body.pp-collapsed.pp-menu-open{ overflow-x:hidden; }

/* =========================================================
   EVENT PAGES — BUTTON CLEANUP (PASTE AT VERY END OF theme.css)
   Purpose:
   - Normalize legacy inline styles on buttons
   - Make all CTAs consistent (height, radius, weight)
   - Make mobile layout not look cramped
   ========================================================= */

/* 1) Neutralize common inline junk that makes buttons float weirdly */
button.button1,
button.viewAllEvents,
a.button1,
a.viewAllEvents {
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* 2) Base button style (applies to your legacy class="button1" + viewAllEvents) */
.button1,
.viewAllEvents,
button.button1,
button.viewAllEvents,
a.button1,
a.viewAllEvents {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 40px !important;
  padding: 0 16px !important;

  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;

  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease !important;
}

/* 3) Primary style (solid Piedmont blue) */
.button1,
button.button1,
a.button1 {
  background: var(--png-blue, #0074B3) !important;
  color: #fff !important;
  border: 1px solid var(--png-blue, #0074B3) !important;
}

.button1:hover,
button.button1:hover,
a.button1:hover {
  background: var(--png-blue-hover, #3390C2) !important;
  border-color: var(--png-blue-hover, #3390C2) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
  transform: translateY(-1px);
}

/* 4) Secondary style (outline) for "All events" if you want it to look secondary */
button.viewAllEvents,
a.viewAllEvents,
.viewAllEvents {
  background: #fff !important;
  color: var(--png-blue, #0074B3) !important;
  border: 1px solid rgba(0,116,179,.35) !important;
}

button.viewAllEvents:hover,
a.viewAllEvents:hover,
.viewAllEvents:hover {
  background: rgba(0,116,179,.06) !important;
  border-color: var(--png-blue, #0074B3) !important;
}

/* 5) Mobile: make these buttons full-width so they stop looking cramped */
@media (max-width: 575.98px) {
  .button1,
  .viewAllEvents,
  button.button1,
  button.viewAllEvents,
  a.button1,
  a.viewAllEvents {
    width: 100% !important;
  }

  /* If they are inside a centered container, add spacing */
  .button1,
  .viewAllEvents {
    margin-top: 10px !important;
  }
}

/* =========================================================
   EVENT HUB “3 CARDS” CTA ROW — MAKE BUTTONS CONSISTENT
   (Paste directly UNDER the previous block)
   ========================================================= */

/* Buttons inside cards/tiles (Bootstrap or portal defaults) */
.card a.btn,
.card button.btn,
.tile a.btn,
.tile button.btn,
.list-group a.btn,
.list-group button.btn {
  height: 40px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

/* Mobile: stack card buttons nicely */
@media (max-width: 575.98px) {
  .card a.btn,
  .card button.btn,
  .tile a.btn,
  .tile button.btn {
    width: 100% !important;
  }
}

/* =========================================================
   FIX UGLY INLINE-STYLED TILE BUTTONS (loc-primary)
   Paste at VERY END of theme.css so it wins
   ========================================================= */

/* 1) Normalize the "Request a Reservation" / tile buttons that have inline styles */
a.loc-primary {
  /* consistent size + shape */
  height: 40px !important;
  min-width: 160px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;

  /* brand */
  background-color: var(--png-blue, #0074B3) !important;
  color: #fff !important;
  border: 1px solid var(--png-blue, #0074B3) !important;

  /* typography */
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;

  /* remove “cheap” look */
  box-shadow: none !important;
  text-decoration: none !important;
}

/* 2) Hover/focus polish (looks modern, not chunky) */
a.loc-primary:hover {
  background-color: var(--png-blue-hover, #3390C2) !important;
  border-color: var(--png-blue-hover, #3390C2) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
}

a.loc-primary:focus,
a.loc-primary:focus-visible {
  outline: 3px solid var(--png-focus-ring, #2F5FEF) !important;
  outline-offset: 2px !important;
}

/* 3) Mobile: stop cramped 3-up buttons; make them full width */
@media (max-width: 575.98px) {
  a.loc-primary {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* If inside a button row, make that row stack nicely */
  .loc-btns {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }
}

/* =========================================================
   FINAL CONTENT RAIL LOCK (desktop + mobile)
   Prevents subtle over-width drift
   ========================================================= */

/* Single source of truth for content width */
:root {
  --png-content-max: 1180px;
  --png-content-pad: 24px;
}

/* Force ALL main containers to respect the rail */
.container,
.container-fluid {
  max-width: var(--png-content-max) !important;
  padding-left: var(--png-content-pad) !important;
  padding-right: var(--png-content-pad) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Mobile: slightly tighter padding */
@media (max-width: 575.98px) {
  :root {
    --png-content-pad: 12px;
  }
}

/* =========================================================
   ANDROID FIX: Event Hub CTA cards should NOT be 3-up on small screens
   Scoped to containers that hold loc-primary buttons (Event Hub cards)
   ========================================================= */

/* 1) Fix hamburger slight clipping on Android */
@media (max-width: 520px) {
  .pp-header-inner { padding-right: 12px !important; }
  .pp-menu-toggle { margin-right: 10px !important; }
}

/* 2) Event Hub: force CTA cards to stack instead of 3 skinny columns */
@media (max-width: 520px) {

  /* Find the immediate multi-column wrapper that contains your CTA buttons */
  .loc-primary {
    white-space: normal !important;   /* allow wrap in button label if needed */
  }

  /* If the CTA cards are in a grid */
  .loc-primary.closest-fix,
  .loc-primary {
    /* no-op placeholder – selector below does the real work */
  }

  /* Common patterns: cards inside a row/sectionBlockLayout/column layout */
  .sectionBlockLayout .row,
  .sectionBlockLayout .container,
  .sectionBlockLayout .container-fluid {
    max-width: 100%;
  }

  /* This targets the CTA card row if it's using Bootstrap columns */
  .sectionBlockLayout .col-lg-4,
  .sectionBlockLayout .col-md-4,
  .sectionBlockLayout .col-sm-4 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* If the CTA cards are using a grid class (many of your pages do) */
  .tile-grid,
  .loc-grid {
    grid-template-columns: 1fr !important;
  }

  /* Make the card content breathe */
  .tile,
  .loc-card {
    min-width: 0 !important;
  }

  /* Clamp titles so they don't squeeze the layout */
  .tile .title,
  .loc-card-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.25;
  }
}

/* =========================================================
   FULL-WIDTH FIX (Android + mobile) — Topbar, Header, Hero Image
   Paste at VERY END of theme.css so it wins
   ========================================================= */

/* 1) Always allow the BLUE TOP BAR to go full width */
.pp-topbar {
  width: 100% !important;
  max-width: none !important;
}

/* Keep the topbar's inner content aligned nicely (do NOT full-bleed the text) */
.pp-topbar .pp-topbar-inner {
  max-width: var(--png-content-max, 1180px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--png-content-pad, 24px);
  padding-right: var(--png-content-pad, 24px);
  box-sizing: border-box;
}

/* 2) Ensure the header background spans full width (even if inner is constrained) */
.pp-header {
  width: 100% !important;
  max-width: none !important;
}

/* Header inner stays aligned to your rail */
.pp-header .pp-header-inner {
  max-width: var(--png-content-max, 1180px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--png-content-pad, 24px);
  padding-right: calc(var(--png-content-pad, 24px) + env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

/* 3) HERO / ABOUT SECTION: force image/banner area to be truly full width */
#aboutSection {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The container inside #aboutSection is currently what is "railing" it */
#aboutSection > .container,
#aboutSection .container {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Force hero image to fill its column */
#aboutSection img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}




/* Clickable location cards */
.loc-card[role="link"] {
  cursor: pointer;
}

/* Keyboard focus (accessibility) */
.loc-card[role="link"]:focus {
  outline: 2px solid #0d6efd; /* or your brand color */
  outline-offset: 3px;
}

.loc-card-image {
  width: 100%;
  height: 200px;              /* ⬅ increase this (180–240 is typical) */
  border-radius: 10px;
  overflow: hidden;
  background: #fafafa;
  margin-bottom: 10px;
  border: 1px solid rgba(0,0,0,.05);
}

.loc-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* ⬅ this is the key change */
  display: block;
}

/* ========================================================================
   OPTION A — BOOTSTRAP-ONLY HAMBURGER + TOP NAV FIX
   Scope: TOP NAV BAR ONLY
   Does NOT touch buttons, cards, layouts, footer, or content
   Paste at VERY END of theme.css
   ======================================================================== */

/* ------------------------------------------------------------------------
   1) DEFINE THE COLLAPSE BREAKPOINT
   - Collapse at 992px (Bootstrap lg)
   - Fixes: hamburger only appearing when "tiny"
   ------------------------------------------------------------------------ */

@media (max-width: 991.98px) {

  /* ----------------------------------------------------------------------
     2) FORCE BOOTSTRAP TO CONTROL VISIBILITY
     ---------------------------------------------------------------------- */

  /* Show hamburger */
  .navbar .navbar-toggler {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Hide nav links by default */
  .navbar .navbar-collapse {
    display: none !important;
    width: 100%;
  }

  /* Show nav links ONLY when hamburger is open */
  .navbar .navbar-collapse.show {
    display: block !important;
  }

  /* ----------------------------------------------------------------------
     3) CLEAN VERTICAL STACK (NO SCATTERING)
     ---------------------------------------------------------------------- */

  .navbar .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0.5rem 0 0 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .navbar .navbar-nav .nav-item {
    width: 100% !important;
  }

  .navbar .navbar-nav .nav-link {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    text-align: left !important;
    white-space: normal !important;
  }
}

/* ------------------------------------------------------------------------
   4) DESKTOP (>= 992px)
   - Explicitly restore inline nav
   - Explicitly hide hamburger
   ------------------------------------------------------------------------ */

@media (min-width: 992px) {

  .navbar .navbar-toggler {
    display: none !important;
  }

  .navbar .navbar-collapse {
    display: flex !important;
    width: auto !important;
  }

  .navbar .navbar-nav {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
  }
}

/* ------------------------------------------------------------------------
   5) SAFETY NET
   - Prevent ANY custom header systems from interfering
   - We are NOT deleting them — just neutralizing them for nav
   ------------------------------------------------------------------------ */

.pp-header,
.pp-header-inner,
.pp-right,
.pp-nav,
.pp-nav-list,
.pp-actions,
.pp-menu-toggle,
.whitebar-toggler,
.whitebar-toggler-bars,
.png-offcanvas,
.png-offcanvas-nav {
  /* no-op for layout; nav is handled by Bootstrap */
}

/* =========================================================
   BOOTSTRAP NAVBAR — MOVE HAMBURGER TO LEFT
   Affects TOP NAV ONLY
   ========================================================= */

@media (max-width: 991.98px) {

  /* Make navbar a flex row we can reorder safely */
  .navbar {
    display: flex;
    align-items: center;
  }

  /* Hamburger FIRST (left side) */
  .navbar .navbar-toggler {
    order: 0;
    margin-right: 12px;   /* space between hamburger and next item */
    margin-left: 0;
  }

  /* Brand/logo AFTER hamburger */
  .navbar .navbar-brand {
    order: 1;
    margin-right: auto;  /* pushes nav links off to the right */
  }

  /* Collapsed nav content (dropdown) */
  .navbar .navbar-collapse {
    order: 2;
    width: 100%;
  }
}

/* =========================================================
   BOOTSTRAP NAVBAR — MOBILE BEHAVIOR (992px and below)
   ========================================================= */
@media (max-width: 991.98px) {

  /* Navbar stays flex so we can reorder items */
  .navbar {
    display: flex;
    align-items: center;
  }

  /* Hamburger visible and FIRST (left) */
  .navbar .navbar-toggler {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    order: 0;
    margin-right: 12px;
    margin-left: 0;
  }

  /* Brand/logo after hamburger */
  .navbar .navbar-brand {
    order: 1;
    margin-right: auto;
  }

  /* Collapse container hidden by default */
  .navbar .navbar-collapse {
    display: none !important;
    order: 2;
    width: 100%;
  }

  /* Shown ONLY when hamburger is open */
  .navbar .navbar-collapse.show {
    display: block !important;
  }

  /* Clean vertical stack */
  .navbar .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0.5rem 0 0 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .navbar .navbar-nav .nav-item {
    width: 100% !important;
  }

  .navbar .navbar-nav .nav-link {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    text-align: left !important;
    white-space: normal !important;
  }
}

/* =========================================================
   FORCE HAMBURGER (navbar-toggler) TO LEFT — Power Pages safe
   Paste at VERY END of theme.css
   ========================================================= */
@media (max-width: 991.98px) {

  /* Power Pages navbars usually flex on the inner container, not .navbar */
  .navbar > .container,
  .navbar > .container-fluid {
    display: flex !important;
    align-items: center !important;
  }

  /* Put the toggler first (left) and remove any auto-margin push */
  .navbar .navbar-toggler {
    order: -1 !important;
    margin-left: 0 !important;
    margin-right: 12px !important;

    /* Safety: override Bootstrap utility classes that push it right */
    margin-inline-start: 0 !important;
    margin-inline-end: 12px !important;
  }

  /* If Bootstrap/markup applied ms-auto/me-auto to the toggler, neutralize it */
  .navbar .navbar-toggler.ms-auto,
  .navbar .navbar-toggler.me-auto {
    margin-left: 0 !important;
    margin-right: 12px !important;
  }

  /* Keep brand immediately after toggler */
  .navbar .navbar-brand {
    order: 0 !important;
    margin-right: auto !important; /* pushes everything else right */
  }

  /* Collapse area comes after brand */
  .navbar .navbar-collapse {
    order: 1 !important;
    width: 100% !important;
  }
}

/* =========================================================
   HEADER ALIGNMENT FIX — KEEP LEFT ALIGN ON COLLAPSE
   ========================================================= */

/* Base layout */
.pp-header-inner {
  display: flex;
  align-items: center;
}

/* Default desktop behavior */
.pp-right {
  margin-left: auto; /* push right-side cluster */
}

/* ---- COLLAPSED MODE (mobile / overflow) ---- */
body.pp-collapsed .pp-right {
  margin-left: 0;        /* STOP pushing everything right */
}

/* Left cluster stays left-aligned */
body.pp-collapsed .pp-menu-toggle {
  margin-right: 10px;    /* space between hamburger and logo */
}


/* =========================================================
   MOBILE: REMOVE CONTENT WIDTH CONSTRAINT
   ========================================================= */
@media (max-width: 767.98px) {

  .container,
  .container-fluid {
    max-width: 100% !important;     /* ✅ stop artificial narrowing */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;  /* mobile-friendly gutter */
    padding-right: 12px !important;
  }
}

/* =========================================================
 MOBILE OVERRIDE — REMOVE GLOBAL CONTENT RAIL
 ========================================================= */
@media (max-width: 767.98px) {

  .container,
  .container-fluid {
    max-width: none !important;   /* 🔥 THIS is the missing piece */
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

}

/* =========================================================
 MOBILE: KILL *ALL* CONTENT RAILS
 ========================================================= */
@media (max-width: 767.98px) {

  /* Kill every max-width rail */
  .container,
  .container-fluid,
  .pp-header-inner,
  .pp-topbar-inner,
  .png-breadcrumb-wrap,
  .loc-wrap,
  #locationsShell,
  #buildingShell,
  #roomShell {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

}

/* =========================================================
 MOBILE: KILL *ALL* CONTENT RAILS
 ========================================================= */
@media (max-width: 767.98px) {

  /* Kill every max-width rail */
  .container,
  .container-fluid,
  .pp-header-inner,
  .pp-topbar-inner,
  .png-breadcrumb-wrap,
  .loc-wrap,
  #locationsShell,
  #buildingShell,
  #roomShell {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

}

/* =========================================================
   MOBILE: FULL-BLEED HERO / LANDING SECTIONS (NO "FAKE GAP")
   Paste at VERY END of theme.css
   ========================================================= */

/* Phones */
@media (max-width: 767.98px) {

  /* 1) Make hero / landing sections full-bleed */
  #aboutSection,
  .hero,
  .event-hero,
  .event-hub-hero {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 2) Ensure any Bootstrap container nested INSIDE those sections
        does NOT re-introduce padding/rail */
  #aboutSection > .container,
  #aboutSection > .container-fluid,
  #aboutSection .container,
  #aboutSection .container-fluid,
  .hero > .container,
  .hero > .container-fluid,
  .hero .container,
  .hero .container-fluid,
  .event-hero > .container,
  .event-hero > .container-fluid,
  .event-hero .container,
  .event-hero .container-fluid,
  .event-hub-hero > .container,
  .event-hub-hero > .container-fluid,
  .event-hub-hero .container,
  .event-hub-hero .container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3) Keep images inside hero full width */
  #aboutSection img,
  .hero img,
  .event-hero img,
  .event-hub-hero img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   Power Pages mobile width fix
   Remove designer-injected padding from layout wrappers
   ========================================================= */

@media (max-width: 1024px) {

  /* Section row wrapper */
  .row.sectionBlockLayout {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Column wrapper (this is your exact inspected element) */
  .columnBlockLayout {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  
}

/* =========================================================
   Power Pages HERO alignment fix (Galaxy S8+ / iPad)
   ========================================================= */

@media (max-width: 1024px) {

  /* 1) Override inline padding on section rows */
  .row.sectionBlockLayout {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Visually anchor the hero heading to the left edge */
  .columnBlockLayout > h1 {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

}

/* =========================================================
   RESPONSIVE RESET: Stop Bootstrap + Power Pages fighting
   ========================================================= */

/* Below desktop (phones + tablets, incl iPad Mini / Pro) */
@media (max-width: 1199.98px) {

  /* Kill Bootstrap container behavior */
  .container,
  .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Neutralize grid column math */
  [class*="col-"] {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Allow Power Pages flex blocks to shrink properly */
  .columnBlockLayout,
  .sectionBlockLayout {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Safety: never allow horizontal scroll */
html,
body {
  overflow-x: hidden;
}

/* =========================================================
   MOBILE GUTTERS + OVERFLOW SAFETY
   ========================================================= */

/* 1) Absolute safety net: never allow sideways scroll */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2) Define a single mobile gutter */
@media (max-width: 1199.98px) {

  :root {
    --mobile-gutter: 16px;
  }

  /* 3) Apply gutter to readable content ONLY */
  h1, h2, h3, h4, h5, h6,
  p,
  ul, ol,
  .card,
  .tile,
  .pp-card,
  .content-block {
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
    box-sizing: border-box;
  }

  /* 4) Prevent text from forcing overflow */
  h1, h2, h3, h4, h5, h6,
  p,
  a,
  span {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* 5) Explicitly allow HERO / images to stay full-bleed */
  .hero,
  .hero img,
  .event-hero,
  .event-hero img {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100%;
  }
}

/* =========================================================
   FINAL LAYOUT CONTRACT
   Full-bleed sections + safe inner content rail
   ========================================================= */

/* 1) Safety: page must never overflow horizontally */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2) Define a single, consistent content gutter */
:root {
  --content-gutter-mobile: 16px;
  --content-gutter-tablet: 24px;
}

/* 3) Inner content rail — applies to readable content */
@media (max-width: 1199.98px) {

  .content-rail {
    padding-left: var(--content-gutter-mobile);
    padding-right: var(--content-gutter-mobile);
    box-sizing: border-box;
  }

}

/* Tablet tuning */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .content-rail {
    padding-left: var(--content-gutter-tablet);
    padding-right: var(--content-gutter-tablet);
  }
}

/* 4) HERO + FOOTER stay full-bleed */
.hero,
.hero *,
.site-footer,
.site-footer * {
  max-width: 100%;
}

/* 5) Footer background full width, inner content constrained */
.site-footer {
  width: 100%;
}

.site-footer .footer-inner {
  padding-left: var(--content-gutter-mobile);
  padding-right: var(--content-gutter-mobile);
  box-sizing: border-box;
}

/* 6) Prevent text from ever forcing width overflow */
h1, h2, h3, h4, h5, h6,
p,
a,
li,
span {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* =========================================================
   AUTH BUTTONS — FORCE EXISTING THEME COLORS
   (no new styles, just reuse theme buttons)
   ========================================================= */

/* Primary actions */
#submit-signin-local,
#SubmitButton,
#submit-redeem-invitation,
#btnRequestInvite {
  background-color: var(--png-blue);
  border-color: var(--png-blue);
  color: #fff;
}

/* Hover / focus (match .btn-primary) */
#submit-signin-local:hover,
#SubmitButton:hover,
#submit-redeem-invitation:hover,
#submit-signin-local:focus,
#SubmitButton:focus,
#submit-redeem-invitation:focus {
  background-color: var(--png-blue-hover);
  border-color: var(--png-blue-hover);
  color: #fff;
}

/* Secondary action */
a.btn.btn-default {
  background-color: #fff;
  border-color: var(--png-blue);
  color: var(--png-blue);
}

a.btn.btn-default:hover,
a.btn.btn-default:focus {
  background-color: #F2F4F7;
  color: var(--png-blue);
}

/* Entity List base styling */
.entitylist table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-family: inherit;
}

/* =========================================================
   ENTITY LIST – PAGE-INTEGRATED THEME STYLING
   ========================================================= */

/* ---------- Container: make lists feel like content cards ---------- */
.entitylist {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 24px 0 48px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* ---------- Table base ---------- */
.entitylist table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-family: inherit;
}

/* ---------- Header row ---------- */
.entitylist thead th {
  background: transparent;
  color: #374151;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: none;
  border-bottom: 2px solid #e5e7eb;
  padding: 12px 16px;
  white-space: nowrap;
}

/* ---------- Body cells ---------- */
.entitylist tbody td {
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  font-size: 0.95rem;
  color: #1f2937;
}

/* ---------- Row hover (subtle, modern) ---------- */
.entitylist tbody tr {
  transition: background-color 0.15s ease;
}

.entitylist tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

/* =========================================================
   INFORMATION HIERARCHY
   ========================================================= */

/* Event name = primary content */
.entitylist td[data-attribute*="event"] {
  font-weight: 600;
  color: #111827;
}

/* De-emphasize metadata / IDs / contact */
.entitylist td[data-attribute="msevtmgt_name"],
.entitylist td[data-attribute="contactid"] {
  font-size: 0.85rem;
  color: #6b7280;
}

/* Dates & status feel secondary */
.entitylist td[data-type*="Date"],
.entitylist td[data-type*="date"] {
  font-size: 0.85rem;
  color: #4b5563;
  white-space: nowrap;
}

/* =========================================================
   SECTION RHYTHM (HEADINGS + LIST)
   ========================================================= */

h2 + .entitylist {
  margin-top: 16px;
}

/* =========================================================
   PAGINATION CLEANUP
   ========================================================= */

.entitylist .pagination {
  margin-top: 20px;
  display: flex;
  gap: 6px;
}

.entitylist .pagination > li > a,
.entitylist .pagination > li > span {
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  padding: 6px 12px;
  color: #1f2937;
}

.entitylist .pagination > .active > a {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

/* =========================================================
   MOBILE – TURN ROWS INTO CARDS
   ========================================================= */

@media (max-width: 768px) {
  .entitylist table,
  .entitylist thead,
  .entitylist tbody,
  .entitylist tr,
  .entitylist td {
    display: block;
    width: 100%;
  }

  .entitylist thead {
    display: none;
  }

  .entitylist tr {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #ffffff;
  }

  .entitylist tbody td {
    border: none;
    padding: 6px 0;
    font-size: 0.95rem;
  }

  .entitylist tbody td::before {
    content: attr(data-th);
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
}

/* Locations card description (secondary text under title) */
.loc-card-desc{
  margin: 0 0 10px !important;          /* remove default <p> spacing + keep a small bottom gap */
  font-size: 0.95rem !important;        /* slightly smaller than body */
  line-height: 1.35 !important;         /* tighter */
  color: rgba(0,0,0,.62) !important;    /* muted like your .loc-meta tone */
}

/* Optional: clamp to 2 lines so cards stay uniform */
.loc-card-desc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;                /* change to 3 if you want more */
  overflow: hidden;
}

/* Optional: tighten spacing between title and description */
.loc-card-title + .loc-card-desc{
  margin-top: -4px !important;
}