/* Base CSS Variables */
:root {
  --primary-color: #007AFF;
  --secondary-color: #5AC8FA;
  --success-color: #4CAF50;
  --warning-color: #FF9800;
  --danger-color: #F44336;
  --dark-color: #333;
  --light-color: #f8f9fa;
  --border-radius: 15px;
  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;

  /* System + CJK + emoji font stack (will use Noto if installed in the image) */
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Noto Sans", "Noto Serif",
             "Noto Naskh Arabic", "Noto Kufi Arabic",
             "Noto Sans Georgian",
             "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Sans CJK TC", "Noto Sans KR",
             "Hiragino Kaku Gothic ProN", "PingFang SC", "Microsoft YaHei",
             "Apple Color Emoji", "Noto Color Emoji",
             sans-serif;
}

/* Base Styles */
body {
  font-family: var(--ui-font);
  background-color: var(--light-color);
}

/* Navigation Styles */
.navbar-brand {
    font-weight: bold;
    color: var(--primary-color) !important;
    font-size: 1.5rem;
}

.navbar-brand:hover {
    color: var(--secondary-color) !important;
}

.nav-link {
    transition: var(--transition);
}

.nav-link:hover {
    color: var(--primary-color) !important;
}

/* Button Styles */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: var(--transition);
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    transform: translateY(-2px);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    transition: var(--transition);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

/* Card Styles */
.feature-card {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.feature-icon {
    color: var(--primary-color);
    font-size: 3rem;
    margin-bottom: 1rem;
    transition: var(--transition);
}

.feature-card:hover .feature-icon {
    color: var(--secondary-color);
    transform: scale(1.1);
}

/* === Footer — dark blue, bright text, consistent with site === */
.site-footer {
  background: linear-gradient(180deg, #123f62 0%, #0e3452 60%, #0b2b45 100%);
  color: rgba(255,255,255,0.92);
  padding: 40px 0 20px;
  position: relative;
}
/* Put the gradient stripe at the very top edge */

.site-footer.mt-5 {
    margin-top: 0 !important;
}

footer::before,
.site-footer::before {
  content: "";
  position: absolute;    /* <-- key change */
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  opacity: 0.9;
  pointer-events: none;
}

/* Kill any dark .text-muted inside footer */
.site-footer .text-muted,
.site-footer .text-muted a {
  color: rgba(255,255,255,0.86) !important;
}

/* Headings & copy */
.site-footer h5,
.site-footer h6 {
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: .75rem;
}
.site-footer p,
.site-footer small,
.site-footer li {
  color: rgba(255,255,255,0.86) !important;
}
.site-footer .brand-blurb { margin-bottom: .75rem; }

/* Links */
.site-footer .footer-link,
.site-footer a {
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none;
  transition: var(--transition);
}
.site-footer .footer-link:hover,
.site-footer a:hover,
.site-footer a:focus {
  color: var(--secondary-color) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer a:focus-visible {
  outline: 2px dashed var(--secondary-color);
  outline-offset: 2px;
}

/* Social buttons */
.site-footer .social-links { margin: 0; padding: 0; }
.site-footer .social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.9) !important;
  transition: var(--transition);
}
.site-footer .social:hover {
  border-color: var(--secondary-color);
  color: var(--secondary-color) !important;
  transform: translateY(-2px);
}

/* Divider & spacing */
.site-footer hr {
  border: 0; height: 1px; background: rgba(255,255,255,0.12);
  margin: 1.25rem 0;
}
.site-footer .footer-links li + li { margin-top: .35rem; }
.site-footer .contact-email { opacity: .9; }

/* Responsive */
@media (max-width: 767.98px) {
  .site-footer .row > [class^="col-"] { margin-bottom: 1rem; }
  .site-footer .social { width: 34px; height: 34px; }
}

/* Stats Styles */
.stats-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
    transition: var(--transition);
}

/* Alert Styles */
.alert-custom {
    border-radius: 10px;
    border: none;
    box-shadow: var(--box-shadow);
}

.alert-success {
    background-color: rgba(76, 175, 80, 0.1);
    border-left: 4px solid var(--success-color);
}

