/* =========================================================
   Awake to Power PUQ: additions to the shared header and footer, the page layout
   inside Themify Ultra, guards against Themify's element styles, and the brand
   layer for the PUQ screens.
   Brand: green #123B33, deep green #0C2A24, gold #BF9B30, cream #F7F5EF.
   Type: Georgia (headings), Arial (body).
   ========================================================= */
:root {
  --atp-gold-text: #7E6118; /* gold dark enough to read on white */
  --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, .atp-prefooter 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-prefooter p { letter-spacing: normal; }

.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: var(--atp-gold); }

/* ---------- Main navigation ---------- */
.atp-header--puq .atp-nav-main .atp-hf-menu > li > a { white-space: nowrap; }
.atp-header--puq .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--puq .atp-mainbar > .atp-wrap { gap: 16px; }
  .atp-header--puq .atp-drawer { gap: 14px; }
  .atp-header--puq .atp-nav-main .atp-hf-menu > li > a { padding: 0 9px; font-size: 14.5px; }
  .atp-header--puq .atp-nav-main .atp-hf-menu > li > a::after { left: 9px; right: 9px; }
  .atp-header--puq .atp-logo-label { letter-spacing: .08em; font-size: 12px; padding-left: 10px; }
  .atp-header--puq .atp-logo { gap: 10px; }
  .atp-header--puq .atp-header-actions { gap: 8px; }
  .atp-header--puq .atp-btn { padding: 0 14px; }
}

