/* The shared i2Suite header and footer, adapted to the ArabicKeyboard wordmark. */
.site-header .brand { width:258px; min-width:0; flex-shrink:1; }
.site-header .brand-logo { width:100%; height:auto; }
.site-network > summary { min-height:40px; }
.arabic-page .site-footer { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:18px 25px; margin-top:54px; padding:26px 0 35px; text-align:start; }
.site-footer .footer-brand { justify-content:flex-start; }
.site-footer .footer-brand .brand-logo { width:195px; height:auto; }
.footer-note { display:block; font-size:12px; color:var(--muted); flex:1; }
.footer-note a { display:inline-block; margin-inline-start:14px; text-decoration:underline; text-underline-offset:3px; }
.footer-note a:hover { color:var(--ink); }
.footer-details { width:100%; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px 24px; }
.footer-links { justify-content:flex-start; gap:10px 24px; }
.footer-keyboard-links { width:100%; justify-content:center; gap:10px; margin-bottom:6px; padding-block:20px; border-block:1px solid var(--line); font-size:11px; }
.footer-keyboard-links a { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 15px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font-weight:500; line-height:1.4; text-decoration:none; }
.footer-keyboard-links a:hover { background:var(--canvas); color:var(--accent-readable,var(--accent)); text-decoration:none; }
.footer-keyboard-links a[aria-current] { background:var(--accent-soft); color:var(--accent-readable,var(--accent)); font-weight:600; text-decoration:none; }
.footer-keyboard-links a:focus-visible,.footer-information-links a:focus-visible { outline-offset:-2px; }
.site-footer .copyright { display:inline; width:auto; margin:0; font-size:12px; color:var(--muted); }
.footer-made { flex-basis:100%; margin:0; text-align:center; font-size:12px; line-height:1.7; color:var(--muted); }
.footer-heart { display:inline-block; width:16px; height:16px; margin-inline:2px; vertical-align:-3px; fill:#e44859; }
@media(max-width:680px) {
    .site-header .brand { width:min(218px,calc(100vw - 156px)); }
    .site-header .site-network > summary { width:36px; height:36px; min-height:36px; padding:0; justify-content:center; border:1px solid var(--line); border-radius:50%; }
    .site-header .site-network > summary > bdi { display:none; }
    .arabic-page .site-footer { gap:12px 16px; margin-top:34px; padding:22px 4px; }
    .footer-note { flex-basis:100%; }
    .footer-note a { margin-inline-start:10px; }
    .footer-details { gap:12px 18px; }
    .footer-information-links { gap:8px 18px; }
    .site-footer .copyright { width:100%; font-size:11px; }
    .footer-keyboard-links { gap:7px; padding-block:16px; }
    .footer-keyboard-links a { padding-inline:10px; font-size:10px; }
}
/* Guide discovery uses the same quiet card language as the keyboard sites. */
.arabic-guides-index{padding-block:38px 48px}
.arabic-guide-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.arabic-guide-directory article{display:flex;flex-direction:column;gap:16px;padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}
.arabic-guide-directory h2{margin:0;font-size:25px;line-height:1.35;overflow-wrap:anywhere}
.arabic-guide-directory p{margin:0;color:var(--muted);font-size:14px;line-height:1.8}
.arabic-guide-directory .arabic-content-button{align-self:flex-start;margin-top:auto}
.arabic-guide-directory-blog{display:flex;justify-content:center;margin-top:32px}
.arabic-guide-directory-blog a{display:inline-flex;align-items:center;gap:10px;color:var(--accent-readable);font-weight:600}
.header-content-link{padding-inline:6px}
@media(max-width:1000px){.header-content-link{display:none}}
@media(max-width:680px){.arabic-guide-directory{grid-template-columns:1fr}.arabic-guides-index{padding-block:25px}.arabic-guide-directory article{padding:24px}}