/*
Theme Name: RR Theme Child
Template: rr-theme
Description: Tema-copil pentru RR Theme (Randonneurs România) — folosită pentru modificări sigure ale meniului mobil (hamburger + accordion), fără a atinge tema originală.
Version: 2.2
Author: Randonneurs Romania
*/

/* ==========================================================
   IMPORTANT:
   - Linia "Template: rr-theme" TREBUIE să fie exact numele
     folderului temei părinte din wp-content/themes/.
     Dacă folderul se numește altfel (ex: "randonneurs-theme"),
     schimbă valoarea de mai sus înainte de a activa tema-copil.
   - Nu edita alte fișiere din tema părinte. Orice suprascriere
     (header.php, footer.php etc.) se face copiind fișierul aici,
     în folderul temei-copil, păstrând aceeași structură de foldere.
   ========================================================== */

/* =====================================================================
   NUMELE SITE-ULUI: 2 RÂNDURI + CULORILE DRAPELULUI
   Aplicat universal (desktop + mobil) — o singură variantă peste tot.
   ===================================================================== */

.site-branding__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.site-branding__text-main {
  font-size: 22px; /* aceeași înălțime cu litera R din "România" */
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f4c92;
}

.site-branding__text-script {
  font-size: 22px;
  font-weight: 700;
}

/* Culorile drapelului României, aplicate pe cele 3 bucăți din "România" */
.site-branding__flag--blue {
  color: #002b7f;
}

.site-branding__flag--yellow {
  color: #c9971f; /* auriu, mai lizibil pe fundal alb decât galbenul pur de drapel */
}

.site-branding__flag--red {
  color: #ce1126;
}

/* Recuperăm puțin spațiu orizontal pe desktop (creșterea fontului la
   "RANDONNEURS" a lăsat "Contact" să cadă pe rândul al doilea) —
   reducem ușor distanța dintre siglă/text și padding-ul din meniu,
   suficient cât să încapă totul pe un singur rând. */
