/*
 * TAM Digital Header & Footer — hand-coded (no Elementor). Same brand
 * palette/font as the rest of the site's TAM Digital plugins. Styles the
 * markup output by the theme's template-parts/header.php and footer.php.
 */

@font-face {
    font-family: 'YEKAN BAKH';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('../fonts/YekanBakhFaNum-Regular-2.woff') format('woff');
}
@font-face {
    font-family: 'YEKAN BAKH';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url('../fonts/YekanBakhFaNum-Bold-2.woff') format('woff');
}
@font-face {
    font-family: 'YEKAN BAKH';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/YekanBakhFaNum-ExtraBold-2.woff') format('woff');
}

/* Site-wide font — applies to every front-end page via inheritance (this
   stylesheet is enqueued unconditionally on the front-end). Elements that
   declare their own font-family (icon fonts, etc.) are unaffected, since
   inheritance only fills in where nothing more specific applies. */
body:not(.wp-admin) {
    font-family: 'YEKAN BAKH', Tahoma, sans-serif !important;
}

/* Site-wide background — the actual source of the cream color. Every
   section/header/etc. across the TAM Digital plugins is deliberately
   transparent so this one color shows through everywhere continuously,
   instead of each section re-declaring its own background (which is how
   white gaps crept in behind the header and between sections before). */
html,
body:not(.wp-admin) {
    background-color: #FFFAEE;
}

:root {
    --tam-hf-primary: #252525;
    --tam-hf-accent: #937FC7;
    --tam-hf-accent-dark: #7c68b3;
    --tam-hf-secondary: #FF6D1C;
    --tam-hf-text: #7A7A7A;
    --tam-hf-bg: #FFFAEE;
    --tam-hf-border: #EDE4C8;
    --tam-hf-font: 'YEKAN BAKH', Tahoma, sans-serif;
}

/* ── Header ──────────────────────────────────────────────────────────── */
/* Transparent — lets the page's own cream background (#FFFAEE) show
   through continuously, matching the live production site exactly. */

.tam-hf-header {
    font-family: var(--tam-hf-font);
    background: transparent;
    position: relative;
    z-index: 100;
    padding: 12px 0 28px;
}

.tam-hf-header-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 14px 20px;
    /* Grid, not flex: with unequal branding/actions widths, a flex-1 nav
       centers within whatever space is *left over* between them, which
       isn't the true center of the header. Two equal 1fr side columns
       guarantee the middle (nav) column is always dead-center regardless
       of how wide the logo or actions are. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    /* Fixed LTR ordering regardless of page language, so the logo always
       stays left and the CTA/language switcher always stay right — matches
       production, which does not mirror this row for the Persian pages. */
    direction: ltr;
}

.tam-hf-header-inner > * {
    direction: ltr;
}

html[dir="rtl"] .tam-hf-header-inner > * {
    direction: rtl;
}

.tam-hf-branding {
    flex-shrink: 0;
    justify-self: start;
}

.tam-hf-logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--tam-hf-primary);
    /* Icon always before the text (left-to-right), regardless of page
       language — .tam-hf-branding above inherits dir from the page (rtl on
       Persian pages), which would otherwise flip the icon/text order here. */
    direction: ltr;
}

.tam-hf-logo-img {
    width: auto;
    height: 64px;
    max-width: 220px;
    object-fit: contain;
    flex-shrink: 0;
}

.tam-hf-logo-text {
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--tam-hf-primary);
}

/* Desktop nav — sits in the grid's middle column, so it's always
   centered regardless of how wide the logo or actions are. */
.tam-hf-nav {
    justify-self: center;
}

.tam-hf-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.tam-hf-menu > li {
    position: relative;
}

.tam-hf-menu > li > a {
    display: block;
    padding: 10px 14px;
    color: var(--tam-hf-text);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 600;
    border-radius: 10px;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}

.tam-hf-menu > li > a:hover,
.tam-hf-menu > li.current-menu-item > a,
.tam-hf-menu > li > a:focus {
    background: var(--tam-hf-secondary);
    color: #fff;
}

