/* ==========================================================================
   VilaVPN nav bar (2026-10 refresh) — SITEWIDE (linked from includes/head.tpl).
   CSS only: header.tpl / navbar.tpl markup, Bootstrap dropdown + offcanvas
   behaviour (responsive-menu.js) are untouched. This file never changes
   display / visibility / position of menus — only colour, type and shape.
   Palette = the original brand cyan family (#55c8e8 / #28a3cc / navy), same as
   css/vila-home.css + css/vila-footer.css.
   Cloudflare caches this file for a year: bump &mv= in includes/head.tpl on every edit.
   ========================================================================== */

/* ---- Top utility bar (Account · language · Register · View Cart) ------ */
header #header { background:rgba(4,12,18,.55); border-bottom:1px solid rgba(140,210,235,.10); }
header #header .top-nav > li > a { color:rgba(230,242,248,.78); font:500 12.5px/1 "Roboto",sans-serif; letter-spacing:.02em; text-decoration:none; transition:color .2s ease; }
header #header .top-nav > li > a:hover, header #header .top-nav > li > a:focus-visible { color:#fff; text-decoration:none; }
header #header .top-nav > li > a .fa-globe { color:#55c8e8; }

/* ---- Main nav links ---------------------------------------------------- */
header nav.navbar .navbar-nav > li > a { color:rgba(255,255,255,.86); font:600 14px/1 "Titillium Web",sans-serif; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; transition:color .2s ease,background-size .3s ease; }
header nav.navbar .navbar-nav > li > a:hover, header nav.navbar .navbar-nav > li > a:focus-visible,
header nav.navbar .navbar-nav > li.active > a, header nav.navbar .navbar-nav > li.show > a { color:#fff; text-decoration:none; }
header nav.navbar .navbar-nav > li > a:focus-visible { outline:3px solid #0a84ff; outline-offset:4px; border-radius:6px; }
/* Desktop row = >=1025px: the theme's off-canvas menu covers <=1024px (responsive.css:568 `max-width:1024px`). */
@media (min-width:1025px) {
  /* cyan bar grows under the label on hover / active (background, not a pseudo: ::after is the dropdown caret) */
  header nav.navbar .navbar-nav > li > a:not(.login-btn):not(.login-out) {
    background-image:linear-gradient(90deg,#55c8e8,#28a3cc); background-repeat:no-repeat;
    background-position:50% calc(50% + 15px); background-size:0 2px; }
  header nav.navbar .navbar-nav > li > a:not(.login-btn):not(.login-out):hover,
  header nav.navbar .navbar-nav > li.active > a:not(.login-btn):not(.login-out),
  header nav.navbar .navbar-nav > li.show > a:not(.login-btn):not(.login-out) { background-size:calc(100% - 24px) 2px; }
  /* the theme paints a dark box on hovered/open links; the cyan bar replaces it */
  header nav.navbar .navbar-nav > li > a:not(.login-btn):not(.login-out):hover,
  header nav.navbar .navbar-nav > li.show > a:not(.login-btn):not(.login-out) { background-color:transparent; }
  /* centre the LOGIN pill on the link row (style.css:849 gives it margin:34px 0, which sits it ~6px low) */
  header nav.navbar .navbar-nav { align-items:center; }
  header nav.navbar .navbar-nav > li > a.login-btn, header nav.navbar .navbar-nav > li > a.login-out { margin-top:0; margin-bottom:0; }
  /* the theme places the caret absolutely under the label; the cyan bar already marks the open menu */
  header nav.navbar .navbar-nav .dropdown-toggle::after { display:none; }
}
/* phone menu caret: small chevron instead of a bar */
header nav.navbar .navbar-nav .dropdown-toggle::after { border:0; background:none; box-shadow:none; width:6px; height:6px; margin-left:6px; vertical-align:3px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); opacity:.8; }

/* ---- LOGIN / logout: same pill as the site buttons --------------------- */
header nav.navbar .navbar-nav > li > a.login-btn,
header nav.navbar .navbar-nav > li > a.login-out {
  padding:12px 26px !important; border-radius:999px; font:700 13px/1 "Titillium Web",sans-serif; letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  transition:background-color .25s ease,box-shadow .25s ease,translate .25s ease,color .25s ease; }
header nav.navbar .navbar-nav > li > a.login-btn { background:#55c8e8; color:#06121b; box-shadow:0 10px 24px -10px rgba(40,163,204,.9); }
header nav.navbar .navbar-nav > li > a.login-btn:hover, header nav.navbar .navbar-nav > li > a.login-btn:focus { background:#7fd6f0 !important; color:#06121b; translate:0 -1px; box-shadow:0 14px 28px -10px rgba(40,163,204,.95); }
header nav.navbar .navbar-nav > li > a.login-out { background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.85); }
/* custom.css:92 forces a red hover with !important; replace it so text stays readable (navy on white) */
header nav.navbar .navbar-nav > li > a.login-out:hover, header nav.navbar .navbar-nav > li > a.login-out:focus { background:#fff !important; color:#06121b; }

/* ---- Dropdowns (Store, Account, language, notifications): dark glass --- */
header .dropdown-menu, header #languageChooserContent, header #accountNotificationsContent, header #loginOrRegisterContent {
  color:#d3e4ee;
  background:#0b2131; border:1px solid rgba(140,210,235,.16); border-radius:12px; padding:6px;
  box-shadow:0 22px 44px -14px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.2); }
header .dropdown-menu > li > a, header #languageChooserContent a, header #accountNotificationsContent a {
  display:block; padding:9px 14px; border-radius:8px; color:#d3e4ee; font:500 14px/1.3 "Roboto",sans-serif; letter-spacing:0; text-transform:none; text-decoration:none; background:none; }
header .dropdown-menu > li > a:hover, header .dropdown-menu > li > a:focus-visible,
header #languageChooserContent a:hover, header #accountNotificationsContent a:hover { background:rgba(85,200,232,.12); color:#fff; }
/* variables.css:157-169 styles these as `#… ul li a` (#333 text, #f5f5f5 hover) — match that specificity */
header #languageChooserContent ul li a, header #accountNotificationsContent ul li a, header #loginOrRegisterContent ul li a {
  padding:9px 14px; border-radius:8px; color:#d3e4ee; font:500 14px/1.3 "Roboto",sans-serif; }
header #languageChooserContent ul li a:hover, header #languageChooserContent ul li a:focus-visible,
header #accountNotificationsContent ul li a:hover, header #accountNotificationsContent ul li a:focus-visible,
header #loginOrRegisterContent ul li a:hover, header #loginOrRegisterContent ul li a:focus-visible { background:rgba(85,200,232,.12); color:#fff; }
header .dropdown-menu > li.nav-divider { height:1px; margin:6px 8px; background-color:rgba(140,210,235,.14); }
header .dropdown-menu > li.nav-divider > a { height:1px; margin:6px 8px; padding:0; overflow:hidden; font-size:0; background:rgba(140,210,235,.14); pointer-events:none; }
header #accountNotificationsContent .none { color:#93a8b8; padding:9px 14px; }

/* ---- Off-canvas menu (phones AND tablets, <=1024px) ---------------------
   Bootstrap's navbar-expand-md turns the list into a row from 768px, so on
   tablets the 250px panel showed the links wrapped 2-3 per line (also on prod
   before this change). Force the vertical list at every off-canvas width. */
@media (max-width:1024px) {
  header nav.navbar .navbar-offcanvas .navbar-nav { flex-direction:column; align-items:stretch; flex-wrap:nowrap; }
  header nav.navbar .navbar-offcanvas .navbar-nav > li { width:100%; }
  /* from 768px the theme positions the caret absolutely at the link's left edge; keep it after the label */
  header nav.navbar .navbar-offcanvas .dropdown-toggle::after { position:static; display:inline-block; }
  header nav.navbar .navbar-offcanvas { background:#06121b; box-shadow:1px 0 0 rgba(140,210,235,.12); }
  header nav.navbar .navbar-offcanvas .navbar-nav > li > a:not(.login-btn):not(.login-out) { font-size:16px; letter-spacing:.08em; color:#e6f2f8; }
  header nav.navbar .navbar-offcanvas .navbar-nav > li > a:not(.login-btn):not(.login-out):hover { color:#55c8e8; }
  header nav.navbar .navbar-offcanvas .navbar-nav > li { border-color:rgba(140,210,235,.10); }
  header nav.navbar .navbar-offcanvas .dropdown-menu { background:rgba(255,255,255,.04); border:0; box-shadow:none; }
  header nav.navbar .navbar-nav > li > a.login-btn, header nav.navbar .navbar-nav > li > a.login-out { display:inline-block; margin:16px 0 8px; }
}

/* ---- Store / download badge component (includes/store-badge.tpl) — sitewide ----
   Every badge is a 40px-tall box: official Apple/Google art as <img>, Windows and
   "all platforms" drawn in HTML to match (black, 1px #a6a6a6 edge, two-line label). */
.sb { display:inline-flex; align-items:center; height:40px; border-radius:7px; line-height:1; vertical-align:middle; text-decoration:none; transition:translate .25s ease,box-shadow .25s ease; }
.sb:hover, .sb:focus { text-decoration:none; translate:0 -2px; box-shadow:0 10px 22px -10px rgba(8,32,49,.7); }
.sb:focus-visible { outline:3px solid #0a84ff; outline-offset:3px; }
.sb img { display:block; width:auto; height:40px; }
.sb--html { gap:8px; padding:0 12px 0 10px; background:#000; color:#fff; box-shadow:inset 0 0 0 1px #a6a6a6; }
.sb--html:hover, .sb--html:focus { color:#fff; box-shadow:inset 0 0 0 1px #55c8e8,0 10px 22px -10px rgba(40,163,204,.8); }
.sb--html > .fab, .sb--html > .fa-th-large { font-size:20px; }
.sb__txt { display:flex; flex-direction:column; align-items:flex-start; white-space:nowrap; font:600 15px/1.05 "Titillium Web","PingFang SC","Microsoft YaHei",sans-serif; letter-spacing:.01em; }
.sb__txt small { margin-bottom:2px; font:400 9px/1.1 "Roboto","PingFang SC","Microsoft YaHei",sans-serif; letter-spacing:.02em; color:#e6edf2; }
.sb__arr { margin-left:2px; font-size:11px; color:#55c8e8; transition:translate .25s ease; }
.sb--all:hover .sb__arr { translate:3px 0; }

@media (prefers-reduced-motion:reduce) {
  .sb:hover, .sb:focus, .sb--all:hover .sb__arr { translate:none; }
  header nav.navbar .navbar-nav > li > a, header #header .top-nav > li > a { transition:none; }
  header nav.navbar .navbar-nav > li > a.login-btn:hover { translate:none; }
}