/* =========================================================
   Awake to Power Library: additions to the shared header and footer, and the page
   layout inside Themify Ultra. The screens themselves are styled by the Awake to
   Power Library plugin (assets/css/library.css).
   Brand: green #123B33, deep green #0C2A24, gold #BF9B30, cream #F7F5EF.
   Type: Georgia (headings), Arial (body).
   ========================================================= */
:root {
  /* Text is never gold (decision of 1 November 2026). Gold stays for rules, borders and focus rings. */
  --atp-shadow: 0 18px 40px rgba(18, 59, 51, .12);
  --atp-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Guards against Themify Ultra's element styles ----------
   Themify styles every <button>, <a>, <ul>, <li>, <p> and heading on the page (buttons are upper
   case, rounded and turn black on hover). These rules keep the header and footer as designed. */
.atp-header ul, .atp-footer ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.atp-header li, .atp-footer li { margin: 0; padding: 0; }
.atp-header a, .atp-footer a { text-decoration: none; transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s; }
.atp-header p, .atp-footer p { padding: 0; }
.atp-footer address { margin: 0; }
.atp-footer .atp-footer-title { font-family: var(--atp-sans); letter-spacing: .14em; }

.atp-header button,
.atp-header button:hover,
.atp-header button:focus,
.atp-header button:active { box-shadow: none; text-transform: none; letter-spacing: normal; font-family: var(--atp-sans); transform: none; min-width: 0; }
.atp-header .atp-nav-toggle,
.atp-header .atp-nav-toggle:hover,
.atp-header .atp-nav-toggle:focus,
.atp-header .atp-nav-toggle:active { background: transparent; color: var(--atp-green); border-radius: 0; }
.atp-header .atp-user-toggle,
.atp-header .atp-user-toggle:hover,
.atp-header .atp-user-toggle:focus,
.atp-header .atp-user-toggle:active { background: var(--atp-white); color: var(--atp-ink); font: 700 14px/1 var(--atp-sans); }

/* Link colours stated for every state, so Themify's link colours never show through. */
.atp-nav-utility a:focus, .atp-nav-utility a:active { color: var(--atp-white); }
.atp-nav-main .atp-hf-menu > li > a:focus, .atp-nav-main .atp-hf-menu > li > a:active { color: var(--atp-green); }
.atp-nav-drawer-utility a:hover, .atp-nav-drawer-utility a:focus, .atp-nav-drawer-utility a:active { color: var(--atp-green); }
.atp-user-menu a:focus, .atp-user-menu a:active { color: var(--atp-green); }
.atp-footer a:focus, .atp-footer a:active { color: var(--atp-white); }
.atp-btn-primary:hover, .atp-btn-primary:focus, .atp-btn-primary:active { color: var(--atp-white) !important; }

/* ---------- Top bar ---------- */
.atp-topbar-sep { margin: 0 6px; color: #A9C2B8; }

/* ---------- Main navigation ---------- */
.atp-header--library .atp-nav-main .atp-hf-menu > li > a { white-space: nowrap; }
.atp-header--library .atp-logo-label { white-space: nowrap; }

/* Just above the point where the menu becomes a drawer there is little room: tighten the spacing so
   the logo, links and buttons always fit on one line. */
@media (min-width: 1081px) and (max-width: 1200px) {
  .atp-header--library .atp-mainbar > .atp-wrap { gap: 16px; }
  .atp-header--library .atp-drawer { gap: 14px; }
  .atp-header--library .atp-nav-main .atp-hf-menu > li > a { padding: 0 9px; font-size: 14.5px; }
  .atp-header--library .atp-nav-main .atp-hf-menu > li > a::after { left: 9px; right: 9px; }
  .atp-header--library .atp-logo-label { letter-spacing: .08em; font-size: 12px; padding-left: 10px; }
  .atp-header--library .atp-logo { gap: 10px; }
  .atp-header--library .atp-header-actions { gap: 8px; }
  .atp-header--library .atp-btn { padding: 0 14px; }
}

/* ---------- Header actions ---------- */
.atp-header-actions { flex: 0 0 auto; }
.atp-btn { cursor: pointer; }
/* My Library button (the Shop's basket button styles): a full button on a computer, a short link beside Menu on a phone. */
.atp-basket-btn { gap: 8px; white-space: nowrap; }
.atp-basket-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--atp-gold); color: #0C2A24; font: 700 12px/1 var(--atp-sans); }
.atp-basket-count[hidden] { display: none; }
.atp-basket-mini { display: none; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; padding: 0 10px; color: var(--atp-green); font: 700 14px/1 var(--atp-sans); white-space: nowrap; }
.atp-basket-mini:hover, .atp-basket-mini:focus { color: var(--atp-green); text-decoration: underline; text-decoration-color: var(--atp-gold); text-underline-offset: 4px; }
html.atp-compact .atp-basket-mini { display: inline-flex; }
html.atp-compact .atp-drawer .atp-basket-btn { display: none; }
@media (max-width: 1080px) {
  .atp-basket-mini { display: inline-flex; }
  .atp-drawer .atp-basket-btn { display: none; }
}

/* Account menu */
.atp-user { position: relative; }
.atp-user-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px 4px 4px; border: 1px solid var(--atp-line); border-radius: 999px; cursor: pointer; transition: border-color .2s; }
.atp-header .atp-user-toggle:hover, .atp-user.is-open .atp-user-toggle { border-color: var(--atp-green); }
.atp-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--atp-green); color: #fff; font: 700 13px/1 var(--atp-serif); letter-spacing: .04em; }
.atp-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atp-caret { width: 7px; height: 7px; margin: -3px 4px 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.atp-user.is-open .atp-caret { transform: rotate(-135deg); margin-top: 3px; }
.atp-user-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 260px; padding: 8px; background: var(--atp-white); border: 1px solid var(--atp-line); border-top: 3px solid var(--atp-gold); border-radius: 0 0 6px 6px; box-shadow: var(--atp-shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 5; }
.atp-user.is-open .atp-user-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.atp-user-email { margin: 0 !important; padding: 10px 12px 12px; font-size: 12.5px; line-height: 1.4; color: var(--atp-muted); border-bottom: 1px solid var(--atp-line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atp-user-menu a { display: block; padding: 11px 12px; border-radius: 4px; color: var(--atp-ink); font-size: 14.5px; font-weight: 700; }
.atp-user-menu a:hover { background: var(--atp-cream); color: var(--atp-green); }
.atp-user-logout { margin-top: 4px !important; border-top: 1px solid var(--atp-line); padding-top: 4px !important; }
.atp-user-logout a, .atp-user-logout a:hover, .atp-user-logout a:focus { color: #8F1D1D; }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1080px) {
  .atp-header-actions--user { align-items: stretch; }
  .atp-header-actions--user .atp-user { margin-top: 12px; }
  .atp-user { width: 100%; }
  .atp-user-toggle { width: 100%; justify-content: flex-start; border-radius: 6px; padding: 8px 12px 8px 8px; pointer-events: none; }
  .atp-user-name { max-width: none; }
  .atp-caret { display: none; }
  /* visibility is inherited, never forced: while the drawer is closed these links must not be reachable. */
  .atp-user-menu, .atp-user.is-open .atp-user-menu { position: static; width: 100%; margin-top: 8px; padding: 0; border: 0; box-shadow: none; opacity: 1; visibility: inherit; transform: none; }
  .atp-user-email { padding: 4px 0 10px; }
  .atp-user-menu a { padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--atp-line); }
  .atp-user-logout { border-top: 0; margin-top: 0 !important; padding-top: 0 !important; }
  .atp-user-logout a { border-bottom: 0; }
}
/* Phones: the logo, the My Library link and the Menu button must fit on one line. The gap narrows,
   the Menu button keeps its width, and on narrow phones the label beside the logo is dropped. */
@media (max-width: 480px) {
  .atp-header--library .atp-mainbar > .atp-wrap { gap: 10px; }
  .atp-header--library .atp-nav-toggle { flex: 0 0 auto; }
  .atp-header--library .atp-logo-link { min-width: 0; }
}
@media (max-width: 400px) {
  .atp-header--library .atp-logo-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .atp-user-menu, .atp-caret { transition: none !important; }
}

/* =========================================================
   A HEADER THAT ALWAYS FITS
   The links in the main bar can be changed in Appearance > Menus, so their
   total width is not known in advance. A short script measures the bar
   (inc/header-footer.php, assets/js/header.js) and, only when the links and
   buttons do not fit on one line:
   1. "atp-tight": spacing tightens and the label beside the logo is dropped;
   2. "atp-compact": if that is still not enough, the links move into the
      Menu button, exactly as they do on a tablet. The top bar stays.
   ========================================================= */
html.atp-tight .atp-header--library .atp-mainbar > .atp-wrap { gap: 16px; }
html.atp-tight .atp-header--library .atp-drawer { gap: 14px; }
html.atp-tight .atp-header--library .atp-nav-main .atp-hf-menu > li > a { padding: 0 9px; font-size: 14.5px; }
html.atp-tight .atp-header--library .atp-nav-main .atp-hf-menu > li > a::after { left: 9px; right: 9px; }
html.atp-tight .atp-header--library .atp-logo-label { display: none; }
html.atp-tight .atp-header--library .atp-header-actions { gap: 8px; }
html.atp-tight .atp-header--library .atp-btn { padding: 0 14px; }

/* The tablet rules of the header, repeated for "atp-compact" on a wide screen. */
html.atp-compact .atp-nav-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 12px; border: 0; background: transparent; color: var(--atp-green); font: 700 14px/1 var(--atp-sans); cursor: pointer; }
html.atp-compact .atp-burger, html.atp-compact .atp-burger::before, html.atp-compact .atp-burger::after { display: block; width: 22px; height: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
html.atp-compact .atp-burger { position: relative; }
html.atp-compact .atp-burger::before, html.atp-compact .atp-burger::after { content: ""; position: absolute; left: 0; }
html.atp-compact .atp-burger::before { top: -7px; }
html.atp-compact .atp-burger::after { top: 7px; }
html.atp-compact .atp-header.is-open .atp-burger { background: transparent; }
html.atp-compact .atp-header.is-open .atp-burger::before { transform: translateY(7px) rotate(45deg); }
html.atp-compact .atp-header.is-open .atp-burger::after { transform: translateY(-7px) rotate(-45deg); }
html.atp-compact .atp-drawer { position: absolute; left: 0; right: 0; top: 100%; display: block; background: var(--atp-white); border-top: 1px solid var(--atp-line); box-shadow: 0 18px 30px rgba(18,59,51,.12); max-height: calc(100vh - var(--atp-mainbar-h)); max-height: calc(100dvh - var(--atp-mainbar-h)); overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px 28px; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; }
html.atp-compact .atp-header.is-open .atp-drawer { visibility: visible; opacity: 1; transform: translateY(0); }
html.atp-compact .atp-nav-main .atp-hf-menu { display: block; }
html.atp-compact .atp-nav-main .atp-hf-menu > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--atp-line); }
html.atp-compact .atp-nav-main .atp-hf-menu > li > a { flex: 1 1 auto; height: auto; min-height: 54px; padding: 0; font-size: 17px; }
html.atp-compact .atp-nav-main .atp-hf-menu > li > a::after { display: none; }
html.atp-compact .atp-sub-toggle { width: 48px; height: 48px; margin: 0; }
html.atp-compact .atp-nav-main .sub-menu { position: static; width: 100%; display: none; grid-template-columns: 1fr; padding: 0 0 12px; border: 0; box-shadow: none; opacity: 1; visibility: inherit; transform: none; }
html.atp-compact .atp-nav-main .atp-hf-menu > li:hover > .sub-menu, html.atp-compact .atp-nav-main .atp-hf-menu > li:focus-within > .sub-menu { display: none; }
html.atp-compact .atp-nav-main .atp-hf-menu > li.is-open > .sub-menu { display: grid; visibility: inherit; }
html.atp-compact .atp-nav-main .sub-menu a { padding: 10px 0 10px 14px; border-left: 2px solid var(--atp-gold-soft); border-radius: 0; }
html.atp-compact .atp-nav-main .sub-menu .atp-menu-desc { display: none; }
html.atp-compact .atp-header-actions { flex-direction: column; align-items: stretch; margin-top: 20px; }
html.atp-compact .atp-header-actions .atp-btn, html.atp-compact .atp-account, html.atp-compact .atp-account .atp-btn { width: 100%; }
html.atp-compact .atp-account { flex-direction: column; gap: 10px; }
html.atp-compact .atp-header-cta { width: 100%; margin-top: 20px; min-height: 50px; font-size: 15px; }
html.atp-compact.atp-nav-lock body { overflow: hidden; }
html.atp-compact .atp-header-actions--user { align-items: stretch; }
html.atp-compact .atp-user { width: 100%; }
html.atp-compact .atp-user-toggle { width: 100%; justify-content: flex-start; border-radius: 6px; padding: 8px 12px 8px 8px; pointer-events: none; }
html.atp-compact .atp-user-name { max-width: none; }
html.atp-compact .atp-caret { display: none; }
html.atp-compact .atp-user-menu, html.atp-compact .atp-user.is-open .atp-user-menu { position: static; width: 100%; margin-top: 8px; padding: 0; border: 0; box-shadow: none; opacity: 1; visibility: inherit; transform: none; }
html.atp-compact .atp-user-email { padding: 4px 0 10px; }
html.atp-compact .atp-user-menu a { padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--atp-line); }
html.atp-compact .atp-user-logout { border-top: 0; margin-top: 0 !important; padding-top: 0 !important; }
html.atp-compact .atp-user-logout a { border-bottom: 0; }
/* On a wide screen the open menu lines up with the page column instead of running edge to edge. */
html.atp-compact .atp-drawer { padding-left: max(24px, calc((100% - 1152px) / 2)); padding-right: max(24px, calc((100% - 1152px) / 2)); }

