/* SPDX-License-Identifier: MIT */
/* SPDX-FileCopyrightText: 2026 Mohammed Abdul Hannan */
/* The pages of a book inside the website (D-036): loaded after the book's own styles (page_template.html), it puts
   the OpenNAOE logo in the book's top bar, draws the bar in the colours of the website's navigation band, and adds
   the website's footer under the page. The book's reading typography and colours are left as the book sets them. */

/* the bar and the footer run the full width of the window */
body { margin: 0; }

/* the top bar: the website's band, with the logo (the favicon's mark on a phone) linking to the home page */
:root:not([data-theme="dark"]) .appbar { background: #DCE7F3; border-bottom-color: #C3D3E4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .appbar { background: var(--panel); border-bottom-color: var(--rule); } }
.appbar .brand { display: inline-flex; align-items: center; min-height: 40px; flex: none; text-decoration: none; }
.appbar .brand img { display: block; height: 30px; width: auto; margin: 0; padding: 0; background: none; border-radius: 0; }
.appbar .brand:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* text in the band keeps a contrast of at least 4.5:1 on its colour (SPEC section 10) */
:root:not([data-theme="dark"]) .appbar .book { color: #012555; }
:root:not([data-theme="dark"]) .appbar a.fb { color: #012555; font-weight: 600; }
:root:not([data-theme="dark"]) .appbar .draft { color: #46586A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .appbar .book { color: var(--ink); }
  :root:not([data-theme="light"]) .appbar a.fb { color: var(--accent); }
  :root:not([data-theme="light"]) .appbar .draft { color: var(--ink-2); }
}
.appbar a.fb:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 719px) { .appbar .brand img { height: 28px; } }

/* the "Draft for review" label of the landing page: a darker orange, 5.5:1 on white (SPEC section 10; the book's
   #d2602f gives 3.85:1); the dark theme keeps the book's lighter orange, 6.7:1 on its panel */
:root:not([data-theme="dark"]) .chapter-list .status.draft { color: #B04A18; border-color: #B04A18; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chapter-list .status.draft { color: var(--accent-2); border-color: var(--accent-2); } }

/* the website's footer, under the book's layout (the same as on every page of the website, site.css) */
.site-footer { background: #012555; color: #E8EEF2; font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; position: relative; z-index: 31; }
.site-footer .wrap { max-width: 1200px; margin: 0 auto; padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 8px 40px; justify-content: space-between; align-items: center; }
.site-footer .foot-brand { flex: 1 1 560px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.site-footer .foot-brand img { height: 38px; width: auto; display: block; flex: none; margin: 0; padding: 0; background: none; border-radius: 0; }
.site-footer .foot-brand p { flex: 1 1 380px; min-width: 0; margin: 0; font-size: 14px; line-height: 1.5; color: #C9D4DC; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: #FFFFFF; font-size: 15px; }
.site-footer a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; border-radius: 4px; }
@media print { .site-footer { display: none; } }

/* the landing page and the chapters take the width of the website's pages, 1152 px of content, with the website's
   side margins so that the text does not run to the edge of the window (D-049) */
.page { max-width: 1216px; padding-inline: clamp(16px, 2.5vw, 32px); }

/* skip link (D-036): hidden until it has the keyboard's focus */
.skip-link { position: absolute; left: 16px; top: -120px; z-index: 200; padding: 12px 18px; background: #FFFFFF; color: #012555;
  font-weight: 700; border: 2px solid #012555; border-radius: 8px; text-decoration: none; }
.skip-link:focus { top: 16px; }