/* ========== BASE HEADER (mobile-first) ========== */

#paheader.paheader {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    direction: rtl;
    text-align: right;
    position: relative;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto; /* show full image, no cropping */
    color: #fff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  
  /* Inner flex row: logo area + controls (burger / search / cats / desktop nav) */
  #paheader .paheader-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    box-sizing: border-box;
    position: relative;
  }
  
  /* Navigation base */
  #paheader .pa-nav {
    flex: 1 1 auto;
  }
  
  #paheader .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.25rem;
  }
  
  #paheader .menu li {
    margin: 0;
    padding: 0;
  }
  
  #paheader .menu a {
    display: block;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    font-size: 0.9rem;
    color: #ffffff;
    border-radius: 2px;
    white-space: nowrap;
  }
  
  #paheader .menu a:hover,
  #paheader .menu a.active {
    background-color: rgba(255, 255, 255, 0.12);
  }
  
  
  /* ========== MOBILE SEARCH BUTTON (icon in header) ========== */
  
  #paheader .mobile-search-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: none; /* hidden on desktop */
    line-height: 0;
  }
  
  #paheader .mobile-search-btn img {
    width: 24px;
    height: 24px;
    display: block;
  }
  
  
  /* ========== MOBILE SEARCH OVERLAY ========== */
  
  .mobile-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
  }
  
  .mobile-search-overlay.is-active {
    display: block;
  }
  
  .mobile-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  
  .mobile-search-box {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    padding: 10px 12px 14px;
    background: #111111;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    direction: rtl;
  }
  
  .mobile-search-close {
    position: absolute;
    top: 60px;
    left: 12px;
    border: none;
    background: none;
    color: #ffcc66 !important;
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
  }
  
  .mobile-search-box .gsc-control-cse,
  .mobile-search-box .gsc-search-box {
    background: transparent;
  }
  
  
  /* ========== BURGER TOGGLE (mobile) ========== */
  
  #paheader .nav-toggle {
    display: none;
  }
  
  #paheader .nav-toggle-label {
    display: none; /* will show on mobile */
    cursor: pointer;
    padding: 4px;
  }
  
  #paheader .nav-toggle-label span,
  #paheader .nav-toggle-label span::before,
  #paheader .nav-toggle-label span::after {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #ffcc66; /* ← اللون المطلوب */
    border-radius: 2px;
    position: relative;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  
  
  #paheader .nav-toggle-label span::before,
  #paheader .nav-toggle-label span::after {
    content: "";
    position: absolute;
    right: 0;
  }
  
  #paheader .nav-toggle-label span::before {
    top: -6px;
  }
  
  #paheader .nav-toggle-label span::after {
    top: 6px;
  }
  
  /* Burger -> X animation */
  #paheader .nav-toggle:checked + .nav-toggle-label span {
    transform: rotate(45deg);
  }
  
  #paheader .nav-toggle:checked + .nav-toggle-label span::before {
    transform: rotate(-90deg);
    top: 0;
  }
  
  #paheader .nav-toggle:checked + .nav-toggle-label span::after {
    opacity: 0;
  }
  
  
  /* ========== HEADER BACKGROUND IMAGES BY WIDTH (HEIGHT ONLY) ========== */
  
  @media (min-width: 320px) and (max-width: 359px) {
    #paheader.paheader {
      height: 44px;
      background-image: url("https://static.paranormalarabia.com/img/pa_header_320x44.webp");
    }
  }
  
  @media (min-width: 360px) and (max-width: 374px) {
    #paheader.paheader {
      height: 50px;
      background-image: url("https://static.paranormalarabia.com/img/pa_header_360x50.webp");
    }
  }
  
  @media (min-width: 375px) and (max-width: 410px) {
    #paheader.paheader {
      height: 52px;
      background-image: url("https://static.paranormalarabia.com/img/pa_header_375x52.webp");
    }
  }
  
  @media (min-width: 411px) and (max-width: 479px) {
    #paheader.paheader {
      height: 57px;
      background-image: url("https://static.paranormalarabia.com/img/pa_header_411x57.webp");
    }
  }
  
  @media (min-width: 480px) and (max-width: 639px) {
    #paheader.paheader {
      height: 66px;
      background-image: url("https://static.paranormalarabia.com/img/pa_header_480x66.webp");
    }
  }
  
  @media (min-width: 640px) and (max-width: 767px) {
    #paheader.paheader {
      height: 88px;
      background-image: url("https://static.paranormalarabia.com/img/pa_header_640x88.webp");
    }
  }
  
  /* Tablet / Desktop header image */
  @media (min-width: 768px) and (max-width: 979px) {
    #paheader.paheader {
      height: 132px;
      background-image: url("https://static.paranormalarabia.com/img/pa_header_768x132.webp");
    }
  }
  
  @media (min-width: 980px) {
    #paheader.paheader {
      height: 132px;
      background-image: url("https://static.paranormalarabia.com/img/pa_header_980x132.webp");
    }
  }
  
  
  /* ========== DESKTOP NAVIGATION (>=768px) ========== */
  
  @media (min-width: 768px) {

    /* إخفاء عناصر الموبايل في الديسكتوب */
    #paheader .nav-toggle-label,
    #paheader .mobile-search-btn,
    #paheader .mobile-cats-btn {
      display: none;
    }
  
    /* وضع شريط القوائم تحت الهيدر */
    #paheader .pa-nav {
      position: static;
      margin-top: 175px;
      max-height: none;
      overflow: visible;
      display: block;
    }
  
    /* ===== شريط القوائم الرئيسي ===== */
    #paheader .menu {
      list-style: none;
      margin: 0;
      padding: 0;
      height: 30px;
      direction: rtl;
      display: block;
      background: url("https://static.paranormalarabia.com/img/navbar_back.png") repeat-x; /* شريط واحد مستمر */
    }
  
    /* كل عنصر قائمة */
    #paheader .menu li {
      float: right;  /* RTL: من اليمين لليسار */
      margin: 0;
      padding: 0;
    }
  
    /* رابط القائـمة (الحالة العادية) */
    #paheader .menu li a {
      display: block;
      float: right;
      line-height: 30px;
      padding: 0 14px; /* مسافة داخلية مناسبة */
      text-decoration: none;
      color: #ffcc66 !important;
      background: transparent;  /* نترك الخلفية شفافة ليظهر شريط navbar_back */
      font-family: Tanseek, "Simplified Arabic", Verdana, sans-serif;
      font-size: 1.3em;          /* تكبير بسيط للخط */
    }
  
    /* hover */
    #paheader .menu li a:hover {
      background: rgba(255, 255, 255, 0.06);
    }
  
    /* hover لعناصر غير مفعّلة فقط */
    #paheader .menu li a:not(.active):hover {
        background: rgba(0, 0, 0, 0.35);  /* طبقة غامقة خفيفة */
    }

    /* العنصر النشط في القائمة */
    #paheader .menu li a.active {
        background: rgba(0, 0, 0, 0.55);      /* طبقة أغمق فوق شريط navbar_back */
        box-shadow: inset 0 1px 0 #ffcc66;   /* خط سفلي ذهبي يبرز العنصر */
        font-size: 1.4em;                      /* أكبر قليلاً من الباقي */
        font-weight: 700;
        color: #ffcc66 !important;
    }
  }
  
  
  
  /* ========== MOBILE / TABLET NAVIGATION (burger menu) ========== */
  
  @media (max-width: 767px) {
  
    #paheader .nav-toggle-label {
      display: block;
    }
  
    /* Adjust mobile search icon */
    #paheader .mobile-search-btn {
      display: block;
      margin-right: auto;
      margin-top: 7px;
      padding-left: 5px;
    }
  
    #paheader .mobile-search-btn img {
      width: 24px;
      height: 24px;
      display: block;
    }
  
    /* Menu container – collapsed by default */
    #paheader .pa-nav {
      position: absolute;
      top: 100%; /* directly under header image */
      right: 0;
      left: 0;
      background-color: #111111;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
      z-index: 50;
      display: block;
    }
  
    #paheader .menu {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: #111111;
    }
  
    #paheader .menu li + li a {
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
  
    #paheader .menu a {
      padding: 0.7rem 1rem;
      border-radius: 0;
      background: none;
    }
  
    /* When burger is checked, reveal menu */
    #paheader .nav-toggle:checked ~ .pa-nav {
      max-height: 400px; /* enough for all menu items */
    }
  
    /* allow more height when categories panel also open */
    #paheader .pa-nav.show-cats {
      max-height: 600px;
    }
  
    #paheader .mobile-cats-btn {
      margin: 0 4px 0 0;
    }
  }
  
  
  /* ========== MOBILE CATEGORIES BUTTON (next to burger) ========== */
  /* Uses your PNG icon: https://static.paranormalarabia.com/img/categoryicon.png */
  
  #paheader .mobile-cats-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0 6px 0 0;   /* space between burger and categories icon */
    cursor: pointer;
    display: none;        /* visible only on mobile */
    line-height: 0;
    position: relative;   /* needed for X icon overlay */
  }
  
  #paheader .mobile-cats-btn img {
    width: 24px;
    height: 24px;
    display: block;
    /* tint icon towards #ffcc66 */
    filter: brightness(0) saturate(100%) invert(80%) sepia(28%) saturate(528%)
            hue-rotate(360deg) brightness(100%) contrast(90%);
    transition: opacity 0.15s ease;
  }
  
  /* X icon (hidden by default, shown when button has .is-open) */
  #paheader .mobile-cats-btn .x-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }
  
  /* Two lines making the X */
  #paheader .mobile-cats-btn .x-icon::before,
  #paheader .mobile-cats-btn .x-icon::after {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 24px;
    height: 2px;
    background-color: #ffcc66;
    border-radius: 2px;
  }
  
  #paheader .mobile-cats-btn .x-icon::before {
    transform: rotate(45deg);
  }
  
  #paheader .mobile-cats-btn .x-icon::after {
    transform: rotate(-45deg);
  }
  
  /* Show categories icon only on mobile + toggle X */
  @media (max-width: 767px) {
  
    #paheader .mobile-cats-btn {
      display: block;
    }
  
    /* When button has .is-open => show X, hide image */
    #paheader .mobile-cats-btn.is-open img {
      opacity: 0;
    }
  
    #paheader .mobile-cats-btn.is-open .x-icon {
      opacity: 1;
    }
  }
  
  
  /* ========== SEPARATE MOBILE CATEGORIES PANEL (not mixed with burger menu list) ========== */
  
  /* Base: hidden by default */
  #mobile-cats-panel {
    display: none;
  }
  
  /* MOBILE ONLY: show panel under header when open */
  @media (max-width: 767px) {
  
    #mobile-cats-panel {
      background-color: #111111;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      position: relative;   /* so z-index works */
      z-index: 9999;        /* above slider */
    }
  
    /* JS toggles .is-open on #mobile-cats-panel */
    #mobile-cats-panel.is-open {
      display: block;
    }
  
    /* Categories list inside panel */
    #mobile-cats-panel .menu-categories {
      display: flex !important;
      flex-direction: column;
      gap: 0;
      margin: 0;
      padding: 0 0 0.3rem 0;
      list-style: none;
    }
  
    /* section title "التصنيفات" */
    #mobile-cats-panel .menu-categories-title span {
      display: block;
      padding: 0.7rem 1rem 0.4rem;
      font-family: Tanseek, "Times New Roman", serif;
      font-size: 0.95rem;
      font-weight: 700;
      color: #ffcc66;
      text-align: right;
    }
  
    /* category items */
    #mobile-cats-panel .menu-categories li a,
    #mobile-cats-panel .menu-categories li span {
      display: block;
      padding: 0.55rem 1rem;
      font-size: 0.9rem;
      color: #ffcc66;
      text-align: right;
      text-decoration: none;
    }
  
    #mobile-cats-panel .menu-categories li a:hover {
      background-color: rgba(255, 255, 255, 0.06);
    }
  }
  
  /* DESKTOP: never show categories panel */
  @media (min-width: 768px) {
    #mobile-cats-panel {
      display: none !important;
    }
  }