/* =========================
   BANNER
   ========================= */
.banner{
  position: relative;
  overflow: hidden !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 1.5lh;

  min-block-size: 180px;
  padding-inline: max(
    var(--_padding),
    calc((100% - var(--theme-container-width, 1920px)) / 2)
  );
  padding-block: 56px;

  text-align: center;
  color: #ffffff;

  background-color: var(--_background);
  background-image: var(--_image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.banner::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.60) 0%,
    rgba(0,0,0,.45) 50%,
    rgba(0,0,0,.35) 100%
  );
  z-index: 0;
  pointer-events: none;
}

.banner > *{
  position: relative;
  z-index: 1;
}

.banner h1{
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 4px 24px rgba(0,0,0,.65);
  color: #fff !important;
}

.banner p{
  max-width: 900px;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.5;
  margin: 0;
  opacity: .95;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
  padding-top: 20px;
}

.banner .banner-content{
  padding: 24px 32px;
  border-radius: 16px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (max-width: 640px){
  .banner{ padding-block: 48px; }
  .banner::before{ background: rgba(0,0,0,.60); }
  .banner p{ padding-inline: 12px; }
}


/* =========================
   HEADER (SFV Gradient)
   ========================= */
header.header[data-component="header"]{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    linear-gradient(90deg, #A82022 0%, #E30613 100%) !important;
}

.header{
  border: none !important;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: hidden;
}

.header-site-name:hover,
.header-site-name:focus{
  text-decoration: none !important;
}


/* =========================
   TYPO / TEXT COLORS
   ========================= */
h1,h2,h3,h4,h5,h6{ color:#404040; }
.article-body p{ color:#404040; }

.breadcrumbs{ color:#999999; }
.breadcrumbs a{ color: inherit; }


/* =========================
   SEARCH BAR (only this page)
   ========================= */
html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"] .search-bar{
  width: min(760px, 92vw);
}

html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"] .search-input{
  position: relative;
  width: 100%;
}

html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"] .search-input__input{
  width: 100%;
  height: 58px;
  padding: 0 56px 0 56px;
  border-radius: 999px;

  background: rgba(255,255,255,.92);
  color: #404040;

  outline: none;

  
}

html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"] .search-input__input::placeholder{
  color: #404040);
}

html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"] .search-input__submit{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 42px;
  height: 42px;
  border-radius: 999px;

  border: 0;
  background: rgba(222,32,55,.10);
  color: #DE2037;

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

  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"] .search-input__submit:hover{
  background: rgba(222,32,55,.16);
  transform: translateY(-50%) scale(1.04);
}

html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"] .search-input__slot{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: rgba(17,24,39,.55);
  pointer-events: none;
}


/* =========================
   TILES (only 2 custom cards)
   - no overlay click tricks
   - no menu hacks
   ========================= */
.tiles .tile{
  position: relative;
  padding: 0 !important;
}

.tiles .tile-text{
  position: absolute;
  left: 14px;
  right: 14px;
  top: 52px;
  padding: 12px 14px;
  border-radius: 12px;

  background:#de2037;
  color:#fff;

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;

  transition: opacity .2s ease, transform .2s ease;
}

.tiles li:hover .tile-text,
.tiles .tile:hover .tile-text{
  opacity: 1;
  transform: translateY(0);
  border: 1px solid #de2037;
}

/* CARD look shared */
.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-by-sfv-asf"]),
.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-ch"]){
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.12) !important;
}

.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-by-sfv-asf"]):hover,
.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-ch"]):hover{
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
}

/* Layout: image -> title -> text */
.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-by-sfv-asf"]) .tile-body,
.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-ch"]) .tile-body{
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
}

/* IMAGE */
.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-by-sfv-asf"]) .tile-body::before{
  content:"";
  display:block;
  height: 300px;
  background: url("https://nd-travel-blog.com/wp-content/uploads/2026/01/Frame-1597880396-scaled.png") center top/cover no-repeat;
}

