/* =============================================================================
   Header menu (2026-10-17) — see inc/menu/menu.php for the classes that drive it.

   1) Third and fourth levels (books, magazine periods, issues) open SIDEWAYS. agnar opens
      them to the right (`left: calc(100% + 20px)`), which on the Persian site runs off the
      screen; Persian opens them to the left. menu.js adds .zia-flip when a flyout would leave
      the window, and the flip opens it the other way.
   2) Phone menu: each level indents a further 20px from the reading edge (agnar indents only
      from the left, so Persian sub-items had no indent at all).
   3) The Instagram icon beside the dark-mode and language buttons, and the wider space the
      menu row keeps free for that cluster.
   4) The site map in the footer: the header menu again, in columns (full depth on desktop).
   5) The tag-filtered category list heading (category.php), boxless like the other lists.
   ============================================================================= */

/* ---- 1) Sideways flyouts ------------------------------------------------- */
html[dir="rtl"] .nav-menu:not(.mobile) .menu ul ul { left: auto; right: calc(100% + 20px); }
html[dir="rtl"] .nav-menu:not(.mobile) .menu ul ul:before { left: auto; right: -20px; }
html[dir="rtl"] .nav-menu:not(.mobile) .menu li.zia-flip > ul { right: auto; left: calc(100% + 20px); }
html[dir="rtl"] .nav-menu:not(.mobile) .menu li.zia-flip > ul:before { right: auto; left: -20px; }
html:not([dir="rtl"]) .nav-menu:not(.mobile) .menu li.zia-flip > ul { left: auto; right: calc(100% + 20px); }
html:not([dir="rtl"]) .nav-menu:not(.mobile) .menu li.zia-flip > ul:before { left: auto; right: -20px; }
/* agnar draws a white pointer triangle on a flyout's LEFT edge (`#wrap-nav-header … ul ul:after`,
   border-right-color #fff): wrong side on the Persian site and a stray white arrow in dark mode.
   The first-level dropdown's pointer is already transparent; drop the flyouts' too. */
#wrap-nav-header .nav-menu:not(.mobile) .menu ul ul:after { display: none; }
/* agnar's arrow next to a parent INSIDE a dropdown points down; sideways is clearer there. */
html[dir="rtl"] .nav-menu:not(.mobile) .menu ul button .svg-icon { transform: rotate(90deg); }
html:not([dir="rtl"]) .nav-menu:not(.mobile) .menu ul button .svg-icon { transform: rotate(-90deg); }
/* Dropdown rows (owner, 2026-10-18): one style in both themes — no lines between items, a soft
   background on the hovered row and on the row whose flyout is open (so the path stays visible), and
   no extra 10px above the first row / below the last (agnar's `ul` padding), so every row is the same
   height. agnar drew a 6% black line (visible only on white) and a 10% white hover overlay (visible
   only on dark), so each theme showed half of it. */
#wrap-nav-header .nav-menu:not(.mobile) .menu ul { padding: 0; }
#wrap-nav-header .nav-menu:not(.mobile) .menu ul ul { top: 0 !important; }   /* agnar: -10px !important, offsetting that padding */
#wrap-nav-header .nav-menu:not(.mobile) .menu ul span { border-bottom: 0; }
#wrap-nav-header .nav-menu:not(.mobile) ul ul > li:hover > span,
#wrap-nav-header .nav-menu:not(.mobile) ul ul > li.hover > span { background: rgba(0, 0, 0, .05); }
html[data-theme="dark"] #wrap-nav-header .nav-menu:not(.mobile) ul ul > li:hover > span,
html[data-theme="dark"] #wrap-nav-header .nav-menu:not(.mobile) ul ul > li.hover > span { background: rgba(255, 255, 255, .1); }
/* Flyouts are a little wider than agnar's 200px dropdown, so a book title and its year share a line. */
.nav-menu:not(.mobile) .menu ul li.hover > ul { width: 250px; }
/* …also in agnar's keyboard-focus state, which caps every sub-menu at 200px (a click inside a flyout
   puts the focus there, and the years wrapped onto a second line). */
.nav-menu:not(.mobile) .menu ul li.menu-item-has-children.focus > ul { width: 250px; min-width: 250px; max-width: 250px; }
/* Small year after a book or a period. */
.zia-menu-year { font-size: .85em; font-weight: 400; opacity: .65; margin-inline-start: 6px; }
/* A period («دورهٔ اول») is a group, not a page: no hand cursor. */
.nav-menu li.zia-menu-group > .menu-item-wrapper > a { cursor: default; }

/* ---- 2) Phone menu indents ------------------------------------------------ */
.nav-menu.mobile ul ul li a { padding: 12px 0; padding-inline-start: 40px; }
.nav-menu.mobile ul ul ul li a { padding-inline-start: 60px; }
.nav-menu.mobile ul ul ul ul li a { padding-inline-start: 80px; }

