/* Development CSS file for Gateway Page Tiles */
/* This file is for development purposes and will be populated as needed */

/* -------- Dropdown Navigation Styles -------- */
.gw-dropdown {
  position: relative;
}

.gw-dropdown-trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.gw-dropdown-trigger:hover {
  opacity: 0.8;
}

.gw-dropdown-arrow {
  font-size: 0.7em;
  transition: transform 0.2s ease;
  margin-left: 0.25rem;
}

.gw-dropdown[aria-expanded="true"] .gw-dropdown-arrow {
  transform: rotate(180deg);
}

.gw-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px); /* Add gap back */
  left: 0;
  min-width: 300px; /* Increased width to accommodate longer titles */
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Add invisible bridge to prevent hover gap issues */
.gw-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -8px; /* Bridge the gap */
  left: 0;
  right: 0;
  height: 8px;
  background: transparent;
}

.gw-dropdown[aria-expanded="true"] .gw-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gw-dropdown-item {
  display: block;
  padding: 0.5rem 1rem; /* Restore normal vertical padding */
  color: #666 !important; /* Force gray color, override any inherited styles */
  text-decoration: none;
  transition: color 0.2s ease; /* Only transition color, not background */
  border: none;
  background: transparent; /* No background at all */
  width: 100%; /* Full width since container is now wider */
  text-align: left;
  font-size: 0.85em; /* Slightly smaller font */
  font-weight: 400; /* Regular weight instead of bold */
  line-height: 1.4; /* Better line spacing */
  white-space: nowrap; /* Prevent text wrapping */
  /* Removed overflow and text-overflow to prevent text cutoff */
  border-bottom: 1px solid #e0e0e0; /* Make divider more visible */
  box-sizing: border-box; /* Include padding in width calculation */
}

/* Reduce bottom padding of first item only */
.gw-dropdown-menu li:first-child .gw-dropdown-item {
  padding-bottom: 0.25rem !important; /* Reduced bottom padding */
}

/* Reduce top padding of second item only */
.gw-dropdown-menu li:nth-child(2) .gw-dropdown-item {
  padding-top: 0.25rem !important; /* Reduced top padding for second item only */
}

/* Remove border from last item */
.gw-dropdown-item:last-child {
  border-bottom: none;
}

.gw-dropdown-item .gw-dropdown-item-label {
  color: #666 !important; /* Force gray color on the label span too */
}

.gw-dropdown-item:hover {
  background-color: transparent !important; /* Remove the background hover effect */
  color: #00275D !important; /* Dark blue hover color */
}

.gw-dropdown-item:hover .gw-dropdown-item-label {
  color: #00275D !important; /* Ensure the label span also changes color */
}

.gw-dropdown-item:focus {
  outline: none; /* Remove the bold blue border */
  background-color: transparent; /* No background on focus either */
  color: #00275D; /* Change text color for focus indication */
}

/* Responsive dropdown positioning - always align with parent left edge */
@media (max-width: 900px) {
  .gw-dropdown-menu {
    left: 0; /* Always align with parent's left edge */
    right: auto; /* Remove right alignment */
    min-width: 250px; /* Increased mobile width to accommodate longer titles */
  }
}

/* Ensure dropdown doesn't interfere with other elements */
.gw-dropdown-menu li {
  margin: 0;
  padding: 0;
}

/* Keyboard navigation support */
.gw-dropdown-trigger:focus {
  outline: 2px solid #00275D;
  outline-offset: 2px;
}

/* Simple link hover effects to match dropdown parents */
.wp-block-navigation-item:not(.gw-dropdown) .wp-block-navigation-item__content:hover {
  opacity: 0.8; /* Match dropdown parent hover effect */
  text-decoration: none; /* Remove any underline */
}

/* Prevent phone number from wrapping while allowing some flexibility - GREEN NAV ONLY */
.wp-block-navigation[aria-label="Gateway Navigation"] .wp-block-navigation__container {
  flex-wrap: wrap !important; /* Allow wrapping but control it */
  gap: 0.5rem; /* Add small gap between items */
}

.wp-block-navigation[aria-label="Gateway Navigation"] .wp-block-navigation-item {
  flex-shrink: 1 !important; /* Allow some shrinking */
  min-width: fit-content; /* But don't let items get too small */
}

/* Only prevent phone number text from wrapping - GREEN NAV ONLY */
.wp-block-navigation[aria-label="Gateway Navigation"] .wp-block-navigation-item .wp-block-navigation-item__content {
  white-space: nowrap !important;
  display: inline-block; /* Keep phone number as one unit */
}