.tam-hf-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 8px;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--tam-hf-border);
    border-radius: 10px;
    box-shadow: 0 16px 32px -18px rgba(37, 37, 37, .3);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.tam-hf-menu > li:hover > .sub-menu,
.tam-hf-menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tam-hf-menu .sub-menu a {
    display: block;
    padding: 9px 12px;
    color: var(--tam-hf-primary);
    text-decoration: none;
    font-size: .9rem;
    border-radius: 8px;
    white-space: nowrap;
}

.tam-hf-menu .sub-menu a:hover {
    background: var(--tam-hf-secondary);
    color: #fff;
}

/* Actions: lang switcher + CTA + mobile toggle */
.tam-hf-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    justify-self: end;
}

/* .tam-hf-actions IS a direct child of .tam-hf-header-inner, so the
   "html[dir=rtl] .tam-hf-header-inner > *" rule above matches it directly
   (specificity 0,2,1) and would otherwise beat a plain ".tam-hf-actions"
   override — this selector is deliberately built to outrank it so the
   action order (lang switcher, then CTA) stays fixed regardless of page
   language, matching the logo fix for the same underlying cause. */
html[dir="rtl"] .tam-hf-header-inner .tam-hf-actions {
    direction: ltr;
}

a.tam-hf-lang-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--tam-hf-text);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 700;
}

a.tam-hf-lang-link:hover {
    background: var(--tam-hf-bg);
    color: var(--tam-hf-accent-dark);
}

.tam-hf-flag {
    display: block;
    width: 18px;
    height: 13px;
    flex: none;
    border-radius: 2px;
    overflow: hidden;
}

.tam-hf-flag img,
.tam-hf-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}

a.tam-hf-cta {
    background: var(--tam-hf-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: .88rem;
    padding: 10px 20px;
    border-radius: 999px;
    white-space: nowrap;
    transition: opacity .15s ease;
}

a.tam-hf-cta:hover {
    opacity: .9;
    color: #fff;
}

/* Mobile toggle */
button.tam-hf-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    background: none;
    border: 1px solid var(--tam-hf-border);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
}

button.tam-hf-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--tam-hf-primary);
    margin: 0 auto;
    transition: transform .2s ease, opacity .2s ease;
}

button.tam-hf-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
button.tam-hf-toggle.is-active span:nth-child(2) {
    opacity: 0;
}
button.tam-hf-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.tam-hf-mobile-nav {
    display: none;
    border-top: 1px solid var(--tam-hf-border);
    padding: 10px 20px 16px;
}

.tam-hf-mobile-nav.is-open {
    display: block;
}

.tam-hf-mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}

.tam-hf-mobile-nav li {
    display: block;
    width: auto;
}

.tam-hf-mobile-nav .sub-menu {
    list-style: none;
    padding: 0 16px;
    position: static;
    opacity: 1;
    visibility: hidden;
    transform: none;
    box-shadow: none;
    border: 0;
    min-width: 0;
    display: none;
}

.tam-hf-mobile-nav .menu-item-has-children.is-expanded > .sub-menu {
    visibility: visible;
    display: block;
}

.tam-hf-mobile-nav a {
    display: block;
    padding: 10px 6px;
    color: var(--tam-hf-primary);
    text-decoration: none;
    font-size: .95rem;
    border-bottom: 1px solid var(--tam-hf-border);
}

@media (max-width: 960px) {
    .tam-hf-nav { display: none; }
    button.tam-hf-toggle { display: flex; }
    .tam-hf-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 10px; }
}

@media (max-width: 480px) {
    a.tam-hf-cta { padding: 9px 14px; font-size: .8rem; }
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.tam-hf-footer {
    font-family: var(--tam-hf-font);
    background: var(--tam-hf-bg);
    border-top: 1px solid var(--tam-hf-border);
}

.tam-hf-footer-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 20px 24px;
    text-align: center;
}

.tam-hf-footer-photo {
    max-width: 320px;
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
    margin: 0 auto 24px;
}

