/* Extracted from header-menu.js
   Purpose: keep header and WhatsApp styling in static CSS,
   so JavaScript does less work during initial page load. */

@import url('/assets/css/official-post-pages.css');

:root{--yl-header-h:88px;--yl-gold:#f3c969;--yl-blue:#1d77ff;--yl-ink:#061326;--yl-rose:#e65b91;--yl-green:#2fbf8f;--yl-violet:#7c5cff}
      body.yl-header-active{padding-top:calc(var(--yl-header-h) + 10px)!important}
      .topbar.yl-header-ready{position:fixed!important;top:0!important;right:0!important;left:0!important;z-index:99999!important;width:100%;background:rgba(5,12,26,.96)!important;display:grid!important;grid-template-columns:repeat(6,minmax(105px,1fr));align-items:center;gap:10px;padding:8px 12px!important}
      .topbar.yl-header-ready .brand{display:none!important}
      .yl-header-shortcuts{display:contents!important}
      .yl-header-link,.yl-header-menu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;min-height:46px;padding:0 12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);color:#fff!important;text-decoration:none!important;font-weight:900;text-align:center;line-height:1.35;box-shadow:0 4px 10px rgba(0,0,0,.12);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
      .yl-header-link:focus-visible,.yl-header-menu-btn:focus-visible{box-shadow:0 6px 14px rgba(0,0,0,.14);outline:none}
      @media (hover:hover) and (pointer:fine){.yl-header-link:hover,.yl-header-menu-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.20);outline:none}}
      .yl-header-link:active,.yl-header-menu-btn:active{transform:scale(.97);box-shadow:0 3px 8px rgba(0,0,0,.18)}
      .yl-header-link--site{background:linear-gradient(180deg,#f8d46b,#c79210);color:#3d2a00!important}
      .yl-header-link--library{background:linear-gradient(180deg,#42c8ff,#1d77ff)}
      .yl-header-link--contracts{background:linear-gradient(180deg,#f8d46b,#c79210);color:#3d2a00!important}.yl-header-link--posts{background:linear-gradient(180deg,#34d399,#059669);color:#052e1a!important}.yl-header-link--posts{background:linear-gradient(180deg,#34d399,#059669);color:#052e1a!important}.yl-header-link--posts{background:linear-gradient(180deg,#34d399,#059669);color:#052e1a!important}.yl-header-link--posts{background:linear-gradient(180deg,#34d399,#059669);color:#052e1a!important}.yl-header-link--posts{background:linear-gradient(180deg,#34d399,#059669);color:#052e1a!important}
      .yl-header-link--ai-search{position:relative;overflow:hidden;background:radial-gradient(circle at 18% 20%,rgba(255,255,255,.95) 0 2px,transparent 3px),linear-gradient(135deg,#7c3aed 0%,#2563eb 45%,#06b6d4 100%);box-shadow:0 4px 12px rgba(37,99,235,.20)!important}
      .yl-header-link--ai-search::before{content:"🤖";font-size:1.05rem;}
      
      .yl-header-menu-btn{background:linear-gradient(180deg,#16304d,#0f1f35);font-family:inherit;cursor:pointer;margin-inline-start:0!important;min-width:0!important}.yl-header-menu-btn__icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,.08);font-size:1rem;line-height:1}
      .topbar.yl-header-ready .main-nav{display:none;width:100%;grid-column:1/-1;flex-direction:column;align-items:stretch;gap:8px;padding-top:10px;margin-top:2px}.topbar.yl-header-ready .main-nav.is-open{display:flex!important}.topbar.yl-header-ready .main-nav a{display:block;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);color:#eef5ff!important;text-decoration:none!important}
      #cases .case-card:nth-child(5) h3{background-image:linear-gradient(90deg,#ffffff 0%,#ffe0f0 30%,#ff9ed1 60%,#ffffff 100%)}#cases .case-card:nth-child(5) h3::before{content:"👨‍👩‍👧‍👦"}

      @media (max-width:640px){.topbar.yl-header-ready{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px!important}.yl-header-link,.yl-header-menu-btn{min-height:42px;padding:5px 7px;border-radius:14px;font-size:clamp(11px,2.8vw,.82rem);white-space:normal}.yl-header-menu-btn{min-width:0}}

/* Author WhatsApp styles */
.book-note.author-whatsapp-ready{
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        flex-wrap:wrap!important;
        gap:10px!important;
        margin-top:18px!important;
        font-size:16px!important;
        line-height:1.9!important;
        text-align:center!important;
      }

      .book-note.author-whatsapp-ready::before{
        content:none!important;
        display:none!important;
      }

      .book-note.author-whatsapp-ready br{
        display:none!important;
      }

      .author-name-button,
      .author-whatsapp-button{
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        min-height:42px!important;
        padding:9px 16px!important;
        border-radius:999px!important;
        text-decoration:none!important;
        font-size:16px!important;
        font-weight:800!important;
        line-height:1.5!important;
        box-shadow:0 10px 22px rgba(0,0,0,.12)!important;
        transition:transform .18s ease,box-shadow .18s ease!important;
      }

      .author-name-button{
        background:linear-gradient(135deg,#173d6e,#2563eb)!important;
        border:1px solid rgba(37,99,235,.35)!important;
        color:#fff!important;
      }

      .author-whatsapp-button{
        background:linear-gradient(135deg,#18a64a,#25d366)!important;
        border:1px solid rgba(37,211,102,.45)!important;
        color:#fff!important;
      }

      @media (hover:hover) and (pointer:fine){
        .author-name-button:hover,
        .author-whatsapp-button:hover{
          transform:translateY(-2px)!important;
          box-shadow:0 14px 28px rgba(0,0,0,.18)!important;
        }
      }

      .author-name-button:active,
      .author-whatsapp-button:active{
        transform:scale(.97)!important;
        box-shadow:0 6px 16px rgba(0,0,0,.18)!important;
      }

      @media (max-width:700px){
        .book-note.author-whatsapp-ready{
          gap:8px!important;
        }

        .author-name-button,
        .author-whatsapp-button{
          width:100%!important;
          max-width:310px!important;
          min-height:44px!important;
          font-size:15px!important;
        }
      }

/* Floating WhatsApp styles */
.yl-floating-whatsapp{
        position:fixed;
        left:18px;
        bottom:22px;
        z-index:99997;
        display:inline-flex;
        align-items:center;
        gap:10px;
        min-height:56px;
        padding:0 18px;
        border-radius:999px;
        text-decoration:none;
        color:#fff;
        font-weight:800;
        font-size:15px;
        background:linear-gradient(135deg,#18a64a,#25d366);
        border:1px solid rgba(37,211,102,.45);
        box-shadow:0 18px 36px rgba(0,0,0,.24);
        transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
      }
      @media (hover:hover) and (pointer:fine){
        .yl-floating-whatsapp:hover,
        .yl-floating-whatsapp:focus-visible{
          transform:translateY(-2px);
          box-shadow:0 22px 42px rgba(0,0,0,.28);
          outline:none;
        }
      }
      .yl-floating-whatsapp:focus-visible{
        box-shadow:0 22px 42px rgba(0,0,0,.28);
        outline:none;
      }
      .yl-floating-whatsapp:active{
        transform:scale(.97);
        box-shadow:0 10px 24px rgba(0,0,0,.24);
      }
      .yl-floating-whatsapp__icon{
        width:34px;
        height:34px;
        border-radius:50%;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background:rgba(255,255,255,.18);
        font-size:16px;
        line-height:1;
        flex:0 0 34px;
      }
      .yl-floating-whatsapp__text{
        white-space:nowrap;
      }
      @media (max-width:700px){
        .yl-floating-whatsapp{
          left:12px;
          right:12px;
          justify-content:center;
          min-height:52px;
          font-size:14px;
          padding:0 16px;
        }
      }


/* YL_UNIFIED_POSTS_HEADER_START */

/* Unified official site header for posts main + inner pages */
.topbar.yl-header-ready {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(46px, auto) !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  min-height: 62px !important;
  background: rgba(5, 12, 26, .96) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
  overflow: visible !important;
}

.topbar.yl-header-ready .yl-header-shortcuts {
  display: contents !important;
}

.topbar.yl-header-ready .yl-header-link,
.topbar.yl-header-ready .yl-header-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 46px !important;
  padding: 0 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  text-align: center !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.12) !important;
}

.topbar.yl-header-ready .yl-header-link--site,
.topbar.yl-header-ready .yl-header-link--contracts {
  background: linear-gradient(180deg,#f8d46b,#c79210) !important;
  color: #3d2a00 !important;
}

.topbar.yl-header-ready .yl-header-link--library {
  background: linear-gradient(180deg,#42c8ff,#1d77ff) !important;
  color: #fff !important;
}

.topbar.yl-header-ready .yl-header-link--posts {
  background: linear-gradient(180deg,#34d399,#059669) !important;
  color: #052e1a !important;
}

.topbar.yl-header-ready .yl-header-link--ai-search {
  background: radial-gradient(circle at 18% 20%,rgba(255,255,255,.95) 0 2px,transparent 3px),
              linear-gradient(135deg,#7c3aed 0%,#2563eb 45%,#06b6d4 100%) !important;
  color: #fff !important;
}

.topbar.yl-header-ready .yl-header-menu-btn {
  background: linear-gradient(180deg,#16304d,#0f1f35) !important;
  color: #fff !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

.topbar.yl-header-ready .yl-header-menu-btn__icon {
  flex: 0 0 24px !important;
}

.topbar.yl-header-ready .main-nav {
  grid-column: 1 / -1 !important;
}

/* Desktop: one row */
@media (min-width: 761px) {
  .topbar.yl-header-ready {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  body.yl-header-active {
    padding-top: calc(var(--yl-header-h, 88px) + 10px) !important;
  }
}

/* Mobile: two rows (3 + 3) */
@media (max-width: 760px) {
  :root {
    --yl-header-h: 116px;
  }

  .topbar.yl-header-ready {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(44px, auto) !important;
    gap: 8px !important;
    padding: 8px !important;
    min-height: 108px !important;
  }

  .topbar.yl-header-ready .yl-header-link,
  .topbar.yl-header-ready .yl-header-menu-btn {
    min-height: 44px !important;
    padding: 5px 6px !important;
    border-radius: 14px !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
    line-height: 1.35 !important;
  }

  body.yl-header-active {
    padding-top: calc(var(--yl-header-h, 116px) + 10px) !important;
  }
}

@media (max-width: 380px) {
  .topbar.yl-header-ready .yl-header-link,
  .topbar.yl-header-ready .yl-header-menu-btn {
    font-size: clamp(10px, 2.6vw, 12px) !important;
    padding-inline: 4px !important;
  }
}

/* YL_UNIFIED_POSTS_HEADER_END */

/* YL_FORCE_OFFICIAL_HEADER_GLOBAL_START */

/* Force official header across the whole site */
.topbar.yl-header-ready {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 99999 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(46px, auto) !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  min-height: 62px !important;
  background: rgba(5, 12, 26, .96) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
  overflow: visible !important;
}

.topbar.yl-header-ready .brand {
  display: none !important;
}

.topbar.yl-header-ready .yl-header-shortcuts {
  display: contents !important;
}

.topbar.yl-header-ready .yl-header-link,
.topbar.yl-header-ready .yl-header-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 46px !important;
  padding: 0 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  text-align: center !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.12) !important;
}

.topbar.yl-header-ready .yl-header-link--site,
.topbar.yl-header-ready .yl-header-link--contracts {
  background: linear-gradient(180deg,#f8d46b,#c79210) !important;
  color: #3d2a00 !important;
}

.topbar.yl-header-ready .yl-header-link--library {
  background: linear-gradient(180deg,#42c8ff,#1d77ff) !important;
  color: #fff !important;
}

.topbar.yl-header-ready .yl-header-link--posts {
  background: linear-gradient(180deg,#34d399,#059669) !important;
  color: #052e1a !important;
}

.topbar.yl-header-ready .yl-header-link--ai-search {
  background: radial-gradient(circle at 18% 20%,rgba(255,255,255,.95) 0 2px,transparent 3px),
              linear-gradient(135deg,#7c3aed 0%,#2563eb 45%,#06b6d4 100%) !important;
  color: #fff !important;
}

.topbar.yl-header-ready .yl-header-menu-btn {
  background: linear-gradient(180deg,#16304d,#0f1f35) !important;
  color: #fff !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

.topbar.yl-header-ready .yl-header-menu-btn__icon {
  flex: 0 0 24px !important;
}

.topbar.yl-header-ready .main-nav {
  grid-column: 1 / -1 !important;
}

body.yl-header-active {
  padding-top: calc(var(--yl-header-h, 88px) + 10px) !important;
}

/* الهاتف: صفّان، 3 أزرار في كل صف */
@media (max-width: 760px) {
  :root {
    --yl-header-h: 116px;
  }

  .topbar.yl-header-ready {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(44px, auto) !important;
    gap: 8px !important;
    padding: 8px !important;
    min-height: 108px !important;
  }

  .topbar.yl-header-ready .yl-header-link,
  .topbar.yl-header-ready .yl-header-menu-btn {
    min-height: 44px !important;
    padding: 5px 6px !important;
    border-radius: 14px !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
    line-height: 1.35 !important;
  }

  body.yl-header-active {
    padding-top: calc(var(--yl-header-h, 116px) + 10px) !important;
  }
}

@media (max-width: 380px) {
  .topbar.yl-header-ready .yl-header-link,
  .topbar.yl-header-ready .yl-header-menu-btn {
    font-size: clamp(10px, 2.6vw, 12px) !important;
    padding-inline: 4px !important;
  }
}
/* YL_FORCE_OFFICIAL_HEADER_GLOBAL_END */