/* =========================================================
   PAGE LAYOUT INSIDE THEMIFY ULTRA
   Every view is one full-width column with no sidebar. The Library's own screens
   (Home, Browse, a publication, an author, My Library, accounts) print their own
   headings, so Themify's title band is hidden there. Ordinary pages (the privacy
   notice, terms) keep a cream title band and a reading column.
   ========================================================= */
body.atp-lbt {
  --theme_accent: #123B33;
  --theme_accent_semi: rgba(18, 59, 51, .8);
  --theme_accent_hover: #0C2A24;
  --theme_btn_rounded: 4px;
  --theme_input_rounded: 4px;
  font-family: var(--atp-sans);
  color: var(--atp-ink);
  overflow-x: clip;
}
body.atp-lbt #pagewrap { padding-top: 0 !important; }
body.atp-lbt #layout { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
body.atp-lbt #content { width: 100% !important; max-width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; }
body.atp-lbt #sidebar, body.atp-lbt #sidebar-alt { display: none !important; }

/* Ordinary pages: title band and reading column. */
body.atp-lbt .type-page > time { display: none; }
body.atp-lbt .type-page > .page-title {
  box-sizing: border-box; margin: 0;
  padding: clamp(36px, 5vw, 60px) max(24px, calc((100% - 1152px) / 2)) clamp(28px, 4vw, 44px);
  background: var(--atp-cream); border-bottom: 1px solid var(--atp-line);
  font: 700 clamp(30px, 3.6vw, 44px)/1.15 var(--atp-serif); letter-spacing: 0; text-transform: none; color: var(--atp-green);
}
body.atp-lbt .type-page > .page-content {
  box-sizing: border-box; margin: 0;
  padding: clamp(32px, 4vw, 56px) max(24px, calc((100% - 1152px) / 2)) clamp(48px, 6vw, 88px);
  font: 400 17px/1.65 var(--atp-sans); color: var(--atp-ink);
}
body.atp-lbt .page-content > :where(p, h2, h3, h4, ul, ol, blockquote, table, figure):where(:not(.alignfull, .alignwide)) { max-width: 760px; }
:where(body.atp-lbt .entry-content) :is(h1, h2, h3, h4):not(html):where(:not(.atp-lib *)) { font-family: var(--atp-serif); letter-spacing: 0; text-transform: none; color: var(--atp-green); line-height: 1.25; }
:where(body.atp-lbt .entry-content) a:not(html):where(:not([class]):not(.atp-lib *)) { color: var(--atp-green); text-decoration: underline; text-decoration-color: var(--atp-gold); text-underline-offset: 3px; }