/* ---------- Header actions ---------- */
.atp-header-actions { flex: 0 0 auto; }
.atp-btn { cursor: pointer; }
.atp-btn-gold { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; background: var(--atp-gold); border: 2px solid var(--atp-gold); color: var(--atp-green-deep) !important; border-radius: 4px; font: 700 15px/1.2 var(--atp-sans); white-space: nowrap; transition: background-color .2s, transform .25s var(--atp-ease), box-shadow .25s; }
.atp-btn-gold:hover, .atp-btn-gold:focus { background: #D1AE45; border-color: #D1AE45; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .25); }
.atp-btn-gold .atp-arrow { transition: transform .25s var(--atp-ease); }
.atp-btn-gold:hover .atp-arrow { transform: translateX(4px); }

/* 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: var(--atp-gold); 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; }

/* ---------- Band above the footer: the book ---------- */
.atp-prefooter { background: var(--atp-cream); border-top: 4px solid var(--atp-gold); color: var(--atp-ink); font-family: var(--atp-sans); }
.atp-prefooter * { box-sizing: border-box; }
.atp-prefooter .atp-wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 40px; padding-bottom: 40px; }
.atp-prefooter-eyebrow { margin: 0 0 8px !important; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--atp-gold-text); }
.atp-prefooter-title { margin: 0 !important; font: italic 700 clamp(18px, 1.9vw, 23px)/1.35 var(--atp-serif); color: var(--atp-green); max-width: 720px; }
.atp-prefooter .atp-btn-gold:hover, .atp-prefooter .atp-btn-gold:focus { box-shadow: 0 10px 22px rgba(18, 59, 51, .2); }
.atp-prefooter a:focus-visible { outline: 2px solid var(--atp-green); outline-offset: 3px; }
/* The band carries the gold rule, so the footer directly below it drops its own. */
.atp-prefooter + .atp-footer .atp-footer-main { border-top: 0; }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1080px) {
  .atp-header-actions--user { align-items: stretch; }
  .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; }
  .atp-prefooter .atp-wrap { flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 34px; padding-bottom: 34px; }
}
@media (max-width: 640px) {
  .atp-btn-gold { white-space: normal; text-align: left; min-height: 50px; padding: 10px 20px; width: 100%; justify-content: center; }
}
/* The label beside the logo is dropped on very narrow phones so the logo and menu button never touch. */
@media (max-width: 359px) {
  .atp-header--puq .atp-logo-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .atp-prefooter *, .atp-user-menu, .atp-caret { transition: none !important; }
}
@media print {
  .atp-prefooter { display: 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--puq .atp-mainbar > .atp-wrap { gap: 16px; }
html.atp-tight .atp-header--puq .atp-drawer { gap: 14px; }
html.atp-tight .atp-header--puq .atp-nav-main .atp-hf-menu > li > a { padding: 0 9px; font-size: 14.5px; }
html.atp-tight .atp-header--puq .atp-nav-main .atp-hf-menu > li > a::after { left: 9px; right: 9px; }
html.atp-tight .atp-header--puq .atp-logo-label { display: none; }
html.atp-tight .atp-header--puq .atp-header-actions { gap: 8px; }
html.atp-tight .atp-header--puq .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 page of this site is one full-width column: no sidebar, no theme page
   title (each PUQ page prints its own heading), no gap under the header.
   Themify Builder rows keep their own widths; plain content centres itself.
   ========================================================= */
body.atp-puq #pagewrap { padding-top: 0 !important; }
body.atp-puq #layout { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
body.atp-puq #content { width: 100% !important; max-width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; }
body.atp-puq #sidebar, body.atp-puq #sidebar-alt { display: none !important; }
/* Themify's page title is hidden wherever the page prints its own main heading (the About page, every
   PUQ screen, the legal pages). A page without a heading of its own keeps the title, in brand type. */
body.atp-puq.page .type-page > time { display: none; }
body.atp-puq.home .type-page > .page-title,
body.atp-puq-app .type-page > .page-title,
body.atp-puq.page .type-page:has(.page-content h1) > .page-title { display: none; }
body.atp-puq.page .type-page > .page-title { box-sizing: content-box; max-width: 760px; margin: 56px auto 0; padding: 0 24px 18px; font: 700 clamp(30px, 3.2vw, 40px)/1.2 var(--atp-serif); letter-spacing: 0; color: var(--atp-green); position: relative; }
body.atp-puq.page .type-page > .page-title::after { content: ""; position: absolute; left: 24px; bottom: 0; width: 56px; height: 3px; background: var(--atp-gold); }
/* The About page's first builder row carries top padding from when the old header sat over it. The
   hero now starts directly under the header. */
body.atp-puq.home .themify_builder_content > .module_row:first-child,
body.atp-puq .module_row:has(> .row_inner .puq-hero) { padding-top: 0 !important; }
/* Plain page text that is not a PUQ screen and not built with the page builder gets a readable column. */
body.atp-puq.page .page-content > :where(:not(.themify_builder_content, .themify_builder, .puq-wrap, .puq-nav, .puq-landing-container, .puq-legal-page, .alignfull, style, script, link, noscript)) { max-width: 760px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: content-box; }
/* Anything that is not a page (a "not found" screen, search results, a post) keeps a centred column. */
body.atp-puq:not(.page) #content { max-width: 1160px !important; margin: 0 auto !important; padding: 48px 24px 72px !important; box-sizing: border-box; }

/* =========================================================
   THEMIFY'S ACCENT
   The rules that keep Themify's element styles off the PUQ screens are in
   plugin-guards.css, which is printed inside the page.
   ========================================================= */
body.atp-puq {
  /* Themify's accent colour (plain links and buttons) follows the brand instead of Themify's red. */
  --theme_accent: #123B33;
  --theme_accent_semi: rgba(18, 59, 51, .8);
  --theme_accent_hover: #0C2A24;
  --theme_btn_rounded: 8px;
  --theme_input_rounded: 8px;
}

/* =========================================================
   WIDTH OF THE PUQ SCREENS
   "Wide" (Appearance > Customize > Awake to Power PUQ) gives the nine questions,
   the dashboard, the tracker and the other working screens the same 1,100 px
   column as the About page, in place of the plugin's 700 to 860 px. Sign-in
   stays a narrow card.
   ========================================================= */
body.atp-puq-wide:not(.atp-puq-screen-signin) .puq-wrap,
body.atp-puq-wide:not(.atp-puq-screen-signin) .puq-nav { max-width: 1140px; } /* 1,100 px of content plus the 20 px gutters */
/* Space above the footer on the working screens, and around the text of ordinary pages (the About
   page runs edge to edge and manages its own). */
body.atp-puq-app .page-content { padding-bottom: 40px; }
body.atp-puq:not(.home):not(.atp-puq-app) .page-content { padding-top: 48px; padding-bottom: 72px; }
/* Under a visible page title the text follows closely; the legal pages bring their own spacing. */
body.atp-puq.page:not(.home):not(.atp-puq-app) .type-page:not(:has(.page-content h1)) > .page-content { padding-top: 24px; }
body.atp-puq.page .page-content:has(.puq-legal-page) { padding-top: 0; padding-bottom: 24px; }

@media (min-width: 1000px) {
  /* Start Your PUQ Journey: the introduction and "Before you start" sit beside the form instead of
     above it, so the page uses its width and the form is reached without scrolling. */
  body.atp-puq-wide .puq-card:has(> .puq-expect):has(> form) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; align-items: start; }
  body.atp-puq-wide .puq-card:has(> .puq-expect):has(> form) > * { grid-column: 1; }
  body.atp-puq-wide .puq-card:has(> .puq-expect):has(> form) > form { grid-column: 2; grid-row: 1 / span 12; }

  /* PUQ 1: the statements of each group run in columns across the page rather than in one long list. */
  body.atp-puq-wide .puq-wrap .puq-opt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); column-gap: 18px; align-content: start; }
  body.atp-puq-wide .puq-wrap .puq-opt-list > .puq-grp { grid-column: 1 / -1; }
}

