/* =========================================================================
   بازطراحی هدر عمومی سینگل‌پیج (تایپ ۳) -- بند ۳ تسک
   task-complete-all-deferred-bands-121-126 (۲۰۲۶-۰۸-۳۰).

   Additive و برگشت‌پذیر: فقط با حذف لینک این فایل از layouts/welcome_page
   و برگرداندن three.blade.php / header.blade.php از .bak، همه‌چیز به
   حالت قبل برمی‌گردد. هیچ کلاس مشترک قدیمی را بازتعریف نمی‌کند جز
   ریستِ لازمِ wrapper بیرونی .topbar برای همین بلوک.

   کنتراست: نوار اصلی یک گرادیان از رنگ برند به تُنِ تیره‌تر است تا متن
   سفید روی آن حداقل ۳:۱ (متن بزرگ) و نوار ابزار تیره‌تر تا ۴.۵:۱ برسد
   (WCAG 2.1 AA -- بخش ۰-پ).
   ========================================================================= */

.topbar {
    /* wrapper بیرونی -- تایپ ۳ خودش پس‌زمینه/چیدمان دارد */
    background: transparent !important;
    position: static;
    width: 100%;
}
/* سکشن دربرگیرندهٔ هدر margin_top ادمین‌محور دارد که با هدر fixed قبلی
   دیده نمی‌شد؛ حالا که هدر static/sticky است باید صفر شود تا فاصلهٔ
   سفید بالای صفحه نیفتد. */
section:has(> .topbar) { margin-top: 0 !important; padding-top: 0 !important; }
.welcome-page-container > section:first-child:has(.topbar) { margin-top: 0 !important; }

.hdr3 {
    --hdr-bg: #49DFD9;
    --hdr-accent: #2342C9;
    --hdr-bg-deep: color-mix(in srgb, var(--hdr-bg) 62%, #06302e);
    --hdr-bg-deeper: color-mix(in srgb, var(--hdr-bg) 40%, #06302e);
    --hdr-on: #ffffff;
    --hdr-radius: 14px;
    font-family: inherit;
    position: sticky;
    top: 0;
    z-index: 1000;
    background:
        linear-gradient(180deg,
            var(--hdr-bg) 0%,
            color-mix(in srgb, var(--hdr-bg) 82%, #06302e) 100%);
    box-shadow: 0 2px 14px rgba(6, 48, 46, .16);
    color: var(--hdr-on);
}

/* ---------------- نوار ابزار بالا ---------------- */
.hdr3-utility {
    background: var(--hdr-bg-deeper);
    font-size: 13px;
    line-height: 1;
}
.hdr3-utility-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.hdr3-utility-contact,
.hdr3-utility-social {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.hdr3-util-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hdr-on);
    text-decoration: none;
    padding: 5px 9px;
    border-radius: 8px;
    transition: background .15s ease;
    white-space: nowrap;
}
.hdr3-util-link:hover,
.hdr3-util-link:focus-visible { background: rgba(255, 255, 255, .16); color: var(--hdr-on); }
.hdr3-util-link i { font-size: 12px; opacity: .9; }

.hdr3-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: var(--hdr-on);
    text-decoration: none;
    background: rgba(255, 255, 255, .1);
    transition: background .15s ease, transform .15s ease;
}
.hdr3-social:hover,
.hdr3-social:focus-visible { background: rgba(255, 255, 255, .24); color: var(--hdr-on); transform: translateY(-1px); }
.hdr3-social i { font-size: 15px; }
.hdr3-social-login {
    width: auto;
    padding: 0 12px;
    font-weight: 600;
    font-size: 12.5px;
    background: rgba(255, 255, 255, .9);
    color: var(--hdr-bg-deep);
}
.hdr3-social-login:hover,
.hdr3-social-login:focus-visible { background: #fff; color: var(--hdr-bg-deep); }

.hdr3-lang .lang-box { margin: 0; }
.hdr3-lang select,
.hdr3-lang .lang-input {
    height: 32px;
    padding: 0 26px 0 10px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
    color: var(--hdr-on);
    font-size: 12.5px;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 9px center;
}
.hdr3-lang select option { color: #1a1a1a; }

/* ---------------- ردیف اصلی ---------------- */
.hdr3-main-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.hdr3-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--hdr-on);
    flex-shrink: 0;
    max-width: 42%;
}
.hdr3-brand-logo {
    display: block;
    width: 58px;
    height: 58px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, .16);
    flex-shrink: 0;
}
.hdr3-brand-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hdr3-brand-logo--fallback img { object-fit: contain; padding: 8px; }
.hdr3-brand-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hdr3-brand-title {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-shadow: 0 1px 3px rgba(6, 48, 46, .28);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hdr3-brand-tagline {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    opacity: .95;
    text-shadow: 0 1px 2px rgba(6, 48, 46, .25);
}

.hdr3-search {
    flex: 1 1 auto;
    max-width: 460px;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(6, 48, 46, .14);
}
.hdr3-search-input {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    padding: 0 16px;
    height: 46px;
    font-size: 14px;
    color: #1a2b2a;
    background: transparent;
    min-width: 0;
}
.hdr3-search-input::placeholder { color: #7a8f8d; }
.hdr3-search-btn {
    flex-shrink: 0;
    border: 0;
    width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hdr-accent);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: filter .15s ease;
}
.hdr3-search-btn:hover,
.hdr3-search-btn:focus-visible { filter: brightness(1.1); }
.hdr3-search-btn i { color: #fff !important; }
.hdr3 .fa, .hdr3 .fab, .hdr3 .fas, .hdr3 .far { color: inherit; }

.hdr3-portal {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    max-width: 220px;
}
.hdr3-portal-topic {
    font-size: 11.5px;
    font-weight: 600;
    opacity: .9;
    white-space: nowrap;
}
.hdr3-portal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.hdr3-portal-list li { line-height: 0; }
.hdr3-portal-list a {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    overflow: hidden;
    background: rgba(255, 255, 255, .16);
    transition: transform .15s ease;
}
.hdr3-portal-list a:hover { transform: translateY(-2px); }
.hdr3-portal-list img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------- focus ---------------- */
.hdr3 a:focus-visible,
.hdr3 button:focus-visible,
.hdr3 input:focus-visible,
.hdr3 select:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    border-radius: 8px;
}

/* ---------------- تبلت ---------------- */
@media (max-width: 991px) {
    .hdr3-main-inner { flex-wrap: wrap; gap: 14px; padding: 14px 16px; }
    .hdr3-brand { max-width: none; }
    .hdr3-search { order: 3; flex-basis: 100%; max-width: none; }
    .hdr3-portal { order: 2; margin-inline-start: auto; }
}

/* ---------------- موبایل ---------------- */
@media (max-width: 575px) {
    .hdr3-utility-inner { padding: 7px 14px; gap: 8px; justify-content: center; }
    .hdr3-utility-contact { justify-content: center; }
    .hdr3-utility-social { justify-content: center; }
    .hdr3-util-link { padding: 4px 7px; font-size: 12px; }
    .hdr3-main-inner { padding: 12px 14px; justify-content: center; }
    .hdr3-brand { gap: 10px; }
    .hdr3-brand-logo { width: 46px; height: 46px; }
    .hdr3-brand-title { font-size: 17px; white-space: normal; }
    .hdr3-brand-tagline { font-size: 11.5px; }
    .hdr3-search-input { height: 42px; }
    .hdr3-portal { display: none; }
}

/* ---------------- زوم ۲۰۰٪ / خیلی باریک ---------------- */
@media (max-width: 340px) {
    .hdr3-brand { flex-direction: column; text-align: center; }
}