/*
 * Stay Home Foundation — Site Custom CSS
 * Purpose: project-specific design layer only.
 * Vendor CSS remains untouched:
 *   - assets/css/bootstrap.min.css
 *   - assets/css/lineicons.css
 *   - assets/css/tiny-slider.css
 *   - assets/css/glightbox.min.css
 *
 * Load order: Bootstrap → vendor components → style.css → this file.
 */

:root {
  --shf-primary: #155bd5;
  --shf-primary-dark: #1c3ab6;
  --shf-accent: #00b8b8;
  --shf-accent-soft: #e9fbfb;
  --shf-text: #1d2939;
  --shf-muted: #667085;
  --shf-border: #e4e7ec;
  --shf-surface: #ffffff;
  --shf-surface-soft: #f7f9fc;
  --shf-radius-sm: 8px;
  --shf-radius-md: 14px;
  --shf-radius-lg: 20px;
  --shf-shadow-sm: 0 4px 18px rgba(16, 24, 40, .06);
  --shf-shadow-md: 0 12px 35px rgba(16, 24, 40, .10);
}

/* --------------------------------------------------------------------------
   Global polish
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  color: var(--shf-text);
  background: var(--shf-surface);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}

:focus-visible {
  outline: 3px solid rgba(0, 184, 184, .35);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.navbar-area.navbar-nine {
  box-shadow: 0 1px 0 rgba(16, 24, 40, .06);
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item > a {
  font-weight: 600;
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item > a:hover,
.navbar-area.navbar-nine .navbar .navbar-nav .nav-item > a.active {
  color: var(--shf-primary);
}

.navbar-area.navbar-nine .navbar .navbar-btn .primary-btn {
  box-shadow: 0 8px 20px rgba(21, 91, 213, .18);
}

.nearby-dropdown-menu {
  max-height: 60vh;
  overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Hero / section titles
   -------------------------------------------------------------------------- */
.header-eight {
  overflow: hidden;
}

.header-eight .header-content h1 {
  text-wrap: balance;
}

.section-title-five h2 {
  text-wrap: balance;
}

.section-title-five p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Services / news cards
   -------------------------------------------------------------------------- */
.single-services,
.single-news {
  border-radius: var(--shf-radius-md);
}

.single-services {
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.single-services:hover {
  transform: translateY(-4px);
  box-shadow: var(--shf-shadow-md);
}

.service-icon {
  transition: transform .25s ease;
}

.single-services:hover .service-icon {
  transform: translateY(-2px);
}

.single-news {
  overflow: hidden;
  box-shadow: var(--shf-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}

.single-news:hover {
  transform: translateY(-4px);
  box-shadow: var(--shf-shadow-md);
}

.single-news .image > a.certificate-lightbox {
  display: block;
  cursor: zoom-in;
  background: #f7f9fc;
}

.single-news .image > a.certificate-lightbox img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: #f7f9fc;
}

/* --------------------------------------------------------------------------
   Nearby locations — project-specific component
   -------------------------------------------------------------------------- */
.nearby-area-card {
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--shf-surface);
  border: 1px solid var(--shf-border);
  border-radius: var(--shf-radius-md);
  box-shadow: var(--shf-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.nearby-area-card:hover {
  transform: translateY(-3px);
  border-color: rgba(21, 91, 213, .25);
  box-shadow: var(--shf-shadow-md);
}

.nearby-area-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--shf-accent-soft);
  color: var(--shf-primary);
}

.nearby-area-card a {
  color: var(--shf-text);
  font-weight: 600;
  line-height: 1.5;
}

