/*
 * Ishraq — إشراقة : the header the journal already had.
 *
 * Scoped under .ish-* so nothing here reaches theme11's homepage rows, which
 * demo6 inherits unchanged. Logical properties throughout — the navbar mirrors
 * from `dir` alone, exactly as theme11's does.
 */

.ish-header { background: #fff; border-bottom: 1px solid var(--nl-border, #e5e7eb); }

/* ---- masthead banner ---- */
.ish-banner { background: #fff; }
.ish-banner__link { display: block; max-width: 1661px; margin-left: auto; margin-right: auto; margin-inline: auto; line-height: 0; }
/*
 * The source is 1661x184. `height:auto` with the intrinsic width/height on the
 * <img> reserves the right box before it loads, so nothing shifts; `max-width`
 * stops it being stretched past its own resolution on a very wide screen, which
 * is what made the older 950px banner look soft.
 */
.ish-banner__img { display: block; width: 100%; height: auto; }

/* ---- navbar ---- */
.ish-nav { background: var(--nl-surface-alt, #f6f7f8); border-top: 1px solid var(--nl-border, #e5e7eb);
	border-block-start: 1px solid var(--nl-border, #e5e7eb); }
.ish-nav__inner {
	max-width: 1661px;
	margin-left: auto; margin-right: auto;
	margin-inline: auto;
	padding-left: 16px; padding-right: 16px;
	padding-inline: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.ish-nav__list {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ish-nav__item { position: relative; }
.ish-nav__link {
	display: block;
	padding: 12px 14px;
	color: var(--nl-ink, #16191d);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	/* Arabic needs more leading than Latin; the nav is the one place the theme's
	   own line-height is too tight for it. */
}
/*
 * :focus-visible is kept OUT of these lists deliberately. An unknown selector
 * invalidates the whole comma-separated rule, so pairing it with :hover meant
 * Safari < 15.4 dropped the hover style too and the navbar gave no pointer
 * feedback at all. Split, each stands or falls on its own.
 */
.ish-nav__link:hover { color: var(--nl-brand, #00693e); background: #fff; }
.ish-nav__link:focus-visible { color: var(--nl-brand, #00693e); background: #fff; }
.ish-nav__caret { margin-right: 6px; margin-inline-start: 6px; font-size: .72em; opacity: .7; }

.ish-nav__sub {
	position: absolute;
	right: 0; /* RTL-only; the logical value below wins where supported */
	inset-inline-start: 0;
	top: 100%;
	z-index: 60;
	min-width: 220px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--nl-border, #e5e7eb);
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(16, 24, 40, .14);
	display: none;
}
.ish-nav__item.has-sub:hover > .ish-nav__sub,
.ish-nav__item.has-sub:focus-within > .ish-nav__sub { display: block; }
.ish-nav__sub a {
	display: block;
	padding: 9px 16px;
	color: var(--nl-ink-soft, #2b2f36);
	font-size: .9rem;
	line-height: 1.5;
	text-decoration: none;
}
.ish-nav__sub a:hover { background: var(--nl-brand-tint, #e5f0eb); color: var(--nl-brand, #00693e); }
.ish-nav__sub a:focus-visible { background: var(--nl-brand-tint, #e5f0eb); color: var(--nl-brand, #00693e); }

.ish-nav__search {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	color: var(--nl-brand, #00693e);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.ish-nav__search:hover { text-decoration: underline; }

/* ---- mobile ---- */
.ish-nav__toggle {
	display: none;
	flex: 0 0 auto;
	width: 42px; height: 42px;
	padding: 0;
	border: 1px solid var(--nl-border, #e5e7eb);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
}
.ish-nav__bars, .ish-nav__bars::before, .ish-nav__bars::after {
	display: block; width: 18px; height: 2px; margin-left: auto; margin-right: auto; margin-inline: auto;
	background: var(--nl-ink, #16191d); content: '';
}
.ish-nav__bars::before { transform: translateY(-6px); }
.ish-nav__bars::after  { transform: translateY(4px); }

@media (max-width: 900px) {
	.ish-nav__toggle { display: block; }
	.ish-nav__list { display: none; width: 100%; flex-direction: column; align-items: stretch; }
	.ish-nav__list.is-open { display: flex; }
	.ish-nav__inner { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; padding-block: 8px; }
	/* Submenus stay collapsed on a phone: إشراقة's subject tree is deep, and
	   flattening it fills the screen before any content appears. */
	.ish-nav__sub { display: none !important; }
}

/* ----------------------------------------------------------------------------
   Footer contact block.

   The journal's footer_note is authored HTML and carries its own layout: a <br>
   after every link, and float:left / float:right to sit the contact list beside
   the logo. That stacks the five links one per line, and the floats are physical
   so they do not mirror under RTL.

   Corrected here rather than in the content, which is the journal's to own: the
   <br> are suppressed and the links laid out inline so they flow and wrap, and
   the floats are neutralised so the block reads correctly right-to-left.
   ------------------------------------------------------------------------- */
.nl-footer__meta p { float: none !important; }
.nl-footer__meta br { display: none; }
.nl-footer__meta a {
	display: inline-flex;
	align-items: center;
	margin-left: 1.5rem;
	margin-inline-end: 1.5rem;
	margin-bottom: .35rem;
	margin-block-end: .35rem;
	white-space: nowrap;
}
/* The logo the note embeds: keep it from overflowing a narrow footer column. */
.nl-footer__meta img { max-width: 280px;
	max-width: min(280px, 100%); height: auto; }

/*
 * The footer_note nests each label INSIDE its Font Awesome span
 * (<span class="fab fa-facebook">&nbsp; unizwaoman</span>). Font Awesome pins
 * those spans to a fixed ~18.6px width in the icon font, so every link collapsed
 * to icon width and the five of them overlapped in one 19px stack.
 *
 * Let the span size to its content and render its TEXT in the page font, and
 * keep the icon on ::before with the Font Awesome family it needs. FA 7 here:
 * Free for the solid/regular icons, Brands for the social ones.
 */
.nl-footer__meta a .fa,
.nl-footer__meta a .fas,
.nl-footer__meta a .far,
.nl-footer__meta a .fab {
	width: auto;
	font-family: inherit;
	font-weight: inherit;
}
.nl-footer__meta a .fa::before,
.nl-footer__meta a .fas::before,
.nl-footer__meta a .far::before,
.nl-footer__meta a .fab::before {
	font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "FontAwesome";
	font-weight: 900;
	margin-left: .45em;
	margin-inline-end: .45em;
}
.nl-footer__meta a .far::before { font-weight: 400; }
.nl-footer__meta a .fab::before {
	font-family: "Font Awesome 7 Brands", "Font Awesome 6 Brands", "FontAwesome";
	font-weight: 400;
}

/* ============================================================================
   Older-browser fallbacks.

   demo6 inherits theme11, which is built on three features that share roughly
   one support floor — aspect-ratio, logical properties and flex `gap`, i.e.
   Safari 15 / Chrome 88 / Firefox 89 (all 2021). Everything below is either
   wrapped in `@supports not (...)` or is a physical declaration sitting ahead of
   its logical twin, so a current browser resolves to exactly what it did before
   this block existed.

   The fallbacks live HERE and not in theme11.css on purpose: theme11 is demo4's
   stylesheet and demo4 is the reference instance, so it is not written to.

   NOT verified on a real old Safari — there is no such browser on this box. The
   inertness on current engines IS verified.
   ========================================================================= */

/*
 * aspect-ratio -> percentage-padding ratio box (Safari < 15, Chrome < 88).
 * Without this the ratio is simply ignored, `height:100%` on the img resolves
 * against nothing, and every card image collapses to zero height. Percentages,
 * not pixels, so the cards still scale with their column.
 */
/*
 * aspect-ratio, logical-property and focus-ring fallbacks now live in
 * theme11.css, which demo6 loads ahead of this file — they were duplicated
 * here while theme11 was off-limits. Only the ishraq-specific ones remain.
 */

/*
 * Keyboard focus without :focus-visible (Safari < 15.4). Those browsers show
 * the ring on mouse clicks too — the correct trade against no visible focus at
 * all. Browsers that DO support the selector suppress it again, so nothing
 * changes for them.
 */
.ish-nav__link:focus,
.ish-nav__sub a:focus,
.ish-nav__search:focus,
.ish-nav__toggle:focus { outline: 2px solid var(--nl-brand, #00693e); outline-offset: -2px; }
@supports selector(:focus-visible) {
	.ish-nav__link:focus:not(:focus-visible),
	.ish-nav__sub a:focus:not(:focus-visible),
	.ish-nav__search:focus:not(:focus-visible),
	.ish-nav__toggle:focus:not(:focus-visible) { outline: none; }
}