@font-face {
  font-family: "Merriweather";
  src: url("/static/fonts/Merriweather-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Merriweather";
  src: url("/static/fonts/Merriweather-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Merriweather";
  src: url("/static/fonts/Merriweather-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

:root {
  --ink: #1e1e1e;
  --rule: #5a5a5a;

  /* Brand colours sampled from the PrimaryHQ logo. */
  --orange: #cd5828;
  --orange-light: #fbe9e1;
  --teal: #11979f;
  --teal-deep: #05686e;
  --gold: #f8b31a;
  --gold-soft: #fdf0d3;

  --accent: var(--teal-deep);
  --bg: #f7f5f0;
  --card: #ffffff;
  --error: #b3261e;
}

* { box-sizing: border-box; }

/* Always reserve space for the vertical scrollbar, even on pages short
   enough not to need one (e.g. Terms & Privacy) - without this, centred
   content visibly shifts sideways when navigating between a scrollable
   page and a non-scrollable one, since the scrollbar's width otherwise
   comes and goes. */
html { overflow-y: scroll; }

body {
  margin: 0;
  font-family: "Merriweather", Georgia, serif;
  background:
    radial-gradient(ellipse 900px 500px at 12% -5%, var(--gold-soft) 0%, transparent 60%),
    radial-gradient(ellipse 900px 600px at 105% 105%, #e3f2f2 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  background: var(--card);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
}

.secondary-nav {
  background: var(--teal-deep);
}

.secondary-nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.secondary-nav a {
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.secondary-nav a:hover { text-decoration: underline; }

.site-header-row {
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  width: fit-content;
}

.header-icon { height: 60px; width: auto; display: block; }

.header-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.header-brand-name {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--orange);
}

.header-tagline {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--teal-deep);
}

.header-account-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.9rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.header-account-nav a {
  color: var(--teal-deep);
  text-decoration: none;
  font-weight: 700;
}

.header-account-nav a:hover { text-decoration: underline; }

.header-account-signed-in {
  position: relative;
  /* The signed-out state's "Sign Up" pill (with its own padding) makes
     that row taller than this plain-text row, and both are centered
     within the nav's height - so without this nudge, "Manage Plan"/
     "Log Out" sit 6px above where "Log In" visually centers. */
  margin-top: 6px;
}

.header-account-email {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  white-space: nowrap;
  color: var(--rule);
  font-size: 0.85rem;
}

.header-account-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-signup-link {
  background: var(--orange-light);
  color: var(--orange) !important;
  padding: 6px 12px;
  border-radius: 20px;
}

.header-logout-form { margin: 0; }

.header-logout-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--teal-deep);
  cursor: pointer;
}

.header-logout-btn:hover { text-decoration: underline; }

/* ---- Centered header variant (homepage, reading comprehension tool) ----
   A single row, three columns: an empty spacer the same width as the nav
   (so the logo lands truly centered on the page, not just centered in the
   leftover space), the logo in the middle, and the nav pinned to the
   right - both vertically centered against each other. */

.site-header-single-row {
  max-width: 1160px;
  margin: 0 auto;
  padding: 8px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.site-header-single-row .site-header-brand-link {
  grid-column: 2;
  justify-self: center;
}

.site-header-single-row .header-account-nav {
  grid-column: 3;
  justify-self: end;
  /* align-self: start (instead of the container's default centering) so
     this offset is a predictable, direct distance from the top of the
     logo, rather than compounding with the row's own auto-height as the
     margin grows. 83px centers it on the logo's "Resources for Teachers"
     tagline, measured directly from the source image (tagline sits at
     91.0-97.7% of the logo's height - scaled alongside header-icon-full). */
  align-self: start;
  margin-top: 83px;
}

.site-header-brand-link {
  display: block;
  text-decoration: none;
}

.header-icon-full {
  height: 100px;
  width: auto;
  display: block;
}

.flash-messages {
  max-width: 1320px;
  margin: 0 auto 20px;
}

.flash {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  margin: 0 0 10px;
}

.flash-success {
  background: #e2f2f2;
  color: var(--teal-deep);
}

.flash-error {
  background: var(--orange-light);
  color: var(--error);
}

/* Auth / billing cards - shared by accounts/ and billing/ pages */

.auth-wrap {
  max-width: 440px;
  margin: 0 auto;
}

.auth-wrap--wide {
  max-width: 680px;
}

.auth-wrap--legal {
  max-width: 900px;
}

.auth-card {
  background: var(--card);
  border: 1px solid #e2e0d8;
  border-top: 4px solid var(--gold);
  border-radius: 14px;
  padding: 36px 32px;
  box-shadow: 0 10px 30px rgba(120, 90, 40, 0.08);
}

.auth-card h1 {
  font-size: 1.4rem;
  margin: 0 0 8px;
}

.auth-card .subtitle {
  font-size: 0.9rem;
  color: var(--rule);
  margin: 0 0 24px;
}

.about-title {
  text-align: center;
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 22px;
}

.about-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
}

.about-text {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 18px;
  text-align: justify;
}

.about-text:last-of-type { margin-bottom: 24px; }

.about-question {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--teal-deep);
  margin: 22px 0 6px;
}

.about-question:first-of-type { margin-top: 4px; }

.about-signoff {
  margin: 24px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e0d8;
  font-size: 0.9rem;
}

.legal-nav a { font-weight: 700; }
.legal-nav span.legal-nav-current {
  font-weight: 700;
  color: var(--rule);
}

.legal-doc h2 {
  font-size: 1.15rem;
  color: var(--teal-deep);
  margin: 28px 0 10px;
}

.legal-doc h2:first-of-type { margin-top: 0; }

.legal-doc p, .legal-doc li {
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 12px;
}

.legal-doc ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal-doc .indent-1 { margin-left: 24px; }
.legal-doc .indent-2 { margin-left: 48px; }
.legal-doc .clause-num { font-weight: 700; }

.legal-doc dl { margin: 0 0 20px; }
.legal-doc dt {
  font-weight: 700;
  margin-top: 10px;
}
.legal-doc dd {
  margin: 2px 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 0.9rem;
}

.legal-doc table th, .legal-doc table td {
  border: 1px solid #e2e0d8;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.legal-doc table th { background: var(--orange-light); }

.faq-group { margin-bottom: 28px; }

.faq-group h2 {
  font-size: 1.1rem;
  color: var(--teal-deep);
  margin: 0 0 12px;
}

.faq-item {
  border-bottom: 1px solid #e2e0d8;
  padding: 14px 0;
}

.faq-item summary {
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 700;
  color: var(--orange);
  font-size: 1.2rem;
  line-height: 1;
}

.faq-item[open] summary::after { content: "\2212"; }

.faq-item p {
  margin: 12px 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
}

.auth-field { margin-bottom: 18px; }

.auth-field label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.auth-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #d6d3c8;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
}

.auth-field input:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

.field-hint {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--rule);
  font-style: italic;
}