/* ---- 3) Instagram icon ------------------------------------------------------ */
.zia-insta {
	position: absolute; z-index: 5;
	left: 88px;                      /* Persian desktop: after the moon (24) and «EN» (64) */
	top: 50%; transform: translateY(-50%);
	width: 40px; height: 40px; border-radius: 6px;
	display: inline-flex; align-items: center; justify-content: center;
	color: #777; text-decoration: none;
}
.zia-insta svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.zia-insta:hover { color: #dd9933; }
html[data-theme="dark"] .zia-insta { color: #9aa3ad; }
html[data-theme="dark"] .zia-insta:hover { color: #dd9933; }
@media (hover: none) {                    /* no hover colour on touch (see the tap note in sticky-header.js) */
	.zia-insta:hover { color: #777; }
	html[data-theme="dark"] .zia-insta:hover { color: #9aa3ad; }
}
@media (min-width: 769px) {               /* English desktop mirrors the cluster to the right */
	html:not([dir="rtl"]) .zia-insta { left: auto; right: 88px; }
}
@media (max-width: 768px) {               /* 720–768: after the moon (language 20, moon 64) */
	.zia-insta { left: 108px; right: auto; top: 6px; transform: none; }
}
@media (max-width: 719px) {               /* phones: after the search button (glyphs 40 · 84 · 128 · 172) */
	.zia-insta { left: 152px; }
}

/* Room for the cluster: moon + language + Instagram end at 128px, + 14px. layout.css / i18n.css
   keep 100px when there is no icon. */
body.zia-has-insta #wrap-nav-header .nav-menu:not(.mobile) { padding-inline-end: 142px; }
html:not([dir="rtl"]) body.zia-has-insta #wrap-nav-header .nav-menu:not(.mobile) { padding-inline-end: 142px; }
@media only screen and (min-width: 720px) and (max-width: 768px) {
	/* the cluster sits on the LEFT in this band in both languages (20–148px) */
	body.zia-has-insta #wrap-nav-header .nav-menu:not(.mobile) { padding-left: 164px; }
	html:not([dir="rtl"]) body.zia-has-insta #wrap-nav-header .nav-menu:not(.mobile) { padding-left: 164px; padding-right: 30px; }
}

/* ---- 4) Site map in the footer (#zia-footer-map, child footer.php) -------------------
   The header menu again, in columns, above agnar's copyright bar. agnar's footer is #eee with
   #777 text; the section names are dark and bold (orange on #eee would be too faint to read).
   Phones show the sections and their pages only: books, issues and the magazine periods are a
   tap away in the phone menu. */
#zia-footer-map { border-top: 1px solid #ddd; }
#zia-footer-map .pad { padding-top: 30px; padding-bottom: 26px; }
/* Four columns, filled in menu order and balanced by length (zia_menu_mark_footer_columns()). */
.zia-fm-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 36px; }
.zia-fm-list { list-style: none; margin: 0; padding: 0; }
.zia-fm-list ul { list-style: none; margin: 4px 0 0; padding: 0; }
.zia-fm-list > li { break-inside: avoid; margin: 0 0 22px; }
.zia-fm-list button { display: none; }                         /* agnar's sub-menu toggles */
.zia-fm-list .menu-item-wrapper { display: block; }
.zia-fm-list a { display: block; padding: 2px 0; font-size: 14px; line-height: 1.6; color: #555; text-decoration: none; }
#footer .zia-fm-list a:hover { color: #dd9933; }
.zia-fm-list > li > .menu-item-wrapper > a { font-size: 15px; font-weight: 700; color: #333; padding-bottom: 4px; }
.zia-fm-list ul ul { padding-inline-start: 12px; }
.zia-fm-list ul ul a { font-size: 13px; color: #888; }
.zia-fm-list a[href="#"] { cursor: default; }
#footer .zia-fm-list a[href="#"]:hover { color: inherit; }
.zia-fm-list ul a[href="#"] { color: #666; font-weight: 600; }
/* Instagram: the last item, after «تماس با ما», in the section names' type, with its icon. */
.zia-fm-list > li.zia-fm-insta > .menu-item-wrapper > a { display: inline-flex; align-items: center; gap: 8px; }
.zia-fm-insta svg { width: 18px; height: 18px; fill: currentColor; display: block; flex: none; }
/* dark: dark-mode.css paints every #footer link var(--muted) with !important */
html[data-theme="dark"] #zia-footer-map { border-color: var(--border); }
html[data-theme="dark"] #footer .zia-fm-list > li > .menu-item-wrapper > a { color: var(--text) !important; }
html[data-theme="dark"] #footer .zia-fm-list a:hover { color: #dd9933 !important; }
html[data-theme="dark"] #footer .zia-fm-list a[href="#"]:hover { color: var(--text) !important; }
@media only screen and (max-width: 719px) {
	#zia-footer-map .pad { padding-top: 24px; padding-bottom: 18px; }
	.zia-fm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
	.zia-fm-list ul ul,
	.zia-fm-list li.zia-menu-group { display: none; }
}

/* Copyright line: agnar puts it in a half-width grid cell with a 38px gutter on the reading side,
   so it sat 38px further in than the site map. Full width, no gutter → aligned with the columns.
   The other half (agnar's social links, unused) is dropped while it is empty. */
#footer-bottom .grid.one-half { float: none; width: auto; margin: 0; }
#footer-bottom .grid.one-half.last:not(:has(*)) { display: none; }
#footer-bottom #copyright { text-align: start; }
/* agnar's back-to-top tab: removed (owner decision) — the collapsed menu bar stays pinned at the top. */
#footer-bottom #back-to-top { display: none; }

/* ---- 5) Tag-filtered category list heading -------------------------------- */
body.zia-tagfiltered .page-title { border: 0; }
body.zia-tagfiltered .page-title .pad { padding: 14px 0 12px; }
body.zia-tagfiltered .page-title h1 { font-size: 22px; line-height: 1.5; margin: 0; }
@media only screen and (max-width: 719px) { body.zia-tagfiltered .page-title h1 { font-size: 18px; } }