@media (min-width: 901px) {
  .site-branding__link {
    gap: 6px;
  }

  .site-nav__menu > li > a {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* =====================================================================
   MENIU MOBIL: HAMBURGER + ACCORDION
   Activ doar sub 900px (pragul deja folosit de restul site-ului
   pentru comportamentul de meniu, vezi CSS Suplimentar din Customizer).
   Pe desktop (peste 900px) acest bloc nu are niciun efect.
   ===================================================================== */

/* --- Butonul hamburger --- */
.rr-menu-toggle {
  display: none; /* ascuns pe desktop, activat mai jos sub 900px */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.rr-menu-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: #0f4c92;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Animație: hamburger -> X, când meniul e deschis */
.rr-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.rr-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.rr-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Butonul-săgeată adăugat automat de menu-toggle.js.
   IMPORTANT: ascuns implicit (inclusiv pe desktop) — devine vizibil
   doar în media query-ul de mai jos, sub 900px. Fără asta, browserul
   îi aplică propriul stil (un contur oval implicit), vizibil și pe
   desktop. */
.rr-submenu-toggle {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}

/* Bara de căutare: ascunsă implicit (inclusiv pe desktop).
   Devine vizibilă doar în media query-ul de mai jos, pe mobil. */
.rr-mobile-search {
  display: none;
}

@media (max-width: 900px) {

  /* --- Header compact: siglă + hamburger pe același rând --- */
  .site-header__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .site-branding__link {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .site-branding__logo img {
    max-height: 36px;
    width: auto;
  }

  /* Arată hamburgerul doar pe mobil/tabletă */
  .rr-menu-toggle {
    display: flex;
  }

  /* Panoul mobil (căutare + meniu): ascuns până se apasă hamburgerul.
     Când e deschis, devine un strat FIX, separat de restul paginii,
     cu propriul scroll intern — exact ca să eviți exact problema
     semnalată (derularea "scapă" spre pagina din spate). "top" este
     calculat automat din JS, ca să se potrivească mereu cu înălțimea
     reală a headerului. */
  .rr-mobile-panel {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0; /* suprascris automat din JS cu înălțimea reală a headerului */
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #faf8f3; /* fundal cald, discret — consistent cu restul site-ului */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 9998;
  }

  .rr-mobile-panel.rr-menu-open {
    display: flex;
  }

  /* Cât timp meniul e deschis, fixăm headerul la vârful ecranului
     (indiferent de unde era derulată pagina), ca panoul să se
     alinieze mereu corect sub el. */
  .site-header.rr-header-pinned {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #ffffff;
  }

  /* Cât timp meniul e deschis, blocăm complet derularea paginii din
     spate — utilizatorul derulează DOAR în interiorul meniului. */
  body.rr-menu-is-open {
    overflow: hidden;
  }

  /* Toate elementele de nivel principal, aliniate la stânga
     (inclusiv cele fără submeniu, ca "Acasă", "Drumul Dunării",
     "Contact" — înainte apăreau centrate, prin CSS moștenit). */
  .site-nav__menu > li {
    text-align: left;
  }

  .site-nav__menu > li > a {
    display: block;
    width: 100%;
    padding: 14px 16px;
  }

  .site-nav__menu {
    width: 100%;
  }

  /* Rândul unui element cu submeniu: text + săgeată pe același rând */
  .site-nav__menu li.menu-item-has-children,
  .site-nav__menu li.page_item_has_children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  /* Pe mobil, butonul-săgeată devine vizibil */
  .site-nav__menu .rr-submenu-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }

  .site-nav__menu .rr-submenu-toggle .rr-chevron {
    width: 10px;
    height: 10px;
    border-right: 2px solid #0f4c92;
    border-bottom: 2px solid #0f4c92;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }

  .site-nav__menu .rr-submenu-toggle[aria-expanded="true"] .rr-chevron {
    transform: rotate(-135deg);
  }

  /* Submeniurile (orice nivel) sunt ascunse până se apasă săgeata.
     Folosim ID-ul meniului (#rr-primary-menu) ca să garantăm că
     această regulă câștigă în fața oricărui CSS vechi din
     „CSS Suplimentar" care ar putea viza aceleași elemente. */
  #rr-primary-menu .sub-menu,
  #rr-primary-menu .children {
    display: none !important;
    width: 100%;
  }

  #rr-primary-menu .sub-menu.rr-submenu-open,
  #rr-primary-menu .children.rr-submenu-open {
    display: block !important;
  }

  /* --- Bara de căutare, în interiorul panoului mobil --- */
  .rr-mobile-search {
    display: block; /* suprascrie regula de bază "ascuns" (pentru desktop) */
    padding: 14px 16px;
    border-bottom: 1px solid #e4e0d6;
  }

  .rr-mobile-search .rr-search-form {
    display: flex;
  }

  .rr-mobile-search input[type="search"] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #d8e3f1;
    border-radius: 8px 0 0 8px;
    font-size: 15px;
  }

  .rr-mobile-search button[type="submit"] {
    padding: 10px 16px;
    border: none;
    border-radius: 0 8px 8px 0;
    background: #0f4c92;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
  }
}

/* =====================================================================
   BARA DE NAVIGARE DE JOS (doar mobil)
   Fixă în partea de jos a ecranului, cu cele mai căutate 5 secțiuni.
   ===================================================================== */

.rr-bottom-nav {
  display: none; /* ascunsă pe desktop */
}

@media (max-width: 900px) {
  .rr-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #ffffff;
    border-top: 1px solid #e4e0d6;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06);
  }

  .rr-bottom-nav__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 4px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: #8b8b8b;
  }

  .rr-bottom-nav__item.is-active {
    color: #0f4c92;
  }

  /* Spațiu jos, ca bara fixă să nu acopere conținutul paginii */
  body {
    padding-bottom: 64px;
  }

  /* Cât timp meniul mobil e deschis, ascundem bara de jos,
     ca să nu se suprapună vizual peste meniu */
  body.rr-menu-is-open .rr-bottom-nav {
    display: none;
  }
}