/* Shared by every page with the site header (linked by tools/build-nav.py).
   Article, privacy and terms pages do not load styles.css, so anything all pages need lives here:
   the navigation, larger tap targets, the phone header height and footer link sizes. */

/* ---------- Navigation (markup generated by tools/build-nav.py) ---------- */
.iw-nav { display: flex; align-items: center; gap: 10px; }
.iw-nav-links { display: none; align-items: center; gap: 28px; margin-right: 4px; }
.iw-nav-links a { font-size: 14px; font-weight: 500; color: #334155; transition: color .2s; }
.iw-nav-links a:hover, .iw-nav-links a[aria-current="page"] { color: #1A5FB0; }
.iw-nav-links a.iw-nav-cta { padding: 9px 18px; border-radius: 999px; background: #1F75D6; color: #fff; transition: background .2s; }
.iw-nav-links a.iw-nav-cta:hover { background: #1A5FB0; color: #fff; }
/* The inline links are hidden for now: the bar shows the logo and the language switch, and the footer carries
   the links to the other pages. To bring them back on wide screens, set .iw-nav-links { display: flex; } inside
   a min-width media query. */
#desktop-nav { gap: 10px; }   /* the homepage bar keeps a wider gap for inline links; not needed while they are hidden */

/* ---------- Tap targets ----------
   Small controls get an invisible 44px-tall hit box, so they are easier to tap without moving the layout.
   Never set position on something already absolute or fixed (the article filter button): it would move it. */
#navbar a.rounded-full, .iw-nav > a.rounded-full, .about-breadcrumb a, nav.text-gray-500 > a, nav[aria-label="Breadcrumb"] > a,
a.inline-flex.items-center.gap-2.text-primary-700:not(.absolute):not(.fixed), a.w-9.h-9:not(.absolute):not(.fixed), button.w-9.h-9:not(.absolute):not(.fixed),
.article-card a.text-sm.font-medium, #sortLatest, #sortPopular, .toc-pill { position: relative; }
#navbar a.rounded-full::after, .iw-nav > a.rounded-full::after, .about-breadcrumb a::after, nav.text-gray-500 > a::after, nav[aria-label="Breadcrumb"] > a::after,
a.inline-flex.items-center.gap-2.text-primary-700::after, a.w-9.h-9::after, button.w-9.h-9::after, .article-card a.text-sm.font-medium::after,
#sortLatest::after, #sortPopular::after, .toc-pill::after, #filterToggle::after {
    content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%);
}
/* FAQ on the EMR page: the whole padded row toggles the answer, not just the line of text. */
.faq-details.p-4 > summary { margin: -1rem; padding: 1rem; }
.faq-details.p-4[open] > summary { margin-bottom: 0; padding-bottom: 0; }
@media (min-width: 640px) {
    .faq-details.p-4 > summary { margin: -1.25rem; padding: 1.25rem; }
    .faq-details.p-4[open] > summary { margin-bottom: 0; padding-bottom: 0; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
    /* shorter header, and everything that is positioned against it */
    #navbar .h-20, header.sticky .h-20 { height: 64px; }
    .sticky.top-20 { top: 64px; }
    .pt-20:empty, div.border-b.pt-20 { padding-top: 64px; }
    /* the article search/sort bar scrolls away instead of covering a sixth of the screen */
    section.sticky.top-20 { position: static; }
    /* the logo is a little smaller and stays on one line */
    #navbar a > img, header.sticky a > img { width: 40px; height: 40px; }
    #navbar .h-20 > a, header.sticky .h-20 > a { gap: 8px; }
    .nav-logo-text, #navbar .h-20 > a > span, header.sticky .h-20 > a > span { font-size: 16px; white-space: nowrap; }
    /* footer links: taller rows */
    footer ul a, footer .flex.items-center.gap-6 > a { display: inline-flex; align-items: center; min-height: 32px; }
}