.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-ch"]) .tile-body::before{
  content:"";
  display:block;
  height: 300px;
  background: url("https://nd-travel-blog.com/wp-content/uploads/2026/01/Scene-1-scaled.png") center top/cover no-repeat;
}

@media (max-width: 640px){
  .tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-by-sfv-asf"]) .tile-body::before,
  .tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-ch"]) .tile-body::before{
    height: 200px;
  }
}

/* TITLE */
.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-by-sfv-asf"]) .tile-title,
.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-ch"]) .tile-title{
  margin: 18px 18px 6px !important;
}

.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-by-sfv-asf"]) .tile-title a,
.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-ch"]) .tile-title a{
  display:block !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
}

.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-by-sfv-asf"]) .tile-title a:hover,
.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-ch"]) .tile-title a:hover{
  color: #de2037 !important;
}

/* hide original excerpt */
.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-by-sfv-asf"]) .tile-text,
.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-ch"]) .tile-text{
  display:none !important;
}

/* subtitle */
.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-by-sfv-asf"]) .tile-title::after{
  content: "Mobile App";
  display:block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 400;
  color:#999999;
}

.tile:has(.tile-title a[href="/sfv-asf-clubservices/clubcorner-ch"]) .tile-title::after{
  content: "Web Version";
  display:block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 400;
  color:#999999;
}


/* =========================
   FOOTER (simple + clean)
   ========================= */
.footer{
  background:#ffffff;
  border-top: 1px solid #eff0f4;
  padding: 20px 32px;
}

.footer-content{
  display:flex;
  align-items:center;
  gap:16px;
  list-style:none;
  margin:0;
  padding:0;
}

.footer-content li{ display:none !important; }

.footer-logo{ display:block; height:36px; }
.footer-logo--dark,
.footer-logo--light{ display:none; }
.footer-logo:first-of-type{ display:block; }

.footer-content::after{
  content: "Copyright © 2026 | Schweizerischer Fussballverband";
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: 1.4;
  white-space: nowrap;
}

@media screen and (min-width: 1024px) {
    .article-overview-page.hero-layout .content {
        grid-template-columns: repeat(2, minmax(0px, 1fr));     
    }
}

/* ==========================================================
   1) UKLONI BULLET POINTS (•)
   ========================================================== */
.tree,
.tree ul,
.tree li{
  list-style: none !important;
  margin: 0;
  padding: 0;
}

/* sigurnost: ništa pseudo-bullet */
.tree li::before,
.tree li::marker{
  content: none !important;
  display: none !important;
}

/* ==========================================================
   2) TREE ITEM HEADER – FLEX LAYOUT
   (tekst lijevo, chevron desno)
   ========================================================== */
.tree-item-header{
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}

