/*
Theme Name: Quality of Life Scale
Theme URI: https://qualityoflifescale.com/
Author: QualityofLifeScale.Com
Description: WordPress conversion of the QualityofLifeScale.Com React assessment, directory, calculators, and research interface. Includes Customizer-controlled ads, affiliate products, footer menus, logo/site icon support, and WordPress-native route pages.
Version: 1.0.7
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: qualityoflifescale
License: GPL-2.0-or-later
*/

html { scroll-behavior: smooth; }
body { margin: 0; }
#qols-root { min-height: 100vh; }
.qols-loading-fallback { max-width: 72rem; margin: 2rem auto; padding: 1rem; font-family: system-ui, sans-serif; color: #57534e; }
.qols-loading-fallback:empty { display: none; }

/* Server-rendered SEO bootstrap. This gives crawlers semantic content before
   the React application mounts. React replaces this markup on startup. */
.qols-seo-bootstrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  text-align: center;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: #1c1917;
}
.qols-seo-hero {
  max-width: 56rem;
  min-height: calc(100vh - 70px);
  margin: 0 auto;
  padding: 3.5rem 0 6rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.qols-seo-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 1.15rem;
  padding: .3rem .7rem;
  border: 1px solid rgba(251,113,133,.35);
  border-radius: 999px;
  background: #fff1f2;
  color: #e11d48;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.qols-seo-hero-actions { margin-top: 1.35rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .85rem; }
.qols-seo-hero-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .75rem 1.5rem; border-radius: 1rem; font-size: .86rem; font-weight: 800; text-decoration: none; }
.qols-seo-hero-primary { background: #1c1917; color: #fff; border: 2px solid #1c1917; box-shadow: 0 4px 10px rgba(28,25,23,.12); }
.qols-seo-hero-secondary { background: #fff; color: #1c1917; border: 2px solid #1c1917; }
.qols-seo-bootstrap h1 {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.qols-seo-bootstrap p {
  max-width: 44rem;
  margin: 1rem auto 0;
  color: #57534e;
  font-size: 1rem;
  line-height: 1.75;
}
a[aria-disabled="true"] { pointer-events: none; opacity: .55; cursor: not-allowed; }


/* WordPress-integrated responsive header */
.qols-site-header { top: 0; }
.qols-site-header--with-product { top: 48px; }
.qols-header-main {
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand actions";
  align-items: center;
  column-gap: 14px;
}
.qols-brand { grid-area: brand; min-width: 0; display: inline-flex; align-items: center; gap: 9px; color: #1c1917; transition: opacity .16s ease; justify-self: start; }
.qols-brand:hover { opacity: .76; }
.qols-brand-mark { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 9999px; background: #e11d48; box-shadow: 0 0 0 4px rgba(225,29,72,.08); }
.qols-brand-logo { display: block; width: auto; max-width: 54px; max-height: 36px; object-fit: contain; }
.qols-brand-domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Newsreader", Georgia, serif; font-weight: 700; font-size: 1.18rem; line-height: 1; letter-spacing: -.025em; }
.qols-header-actions { grid-area: actions; gap: 8px; flex: 0 0 auto; justify-self: end; }
.qols-header-utility { display: none; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 10px; padding: 7px 9px; color: #57534e; font-size: 11px; font-weight: 700; transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
.qols-header-utility:hover, .qols-header-utility.is-active { color: #1c1917; background: #fff; border-color: #e7e5e4; }
.qols-tracker-button { display: none; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid #1c1917; border-radius: 11px; background: #1c1917; color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: transform .15s ease, background-color .15s ease; }
.qols-tracker-button:hover { background: #292524; transform: translateY(-1px); }
.qols-tracker-button.is-active { box-shadow: 0 0 0 3px rgba(225,29,72,.13); }
.qols-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #e7e5e4; border-radius: 11px; background: #fff; color: #44403c; transition: background-color .15s ease, color .15s ease; }
.qols-mobile-toggle:hover { background: #f5f5f4; color: #1c1917; }
.qols-primary-nav { grid-area: nav; display: none; align-items: center; min-width: 0; }
.qols-nav-link { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto; padding: 7px 9px; border: 1px solid transparent; border-radius: 10px; color: #57534e; font-size: 11px; line-height: 1; font-weight: 700; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.qols-nav-link:hover { color: #1c1917; background: rgba(255,255,255,.76); border-color: #e7e5e4; }
.qols-nav-link.is-active { color: #1c1917; background: #fff; border-color: #d6d3d1; box-shadow: 0 1px 2px rgba(28,25,23,.06); }
.qols-nav-long { display: none; }
.qols-nav-short { display: inline; }
.qols-tools-menu { position: relative; margin-left: auto; }
.qols-tools-trigger { min-width: 70px; }
.qols-tools-chevron { color: #a8a29e; transition: transform .15s ease; }
.qols-tools-chevron.is-open { transform: rotate(180deg); }
.qols-tools-dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: min(620px, calc(100vw - 32px)); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #e7e5e4; border-radius: 18px; background: #fff; box-shadow: 0 20px 45px rgba(28,25,23,.14), 0 4px 12px rgba(28,25,23,.06); z-index: 90; text-align: left; }
.qols-tools-column { padding: 12px; min-width: 0; }
.qols-tools-column + .qols-tools-column { border-left: 1px solid #f5f5f4; }
.qols-tools-heading { padding: 3px 7px 8px; color: #a8a29e; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.qols-tools-item { width: 100%; display: flex; align-items: flex-start; gap: 9px; padding: 8px; border-radius: 11px; color: #44403c; text-align: left; transition: background-color .14s ease, color .14s ease; }
.qols-tools-item:hover { background: #fafaf9; color: #1c1917; }
.qols-tools-item > svg { flex: 0 0 auto; margin-top: 1px; }
.qols-tools-item span { display: block; min-width: 0; }
.qols-tools-item strong { display: block; font-size: 11px; line-height: 1.25; font-weight: 750; }
.qols-tools-item small { display: block; margin-top: 2px; color: #a8a29e; font-size: 9.5px; line-height: 1.3; font-weight: 500; }
.qols-tools-footer { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; border-top: 1px solid #f5f5f4; padding: 8px 12px; background: #fafaf9; }
.qols-tools-footer button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 8px; color: #78716c; font-size: 10px; font-weight: 700; }
.qols-tools-footer button:hover { color: #1c1917; background: #fff; }
.qols-mobile-drawer { border-top: 1px solid #e7e5e4; border-bottom: 1px solid #e7e5e4; background: #fff; max-height: calc(100vh - 62px); overflow-y: auto; }
.qols-mobile-nav { max-width: 42rem; margin: 0 auto; padding: 12px 16px 18px; }
.qols-mobile-section { padding: 8px 0 10px; border-bottom: 1px solid #f5f5f4; }
.qols-mobile-section--compact { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; }
.qols-mobile-heading { grid-column: 1 / -1; display: block; padding: 4px 8px 6px; color: #a8a29e; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.qols-mobile-section button { width: 100%; display: block; padding: 8px; border-radius: 9px; color: #44403c; text-align: left; font-size: 12px; font-weight: 650; }
.qols-mobile-section button:hover { background: #fafaf9; color: #1c1917; }
.qols-mobile-tracker { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; padding: 10px 12px; border-radius: 11px; background: #1c1917; color: #fff; font-size: 11px; font-weight: 750; }

/* Prevent WordPress's logged-in admin bar from covering either sticky bar. */
body.admin-bar .qols-top-product-ad { top: 32px; }
body.admin-bar .qols-site-header { top: 32px; }
body.admin-bar .qols-site-header--with-product { top: 80px; }

@media (min-width: 640px) {
  .qols-tracker-button { display: inline-flex; }
  .qols-brand-logo { max-width: 72px; }
}

/* Tablet: a calm two-row header with compact navigation instead of a crowded desktop row. */
@media (min-width: 768px) {
  .qols-header-main {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "nav nav";
    row-gap: 0;
    padding-top: 2px;
  }
  .qols-brand-domain { font-size: 1.28rem; }
  .qols-header-utility { display: inline-flex; }
  .qols-mobile-toggle { display: none; }
  .qols-primary-nav {
    display: flex;
    gap: 4px;
    min-height: 46px;
    margin-top: 2px;
    border-top: 1px solid rgba(231,229,228,.9);
  }
  .qols-mobile-drawer { display: none; }
}

/* Desktop: return to the original single-row wordmark + nav + tracker composition. */
@media (min-width: 1180px) {
  .qols-header-main {
    min-height: 68px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand nav actions";
    column-gap: 20px;
    padding-top: 0;
  }
  .qols-primary-nav {
    justify-content: flex-end;
    gap: 4px;
    min-height: auto;
    margin-top: 0;
    border-top: 0;
  }
  .qols-tools-menu { margin-left: 0; }
  .qols-nav-link { padding: 8px 9px; font-size: 11.5px; }
  .qols-nav-long { display: inline; }
  .qols-nav-short { display: none; }
}

@media (min-width: 1320px) {
  .qols-primary-nav { gap: 6px; }
  .qols-nav-link { padding-left: 10px; padding-right: 10px; font-size: 12px; }
}

@media (max-width: 782px) {
  body.admin-bar .qols-top-product-ad { top: 46px; }
  body.admin-bar .qols-site-header { top: 46px; }
  body.admin-bar .qols-site-header--with-product { top: 94px; }
}
@media (max-width: 767px) {
  .qols-tools-dropdown { grid-template-columns: 1fr; width: calc(100vw - 24px); }
  .qols-tools-column + .qols-tools-column { border-left: 0; border-top: 1px solid #f5f5f4; }
}
@media (max-width: 480px) {
  .qols-brand-domain { font-size: 1.05rem; }
  .qols-brand-logo { max-width: 44px; max-height: 32px; }
  .qols-header-main { column-gap: 10px; }
}

/* Print the clinical report itself, not the entire interactive site behind it. */
@media print {
  @page { margin: 14mm; }
  body * { visibility: hidden !important; }
  .qols-report-modal, .qols-report-modal * { visibility: visible !important; }
  .qols-report-modal { position: static !important; inset: auto !important; display: block !important; padding: 0 !important; background: #fff !important; }
  .qols-report-modal > div { width: 100% !important; max-width: none !important; max-height: none !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
  .qols-report-modal .no-print { display: none !important; }
  .qols-report-modal .printable-document { color: #1c1917 !important; }
}

/* First-paint shell: visually mirrors the React header while browser modules load.
   This is normal user-visible HTML, not crawler-only content. */
.qols-seo-static-header {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid #e7e5e4;
  background: rgba(255,255,255,.96);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.qols-seo-static-header-inner {
  max-width: 80rem;
  min-height: 68px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.qols-seo-static-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: #1c1917;
  text-decoration: none;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.28rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.qols-seo-static-mark {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 999px;
  background: #e11d48;
  box-shadow: 0 0 0 4px rgba(225,29,72,.08);
}
.qols-seo-static-logo { display: block; width: auto; max-width: 60px; max-height: 36px; object-fit: contain; }
.qols-seo-static-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.qols-seo-static-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: .45rem .65rem;
  border: 1px solid transparent;
  border-radius: .65rem;
  color: #57534e;
  text-decoration: none;
  font-size: .72rem;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}
.qols-seo-static-nav a:hover { background: #fafaf9; border-color: #e7e5e4; color: #1c1917; }
.qols-seo-static-nav .qols-seo-static-cta { margin-left: .25rem; padding-inline: .8rem; background: #1c1917; color: #fff; }
.qols-seo-static-nav .qols-seo-static-cta:hover { background: #292524; border-color: #292524; color: #fff; }
@media (max-width: 900px) {
  .qols-seo-static-nav a:nth-child(2),
  .qols-seo-static-nav a:nth-child(3),
  .qols-seo-static-nav a:nth-child(4) { display: none; }
}
@media (max-width: 640px) {
  .qols-seo-static-header-inner { min-height: 62px; }
  .qols-seo-static-brand { font-size: 1.06rem; }
  .qols-seo-static-logo { max-width: 44px; max-height: 30px; }
  .qols-seo-static-nav a:not(.qols-seo-static-cta) { display: none; }
  .qols-seo-static-nav .qols-seo-static-cta { font-size: .68rem; padding-inline: .65rem; }
  .qols-seo-hero { min-height: calc(100vh - 62px); padding: 2.5rem 0 5rem; }
}

/* Crawlable first-response content. Kept visually consistent with the React UI
   so no-JS visitors and brief pre-hydration states remain usable. */
.qols-seo-eyebrow {
  margin: 0 0 .65rem !important;
  color: #78716c !important;
  font-size: .72rem !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.qols-seo-intro { margin-top: 1rem !important; }
.qols-seo-section {
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid #e7e5e4;
  text-align: left;
}
.qols-seo-section h2 {
  margin: 0 0 1rem;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.45rem;
  line-height: 1.25;
  color: #292524;
}
.qols-seo-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.qols-seo-link-grid a {
  display: block;
  padding: .72rem .8rem;
  border: 1px solid #e7e5e4;
  border-radius: .8rem;
  background: #fff;
  color: #44403c;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}
.qols-seo-link-grid a:hover { border-color: #d6d3d1; color: #1c1917; }
.qols-seo-article { max-width: 48rem; padding-top: 3rem; text-align: left; }
.qols-seo-article h1 { text-align: left; }
.qols-seo-meta { margin: .8rem 0 1.5rem !important; color: #78716c !important; font-size: .84rem !important; }
.qols-seo-body { color: #44403c; font-size: 1rem; line-height: 1.8; }
.qols-seo-body h2, .qols-seo-body h3 { font-family: "Newsreader", Georgia, serif; color: #292524; line-height: 1.25; }
.qols-seo-body a { color: #be123c; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
  .qols-seo-bootstrap { padding-top: 0; }
  .qols-seo-link-grid { grid-template-columns: 1fr; }
}
.qols-seo-subtitle { margin: 0 0 .75rem !important; color: #57534e !important; font-size: 1.05rem !important; line-height: 1.7 !important; }
.qols-seo-bullets { margin: 0 0 1.5rem; padding-left: 1.25rem; color: #44403c; line-height: 1.75; }
.qols-seo-bullets li + li { margin-top: .45rem; }
.qols-seo-editorial .qols-seo-body p { margin: 0 0 1.1rem; }
.qols-seo-faqs { display: grid; gap: .9rem; }
.qols-seo-faqs section { padding: 1rem 1.1rem; border: 1px solid #e7e5e4; border-radius: 1rem; background: #fff; }
.qols-seo-faqs h3 { margin: 0 0 .45rem; font-family: "Newsreader", Georgia, serif; font-size: 1.1rem; color: #292524; }
.qols-seo-faqs p { margin: 0 !important; color: #57534e !important; line-height: 1.7 !important; }