.nearby-area-card a:hover {
  color: var(--shf-primary);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-item {
  height: 100%;
  border-radius: var(--shf-radius-md);
}

.contact-icon {
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Map placeholder
   -------------------------------------------------------------------------- */
.map-placeholder {
  min-height: 450px;
  width: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--shf-surface-soft);
  border: 1px solid var(--shf-border);
  border-radius: var(--shf-radius-md);
  padding: 24px;
  box-sizing: border-box;
}

.map-placeholder-content {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.map-placeholder-content strong {
  font-size: 20px;
  line-height: 1.4;
}

.map-placeholder-content span {
  font-size: 15px;
  color: var(--shf-muted);
}

.map-placeholder-content .btn {
  border: 0;
  cursor: pointer;
}

.map-placeholder iframe {
  width: 100%;
  height: 450px;
  border: 0;
  display: block;
  border-radius: inherit;
}

/* --------------------------------------------------------------------------
   Buttons / calls to action
   -------------------------------------------------------------------------- */
.primary-btn,
.primary-btn-outline {
  min-height: 46px;
}

.primary-btn {
  box-shadow: 0 8px 20px rgba(21, 91, 213, .16);
}

.primary-btn:hover {
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Mobile layout
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .navbar-area.navbar-nine .navbar .navbar-nav {
    padding: 10px 0;
  }

  .nearby-dropdown-menu {
    max-height: none;
  }
}

/* --------------------------------------------------------------------------
   Certificate gallery + lightbox
   Keep the complete certificate visible in the card and in GLightbox.
   -------------------------------------------------------------------------- */
.single-news .image > a.certificate-lightbox {
  display: block;
  width: 100%;
  height: 360px;
  background: #f7f8fa;
  overflow: hidden;
}

.single-news .image > a.certificate-lightbox img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain !important;
  object-position: center;
  background: #f7f8fa;
  transform: none;
}

.latest-news-area .single-news:hover .image > a.certificate-lightbox img {
  transform: none;
}

.glightbox-container .gslide-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glightbox-container .gslide-image img {
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 110px) !important;
  object-fit: contain !important;
  object-position: center;
  margin: auto;
}

.glightbox-container .gslide-description {
  max-width: calc(100vw - 48px);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .nearby-area-card {
    padding: 16px;
  }

  .map-placeholder {
    min-height: 320px;
  }

  .map-placeholder iframe {
    height: 320px;
  }

  .single-news .image > a.certificate-lightbox {
    height: 300px;
  }

  .glightbox-container .gslide-image img {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 90px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   Certificate lightbox navigation controls
   Make Previous / Next arrows clearly visible on desktop and mobile.
   -------------------------------------------------------------------------- */
#glightbox-body.glightbox-clean .gprev,
#glightbox-body.glightbox-clean .gnext {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(20, 92, 210, 0.92) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.35) !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 100000 !important;
}

#glightbox-body.glightbox-clean .gprev { left: 18px !important; }
#glightbox-body.glightbox-clean .gnext { right: 18px !important; }

#glightbox-body.glightbox-clean .gprev svg,
#glightbox-body.glightbox-clean .gnext svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
}

#glightbox-body.glightbox-clean .gprev path,
#glightbox-body.glightbox-clean .gnext path {
  fill: #fff !important;
  stroke: #fff !important;
}

#glightbox-body.glightbox-clean .gprev:hover,
#glightbox-body.glightbox-clean .gnext:hover {
  background: rgba(20, 92, 210, 1) !important;
  transform: translateY(-50%) scale(1.06) !important;
}

@media (max-width: 767px) {
  #glightbox-body.glightbox-clean .gprev,
  #glightbox-body.glightbox-clean .gnext {
    width: 44px !important;
    height: 44px !important;
  }

  #glightbox-body.glightbox-clean .gprev { left: 8px !important; }
  #glightbox-body.glightbox-clean .gnext { right: 8px !important; }

  #glightbox-body.glightbox-clean .gprev svg,
  #glightbox-body.glightbox-clean .gnext svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   Lightbox close cleanup
   Never leave a closing image/overlay visible after the close button is used.
   -------------------------------------------------------------------------- */
#glightbox-body.glightbox-closing,
#glightbox-body.glightbox-closing .gslide,
#glightbox-body.glightbox-closing .gslide-media,
#glightbox-body.glightbox-closing .gslide-image,
#glightbox-body.glightbox-closing .gslide-image img {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#glightbox-body.glightbox-closing {
  display: none !important;
}

body.glightbox-open {
  overflow: hidden;
}

/* ===== FINAL NAVBAR ALIGNMENT FIX ===== */
@media (min-width: 992px){
  .navbar-area.navbar-nine .navbar{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    width:100%;
  }
  .navbar-area.navbar-nine .navbar-brand{
    flex:0 0 auto;
    margin-right:18px !important;
  }
  .navbar-area.navbar-nine .navbar-brand img{
    display:block;
    width:clamp(270px, 30vw, 413px);
    max-width:100%;
    height:auto;
  }
  .navbar-area.navbar-nine .navbar-collapse{
    display:flex !important;
    flex:1 1 auto;
    min-width:0;
    justify-content:flex-end;
  }
  .navbar-area.navbar-nine .navbar .navbar-nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:nowrap;
    gap:2px;
    margin:0 !important;
    min-width:0;
  }
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item{
    flex:0 0 auto;
  }
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item > a{
    white-space:nowrap;
    padding:10px 11px;
    margin:10px 0;
    font-size:15px;
  }
  .navbar-area.navbar-nine .navbar .navbar-btn{
    position:static;
    flex:0 0 40px;
    margin-left:10px;
  }
  .navbar-area.navbar-nine .navbar .navbar-btn .menu-bar{
    display:block;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px){
  .navbar-area.navbar-nine .navbar-brand{
    margin-right:8px !important;
  }
  .navbar-area.navbar-nine .navbar-brand img{
    width:280px;
  }
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item > a{
    padding-left:7px;
    padding-right:7px;
    font-size:14px;
  }
  .navbar-area.navbar-nine .navbar .navbar-btn{
    margin-left:5px;
  }
}