/* LINK = zauzima sav prostor (klikabilan red) */
.tree-item-header > a{
  flex: 1 1 auto !important;
  order: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* CHEVRON BUTTON DESNO */
.tree-item-header > .tree-action{
  order: 2;
  margin-left: auto !important;
}

/* ==========================================================
   3) IKONICE (SVG) LIJEVO OD TEKSTA
   ========================================================== */

/* zajednički stil */
.tree-item-header > a::before{
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: grayscale(1) brightness(0.25);
}

/* ==========================================================
   4) HOVER + ACTIVE (SFV CRVENA)
   ========================================================== */
.tree-item-header > a:hover{
  color: #de2037 !important;
}

.tree-item-header > a:hover::before{
  filter: invert(17%) sepia(95%) saturate(7000%)
          hue-rotate(355deg) brightness(95%) contrast(105%);
}

/* aktivna stranica */
.tree-item-header > a[aria-current="page"],
li.is-active > .tree-item-header > a,
li.active > .tree-item-header > a{
  color: #de2037 !important;
}

.tree-item-header > a[aria-current="page"]::before,
li.is-active > .tree-item-header > a::before,
li.active > .tree-item-header > a::before{
  filter: invert(17%) sepia(95%) saturate(7000%)
          hue-rotate(355deg) brightness(95%) contrast(105%);
}

/* ==========================================================
   5) CHEVRON – bez sive pozadine
   ========================================================== */
.tree-action,
.tree-action:hover,
.tree-action:focus{
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================
   FINAL TREE FIX:
   - bez bullet-a
   - chevron desno
   - ikonice SAMO za: Home/Spielbetrieb/Administration/Stammdaten
   - nema duplih ikona
   ========================================= */

/* 1) ukloni sve bullet markere */
.tree, .tree ul, .tree li,
.tree-item, .tree-item ul, .tree-item li{
  list-style: none !important;
}
.tree li::marker,
.tree-item::marker{
  content: none !important;
}
.tree li::before,
.tree-item::before{
  content: none !important;
  display: none !important;
}

/* 2) layout: link lijevo (klikabilan red), chevron desno */
.tree-item-header{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.tree-item-header > a{
  order: 1 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  text-decoration: none !important;

  /* prostor za ikonu */
  padding-left: 36px !important;
  position: relative !important;
}
.tree-item-header > .tree-action{
  order: 2 !important;
  margin-left: auto !important;
  background: transparent !important;
  box-shadow: none !important;
}
.tree-action:hover,
.tree-action:focus{
  background: transparent !important;
  box-shadow: none !important;
}

/* 3) UGASI sve stare ikonice (i ::before i ::after) globalno */
.tree-item-header > a::before,
.tree-item-header > a::after{
  content: none !important;
  display: none !important;
}

/* 4) uključi ikonu SAMO za 4 glavne stavke (koristimo ::before) */
.tree-item-header > a[href="/sfv-asf-clubservices/home"]::before,
.tree-item-header > a[href="/sfv-asf-clubservices/spielbetrieb"]::before,
.tree-item-header > a[href="/sfv-asf-clubservices/administration"]::before,
.tree-item-header > a[href="/sfv-asf-clubservices/stammdaten"]::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 12px !important;
  width: 18px !important;
  height: 18px !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  filter: grayscale(1) brightness(0.25) !important;
  transition: filter .2s ease !important;
}

/* slike ikona */
.tree-item-header > a[href="/sfv-asf-clubservices/home"]::before{
  background-image: url("https://nd-travel-blog.com/wp-content/uploads/2026/01/Home.svg") !important;
}
.tree-item-header > a[href="/sfv-asf-clubservices/spielbetrieb"]::before{
  background-image: url("https://nd-travel-blog.com/wp-content/uploads/2026/01/Spielbetrieb.svg") !important;
}
.tree-item-header > a[href="/sfv-asf-clubservices/administration"]::before{
  background-image: url("https://nd-travel-blog.com/wp-content/uploads/2026/01/Administration.svg") !important;
}
.tree-item-header > a[href="/sfv-asf-clubservices/stammdaten"]::before{
  background-image: url("https://nd-travel-blog.com/wp-content/uploads/2026/01/Stammdaten.svg") !important;
}

/* hover + active (tekst + ikona crveni) */
.tree-item-header > a:hover{
  color: #de2037 !important;
}
.tree-item-header > a:hover::before{
  filter: invert(17%) sepia(95%) saturate(7000%)
          hue-rotate(355deg) brightness(95%) contrast(105%) !important;
}

.tree-item-header > a[aria-current="page"],
li.is-active > .tree-item-header > a,
li.active > .tree-item-header > a{
  color: #de2037 !important;
}
.tree-item-header > a[aria-current="page"]::before,
li.is-active > .tree-item-header > a::before,
li.active > .tree-item-header > a::before{
  filter: invert(17%) sepia(95%) saturate(7000%)
          hue-rotate(355deg) brightness(95%) contrast(105%) !important;
}

/* ================================
   Bullet fix – GAĐA SAMO leaf bullet
   (ne dira a::after ikone)
   ================================ */
.tree-item:not(:has(.tree-action))::before,
.tree-item:not(:has(.tree-action)) > .tree-item-header::before{
  content: none !important;
  display: none !important;
}
.tree-item{ list-style: none !important; }
.tree-item::marker{ content: none !important; }

.banner {
padding-top:8rem;
  padding-bottom:8rem;
  margin-top:-25px;
}

/* =========================
   SEARCH – sivi background samo iza ikonice
   ========================= */

/* input ostaje bijel */
.search-input__input{
  background: #ffffff !important;
  color: #404040 !important;
}

/* prostor za dugme */
.search-input__input{
  padding-right: 56px !important;
}

/* dugme (ikona search) */
.search-input__submit{
  right: 8px !important;
  left: auto !important;

  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;

  background: #F2F2F2 !important;   /* SIVA POZADINA */
  color: #404040 !important;        /* BOJA IKONE */

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: none !important;
}

/* hover – lagano tamnije */
.search-input__submit:hover{
  background: #EAEAEA !important;
}

/* makni eventualni default bg */
.search-input__submit::before,
.search-input__submit::after{
  content: none !important;
}
.search-input__input{
  padding-left:30px !important;
}

/* =========================
   BREADCRUMBS – slash boja
   ========================= */

/* boja slash separatora */
.breadcrumbs li:not(:last-child)::after{
  color: #999999 !important;
}

/* sigurnost: i linkovi u istoj boji */
.breadcrumbs,
.breadcrumbs a{
  color: #999999 !important;
}

/* hover može ostati isti ili blago tamniji */
.breadcrumbs a:hover{
  color: #999999 !important;
  text-decoration: underline;
}

/* =========================
   BREADCRUMBS – underline boja
   ========================= */

/* svi breadcrumb linkovi */
.breadcrumbs a{
  color: #999999 !important;
  text-decoration-color: #999999 !important;
}

/* posebno za aktivni / zadnji breadcrumb */
.breadcrumbs li:last-child a{
  color: #999999 !important;
  text-decoration: underline !important;
  text-decoration-color: #999999 !important;
}

/* hover ostaje isti */
.breadcrumbs a:hover{
  color: #999999 !important;
  text-decoration-color: #999999 !important;
}

/* =========================
   PAGE PAGINATION – colors
   ========================= */

/* Label: Vorherige Seite / Nächste Seite */
.page-pagination-label{
  color: #404040 !important;
}

/* Title: Anleitungen / Spielbetrieb */
.page-pagination-title{
  color: #999999 !important;
}

/* Arrow icons */
.page-pagination-icon svg{
  color: #404040 !important;
  fill: currentColor !important;
}

/* sigurnost: link ne mijenja boje */
.page-pagination a{
  text-decoration: none !important;
}

/* Hover – samo blagi feedback (opcionalno) */
.page-pagination a:hover .page-pagination-label{
  color: #404040 !important;
}
.page-pagination a:hover .page-pagination-title{
  color: #999999 !important;
}

.footer-content{
  position: relative !important;
  cursor: pointer;
}

/* ===============================
   NAV – bullet OFF
   =============================== */
#navigator-nav ul,
#navigator-nav li{
  list-style: none !important;
}
#navigator-nav li::marker,
#navigator-nav li::before{
  content: none !important;
  display: none !important;
}