/* =========================================================
   BRAND LAYER FOR THE PUQ SCREENS
   Applies only when "Use Awake to Power colours and typefaces" is on
   (Appearance > Customize > Awake to Power PUQ). The colours inside the
   plugin's own styles are translated in inc/skin.php; the rules below cover
   what a colour translation cannot: Themify's accent colour, typefaces and hover.
   ========================================================= */
body.atp-puq-skin {
  /* The About page's accent face. Georgia replaces Lora, so no font is downloaded. */
  --puq-serif: Georgia, "Times New Roman", serif;
  font-family: var(--atp-sans);
  color: var(--atp-ink);
}

/* Typefaces: Arial for text, Georgia for the main headings. Small headings inside cards stay in
   Arial, because they work as labels rather than as headlines. */
body.atp-puq-skin .puq-wrap,
body.atp-puq-skin .puq-nav,
body.atp-puq-skin .puq-landing-container,
body.atp-puq-skin .puq-legal-page { font-family: var(--atp-sans); }
body.atp-puq-skin .puq-wrap :is(h1, h2),
body.atp-puq-skin :is(.puq-landing-container, .puq-legal-page) :is(h1, h2, h3) { font-family: var(--atp-serif); letter-spacing: 0; }
body.atp-puq-skin .puq-landing-container :is(h1, h2) { font-weight: 700; }

/* Headings and plain links in ordinary page text. Written to out-rank Themify's element rules by one
   step only: any colour set in a page builder module, or by the PUQ screens themselves, wins. */
:where(body.atp-puq-skin .entry-content) :is(h1, h2, h3):not(html):where(:not(.puq-wrap *, .puq-landing-container *)) { font-family: var(--atp-serif); letter-spacing: 0; color: var(--atp-green); }
:where(body.atp-puq-skin .entry-content) a:not(html):where(:not([class]):not(.puq-wrap *, .puq-landing-container *)) { color: var(--atp-green); text-decoration: underline; text-decoration-color: var(--atp-gold); text-underline-offset: 3px; }

/* About page: the emphasised words of the headline take the brand's gold. */
body.atp-puq-skin .puq-hero h1 .puq-em { color: var(--atp-gold-text); }
body.atp-puq-skin .puq-progress { background: linear-gradient(90deg, var(--atp-green), var(--atp-gold)); }

/* Hover, focus and active on PUQ buttons: gold with a deep green label. One treatment for every
   button, readable on white and on the dark green bands alike. (The plugin's own hover is a red to
   orange gradient, printed with !important, so these declarations carry it too.) */