/* Keep the mobile/tablet hamburger and collapse behavior intact. */
@media (max-width: 991.98px){
  .navbar-area.navbar-nine .navbar{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
  }
  .navbar-area.navbar-nine .navbar-brand{
    flex:1 1 auto;
    min-width:0;
  }
  .navbar-area.navbar-nine .navbar-toggler{
    flex:0 0 auto;
    margin-left:auto;
  }
}

/* Make Nearby Areas dropdown toggle visually consistent with other links. */
.navbar-area.navbar-nine .navbar .navbar-nav .nav-item.dropdown > .dropdown-toggle::after{
  margin-left:7px;
  vertical-align:middle;
}


/* ===== STAY HOME NAVBAR — DEFINITIVE DESKTOP FIX ===== */
@media (min-width: 992px) {
  .navbar-area.navbar-nine { padding: 10px 0 !important; }
  .navbar-area.navbar-nine .container,
  .navbar-area.navbar-nine .row,
  .navbar-area.navbar-nine .col-lg-12 { width:100%; }
  .navbar-area.navbar-nine .navbar {
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    gap:0 !important;
  }
  .navbar-area.navbar-nine .navbar-brand {
    flex:0 0 auto !important;
    width:auto !important;
    margin:0 24px 0 0 !important;
  }
  .navbar-area.navbar-nine .navbar-brand img {
    display:block !important;
    width:clamp(290px, 27vw, 413px) !important;
    height:auto !important;
    max-width:none !important;
  }
  .navbar-area.navbar-nine .navbar-collapse {
    display:flex !important;
    visibility:visible !important;
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    justify-content:flex-end !important;
  }
  .navbar-area.navbar-nine .navbar-collapse .stayhome-nav-list {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex:0 1 auto !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    gap:4px !important;
    list-style:none !important;
    flex-wrap:nowrap !important;
  }
  .navbar-area.navbar-nine .stayhome-nav-list > .nav-item {
    display:block !important;
    flex:0 0 auto !important;
    margin:0 !important;
  }
  .navbar-area.navbar-nine .stayhome-nav-list > .nav-item > a {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    min-height:42px !important;
    padding:8px 12px !important;
    margin:0 !important;
    font-size:16px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
    opacity:1 !important;
    color:var(--white) !important;
    text-decoration:none !important;
  }
  .navbar-area.navbar-nine .stayhome-nav-list > .nav-item > a:hover,
  .navbar-area.navbar-nine .stayhome-nav-list > .nav-item > a.active,
  .navbar-area.navbar-nine .stayhome-nav-list > .nav-item > a:focus {
    opacity:1 !important;
    color:var(--white) !important;
  }
  .navbar-area.navbar-nine .stayhome-nav-list > .nav-item.dropdown > a::after {
    display:inline-block !important;
    margin-left:6px !important;
    vertical-align:middle !important;
  }
  .navbar-area.navbar-nine .stayhome-nav-list .nearby-dropdown-menu {
    min-width:240px !important;
  }
  .navbar-area.navbar-nine .navbar-btn {
    display:block !important;
    flex:0 0 42px !important;
    width:42px !important;
    margin:0 0 0 16px !important;
  }
  .navbar-area.navbar-nine .navbar-btn .menu-bar {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:42px !important;
    height:42px !important;
    line-height:42px !important;
  }
}

/* At medium desktop widths, reduce only spacing so EVERY nav item remains visible. */
@media (min-width: 992px) and (max-width: 1299px) {
  .navbar-area.navbar-nine .navbar-brand { margin-right:10px !important; }
  .navbar-area.navbar-nine .navbar-brand img { width:285px !important; }
  .navbar-area.navbar-nine .navbar-collapse .stayhome-nav-list { gap:0 !important; }
  .navbar-area.navbar-nine .stayhome-nav-list > .nav-item > a {
    padding-left:7px !important;
    padding-right:7px !important;
    font-size:14px !important;
  }
  .navbar-area.navbar-nine .navbar-btn { margin-left:7px !important; }
}