/* ===============================
   HEADER LAYOUT
   tekst lijevo – chevron desno
   =============================== */
 /*  
#navigator-nav .tree-item-header{
  display: flex !important;
  align-items: center !important;
}
*/
#navigator-nav .tree-item-header > a{
  flex: 1;
  color: #404040 !important;
  text-decoration: none !important;
}

/* chevron desno */
#navigator-nav .tree-item-header > .tree-action{
  margin-left: auto !important;
  background: transparent !important;
}

/* ===============================
   HOVER + ACTIVE
   =============================== */
#navigator-nav .tree-item-header > a:hover{
  color: #de2037 !important;
}

#navigator-nav .tree-item-header > a[aria-current="page"],
#navigator-nav li.is-active > .tree-item-header > a{
  color: #de2037 !important;
}

/* ===============================
   IKONICE (ne diraju layout)
   =============================== */
#navigator-nav .tree-item-header > a{
  position: relative;
  padding-left: 28px;
}

#navigator-nav .tree-item-header > a::before{
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  filter: grayscale(1) brightness(.3);
}

/* HOME */
#navigator-nav a[href="/sfv-asf-clubservices/home"]::before{
  background-image: url("https://nd-travel-blog.com/wp-content/uploads/2026/01/Home.svg");
}

/* SPIELBETRIEB */
#navigator-nav a[href="/sfv-asf-clubservices/spielbetrieb"]::before{
  background-image: url("https://nd-travel-blog.com/wp-content/uploads/2026/01/Spielbetrieb.svg");
}