body.atp-puq-skin .puq-btn:hover, body.atp-puq-skin .puq-btn:focus, body.atp-puq-skin .puq-btn:active,
body.atp-puq-skin .puq-btn-sm:hover, body.atp-puq-skin .puq-btn-sm:focus, body.atp-puq-skin .puq-btn-sm:active,
body.atp-puq-skin .puq-btn-secondary:hover, body.atp-puq-skin .puq-btn-secondary:focus, body.atp-puq-skin .puq-btn-secondary:active,
body.atp-puq-skin .puq-btn-outline:hover, body.atp-puq-skin .puq-btn-outline:focus, body.atp-puq-skin .puq-btn-outline:active,
body.atp-puq-skin .puq-btn-primary:hover, body.atp-puq-skin .puq-btn-primary:focus, body.atp-puq-skin .puq-btn-primary:active,
body.atp-puq-skin .puq-nav-panel button:hover, body.atp-puq-skin .puq-nav-panel button:focus,
body.atp-puq-skin .puq-draft-bar button:hover, body.atp-puq-skin .puq-draft-bar button:focus,
body.atp-puq-skin .puq-progress-row button:hover, body.atp-puq-skin .puq-progress-row button:focus,
body.atp-puq-skin .puq-nav-back:hover, body.atp-puq-skin .puq-nav-back:focus,
body.atp-puq-skin .puq-nav-revise:hover, body.atp-puq-skin .puq-nav-revise:focus,
body.atp-puq-skin .puq-nav-confirm:hover, body.atp-puq-skin .puq-nav-confirm:focus {
  background-color: #BF9B30 !important;
  background-image: none !important;
  border-color: #BF9B30 !important;
  color: #0C2A24 !important;
  box-shadow: 0 6px 16px rgba(12, 42, 36, .18);
}
/* A destructive button stays red: the colour is the warning. */
body.atp-puq-skin .puq-btn-danger:hover, body.atp-puq-skin .puq-btn-danger:focus, body.atp-puq-skin .puq-btn-danger:active {
  background-color: #991B1B !important;
  background-image: none !important;
  border-color: #991B1B !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(153, 27, 27, .22);
}

/* The About page ends on a full-width band. Its container's bottom padding would leave a white strip
   between that band and the footer, so it is removed (with or without the brand layer). */
body.atp-puq .puq-landing-container { padding-bottom: 0; }

/* Tick boxes and radio buttons: Themify draws its own. A ticked box fills with the brand green. */
body.atp-puq-skin :is(.puq-wrap, .puq-landing-container) input[type="checkbox"]:checked { background: #123B33; border-color: #123B33; color: #FFFFFF; }
body.atp-puq-skin :is(.puq-wrap, .puq-landing-container) input[type="radio"]:checked { border-color: #123B33; }
body.atp-puq-skin :is(.puq-wrap, .puq-landing-container) input[type="radio"]:checked::before { background-color: #123B33; }
body.atp-puq-skin :is(.puq-wrap, .puq-landing-container) :is(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid #BF9B30; outline-offset: 2px; }

/* Contact details shown by the theme while the Contact page has no content of its own. */
.atp-puq-contact { font-family: var(--atp-sans); color: var(--atp-ink); }
.atp-puq-contact p { margin: 0 0 18px; font-size: 17px; line-height: 1.65; }
.atp-puq-contact dl { margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: max-content 1fr; gap: 14px 28px; border-top: 1px solid var(--atp-line); padding-top: 24px; }
.atp-puq-contact dt { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--atp-gold-text); padding-top: 4px; }
.atp-puq-contact dd { margin: 0; font-size: 17px; line-height: 1.6; }
.atp-puq-contact dd a { color: var(--atp-green); text-decoration: underline; text-decoration-color: var(--atp-gold); text-underline-offset: 3px; }
@media (max-width: 560px) { .atp-puq-contact dl { grid-template-columns: 1fr; gap: 4px 0; } .atp-puq-contact dd { margin-bottom: 14px; } }