/* ===== Base reset for this menu ===== */
.topnav, .topnav * { box-sizing: border-box; }
.topnav { width:100%; margin:0 auto; padding:0; position:relative; z-index:3200; }

/* Align items in one line (desktop) */
@media (min-width: 992px){
  .topnav {
    display:flex; gap:8px; align-items:center; justify-content:center;
    padding:10px 14px;
  }
}

/* Links look like pills (desktop) */
@media (min-width: 992px){
  .topnav > a,
  .topnav .dropbtn{
    appearance:none; border:1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.08);
    color:#e9eef5; font-weight:600; letter-spacing:.02em;
    padding:8px 16px; margin:0 4px;
    border-radius:999px; line-height:1.15; cursor:pointer;
    transition: background .22s ease, color .22s ease, transform .12s ease;
    text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  }
  .topnav > a:hover,
  .topnav .dropbtn:hover{
    background: rgba(255,255,255,.18);
    color:#9fe8ff; transform: translateY(-1px);
  }
}

/* Bar container (desktop) */
@media (min-width: 992px){
  .topnav{
    background:#3f4449;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 12px 28px rgba(0,0,0,.28);
  }
}

/* Dropdown wrapper (desktop) */
@media (min-width: 992px){
  .topnav .dropdown{ position:relative; }
  .topnav .dropdown .dropdown-content{
    position:absolute; top:calc(100% + 0px); left:0; min-width:520px;
    background:#3f4449; border:1px solid rgba(255,255,255,.12);
    border-radius:14px; padding:12px 8px;
    box-shadow:0 16px 36px rgba(0,0,0,.32);
    display:none; z-index:4000;
  }
  .topnav .dropdown:hover > .dropdown-content{ display:block; }
}

/* Dropdown links (desktop) */
@media (min-width: 992px){
  .topnav .dropdown-content a{
    display:block; padding:6px 14px; border-radius:8px;
    color:#e9eef5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    text-decoration:none; transition: background .18s ease, color .18s ease;
  }
  .topnav .dropdown-content a:hover{
    background: rgba(255,255,255,.10); color:#9fe8ff;
  }
}

/* Right-edge dropdowns open inward (desktop) */
@media (min-width: 992px){
  .topnav .dropdown:last-child .dropdown-content,
  .topnav .dropdown:nth-last-child(2) .dropdown-content{
    left:auto; right:0;
  }
  /* tiny invisible bridge to prevent hover gap */
  .topnav .dropdown::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:10px;
  }
}

/* Accents for specific targets (desktop) */
@media (min-width: 992px){
  /* Ski Centers (site root) */
  .topnav > a[href="http://www.snowreport.gr"],
  .topnav > a[href="https://www.snowreport.gr"]{
    background: linear-gradient(135deg,#4dd0ff,#2196f3); color:#fff; border-color:#2196f3;
  }
  .topnav > a[href*="snowcam.gr"]{
    background: linear-gradient(135deg,#ff6f61,#ff3d00); color:#fff; border-color:#ff3d00;
  }
  .topnav > a[href*="shop.snowreport.gr"],
  .topnav .dropbtn:has(+ .dropdown-content a[href*="offers/gr/"]) { /* loose proxy for SRC */
    background: linear-gradient(135deg,#43e97b,#38f9d7); color:#0b1a14; border-color:#26c6da;
  }
}

/* Make your FA caret look nicer next to text */
.topnav .dropbtn .fa{ opacity:.8; }

/* ===== Mobile: keep it simple (stacked list; mmenu can take over if used) ===== */
@media (max-width: 991px){
  .topnav{
    display:flex; flex-wrap:wrap; gap:0; padding:0; background:#444;
  }
  .topnav > a,
  .topnav .dropbtn{
    flex:1 0 100%; text-align:left; padding:12px 14px;
    background:#444; color:#fff; border:none; border-bottom:1px solid #555;
  }
  .topnav .dropdown{ width:100%; }
  .topnav .dropdown-content{ display:none; background:#333; }
  .topnav .dropdown.open .dropdown-content{ display:block; }
  .topnav .dropdown-content a{ color:#e9eef5; padding:10px 14px; display:block; }
}

/* Optional: small shadow under the whole bar */
.topnav{ box-shadow:0 2px 6px rgba(0,0,0,.15); }

/* edo edo edo */

/* ===== Desktop: multi-column dropdowns for .topnav ===== */
@media (min-width: 992px){
  /* Default: 2 columns */
  .topnav .dropdown .dropdown-content{
    column-count: 2;
    column-gap: 12px;
    min-width: 520px;              /* ~2×240 + padding */
  }

  /* If many items (≥13), switch to 3 columns + wider panel */
  .topnav .dropdown .dropdown-content:has(a:nth-of-type(n+13)){
    column-count: 3;
    min-width: 780px;              /* ~3×240 + padding */
  }

  /* Keep each link intact inside a column */
  .topnav .dropdown .dropdown-content a{
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: block;
  }

  /* Right-edge dropdowns still open inward (from your existing rules).
 *      No change needed, but ensure columns look good when right-aligned: */
  .topnav .dropdown:last-child .dropdown-content,
  .topnav .dropdown:nth-last-child(2) .dropdown-content{
    right: 0;
    left: auto;
  }
}