/* assets/css/v2/chrome-home.css — Homepage header (brand, nav, in-flow mobile menu) and footer of the news skin; static, never sticky or fixed
   keywords: header, nav, burger, footer, in-flow menu, 44px targets, logical properties
   Needs tokens-news.css and base.css. The mobile menu opens inside the page flow and pushes content down instead of covering it. */

.hm-header { border-block-end: var(--rule); background: var(--c-bg); }
.hm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-5); min-height: 68px; }
.hm-brand { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 48px; color: var(--c-text); font-weight: var(--fw-display); font-size: 1.2rem; text-decoration: none; }
.hm-brand:hover { color: var(--c-brand); }
.hm-mark { display: grid; place-items: center; inline-size: 40px; block-size: 40px; background: var(--c-brand); color: var(--c-brand-ink); border-radius: var(--radius); font-size: 1rem; letter-spacing: .02em; }
/* Logo image: the asset (khallaf-tech-logo-160.webp) has a transparent background, so the blue
   badge behind it is dropped for the image only and the mark sits directly on the header.
   No background of its own is left to show, which is why no blend mode is needed: mix-blend-mode
   is forbidden outside an .fx-* class by the ad contract (lint-ad-contract P3), and on the
   near-black footer it would erase the mark anyway. */
img.hm-mark { background: transparent; }

.hm-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; inline-size: 48px; block-size: 48px; padding: 0 var(--sp-3); border: 2px solid var(--c-text); border-radius: var(--radius); background: var(--c-bg); cursor: pointer; }
.hm-burger > span:not(.sr-only) { display: block; block-size: 2px; background: var(--c-text); }
.hm-burger[aria-expanded="true"] { background: var(--c-text); }
.hm-burger[aria-expanded="true"] > span:not(.sr-only) { background: var(--c-bg); }

/* Header tools: the AR/EN switch plus (below 768px) the menu button. inline-flex and a fixed
   block-size mean the row height never depends on JavaScript or on font loading. */
.hm-tools { display: inline-flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }

/* Language switch: two server-rendered links (AR / EN). Fixed 32px box, fixed 34px per choice,
   so adding the control cannot change the header height on any viewport (no CLS) and the
   current choice stays legible without relying on an icon. */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; block-size: 32px; padding: 2px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-bg); }
.lang-switch .lang-choice { display: inline-flex; align-items: center; justify-content: center; block-size: 26px; min-inline-size: 34px; padding-inline: 8px; border-radius: 999px; font-family: var(--font-body); font-size: .74rem; font-weight: 700; line-height: 1; letter-spacing: .03em; color: var(--c-muted); text-decoration: none; }
.lang-switch .lang-choice:hover { color: var(--c-brand); background: var(--c-brand-soft); }
.lang-switch .lang-choice.is-current { background: var(--c-brand); color: var(--c-brand-ink); }
.lang-switch .lang-choice:focus-visible { outline: 2px solid var(--c-text); outline-offset: 2px; }
@media (max-width: 767px) { .hm-tools { margin-inline-start: auto; } }

.hm-nav { display: none; flex-direction: column; inline-size: 100%; order: 3; padding-block-end: var(--sp-2); }   /* closed by default: no layout shift when site.js starts */
.hm-nav.open { display: flex; }
.hm-nav a { display: flex; align-items: center; min-height: 48px; min-inline-size: 44px; border-block-start: 1px solid var(--c-line); color: var(--c-text); font-weight: var(--fw-strong); text-decoration: none; }
.hm-nav a:hover, .hm-nav a[aria-current] { color: var(--c-brand); }

@media (min-width: 768px) {
  .hm-burger { display: none; }
  .hm-nav { display: flex; flex-direction: row; flex-wrap: wrap; inline-size: auto; order: 0; gap: var(--sp-1) var(--sp-5); padding: 0; }
  .hm-nav a { min-height: 44px; border: 0; border-block-end: 3px solid transparent; }
  .hm-nav a:hover, .hm-nav a[aria-current] { border-block-end-color: var(--c-brand); }
}

/* ---- footer ---- */
.hm-footer { margin-block-start: var(--sp-8); padding-block: var(--sp-7) var(--sp-5); background: var(--c-inverse-bg); color: var(--c-inverse-text); }
.hm-footer a { color: var(--c-inverse-text); text-decoration: none; }
.hm-footer a:hover { text-decoration: underline; }
.hm-footer .hm-brand { color: #fff; }
.hm-foot-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
.hm-foot-grid p { margin-block-start: var(--sp-3); color: #c9c9d1; max-inline-size: 38ch; }
.hm-foot-grid h2 { margin-block-end: var(--sp-2); font-size: 1rem; color: #c9c9d1; }
.hm-foot-grid ul { list-style: none; }
.hm-foot-grid li a { display: inline-flex; align-items: center; min-height: 44px; min-inline-size: 44px; }
.hm-foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin-block-start: var(--sp-6); padding-block-start: var(--sp-4); border-block-start: 1px solid #33333a; color: #c9c9d1; font-size: var(--fs-sm); }
@media (max-width: 599px) {
  .hm-footer { margin-block-start: var(--sp-6); padding-block-start: var(--sp-5); }
  .hm-foot-grid { gap: var(--sp-4); grid-template-columns: 1fr; }
  .hm-foot-grid ul { display: flex; flex-wrap: wrap; column-gap: var(--sp-4); }   /* links flow in rows, each still 44px high */
}
@media (min-width: 600px) { .hm-foot-grid { grid-template-columns: 1fr 1fr; } .hm-foot-grid > :first-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .hm-foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .hm-foot-grid > :first-child { grid-column: auto; } }