/* The Library's own screens: no title band, no padding; the screen sets its own column. */
body.atp-lbt.atp-lib-screen .type-page > .page-title { display: none; }
body.atp-lbt.atp-lib-screen .type-page > .page-content,
body.atp-lbt .atp-lbt-body { padding: 0; max-width: none; }
body.atp-lbt.atp-lib-screen .page-content > .atp-lib { max-width: 1200px; }

/* Publication and author pages: Themify's date, author and "previous / next" lines are not part of these templates. */
body.atp-lbt:is(.single-atp_publication, .single-atp_author) :is(.post-nav, .post-date-wrap, .post-meta) { display: none !important; }

/* Anything else (a "not found" screen, search results) keeps a centred column. */
body.atp-lbt:not(.page):not(.single-atp_publication):not(.single-atp_author) #content { max-width: 1200px !important; margin: 0 auto !important; padding: 48px 24px 72px !important; box-sizing: border-box; }

@media (max-width: 782px) {
  body.atp-lbt .type-page > .page-title, body.atp-lbt .type-page > .page-content { padding-left: 16px; padding-right: 16px; }
  body.atp-lbt.atp-lib-screen .type-page > .page-content { padding: 0; }
}

/* Header search (to the Library's Browse page). */
.atp-header .atp-header-search { position: relative; display: flex; align-items: center; flex: 0 1 230px; min-width: 170px; margin: 0; }
.atp-header .atp-header-search input[type="search"] { width: 100%; height: 42px; min-height: 0; margin: 0; padding: 0 44px 0 16px; background: var(--atp-cream); border: 1px solid var(--atp-line); border-radius: 999px; box-shadow: none; color: var(--atp-ink); font: 400 14.5px/1 var(--atp-sans); -webkit-appearance: none; appearance: none; }
.atp-header .atp-header-search input[type="search"]::placeholder { color: #6B7672; opacity: 1; }
.atp-header .atp-header-search input[type="search"]:focus { background: #fff; border-color: var(--atp-green); outline: 2px solid var(--atp-green); outline-offset: 1px; }
.atp-header .atp-header-search button,
.atp-header .atp-header-search button:hover,
.atp-header .atp-header-search button:focus { position: absolute; right: 4px; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0; padding: 0; background: transparent; border: 0; border-radius: 50%; color: var(--atp-green); cursor: pointer; }
.atp-header .atp-header-search button:hover { background: var(--atp-white); }
.atp-header .atp-header-search button:focus-visible { outline: 2px solid var(--atp-green); }
html.atp-tight .atp-header .atp-header-search { flex-basis: 180px; min-width: 150px; }
@media (max-width: 1080px) {
  .atp-header .atp-header-search { flex: none; width: 100%; min-width: 0; margin: 16px 0 4px; }
  .atp-header .atp-header-search input[type="search"] { height: 48px; font-size: 16px; }
}
html.atp-compact .atp-header .atp-header-search { flex: none; width: 100%; min-width: 0; margin: 16px 0 4px; }

/* Sign in link beside the account button. */
.atp-signin-link { color: var(--atp-green); font: 700 14px/1 var(--atp-sans); white-space: nowrap; padding: 10px 4px; }
.atp-signin-link:hover { text-decoration: underline; text-decoration-color: var(--atp-gold); text-underline-offset: 4px; }
@media print {
  .atp-header, .atp-footer { display: none !important; }
}