/* Prevent phone number from breaking in its subcontainer - GREEN NAV ONLY */
.wp-block-navigation[aria-label="Gateway Navigation"] .gw-phone .gw-phone-number {
  white-space: nowrap !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Ensure the phone container doesn't allow wrapping - GREEN NAV ONLY */
.wp-block-navigation[aria-label="Gateway Navigation"] .gw-phone {
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
}

/* Stack navigation group above phone number at 840px - GREEN NAV ONLY */
@media (max-width: 840px) {
  .wp-block-navigation[aria-label="Gateway Navigation"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  
  .wp-block-navigation[aria-label="Gateway Navigation"] .wp-block-navigation__container {
    flex-direction: row !important; /* Keep nav items horizontal */
    flex-wrap: nowrap !important; /* Prevent wrapping to new line */
    gap: 0.25rem !important; /* Reduced gap between items */
  }
  
  .wp-block-navigation[aria-label="Gateway Navigation"] .wp-block-navigation-item {
    flex-shrink: 0 !important;
    margin-right: 0.25rem !important; /* Reduced right margin */
  }
  
  /* Remove any existing margins that might cause wrapping */
  .wp-block-navigation[aria-label="Gateway Navigation"] .wp-block-navigation-item:last-child {
    margin-right: 0 !important;
  }
  
  /* Ensure dropdowns still work properly when stacked */
  .wp-block-navigation[aria-label="Gateway Navigation"] .gw-dropdown {
    position: relative;
  }
}

/* Desktop hover functionality */
@media (hover: hover) and (pointer: fine) {
  .gw-dropdown:hover .gw-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .gw-dropdown:hover .gw-dropdown-arrow {
    transform: rotate(180deg);
  }
  
  .gw-dropdown:hover[aria-expanded="false"] {
    /* Override the aria-expanded state on hover */
  }
}

/* ---------- Tunables for this layout ---------- */
:root{
  --gw-pad-x: 2rem;        /* horizontal padding for headings + rows of tiles */
  --gw-gap:   2.75rem;     /* spacing between tiles (you had ~44px) */
}

/* Classic PHP template (old) + Block template (new) */
body.page-template-wp-custom-template-portal-tiles .wp-block-post-content,
body.page-template-wp-custom-template-portal-tiles .entry-content,
body.template-gateway-tiles .wp-block-post-content,
body.template-gateway-tiles .entry-content,
body.wp-template-gateway-tiles .wp-block-post-content,
body.wp-template-gateway-tiles .entry-content{
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* -------- Grid → switch to flex so there's no column limit -------- */
/* (Replaces your previous grid version) */
.gateway-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gw-gap);
  padding: 12px var(--gw-pad-x);  /* row padding (vertical + horizontal) */
}
/* Old responsive --gateway-cols media queries are now unnecessary and can be removed */

/* -------- Tile -------- */
.gateway-tile{
  position: relative;
  flex: 0 0 200px;              /* fixed tile width */
  max-width: 200px;
  border-radius: .6rem;
  padding: 1.5rem;
  background: #fff;
  text-align: center;

  /* smaller & darker default shadow */
  box-shadow: 0 6px 12px rgba(0,0,0,.20);
  transition: box-shadow .15s ease;
}

.gateway-tile .tile-link{
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gateway-tile:hover,
.gateway-tile:focus-within{
  box-shadow: 0 8px 16px rgba(0,0,0,.28);
}

/* Subtle, borderless focus indicator (accessible) — keeping your version */
.gateway-tile .tile-link:focus,
.gateway-tile .tile-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .35) inset; /* faint blue inset ring */
  border-radius: .5rem;
}

/* Icon (logo) — keep 25% larger */
.gateway-tile .tile-icon{
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
  margin: 0 0 .6rem 0;
}

/* Typography (keeping your smaller sizes/colors) */
.gateway-tile .tile-title{
  margin: .25rem 0 .4rem 0;
  font-size: .9rem;
  line-height: 1.25;
  color: #00275D; /* navy */
}
.gateway-tile .tile-desc{
  margin: 0;
  opacity: 1;
  color: #374151;   /* slightly lighter dark grey */
  font-size: .8rem;
  line-height: 1.1em;
}

/* -------- Section headings --------
   Full-width gray bar; heading text aligns with tiles using same horizontal padding */