.tam-hf-footer-about {
    color: #3d3d3d;
    line-height: 2;
    margin: 0 0 24px;
}

.tam-hf-footer-about strong {
    display: block;
    color: var(--tam-hf-primary);
    margin-bottom: 8px;
    font-size: 1.05rem;
}

.tam-hf-footer-credit {
    text-align: center;
    padding: 16px 20px 28px;
    color: var(--tam-hf-text);
    font-size: .85rem;
}

/* ── Back to top ─────────────────────────────────────────────────────── */

button.tam-hf-back-to-top {
    position: fixed;
    inset-block-end: 24px;
    /* Physical "right" — same inset-inline-end RTL-flip bug as the social
       widget above; this button must stay bottom-right on Farsi pages too. */
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--tam-hf-accent);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 24px -8px rgba(37, 37, 37, .35);
    z-index: 200;
    transition: opacity .2s ease, transform .2s ease, background .15s ease;
}

button.tam-hf-back-to-top:hover {
    background: var(--tam-hf-accent-dark);
    transform: translateY(-2px);
}

button.tam-hf-back-to-top[hidden] {
    display: none;
}

/* ── Floating social widget ──────────────────────────────────────────── */

.tam-hf-social-widget {
    position: fixed;
    /* Physical "right", not inset-inline-end: this widget must stay pinned
       to the visual right edge of the screen on BOTH Farsi and English
       pages — inset-inline-end flips to the LEFT edge under dir="rtl",
       which is what was throwing the whole widget to the wrong side of
       the screen on Farsi pages. */
    right: 0;
    inset-block-start: 50%;
    transform: translateY(-50%);
    z-index: 190;
}

button.tam-hf-social-toggle {
    position: relative;
    z-index: 2;
    width: 54px;
    height: 62px;
    border-radius: 10px 0 0 10px;
    background: var(--tam-hf-secondary);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: -6px 0 16px -8px rgba(37, 37, 37, .35);
}

button.tam-hf-social-toggle svg {
    width: 30px;
    height: 30px;
}

button.tam-hf-social-toggle:hover,
button.tam-hf-social-toggle:focus {
    background: var(--tam-hf-primary);
    color: #fff;
}

/* The drawer is absolutely positioned flush against the toggle button's
   left edge (right: 100% of the widget, whose own box is exactly the
   button's size) and slides/fades into view with a transform — this is
   deliberately NOT a max-width/flex-growth animation: growing a flex
   sibling's max-width is what caused the previous "items pop out from
   behind the button" glitch, since the box briefly overlapped the button
   before settling. A fixed-position, always-correctly-sized drawer that
   just translates + fades in has no such overlap window. */
.tam-hf-social-list {
    position: absolute;
    top: 0;
    right: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--tam-hf-border);
    border-right: none;
    border-radius: 10px 0 0 10px;
    padding: 10px 8px;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(14px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.tam-hf-social-widget.is-open .tam-hf-social-list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition: opacity .2s ease, transform .2s ease;
}

a.tam-hf-social-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 999px;
    background: var(--tam-hf-bg);
    color: var(--tam-hf-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

a.tam-hf-social-item:hover {
    background: var(--tam-hf-secondary);
    color: #fff;
}

.tam-hf-social-item-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tam-hf-social-item-icon svg {
    width: 24px;
    height: 24px;
}

.tam-hf-social-item-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: 50%;
}

.tam-hf-social-item-label {
    font-size: .8rem;
    font-weight: 700;
}

@media (hover: hover) {
    .tam-hf-social-widget:hover .tam-hf-social-list {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        transition: opacity .2s ease, transform .2s ease;
    }
}

@media (max-width: 600px) {
    button.tam-hf-back-to-top {
        width: 40px;
        height: 40px;
        inset-block-end: 16px;
        right: 16px;
    }
}

.tam-hf-footer-credit a {
    color: var(--tam-hf-accent-dark);
    text-decoration: none;
}

.tam-hf-footer-credit a:hover {
    color: var(--tam-hf-secondary);
}