.auth-field--checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.4;
}

.auth-field--checkbox input[type="checkbox"] {
  width: auto;
  margin-top: 3px;
  flex-shrink: 0;
}

.auth-submit-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 8px;
  background: var(--teal-deep);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.auth-submit-btn:hover { opacity: 0.92; }

.auth-links {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.auth-links a { white-space: nowrap; }

.auth-links--center { justify-content: center; }

.auth-links a { color: var(--teal-deep); }

.content {
  flex: 1;
  padding: 32px 20px;
}

.footnote {
  text-align: center;
  font-size: 0.78rem;
  color: var(--rule);
  padding: 16px 20px 24px;
  line-height: 1.5;
}

.footnote p { margin: 0; }

.footnote a {
  color: var(--rule);
  text-decoration: underline;
}

.social-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  text-decoration: none;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  transition: transform 0.15s ease;
}

.social-handle {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--orange);
  transition: color 0.15s ease;
}

.social-link:hover .social-icon {
  transform: scale(1.08);
}

.social-link:hover .social-handle {
  color: var(--teal-deep);
}

/* Testing usage admin page */

.usage-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid #e2e0d8;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 24px;
}

.usage-table th, .usage-table td {
  text-align: left;
  padding: 12px 20px;
  font-size: 0.9375rem;
}

.usage-table th {
  background: var(--teal-deep);
  color: #fff;
  font-weight: 700;
}

.usage-table tbody tr:nth-child(even) {
  background: #fbfaf7;
}

.usage-table td {
  color: var(--rule);
  border-top: 1px solid #e2e0d8;
}

.usage-table td:first-child {
  color: var(--ink);
  font-weight: 700;
}

.social-link svg { width: 34px; height: 34px; }

/* Homepage */

.home-wrap {
  max-width: 1320px;
  margin: 0 auto;
}