/* ADMINISTRATION */
#navigator-nav a[href="/sfv-asf-clubservices/administration"]::before{
  background-image: url("https://nd-travel-blog.com/wp-content/uploads/2026/01/Administration.svg");
}

/* STAMMDATEN */
#navigator-nav a[href="/sfv-asf-clubservices/stammdaten"]::before{
  background-image: url("https://nd-travel-blog.com/wp-content/uploads/2026/01/Stammdaten.svg");
}

/* hover / active icon red */
#navigator-nav a:hover::before,
#navigator-nav a[aria-current="page"]::before{
  filter: invert(17%) sepia(95%) saturate(7000%)
          hue-rotate(355deg) brightness(95%) contrast(105%);
}

/* =========================
   CHILD PAGES – LIST STYLE
   ========================= */

/* wrapper */
.child-pages{
  border-radius: 8px !important;
  overflow: hidden;
}

/* lista */
.child-pages > ul{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ITEM */
.child-pages > ul > li{
  border-bottom: 1px solid #eff0f4;
  transition: background .15s ease;
}

.child-pages > ul > li:last-child{
  border-bottom: 0;
}

/* article reset */
.child-pages article{
  background: transparent !important;
  padding: 0 !important;
}

/* LINK */
.child-pages article > a{
  display: block;
  padding: 16px 20px;

  color: #404040 !important;
  text-decoration: none !important;
  font-weight: 400;

  transition: color .15s ease;
}

/* HOVER – radius + bg */
.child-pages > ul > li:hover{
  background: #eff0f4 !important;
}

.child-pages > ul > li:hover a{
  color: #de2037 !important;
  text-decoration: none !important;
}

/* ACTIVE */
.child-pages article > a[aria-current="page"]{
  color: #de2037 !important;
  font-weight: 400;
}

.toc.sticky .toc-list .toc-link[aria-current=true]:before {
    background-color: #de2037;
}




/* 6) "Auf dieser Seite" weight */
.toc.sticky .toc-heading{
  font-weight: 400 !important;
}

.toc.sticky {
    padding-block-end: 0px !important;  
}



/* =========================
   ARTICLE LIST ITEMS – TEXT COLOR
   ========================= */

/* obične liste u sadržaju */
.article-body ul,
.article-body ol{
  color: #404040 !important;
}

/* tekst unutar li / p u listama */
.article-body ul li,
.article-body ol li,
.article-body ul li p,
.article-body ol li p{
  color: #404040 !important;
}

/* bullet (marker) boja */
.article-body ul li::marker,
.article-body ol li::marker{
  color: #404040 !important;
}




/* ===============================
   SEARCH – ukloni focus okvir
   =============================== */

/* input – bez okvira i sjene na klik */
.search-input__input:focus,
.search-input__input:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* cijeli search bar – bez focus ringa */
.search-bar:focus,
.search-bar:focus-within{
  outline: none !important;
  box-shadow: none !important;
}

/* button (ikona) – bez outline */
.search-input__submit:focus,
.search-input__submit:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Safari / iOS fix */
.search-input__input{
  -webkit-tap-highlight-color: transparent;
}

/* ===============================
   SEARCH – HARD OVERRIDE (Scroll focus ring)
   =============================== */

/* ubij focus ring na svim wrapperima */
.search-bar:focus,
.search-bar:focus-within,
.search-bar__input-container:focus-within,
.search-input:focus-within,
.search-input__input-container:focus-within{
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* input: bez outline/glow i bez promjene bordera */
.search-input__input:focus,
.search-input__input:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(255,255,255,.35) !important; /* ili transparent ako želiš */
}

/* button (ikonica) */
.search-input__submit:focus,
.search-input__submit:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ako theme crta "ring" preko pseudo-elementa */
.search-bar::before,
.search-bar::after,
.search-bar__input-container::before,
.search-bar__input-container::after,
.search-input::before,
.search-input::after{
  content: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Safari/iOS */
.search-input__input{
  -webkit-tap-highlight-color: transparent !important;
}

/* ======================================
   SEARCH ICON – FORCE NO HOVER EFFECT
   (override page-id rule)
   ====================================== */

html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"]
.search-input__submit:hover,
html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"]
.search-input__submit:focus,
html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"]
.search-input__submit:active {
  background: #eff0f4 !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* i SVG ikona – bez animacije */
html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"]
.search-input__submit svg{
  transition: none !important;
  transform: none !important;
}

/* ======================================
   SEARCH – FIX POSITION (button inside pill)
   ====================================== */
html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"] 
.search-input{
  position: relative !important;
}

html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"] 
.search-input__input{
  padding-right: 56px !important; /* prostor za dugme */
}

html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"] 
.search-input__submit{
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;

  background: #F2F2F2 !important; /* siva iza ikone */
  color: #404040 !important;      /* boja ikone */
  box-shadow: none !important;
}

/* no animation / no hover jump */
html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"]
.search-input__submit:hover,
html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"]
.search-input__submit:focus,
html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"]
.search-input__submit:active{
  transform: translateY(-50%) !important;
  background: #EAEAEA !important;
}


/* CHILD PAGES – isti size normal + hover */
[data-component="child-pages"] > ul > :is(li,[role="listitem"]){
  padding: 5px !important;                  /* uvijek isto */
  background: var(--K15t-background-neutral-subtle) !important;
  transition: none !important;              /* bez animacija */
}

[data-component="child-pages"] > ul > :is(li,[role="listitem"]):hover{
  padding: 5px !important;                  /* IMPORTANT: ne mijenja se */
  margin: 0 !important;                     /* sigurnost da ne “skoci” */
  background: #eff0f4 !important;
  
}

/* da cijeli red bude klikabilan i ne mijenja height */
[data-component="child-pages"] > ul > :is(li,[role="listitem"]) > article > a{
  display: block !important;
  padding: 14px 16px !important;            /* visina reda */
  color: #404040 !important;
  text-decoration: none !important;
}

/* hover samo boja teksta (bez underline) */
[data-component="child-pages"] > ul > :is(li,[role="listitem"]):hover > article > a{
  color: #de2037 !important;
  text-decoration: none !important;
}

/* FIX: child-pages ::before – pogrešan grid span */
[data-component="child-pages"] > ul > :is(li,[role=listitem])::before{
  grid-column: -1 / -1 !important; /* kako si tražio */
  margin: 0 !important;             /* uklanja “skok” */
  border-radius: 8px !important;
}

/* ======================================
   SEARCH ICON – SAMO U HEADERU
   ====================================== */

/* scope: header */
header.header .search-input__submit{
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  right:6px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* bez animacija */
  transform: none !important;
  transition: none !important;
}

/* svg ikona samo u headeru */
header.header .search-input__submit svg{
  width: 16px !important;
  height: 16px !important;
}

/* hover = NISTA */
header.header .search-input__submit:hover{
  transform: none !important;
  background: #EAEAEA !important;
}

/* =========================================
   STOP ALL HOVER/FOKUS SCALE U HEADER SEARCH
   ========================================= */

/* 1) ugasi sve animacije u header searchu */
.header-search,
.header-search *{
  transition: none !important;
  animation: none !important;
}

/* 2) ugasi transform gdje god da ga tema stavi */
header.header .header-search .search-bar,
header.header .header-search .search-bar:hover,
header.header .header-search .search-bar:focus-within,
header.header .header-search .search-bar__input-container,
header.header .header-search .search-bar__input-container:hover,
header.header .header-search .search-bar__input-container:focus-within,
header.header .header-search .search-input,
header.header .header-search .search-input:hover,
header.header .header-search .search-input:focus-within,
header.header .header-search .search-input__submit,
header.header .header-search .search-input__submit:hover{
  transform: none !important;

}

/* 3) PREGAZI tvoj page-id hover rule (ako je u headeru) */
html[data-page-id="ci_f3801b60e85733d1c8aa7cb85f0d034c5935780691b5b1c89b5ee39d602d0936"]
header.header .header-search .search-input__submit:hover{
  transform: none !important;
  background: #eff0f4 !important;  /* ako želiš da ostane sivo */
}

/* nuklearno: ništa u header-search ne smije imati transform */
header.header .header-search *{
  transform: none !important;
}

.toc.sticky .toc-list .toc-link:hover {
    color: #de2037 !important;
}

.search-bar__input-container {
    border-style:none !important;
}

/* =========================
   TOC – link colors
   ========================= */

/* normal */
nav.toc .toc-link{
  color: #404040 !important;
  text-decoration: none !important;
}

/* hover */
nav.toc .toc-link:hover{
  color: #de2037 !important;
  text-decoration: none !important;
}

/* active (trenutna sekcija) */
nav.toc .toc-link[aria-current="true"]{
  color: #de2037 !important;
  font-weight: 400; /* opcionalno */
}

/* sigurnost – active ostaje crven i na hover */
nav.toc .toc-link[aria-current="true"]:hover{
  color: #de2037 !important;
}

/* =========================
   TOC – FIX inheritance bug
   ========================= */

/* default za sve */
nav.toc .toc-link{
  color: #404040 !important;
  text-decoration: none !important;
}

/* hover */
nav.toc .toc-link:hover{
  color: #de2037 !important;
}

/* ACTIVE – samo onaj koji IMA aria-current */
nav.toc .toc-link[aria-current="true"]{
  color: #de2037 !important;
  font-weight: 400;
}

/* KLJUČNI FIX:
   H3 ispod aktivnog H2 mora ostati siva */
nav.toc .node-name--H3 .toc-link{
  color: #404040 !important;
  font-weight: 400 !important;
}

/* ali ako je H3 stvarno active */
nav.toc .node-name--H3 .toc-link[aria-current="true"]{
  color: #de2037 !important;
  font-weight: 400 !important;
}

.header .search-input__input{
  padding-left:18px !important;
}

/* Sakrij samo clubcorner.ch u navigatoru */
#navigator-nav a[href="/sfv-asf-clubservices/clubcorner-ch"] {
  display: none !important;
}

#navigator-nav 
a[href="/sfv-asf-clubservices/clubcorner-by-sfv-asf"] {
  display: none !important;
}

#articleTree > theme-disclosure > div {
  display: none !important;
}

.drawer-toggle:is(:hover,:focus-visible) {
    background-color: #de2037;
}

#navigator-nav 
a[href="/sfv-asf-clubservices/anleitungen"]::before {
  content: "🇩🇪";
  margin-right: 8px;
  font-size: 1.1em;
  vertical-align: middle;
}

.tile-body {
    row-gap: 0px !important;
}



/* ==========================================================
   NAV ICONS + FLAGS (DE/FR/IT) – FINAL
   - default icons: #404040 (same as menu)
   - hover/active icons: red
   - language root: flag, NEVER red
   ========================================================== */

/* layout: space for icon/flag */
#navigator-nav .tree-item-header > a{
  position: relative !important;
  padding-left: 32px !important;
}

