/*
Theme Name: Tournament Manager
Theme URI: https://www.motogymkhana-ukraine.org.ua
Author: MotoGymkhana Ukraine
Author URI: https://www.motogymkhana-ukraine.org.ua
Description: Професійна спортивна тема для MotoGymkhana 
Version: 1.0.0
Text Domain: tournament-manager
*/

/* ==========================================================
   1) ROOT / FALLBACK VARS
   Реальні значення приходять з functions.php у wp_head()
   Тут лишаємо лише запасні дефолти (на випадок, якщо щось не підвантажилось)
========================================================== */
:root{
  --container: 1100px;

  --header-bg: #0b0b0b;
  --header-bg-gradient: none;
  --header-border: rgba(255,255,255,.10);
  --header-text: #ffffff;

  --tile-bg: rgba(255,255,255,.12);
  --tile-border: rgba(255,255,255,.20);
  --tile-border-width: 1px;
  --tile-text: #ffffff;

  --tile-radius: 12px;
  --icon-radius: 8px;

  --tile-hover-bg: rgba(255,255,255,.08);
  --tile-hover-shadow: 0 10px 22px rgba(0,0,0,.22);

  --search-height: 30px;

  --submenu-bg: rgba(12,10,10,.97);
  --submenu-border: rgba(255,255,255,.14);
  --submenu-shadow: 0 22px 52px rgba(0,0,0,.65);
  --submenu-tile-border: rgba(255,255,255,.18);

  /* Texture (fallback) */
  --header-texture-image: none;
  --header-texture-size: 26px;
  --header-texture-opacity: 0.18;
  --header-texture-repeat: repeat;

  --icon-filter: none;
}

*,
*::before,
*::after { box-sizing: border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}


/* ==========================================================
   2) HEADER BASE (layout is in navigation.css, тут тільки базове)
========================================================== */
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.site-title{
  font-weight:900;
  text-decoration:none;
  color: var(--header-text);
}


/* ==========================================================
   3) HEADER BELOW (Search + Lang)
========================================================== */
.header-below{
  padding:4px 0;
  background: var(--header-bg);
  background-image: var(--header-bg-gradient);
  color: var(--header-text);
}

.header-below__inner{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:10px;
}

/* прибрати маркери */
.header-below ul,
.header-below li{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}


/* ===============================
   кнопки для сайтв регіональних
================================ */

.header-below__inner{
  display:flex;
  align-items:center;
  gap:12px;
}

/* блок з кнопками не розтягуємо */
.header-below__quicklinks{
  flex: 0 0 auto;
}
/* меню кнопок біля пошуку */
.quicklinks-menu{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap:10px;
}

.quicklinks-menu li{
    display:flex;
}

.quicklinks-menu a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 16px;
    border-radius:12px;

    color:var(--tile-text);
    text-decoration:none;

    background:var(--tile-bg);
    border:1px solid var(--tile-border);

    font-weight:600;
    white-space:nowrap;

    transition:all .2s ease;
}

.quicklinks-menu a:hover{
    background:var(--tile-hover-bg);
    box-shadow:var(--tile-hover-shadow);
}

/* щоб в мобільній версії не ламало */
@media (max-width: 768px){
  .header-below__inner{
    flex-wrap:wrap;
  }
  .header-below__quicklinks{
    width:auto;
    order: 3; /* за бажанням: після мов або до мов */
  }
}

/* ==========================================================
   4) WP SEARCH (header-below)
========================================================== */
.header-below__search .search-form{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
}

.header-below__search .search-form label{
  margin:0 !important;
  padding:0 !important;
  font-weight:inherit !important;
  color:inherit !important;
  display:block;
}

.header-below__search .search-field{
  width:460px;
  max-width:100%;
  height:var(--search-height);
  padding:0 12px;

  border: var(--tile-border-width) solid var(--tile-border);
  border-radius: var(--icon-radius);
  background: var(--tile-bg);
  color: var(--tile-text);

  font-size:13px;
  font-family:inherit;
  line-height:1;

  appearance:none;
  -webkit-appearance:none;
}

.header-below__search .search-submit{
  height:var(--search-height);
  padding:0 10px;

  border: var(--tile-border-width) solid var(--tile-border);
  border-radius: var(--icon-radius);
  background: var(--tile-bg);
  color: var(--tile-text);

  font-size:13px;
  font-family:inherit;
  line-height:1;

  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;

  width:auto !important;
  white-space:nowrap;
}

.header-below__search .search-submit:hover{
  background: var(--tile-hover-bg);
  box-shadow: var(--tile-hover-shadow);
}


/* ==========================================================
   5) LANGUAGE SWITCHER
========================================================== */
.header-below__lang{
  justify-self:end;
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  white-space:nowrap;
  margin:0 !important;
  padding:0 !important;
}

.header-below__lang ul{
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

.header-below__lang > li,
.header-below__lang ul > li{
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
}

.header-below__lang > li > a,
.header-below__lang ul > li > a{
  width:34px !important;
  height:34px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;

  border-radius: var(--icon-radius);
  border: var(--tile-border-width) solid var(--tile-border);
  background: var(--tile-bg);
  text-decoration:none;

  font-size:0;
  line-height:0;
}

.header-below__lang img{
  display:block;
  width:18px;
  height:18px;
}

.header-below__lang a:hover{
  background: var(--tile-hover-bg);
  box-shadow: var(--tile-hover-shadow);
}


/* ==========================================================
   6) RESPONSIVE
========================================================== */
@media (max-width: 640px){
  .header-below__inner{
    grid-template-columns: 1fr;
    justify-items:center;
    gap:8px;
  }
  .header-below__lang{
    justify-self:center;
  }
  .header-below__search input[type="search"]{
    width:100%;
    max-width:320px;
  }
}

@media (max-width: 520px){
  .header-below__search input[type="search"]{
    max-width:260px;
  }
}


/* ==========================================================
   7) HEADER VISUALS + TEXTURE LAYER
   Важливо: цей блок може бути в кінці style.css
========================================================== */
.site-header{
  position: relative;
  background-color: var(--header-bg);
  background-image: var(--header-bg-gradient);
  background-repeat: no-repeat;
  background-size: cover;

  border-bottom: 1px solid var(--header-border);
  color: var(--header-text);
}

/* texture UNDER content, OVER background */
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background-image: var(--header-texture-image, none);
  background-repeat: var(--header-texture-repeat, repeat);
  background-size: var(--header-texture-size, 26px) var(--header-texture-size, 26px);

  opacity: var(--header-texture-opacity, 0.18);
  mix-blend-mode: normal;
  filter: contrast(1.05);
}

/* all header children above texture */
.site-header > *{
  position: relative;
  z-index: 1;
}

/* logo visibility */
.site-header .custom-logo{
  filter:
    drop-shadow(0 2px 10px rgba(0,0,0,.75)) /* Чорна тінь залишається */
    drop-shadow(0 0 24px rgba(255,0,0,0.5)); /* Збільшено радіус (24px) та прозорість (0.5) */
}




/*футер*/

.site-footer{
  background: var(--header-bg, transparent); /* якщо є така змінна */
  color: var(--tile-text);
}

.site-footer__inner{
  padding: 18px 0;
  border-top: 1px solid var(--tile-border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.site-footer a{
  color: var(--tile-text);
  text-decoration: none;
}

.site-footer a:hover{
  text-decoration: underline;
}

.footer-sep{ opacity: .6; margin: 0 8px; }