.home-intro { margin-bottom: 32px; }

.home-intro h1 {
  font-size: 1.4rem;
  margin: 0 0 10px;
  line-height: 1.3;
}

.home-intro .subtitle {
  font-size: 1rem;
  color: var(--rule);
  line-height: 1.5;
  margin: 0;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.tool-tile {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid #e2e0d8;
  border-top: 4px solid var(--gold);
  border-radius: 14px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 30px rgba(120, 90, 40, 0.06);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.tool-tile:hover {
  box-shadow: 0 14px 34px rgba(120, 90, 40, 0.12);
  border-color: #d6d3c8;
}

.tool-tile h2 {
  font-size: 1.15rem;
  margin: 0;
  color: var(--teal-deep);
}

.tool-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

/* Hidden by default (full title fits on one line next to the badge on wide
   screens); shown on narrower screens so the title's last word drops to
   its own line, leaving the badge room to sit inline with the first word
   instead of wrapping onto its own indented line below the whole title. */
.tool-name-break { display: none; }

@media (max-width: 1400px) {
  .tool-name-break { display: initial; }
}

.tool-tile p {
  font-size: 0.9375rem;
  color: var(--rule);
  line-height: 1.5;
  margin: 0;
}

.tool-tile--soon {
  border-top-color: #d6d3c8;
  background: #fbfaf7;
  box-shadow: none;
  cursor: not-allowed;
}

.tool-tile--soon:hover { box-shadow: none; border-color: #d6d3c8; }

.tool-tile--soon h2, .tool-tile--soon p { color: #9a948a; }

.soon-badge {
  display: inline-block;
  background: #ece8df;
  color: #7a746a;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Generic content section heading, reused on the homepage and tool pages */

.section { margin-top: 56px; }

.section-title {
  font-size: 1.4rem;
  margin: 0 0 6px;
  color: var(--ink);
}

.section-subtitle {
  font-size: 0.92rem;
  color: var(--rule);
  margin: 0 0 24px;
}

/* Why PrimaryHQ */

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.value-point {
  background: var(--card);
  border: 1px solid #e2e0d8;
  border-radius: 14px;
  padding: 22px;
}

.value-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.value-icon svg { width: 20px; height: 20px; }

.value-icon--orange { background: var(--orange-light); color: var(--orange); }
.value-icon--teal { background: #e2f2f2; color: var(--teal-deep); }
.value-icon--gold { background: var(--gold-soft); color: #a8760f; }

.value-point h3 {
  font-size: 1rem;
  margin: 0 0 6px;
  color: var(--ink);
}

.value-point p {
  font-size: 0.9375rem;
  color: var(--rule);
  line-height: 1.5;
  margin: 0;
}

/* How it works */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.step {
  position: relative;
  background: var(--card);
  border: 1px solid #e2e0d8;
  border-radius: 14px;
  padding: 22px;
}

.step-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.step-icon svg { width: 20px; height: 20px; }

.step-icon--orange { background: var(--orange-light); color: var(--orange); }
.step-icon--teal { background: #e2f2f2; color: var(--teal-deep); }
.step-icon--gold { background: var(--gold-soft); color: #a8760f; }

.step-number {
  position: absolute;
  top: 22px;
  left: 46px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step h3 {
  font-size: 1rem;
  margin: 0 0 6px;
  color: var(--ink);
}

.step p {
  font-size: 0.9375rem;
  color: var(--rule);
  line-height: 1.5;
  margin: 0;
}

/* Feedback widget */

.feedback-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
}

.feedback-toggle {
  padding: 12px 18px;
  border: none;
  border-radius: 24px;
  background: var(--teal-deep);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.feedback-toggle:hover { opacity: 0.92; }

.feedback-panel {
  position: absolute;
  right: 0;
  bottom: 56px;
  width: 280px;
  background: var(--card);
  border: 1px solid #e2e0d8;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 16px;
}

.feedback-panel-title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 0.95rem;
}

.feedback-panel textarea {
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border: 1.5px solid #d6d3c8;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  box-sizing: border-box;
}

.feedback-panel textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

.feedback-error {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--orange);
}

.feedback-success {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: var(--teal-deep);
  font-weight: 700;
}

.feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.feedback-cancel {
  padding: 8px 14px;
  border: 1.5px solid #d6d3c8;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.feedback-submit {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: var(--teal-deep);
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.feedback-submit:disabled { opacity: 0.7; cursor: wait; }