/* reset */
#navigator-nav .tree-item-header > a::before{
  content: none !important;
  display: none !important;
}

/* -------------------------
   1) MAIN ICONS (DE/FR/IT)
   default = #404040 look
   ------------------------- */
#navigator-nav a[href="/sfv-asf-clubservices/home"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/accueil"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/pagina-iniziale"]::before,

#navigator-nav a[href="/sfv-asf-clubservices/spielbetrieb"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/competition"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/competizione"]::before,

#navigator-nav a[href="/sfv-asf-clubservices/administration"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/fr-administration"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/amministrazione"]::before,

#navigator-nav a[href="/sfv-asf-clubservices/stammdaten"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/donnees-de-base"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/dati-anagrafici"]::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;

  /* DEFAULT = siva kao #404040 */
  filter: grayscale(1) brightness(0.25) !important;
}

/* icon images */
#navigator-nav a[href="/sfv-asf-clubservices/home"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/accueil"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/pagina-iniziale"]::before{
  background-image: url("https://nd-travel-blog.com/wp-content/uploads/2026/01/Home.svg") !important;
}

#navigator-nav a[href="/sfv-asf-clubservices/spielbetrieb"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/competition"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/competizione"]::before{
  background-image: url("https://nd-travel-blog.com/wp-content/uploads/2026/01/Spielbetrieb.svg") !important;
}