.alert-danger, .alert-error {
    background-color: rgba(244, 67, 54, 0.1);
    border-left: 4px solid var(--danger-color);
}

.alert-warning {
    background-color: rgba(255, 152, 0, 0.1);
    border-left: 4px solid var(--warning-color);
}

.alert-info {
    background-color: rgba(90, 200, 250, 0.1);
    border-left: 4px solid var(--secondary-color);
}

/* Dropdown Styles */
.dropdown-menu {
    border-radius: 10px;
    border: none;
    box-shadow: var(--box-shadow);
    padding: 0.5rem 0;
}

.dropdown-item {
    padding: 0.75rem 1.5rem;
    transition: var(--transition);
}

.dropdown-item:hover {
    background-color: var(--light-color);
    color: var(--primary-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .stats-number {
        font-size: 2rem;
    }

    .feature-icon {
        font-size: 2.5rem;
    }

    .navbar-brand {
        font-size: 1.25rem;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up {
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading States */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* === Main Nav — global (base layout) === */
.main-nav { --nav-link-color:#0b2b45; --nav-link-hover:var(--primary-color); }
.main-nav .navbar-brand { font-weight:800; letter-spacing:.2px; }
.main-nav .nav-link {
  font-weight:600; color:var(--nav-link-color);
  padding:.6rem .9rem; border-radius:999px; transition:var(--transition);
  text-transform:lowercase;
}
.main-nav .nav-link:hover, .main-nav .nav-link:focus {
  color:#fff!important;
  background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  text-decoration:none;
}
.btn-pill { border-radius:999px; padding:.5rem 1rem; font-weight:700; }

/* Base navbar hamburger (for base.html navbar) */
.custom-toggler{
  border:none; padding:.25rem; width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; background:rgba(0,0,0,0.04);
}
.custom-toggler:focus { box-shadow:0 0 0 3px rgba(0,122,255,.25); }
.custom-toggler .bar{
  display:block; width:22px; height:2px; background:#0b2b45;
  border-radius:2px; transition:transform .25s ease, opacity .2s ease;
}
.custom-toggler .bar + .bar { margin-top:5px; }
.custom-toggler[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.custom-toggler[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.custom-toggler[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile overlay behavior for the base navbar collapse */
@media (max-width: 991.98px) {
  .main-nav .navbar-collapse.collapse { transition:none; }
  .main-nav .navbar-collapse.collapse.show{
    position:fixed; inset:0; z-index:1040; background:#fff;
    padding:84px 20px 24px; box-shadow:0 12px 40px rgba(0,0,0,.18);
  }
  .main-nav .main-menu { gap:8px; padding-left:0; }
  .main-nav .main-menu .nav-link{
    display:block; padding:.9rem 1rem; font-size:1.05rem;
    border-radius:12px; background:rgba(0,0,0,.035);
  }
  .main-nav .main-menu .nav-link:hover{
    background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  }
}

/* Desktop spacing */
@media (min-width: 992px) { .main-nav .main-menu { gap:2px; } }


/* === Main Nav — global (base layout) === */
.main-nav { --nav-link-color:#0b2b45; --nav-link-hover:var(--primary-color); }
.main-nav .navbar-brand { font-weight:800; letter-spacing:.2px; }
.main-nav .main-menu { list-style:none; margin:0; padding-left:0; }

.main-nav .nav-link{
  font-weight:600;
  color:var(--nav-link-color) !important;
  padding:.6rem .9rem;
  border-radius:999px;
  transition:var(--transition);
  text-transform:lowercase;
  text-decoration:none !important;
}
.main-nav .nav-link:hover,
.main-nav .nav-link:focus{
  color:#fff !important;
  background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  text-decoration:none !important;
}

/* Custom hamburger (3 bars → X) */
.custom-toggler{
  border:none;
  padding:.25rem;
  width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-direction:column;              /* stack bars vertically */
  gap:5px;                            /* spacing between bars */
  border-radius:10px;
  background:rgba(0,0,0,0.04);
}
.custom-toggler:focus{ box-shadow:0 0 0 3px rgba(0,122,255,.25); }
.custom-toggler .bar{
  width:22px; height:2px; background:#0b2b45;
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.custom-toggler[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.custom-toggler[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.custom-toggler[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile overlay for the Bootstrap collapse */
@media (max-width: 991.98px){
  .main-nav .navbar-collapse.collapse{ transition:none; }
  .main-nav .navbar-collapse.collapse.show{
    position:fixed; inset:0; z-index:1040;
    background:#ffffff;
    padding:84px 20px 24px;                   /* space for close button */
    box-shadow:0 12px 40px rgba(0,0,0,.18);
  }
  .main-nav .main-menu{ gap:8px; }
  .main-nav .nav-link{
    display:block;
    padding:.9rem 1rem;
    font-size:1.05rem;
    border-radius:12px;
    background:rgba(0,0,0,.035);
  }
  .main-nav .nav-link:hover{
    background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  }

  /* Close (X) button inside overlay */
  .main-nav .mobile-close{
    position:fixed; top:18px; right:16px;
    width:40px; height:40px;
    border:none; border-radius:10px;
    background:rgba(0,0,0,.06);
    color:#0b2b45; font-size:28px; line-height:1;
    z-index:1051;
  }
}

/* Desktop niceties */
@media (min-width: 992px){
  .main-nav .main-menu{ gap:2px; }
}

/* Brand colors used on home, now global */
:root {
  --brand-dark: #234c5e;
  --brand-blue: #3179b0;
}

/* Brand logo sizing in navbar */
.main-nav .brand-logo {
  height: 56px; width: auto; display: block;
}
@media (max-width: 575.98px) {
  .main-nav .brand-logo { height: 48px; }
}

/* Global login button (dark pill) */
.btn-login{
  background-color: var(--brand-dark);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  border: none;
}
.btn-login:hover{ filter: brightness(0.95); }


/* Green pill button for adding a Spot */
.btn-add-spot{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background-color: var(--success-color); /* #4CAF50 from your vars */
  color: #fff !important;

  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 700;
  border: none;

  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.22);
  transition: var(--transition);
}

.btn-add-spot:hover,
.btn-add-spot:focus{
  filter: brightness(0.95);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(76, 175, 80, 0.26);
}

/* === NAV: Add Spot (+) bubble next to "spoty" === */
.nav-spots{
  gap: 8px;
}

/* Small green circular "+" */
.nav-add-pill{
  width: 26px;
  height: 26px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background-color: var(--success-color);
  color: #fff !important;
  text-decoration: none !important;

  font-weight: 800;
  font-size: 18px;
  /* line-height: 1; */

  box-shadow: 0 6px 14px rgba(76, 175, 80, 0.28);
  transition: var(--transition);
}

.nav-add-pill:hover,
.nav-add-pill:focus{
  transform: translateY(-1px) scale(1.05);
  filter: brightness(0.95);
}

/* Mobile: make "+ dodaj spot" feel like a CTA */
.nav-add-spot-mobile{
  background: rgba(76, 175, 80, 0.12);
  border-left: 4px solid var(--success-color);
  font-weight: 700;
}

/* Main nav look */
.main-nav { --nav-link-color:#0b2b45; }
.main-nav .navbar-brand { font-weight:800; letter-spacing:.2px; }
.main-nav .main-menu { list-style:none; margin:0; padding-left:0; }
.main-nav .nav-link{
  font-weight:600; color:var(--nav-link-color) !important;
  padding:.6rem .9rem; border-radius:999px;
  text-transform:lowercase; text-decoration:none !important;
  transition: var(--transition);
}
.main-nav .nav-link:hover, .main-nav .nav-link:focus{
  color:#fff !important;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  text-decoration:none !important;
}

/* === Add Spot (+) button in menu === */
.menu-item-with-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.menu-add-spot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4CAF50; /* green */
  color: #fff !important;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.menu-add-spot:hover,
.menu-add-spot:focus {
  background: #43a047;
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* Mobile variant */
.mobile-add-spot {
  font-weight: 600;
  color: #2e7d32 !important;
}

/* Custom 3-bar toggler (vertical stack) */
.custom-toggler{
  border:none; padding:.25rem; width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-direction: column; gap: 5px;
  border-radius:10px; background: rgba(0,0,0,0.04);
}
.custom-toggler:focus{ box-shadow:0 0 0 3px rgba(0,122,255,.25); }
.custom-toggler .bar{
  width:22px; height:2px; background:#0b2b45; border-radius:2px;
  transition: transform .25s ease, opacity .2s ease;
}
.custom-toggler[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.custom-toggler[aria-expanded="true"] .bar:nth-child(2){ opacity: 0; }
.custom-toggler[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobile overlay styling */
@media (max-width: 991.98px){
  .main-nav .navbar-collapse.collapse{ transition:none; }
  .main-nav .navbar-collapse.collapse.show{
    position: fixed; inset: 0; z-index: 1040;
    background: #fff;
    padding: 76px 20px 24px;  /* room for overlay head */
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
  }

  /* overlay header (logo + close) */
  .main-nav .mobile-overlay-head{
    position: fixed; top: 0; left: 0; right: 0;
    height: 60px; padding: 10px 16px;
    z-index: 1051;
  }
  .main-nav .mobile-overlay-head .brand-logo{
    height: 48px;
    position: relative;
    top: 7px;
    left: -4px;
  }

  .main-nav .mobile-close{
    width: 40px; height: 40px;
    border: none; border-radius: 10px;
    background: rgba(0,0,0,.06);
    color: #0b2b45; font-size: 28px; line-height: 1;
  }

  /* vertical list, no bullets/underlines, comfy hits */
  .main-nav .main-menu{ gap: 8px; }
  .main-nav .nav-link{
    display: block; font-size: 1.05rem;
    border-radius: 12px; background: rgba(0,0,0,.035);
    padding: .9rem 1rem;
  }
  .main-nav .nav-link:hover{
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  }
}

/* Desktop spacing */
@media (min-width: 992px){
  .main-nav .main-menu{ gap: 2px; }
}

/* === Make subpage hamburger match homepage exactly === */
.custom-toggler{
  /* size + shape identical to .masthead-burger */
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(0,0,0,0.05);
  border: none;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;  /* stack bars */
  gap: 6px;                /* same spacing as home */
}

.custom-toggler .bar{
  width: 24px;             /* same bar width as home */
  height: 2px;
  background: var(--brand-dark, #234c5e);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}

/* cancel any previous margin-stack rules */
.custom-toggler .bar + .bar { margin-top: 0; }

/* same open (X) transforms as home */
.custom-toggler[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.custom-toggler[aria-expanded="true"] .bar:nth-child(2){ opacity: 0; }
.custom-toggler[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }


/* === Global top menu: match homepage look on white background === */
:root{
  --brand-dark: #234c5e;   /* already used on home */
  --brand-blue: #3179b0;
}

/* Logo sizing same as homepage */
.main-nav .brand-logo{ height:63px; width:auto; }
@media (max-width: 575.98px){ .main-nav .brand-logo{ height:48px; } }

/* Layout parity with homepage menu */
.main-nav .main-menu.menu-list{
  display:flex; align-items:center; gap:28px;
  margin:0; padding-left:0; list-style:none;
}

/* Links look like homepage .menu-link */
.main-nav .nav-link.menu-link{
  text-decoration:none !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:500;
  color: var(--brand-dark) !important;
  letter-spacing:.2px;
  padding:.6rem .9rem;        /* keeps pill hit-area from your base */
  border-radius:999px;
  text-transform:lowercase;
  transition: var(--transition);
}

/* Hover effect: same “pill + gradient” you already use globally */
.main-nav .nav-link.menu-link:hover,
.main-nav .nav-link.menu-link:focus{
  color:#fff !important;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  text-decoration:none !important;
}

/* Keep navbar background white globally */
.main-nav{ background:#fff !important; }

/* Desktop spacing parity with home */
@media (min-width: 992px){
  .main-nav .main-menu.menu-list{ gap:28px; }
}

/* Mobile: keep your full-screen overlay behavior, polish spacing */
@media (max-width: 991.98px){
  .main-nav .navbar-collapse.collapse.show{
    position:fixed; inset:0; z-index:1040; background:#fff;
    padding:84px 20px 24px; box-shadow:0 12px 40px rgba(0,0,0,.18);
  }
  .main-nav .main-menu .nav-link.menu-link{
    display:block; font-size:1.05rem;
    border-radius:12px; background:rgba(0,0,0,.035);
    padding:.9rem 1rem;
  }
  .main-nav .main-menu .nav-link.menu-link:hover{
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  }
}

/* Hamburger (3 bars → X) matches homepage timing/geometry */
.custom-toggler{
  width:44px; height:44px; border-radius:12px;
  background:rgba(0,0,0,0.05); border:none; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  flex-direction:column; gap:6px;
}
.custom-toggler .bar{
  width:24px; height:2px; background:var(--brand-dark); border-radius:2px;
  transition: transform .25s ease, opacity .2s ease;
}
.custom-toggler[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.custom-toggler[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.custom-toggler[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Mobile overlay header (logo + close), same as you have on home */
.main-nav .mobile-overlay-head{
  position: fixed; top:0; left:0; right:0; height:60px;
  padding:10px 16px; z-index:1051; background:#fff;
}
.main-nav .mobile-overlay-head .brand-logo{ height:48px; position:relative; top:7px; left:-4px; }
.main-nav .mobile-close{
  width:40px; height:40px; border:none; border-radius:10px;
  background:rgba(0,0,0,.06); color:#0b2b45; font-size:28px; line-height:1;
}

/* === Make base navbar links act like homepage links (no blue pill on hover) === */
.main-nav{ background:#fff !important; }

/* layout + spacing identical to home */
.main-nav .main-menu.menu-list{
  display:flex; align-items:center; gap:28px;
  margin:0; padding-left:0; list-style:none;
}

/* link base style = homepage .menu-link */
.main-nav .nav-link.menu-link{
  text-decoration:none !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:500;
  color:#234c5e !important; /* var(--brand-dark) */
  letter-spacing:.2px;
  padding:0;                 /* homepage uses plain text, not pill padding */
  border-radius:0;           /* avoid pill shape */
  background:transparent;
  transition: opacity .2s ease;
}

/* hover = subtle opacity (homepage), not gradient pill */
.main-nav .nav-link.menu-link:hover,
.main-nav .nav-link.menu-link:focus{
  background:transparent !important;
  color:#234c5e !important;
  opacity:.85;
  text-decoration:none !important;
}

/* keep mobile overlay items comfy */
@media (max-width: 991.98px){
  .main-nav .navbar-collapse.collapse.show{
    position:fixed; inset:0; z-index:1040; background:#fff;
    padding:84px 20px 24px; box-shadow:0 12px 40px rgba(0,0,0,.18);
  }
  .main-nav .main-menu .nav-link.menu-link{
    display:block; font-size:1.05rem;
    padding:.9rem 1rem;                 /* bigger tap area on mobile */
    border-radius:12px; background:rgba(0,0,0,.035);
  }
  .main-nav .main-menu .nav-link.menu-link:hover{
    background:rgba(0,0,0,.06) !important; /* simple hover in drawer */
    opacity:1;
  }
}

/* ensure the hamburger visuals remain consistent */
.custom-toggler{
  width:44px; height:44px; border-radius:12px;
  background:rgba(0,0,0,0.05); border:none; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  flex-direction:column; gap:6px;
}
.custom-toggler .bar{
  width:24px; height:2px; background:#234c5e; border-radius:2px;
  transition: transform .25s ease, opacity .2s ease;
}
.custom-toggler[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.custom-toggler[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.custom-toggler[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* mobile overlay header polish (same as home) */
.main-nav .mobile-overlay-head{
  position: fixed; top:0; left:0; right:0; height:60px;
  padding:10px 16px; z-index:1051; background:#fff;
}
.main-nav .mobile-overlay-head .brand-logo{ height:48px; position:relative; top:7px; left:-4px; }
.main-nav .mobile-close{
  width:40px; height:40px; border:none; border-radius:10px;
  background:rgba(0,0,0,.06); color:#0b2b45; font-size:28px; line-height:1;
}

img.footer-logo {
    height: 40px;
    margin-bottom: 15px;
}