.gateway-section-title{
  display: block;
  width: 100%;
  margin: 0 0 1rem 0;                 /* space between bar and tiles */
  padding: .5rem var(--gw-pad-x);     /* horizontal aligns with tiles */
  font-size: 1rem;                    /* your current size (can be 1.2rem if you prefer) */
  line-height: 1.25;
  font-weight: 600;
  background: #eeeeee;                /* full-width bar */
  color: #00275D;      
  box-sizing:border-box;               /* same navy as tile title */
  border: none;                       /* remove bottom border */
  text-align: center;                /* center align the text */
}

/* Extra spacing below each subsection (after the grid) */
.gateway-section{
  margin-bottom: 2.5rem;              /* breathing room between sections */
}

/* -------- Pin badge (filled circle, solid white icon) -------- */
.pin-badge{
  position: absolute;
  top: .5rem; right: .5rem;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: #E5E7EB;  /* light gray by default */
  color: #fff;          /* white icon */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  cursor: pointer;
  transition: all .2s ease;
}

.pin-badge:hover{
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.pin-badge svg{ display:block; width:14px; height:14px; }

/* Safety net: ensure every shape inside the SVG is solid white */
.pin-badge .pin-svg * { fill: #fff !important; stroke: none !important; }

/* Future "pinned" state — same navy as the title */
.pin-badge.is-pinned{
  background: #00275D; /* navy */
  color: #fff;
}
.pin-badge.is-pinned .pin-svg * { fill: #fff !important; stroke: none !important; }

/* Gateway header search */
.gw-search { 
  position: relative; 
  max-width: 500px; 
  width: 100%;
}
.gw-search input[type="text"]{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px 10px 2.2rem; /* room for icon on left */
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.95rem;
}
.gw-search input[type="text"]:focus{
  outline: none;
  border-color: #cbd5e1;
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}

/* magnifying-glass inside input */
.gw-search::before{
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  pointer-events: none;
  background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2300265D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg>');
}

/* dropdown */
.gw-search .gw-search-results{
  position: absolute;
  z-index: 10000;
  left: 0; right: 0;
  margin-top: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  padding: 6px;
}
.gw-search .gw-search-results[hidden]{ display: none !important; }

.gw-search .gw-search-list{ list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; }
.gw-search .gw-search-item{ padding: 8px; border-radius: 6px; }
.gw-search .gw-search-item:hover,
.gw-search .gw-search-item.gw-active{ background: #f3f4f6; }

.gw-search .gw-search-link{
  display: flex; gap: 10px; align-items: flex-start;
  text-decoration: none; color: #111827;
}
.gw-search .gw-search-icon{ width: 28px; height: 28px; object-fit: contain; border-radius: 4px; background: #fff; }
.gw-search .gw-search-title{ display:block; font-weight:600; color:#00265D; }
.gw-search .gw-search-section{ display:none; font-size:.8rem; color:#374151; opacity:.9; }
.gw-search .gw-search-excerpt{ display:block; font-size:.85rem; color:#4b5563; margin-top:2px;line-height:1.1 }

/* Avoid clipping the dropdown if your header has overflow hidden somewhere */
.gateway-header { overflow: visible; }
/* Explicit visibility control for the dropdown */
.gw-search .gw-search-results{ display: none; }                 /* default closed */
.gw-search .gw-search-results.is-open{ display: block; }        /* open state */

/* Keep your existing rule too; JS removes the attribute when opening */
.gw-search .gw-search-results[hidden]{ display:none !important; }
/* Medium screens: reduce max-width */
@media (max-width: 768px){
  .gw-search{
    max-width: 400px;
  }
}

/* Small screens: add margins to container */
@media (max-width: 640px){
  .gw-search{
    max-width: calc(100vw - 2rem) !important;
    margin: 0 1rem 0.8rem 1rem !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Override inline styles from block editor */
  .gw-search-hero[style*="padding-right: 0"] {
    padding-right: 1rem !important;
  }
  
  .gw-search-hero[style*="padding-left: 0"] {
    padding-left: 1rem !important;
  }
}

/* Ensure the input fills the wrapper (you likely already have this) */
.gw-search input[type="text"]{
  width: 100%;
}
/* Container holding the chat + phone links */
.gateway-header .gateway-actions{
  display: flex;
  align-items: center;
  gap: 14px;                 /* space between chat and phone */
}

/* Base action link look */
.gateway-header .gw-action{
  display: inline-flex;
  align-items: center;
  height: 40px;              /* match your nav height */
  line-height: 40px;
  text-decoration: none;
  color: #ffffff;
  margin-top:0;
}

/* Icons */
.gateway-header .gw-action img{
  width: 32px;               /* icon size */
  height: 32px;
  object-fit: contain;
  display: block;
}

/* Chat: icon-only (hide the helper text visually, keep for screen readers) */
.gateway-header .gw-chat .sr-only{
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Phone: add number to the right of the icon */
.gateway-header .gw-phone .gw-phone-number {
  margin-left: 8px;
  line-height: 1;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
}

/* Hover/focus color */
.gateway-header .gw-action:hover,
.gateway-header .gw-action:focus-visible{
  color: #0b3a8a;
  outline: none;
}

/* Optional: make icons slightly dimmer by default and brighten on hover
.gateway-header .gw-action img{ filter: contrast(0.9) brightness(0.95); }
.gateway-header .gw-action:hover img{ filter: none; }
*/

/* Small screens: if you want icon-only phone on very small widths */
@media (max-width: 420px){
  .gateway-header .gw-phone .gw-phone-number{ display: none; }
}

/* Mobile/list layout: icon left, title above excerpt on the right */
@media (max-width: 640px){
  /* Make each card full-width & shorter (you already have this, keep it) */
  .gateway-tile{
    flex: 1 1 100%;
    max-width: none;
    padding: 12px 14px;
    text-align: left;
  }

  /* Use a 2-column grid inside the link: [icon] [text stack] */
  .gateway-tile .tile-link{
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
    width: 100%;
  }

  /* Icon occupies the left column across both text rows */
  .gateway-tile .tile-icon{
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    margin: 0;               /* kill leftover margins */
    object-fit: contain;
  }

  /* Title above excerpt, right column */
  .gateway-tile .tile-title{
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 2px 0;       /* small spacing under the title */
    padding: 0;
    font-size: 1rem;
    line-height: 1.2;
  }

  /* Excerpt under title, right column */
  .gateway-tile .tile-desc{
    grid-column: 2;
    grid-row: 2;
    margin: 0;               /* remove default paragraph margins */
    padding: 0;
    font-size: .85rem;
    line-height: 1.2em;
  }

  /* Keep the pin badge tidy on compact cards */
  .pin-badge{
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
  }
}
@media (max-width: 640px){
  .gateway-grid{
    gap: .8rem;                 /* ≈12.8px */
    padding: 8px var(--gw-pad-x);
  }
  .gw-search{
    margin-bottom: 12px; /* ~0.75rem; tweak as needed */
  }
}

/* Ultra-small phones: shrink the icon a touch more if needed */
@media (max-width: 380px){
  .gateway-tile .tile-link{
    grid-template-columns: 40px 1fr;
  }
  .gateway-tile .tile-icon{
    width: 40px; height: 40px;
  }
}

/* --- Tile entrance animation (smooth, no bounce) --- */
@keyframes gwTileIn {
  0%   { opacity: 0; transform: translateY(14px) scale(.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1);   }
}

.gateway-grid .gateway-tile{
  opacity: 0;                                     /* start hidden */
  animation: gwTileIn .48s ease-out both;         /* smooth fade/slide in */
  will-change: transform, opacity;
  transition: transform .18s ease, box-shadow .15s ease; /* keep hover feel */
}

/* Staggered delays (smooth cascade) */
.gateway-grid .gateway-tile:nth-child(1)  { animation-delay:  40ms; }
.gateway-grid .gateway-tile:nth-child(2)  { animation-delay:  80ms; }
.gateway-grid .gateway-tile:nth-child(3)  { animation-delay: 120ms; }
.gateway-grid .gateway-tile:nth-child(4)  { animation-delay: 160ms; }
.gateway-grid .gateway-tile:nth-child(5)  { animation-delay: 200ms; }
.gateway-grid .gateway-tile:nth-child(6)  { animation-delay: 240ms; }
.gateway-grid .gateway-tile:nth-child(7)  { animation-delay: 280ms; }
.gateway-grid .gateway-tile:nth-child(8)  { animation-delay: 320ms; }
.gateway-grid .gateway-tile:nth-child(9)  { animation-delay: 360ms; }
.gateway-grid .gateway-tile:nth-child(10) { animation-delay: 400ms; }
.gateway-grid .gateway-tile:nth-child(11) { animation-delay: 440ms; }
.gateway-grid .gateway-tile:nth-child(12) { animation-delay: 480ms; }
.gateway-grid .gateway-tile:nth-child(13) { animation-delay: 520ms; }
.gateway-grid .gateway-tile:nth-child(14) { animation-delay: 560ms; }
.gateway-grid .gateway-tile:nth-child(15) { animation-delay: 600ms; }
.gateway-grid .gateway-tile:nth-child(16) { animation-delay: 640ms; }
.gateway-grid .gateway-tile:nth-child(17) { animation-delay: 680ms; }
.gateway-grid .gateway-tile:nth-child(18) { animation-delay: 720ms; }
.gateway-grid .gateway-tile:nth-child(19) { animation-delay: 760ms; }
.gateway-grid .gateway-tile:nth-child(20) { animation-delay: 800ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .gateway-grid .gateway-tile{
    animation: none !important;
    opacity: 1;
    transition: none;
  }
}
/* phones: stack vertically */
@media (max-width: 640px){
  .gw-green-nav{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;              /* optional */
    align-items: stretch;   /* optional: make items full-width */
  }

  /* optional: make each child span full width */
   .gw-green-nav > *{
    width: auto;           /* or a fixed max-width if you prefer */
    align-self: center;    /* belt + suspenders */
    text-align: center;    /* optional: center the link text */
  }
}
/* Wrapper next to the avatar */
.gw-user-dd{
  position: relative;
  display: inline-block;
}

/* Hide user dropdown and hamburger menu when user is not logged in */
body:not(.gw-user-logged-in) .gw-user-dd,
body:not(.gw-user-logged-in) .gw-hamburger{
  display: none !important;
}

/* Hide default marker and style the button */
.gw-user-dd summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid #e5e7eb; border-radius: 8px;
  background: #f9fafb;
}
.gw-user-dd summary::-webkit-details-marker{ display: none; }
.gw-user-dd summary:focus-visible{ outline: 2px solid rgba(37,99,235,.45); outline-offset: 2px; }

/* Hamburger icon (3 bars) */
.gw-hamburger{ position: relative; width: 18px; height: 14px; display: inline-block; }
.gw-hamburger::before, .gw-hamburger::after, .gw-hamburger > span{
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: #00265D; border-radius: 2px;
}
.gw-hamburger::before{ top: 0; }
.gw-hamburger > span{ top: 6px; }
.gw-hamburger::after{ top: 12px; }

/* Dropdown panel */
.gw-user-dd-menu{
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 200px; padding: 6px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12); display: none;
  z-index: 9999;
}
.gw-user-dd[open] .gw-user-dd-menu{ display: block; }

.gw-user-dd-menu a{
  display: block; padding: 8px 10px; border-radius: 8px;
  color: #111827; text-decoration: none;
}
.gw-user-dd-menu a:hover, .gw-user-dd-menu a:focus-visible{
  background: #f3f4f6; outline: none;
}



/* Subtle hover for green CTA links (works for Navigation links or Button links) */
.gw-green-nav .gw-cta > a,
.gw-green-nav .gw-cta a.wp-block-button__link{
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  will-change: transform, box-shadow, filter;
}

.gw-green-nav .gw-cta > a:hover,
.gw-green-nav .gw-cta > a:focus-visible,
.gw-green-nav .gw-cta a.wp-block-button__link:hover,
.gw-green-nav .gw-cta a.wp-block-button__link:focus-visible{
  transform: translateY(-1px);
  filter: brightness(0.96) saturate(1.03); /* tiny darken + richer green */
  text-decoration: none;
  outline: none;
}

.gw-green-nav .gw-cta > a:active,
.gw-green-nav .gw-cta a.wp-block-button__link:active{
  transform: translateY(0);              /* flatten on tap/click */
  filter: brightness(0.92);
}

/* Optional keyboard focus ring (if theme doesn't already add one) */
/* .gw-green-nav .gw-cta > a:focus-visible,
.gw-green-nav .gw-cta a.wp-block-button__link:focus-visible{
  box-shadow: 0 0 0 2px rgba(255,255,255,.85),
              0 0 0 4px rgba(31,157,85,.55);
} */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .gw-green-nav .gw-cta > a,
  .gw-green-nav .gw-cta a.wp-block-button__link{
    transition: none;
  }
}

/* -------- Current User Avatar Shortcode -------- */
.gw-user-avatar{
  border-radius: 50%;
  border: 0px solid #e5e7eb;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.gw-user-avatar:hover{
  border-color: #00275D;
  box-shadow: 0 2px 8px rgba(0,39,93,.15);
}

/* Optional: Add a subtle animation */
.gw-user-avatar{
  animation: gwAvatarIn .3s ease-out;
}

@keyframes gwAvatarIn {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* -------- Pinned Section -------- */
.gateway-section-pinned {
  order: -1; /* Always appears first */
  margin-bottom: 0 !important; /* Remove bottom margin */
}

.gateway-section-pinned .gateway-section-title {
  margin-bottom: 0 !important; /* Remove bottom margin from title */
}

/* Remove margins from the section that follows the pinned section */
.gateway-section-pinned + .gateway-section {
  margin-top: 0 !important; /* Remove top margin from next section */
}

.gateway-section-pinned .gateway-section-title {
  background: #eeeeee; /* Same grey as other sections */
  color: #00275D; /* Navy text color */
}

.gateway-section-pinned .gateway-section-title::after {
  content: attr(data-count);
  font-weight: 400;
  font-size: 0.9em;
  opacity: 0.9;
  margin-left: 0.5rem;
}

.gateway-grid-pinned {
  min-height: 60px; /* Ensure section has some height even when empty */
  background: #f5f5f5; /* Light gray background for pinned section */
  border-radius: 0.5rem;
  margin: 0;
  padding: 0; /* Remove default padding */
}

/* Override the default gateway-grid padding for pinned section */
.gateway-grid-pinned {
  padding: 12px 2rem !important; /* Match the original padding but on gray background */
}

.gateway-grid-pinned .gateway-grid-empty {
  text-align: center;
  padding: 1rem 2rem; /* Reduced vertical padding */
  color: #6b7280;
  font-style: italic;
  margin: 0;
}

/* Unpin icon styling */
.unpin-icon:hover {
  color: #0b3a8a !important;
  transform: scale(1.2);
}

/* -------- Search Hero Banner -------- */
.gw-search-hero{
  position: relative;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  min-height: 120px; /* Adjust height as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* Dark blue semi-transparent overlay */
.gw-search-hero::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 39, 93, 0.9); /* Dark blue with 85% opacity */
  z-index: 1;
}

/* Ensure content appears above overlay */
.gw-search-hero > *{
  position: relative;
  z-index: 2;
}

/* Adjust search bar styling for hero background */
.gw-search-hero .gw-search{
  max-width: 600px; /* Slightly wider for hero context */
  width: 100%;
}

.gw-search-hero .gw-search input[type="text"]{
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.gw-search-hero .gw-search input[type="text"]:focus{
  background: rgba(255, 255, 255, 1);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Ensure magnifying glass icon shows in hero section */
.gw-search-hero .gw-search::before{
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; 
  height: 18px;
  pointer-events: none;
  z-index: 3;
  background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2300265D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg>');
}

/* -------- Calendar CTA Styling -------- */
.gw-calendar-cta {
  display: inline-flex;
  align-items: center;
}

.gw-calendar-cta .gw-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.2s ease;
  padding: 8px 12px;
  border-radius: 6px;
  background: #00275D;
  border: 1px solid #00275D;
}

.gw-calendar-cta .gw-cta-link:hover {
  color: #ffffff;
  text-decoration: none;
  background: #0b3a8a;
  border-color: #0b3a8a;
  transform: translateY(-1px);
}

.gw-calendar-cta .gw-calendar-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  vertical-align: middle;
}

.gw-calendar-cta .gw-cta-text {
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

/* Responsive CTA text for smaller screens */
@media (max-width: 768px) {
  .gw-calendar-cta .gw-cta-link {
    font-size: 1rem;
    padding: 6px 10px;
    gap: 8px;
  }
  
  .gw-calendar-cta .gw-cta-text {
    font-size: 1rem;
  }
  
  .gw-calendar-cta .gw-calendar-icon {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 480px) {
  .gw-calendar-cta .gw-cta-link {
    font-size: 0.9rem;
    padding: 5px 8px;
    gap: 6px;
  }
  
  .gw-calendar-cta .gw-cta-text {
    font-size: 0.9rem;
  }
  
  .gw-calendar-cta .gw-calendar-icon {
    width: 20px;
    height: 20px;
  }
}

/* Stack site logo on its own row below 640px */
@media (max-width: 640px) {
  .gateway-header .wp-block-group.is-layout-flex {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  
  /* Keep the user section (avatar, CTA, hamburger) horizontal */
  .gateway-header .wp-block-group.is-layout-flex .wp-block-group.is-layout-flex {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 1rem !important;
  }
  
  .gateway-header .wp-block-group.is-layout-flex > *:not(.gw-search) {
    width: auto !important;
    text-align: center !important;
  }
}