#navigator-nav a[href="/sfv-asf-clubservices/administration"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/fr-administration"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/amministrazione"]::before{
  background-image: url("https://nd-travel-blog.com/wp-content/uploads/2026/01/Administration.svg") !important;
}

#navigator-nav a[href="/sfv-asf-clubservices/stammdaten"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/donnees-de-base"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/dati-anagrafici"]::before{
  background-image: url("https://nd-travel-blog.com/wp-content/uploads/2026/01/Stammdaten.svg") !important;
}

/* hover + active -> red (ALI NE za language root flags) */
#navigator-nav a:hover::before,
#navigator-nav a[aria-current="page"]::before{
  filter: invert(17%) sepia(95%) saturate(7000%)
          hue-rotate(355deg) brightness(95%) contrast(105%) !important;
}

/* -------------------------
   2) LANGUAGE ROOT FLAGS
   NEVER RED (override hover/active)
   ------------------------- */
#navigator-nav a[href="/sfv-asf-clubservices/istruzioni"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/anleitungen"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/instructions"]::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;

  /* flag stays colored */
  filter: none !important;
}

/* flag images */
#navigator-nav a[href="/sfv-asf-clubservices/istruzioni"]::before{
  background-image: url("https://www.svgrepo.com/show/405517/flag-for-flag-italy.svg") !important;
}
#navigator-nav a[href="/sfv-asf-clubservices/anleitungen"]::before{
  background-image: url("https://www.svgrepo.com/show/405490/flag-for-flag-germany.svg") !important;
}
#navigator-nav a[href="/sfv-asf-clubservices/instructions"]::before{
  background-image: url("https://www.svgrepo.com/show/405485/flag-for-flag-france.svg") !important;
}

/* critical: even on hover/active, flags must NOT turn red */
#navigator-nav a[href="/sfv-asf-clubservices/istruzioni"]:hover::before,
#navigator-nav a[href="/sfv-asf-clubservices/istruzioni"][aria-current="page"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/anleitungen"]:hover::before,
#navigator-nav a[href="/sfv-asf-clubservices/anleitungen"][aria-current="page"]::before,
#navigator-nav a[href="/sfv-asf-clubservices/instructions"]:hover::before,
#navigator-nav a[href="/sfv-asf-clubservices/instructions"][aria-current="page"]::before{
  filter: none !important;
}