/* =========================================
   GLOBAL
   ========================================= */
:root{
  /* Header + button (slate) */
  --nav-grad-1:#2b3442;
  --nav-grad-2:#3d4a5a;

  /* Reuse for gradient buttons elsewhere */
  --btn-grad-1:var(--nav-grad-1);
  --btn-grad-2:var(--nav-grad-2);

  --btn-radius:10px;
  --container-max:1320px; /* matches your wrapper */
  --nav-h:64px;           /* default; updated by JS for iOS fix */
}

html, body{
  margin:0;
  padding:0;
  background-color:#e6f0f3; /* soft complementary blue */
  min-height:100%;
}

body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Wrap page content to center and give breathing room */
.wrapper{
  max-width:var(--container-max);
  margin:0 auto;
  padding:2rem 1rem;
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:visible; /* sticky-friendly */
}

/* =========================================
   NAVBAR (sticky + blurred + gradient)
   ========================================= */
.card-navbar{
  /* Sticky by default */
  position:-webkit-sticky; /* iOS/Safari */
  position:sticky;
  top:env(safe-area-inset-top, 0px);
  z-index:1100;

  /* Semi-transparent gradient so blur shows */
  background:linear-gradient(135deg, rgba(43,52,66,.9), rgba(61,74,90,.9));
  border-radius:.75rem;
  padding:.5rem 1.5rem;
  box-shadow:0 4px 6px rgba(0,0,0,.15);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  /* CRITICAL for desktop dropdowns */
  overflow:visible;     /* let dropdown escape rounded/blurred header */
  isolation:isolate;    /* create stacking context so z-index works reliably */

  /* IMPORTANT: avoid transforms on sticky element (breaks sticky on iOS) */
}

.card-navbar .navbar-brand,
.card-navbar .nav-link{ color:#fff !important; }

.card-navbar .nav-link:hover{ text-decoration:underline; }

/* Toggler visible on dark bg */
.card-navbar .navbar-toggler{
  border-color:rgba(255,255,255,.35);
  z-index:1101;
}
.card-navbar .navbar-toggler-icon{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Collapse area scrolls independently so navbar stays stuck */
.card-navbar .navbar-collapse{
  max-height:calc(100vh - 1rem);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;

  /* Also ensure no clipping for dropdowns on desktop */
  overflow-x:visible;
  overflow-y:visible; /* the dropdown shouldn't be inside the scroller on wide screens */
}

/* Make sure nav list itself doesn't clip dropdowns */
.card-navbar .navbar-nav{
  overflow:visible;
}

/* Right-aligned dropdown placement + safe stacking */
.card-navbar .dropdown-menu{
  z-index:2000;     /* above navbar */
  margin-top:.5rem; /* small gap under the flag button */
}
.card-navbar .dropdown-menu-end{
  right:0;
  left:auto;
}

/* Brand “nett” uses the same gradient as header/buttons */
.brand-nett{
  background:linear-gradient(135deg, var(--btn-grad-1), var(--btn-grad-2));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:600;
}

/* =========================================
   FOOTER
   ========================================= */
.footer-container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 1rem;
  width:100%;
}

footer.footer-content{
  background-color:#e9ecef;
  border-radius:.75rem;
  padding:.5rem 1.5rem;
  text-align:center;
  font-size:.9rem;
  color:#6c757d;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.075);
}

/* Flags in navbar */
.nav-flag{ font-size:1.5rem; line-height:1; }

/* =========================================
   MOBILE TWEAKS kept from your previous CSS
   ========================================= */
@media (max-width:576px){
  .carousel-item .col{ flex:0 0 100%; max-width:100%; }
  .carousel-item .row{ margin:0; }
  .card{ padding-bottom:1rem; }
}

/* =========================================
   iOS FALLBACK: force fixed header if sticky fails
   =========================================
   We toggle a .is-ios class on <body> via a tiny JS snippet.
   This preserves look/blur and prevents the non-sticky bug.
*/
body.is-ios .card-navbar{
  position:fixed;
  left:50%;
  top:env(safe-area-inset-top, 0px);
  transform:translateX(-50%); /* center like the wrapper */
  width:calc(min(var(--container-max), 100%) - 2rem); /* align with wrapper padding (1rem each side) */
  border-radius:.75rem;
}

/* Add safe space below the fixed header so content doesn't jump */
body.is-ios .wrapper{
  padding-top:calc(var(--nav-h) + 1rem); /* header height + a bit of space */
}

/* Ensure the collapse never exceeds viewport on iOS fixed header */
body.is-ios .card-navbar .navbar-collapse{
  max-height:calc(100vh - var(--nav-h) - 1rem);
}