/*
Theme Name: TestGen
Theme URI: https://testgen.app
Author: Dexaloop
Description: The testgen.app website: a calm, Apple-style product page in the app's colours, and pages written in the block editor. Made like the Tuitbook theme.
Version: 2.1.1
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: testgen
*/

/* What the block settings can't say. Colours are the app's own
   (lib/core/theme/theme.dart); the type is the reader's system font, which
   is Apple's SF on iPhone and Mac. Nothing here loads from another site. */

:root {
  --tg-ink: #0f172a;
  --tg-grey: #475569;
  --tg-muted: #64748b;
  --tg-line: #e2e8f0;
  --tg-indigo: #4f46e5;
  --tg-indigo-dark: #3730a3;
  --tg-soft: #eef2ff;
  --tg-paper: #f6f7f9;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2 { letter-spacing: -0.025em; }
h3 { letter-spacing: -0.012em; }
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* Header: a frosted bar that stays on top while the page scrolls under it. */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }
.tg-header {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}
.tg-brand { gap: 10px; }
.tg-brand p { margin: 0; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.tg-brand p a { color: var(--tg-ink); text-decoration: none; }
.tg-header .wp-block-navigation { gap: 22px; font-size: 16px; }
.tg-header .wp-block-navigation a { color: var(--tg-ink); font-weight: 500; text-decoration: none; }
.tg-header .wp-block-navigation a:hover { color: var(--tg-indigo); }
.tg-header .tg-nav-cta a {
  background: var(--tg-ink);
  color: #fff !important;
  padding: 7px 16px;
  border-radius: 999px;
  font-weight: 600;
}
.tg-header .tg-nav-cta a:hover { background: var(--tg-indigo); }
@media (max-width: 600px) {
  .tg-header .wp-block-navigation { gap: 14px; font-size: 15px; }
  .tg-header .tg-nav-pricing { display: none; }
}

/* Sections */
.tg-section { padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(64px, 9vw, 112px); }
.tg-tight-top { padding-top: 0; }
.tg-eyebrow {
  color: var(--tg-indigo);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 10px !important;
}
.tg-lede {
  color: var(--tg-grey);
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  max-width: 640px;
}
.tg-center { text-align: center; margin-left: auto !important; margin-right: auto !important; }
.tg-muted { color: var(--tg-muted); font-size: 15px; }

/* Hero */
.tg-hero {
  background:
    radial-gradient(60% 55% at 50% 0%, #e0e7ff 0%, rgba(238, 242, 255, 0.6) 35%, rgba(255, 255, 255, 0) 70%),
    #fff;
  overflow: hidden;
}
.tg-hero h1 {
  font-size: clamp(42px, 7vw, 76px);
  line-height: 1.04;
  font-weight: 700;
  margin-bottom: 0.3em;
}
.tg-badge { margin-top: 28px !important; }
.tg-badge img { height: 54px; width: auto; display: inline-block; transition: transform 120ms ease-out; }
.tg-badge a:active img { transform: scale(0.97); }
.wp-element-button { transition: transform 120ms ease-out, background-color 160ms ease; }
.wp-element-button:active { transform: scale(0.97); }

/* A phone: the app's screen in a dark bezel. */
.tg-device img {
  border: 9px solid #0f172a;
  border-radius: 46px;
  background: #fff;
  box-shadow: 0 40px 70px -28px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(15, 23, 42, 0.08);
}
/* A printed sheet */
.tg-sheet img {
  border-radius: 4px;
  box-shadow: 0 30px 60px -24px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.06);
}

/* Hero stage: the printed paper with the phone in front of it. */
.tg-stage { display: flex; justify-content: center; align-items: flex-end; margin-top: 56px !important; }
.tg-stage figure { margin: 0 !important; }
.tg-stage .tg-sheet img { width: 430px; transform: rotate(-3deg); }
.tg-stage .tg-device img { width: 270px; }
.tg-stage .tg-device { margin-left: -110px !important; margin-bottom: -36px !important; position: relative; z-index: 2; }

/* Feature rows */
.tg-row { gap: clamp(32px, 6vw, 88px) !important; margin-top: clamp(56px, 8vw, 104px) !important; }
.tg-row:first-child { margin-top: 0 !important; }
.tg-row h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; margin-top: 0; }
.tg-row .tg-device img { width: 290px; }
.tg-media { display: flex; justify-content: center; }
.tg-papers { display: flex; justify-content: center; align-items: flex-start; }
.tg-papers figure { margin: 0 !important; }
.tg-papers .tg-sheet img { width: 330px; }
.tg-papers .tg-sheet:first-child img { transform: rotate(-4deg); }
.tg-papers .tg-sheet:last-child { margin-left: -200px !important; margin-top: 48px !important; }
.tg-papers .tg-sheet:last-child img { transform: rotate(3deg); }

.tg-ticks { list-style: none; padding-left: 0 !important; margin-top: 20px; }
.tg-ticks li { position: relative; padding-left: 32px; margin: 10px 0; color: var(--tg-ink); }
.tg-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Boards strip */
.tg-strip-wrap { padding-top: 32px; padding-bottom: 0; }
.tg-strip { color: var(--tg-muted); font-size: 16px; letter-spacing: 0.01em; }
.tg-strip strong { color: var(--tg-ink); font-weight: 600; }

/* Steps */
.tg-step { text-align: left; }
.tg-step-num {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tg-indigo);
  color: #fff;
  font-weight: 700;
  margin-bottom: 14px !important;
}
.tg-step h3 { margin: 0 0 6px; }
.tg-step p { color: var(--tg-grey); margin-top: 0; }
.tg-step .tg-step-num { color: #fff; }

/* Cards */
.tg-card { background: #fff; border: 1px solid var(--tg-line); border-radius: 22px; height: 100%; padding: 32px; box-sizing: border-box; }
.tg-card--accent { border: 2px solid var(--tg-indigo); box-shadow: 0 24px 50px -30px rgba(79, 70, 229, 0.45); }
.tg-card h3 { margin-top: 0; margin-bottom: 4px; }
.tg-price { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 4px 0 2px !important; }
.tg-price-note { color: var(--tg-muted); font-size: 15px; margin-top: 0 !important; }
.tg-card .tg-ticks li { font-size: 17px; }

/* Tables (Pricing) */
.tg-prices table { border-collapse: collapse; width: 100%; font-size: 17px; }
.tg-prices thead { border-bottom: 0 !important; }
.tg-prices th, .tg-prices td {
  border: 0;
  border-bottom: 1px solid var(--tg-line);
  padding: 14px 10px;
  text-align: left;
  vertical-align: top;
}
.tg-prices thead th { border-bottom: 2px solid var(--tg-ink); font-weight: 600; }
.tg-prices td:first-child { white-space: nowrap; font-weight: 600; }

/* FAQ */
.tg-faq .wp-block-details { border-bottom: 1px solid var(--tg-line); padding: 20px 0; margin: 0; }
.tg-faq .wp-block-details:first-of-type { border-top: 1px solid var(--tg-line); }
.tg-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 19px;
  list-style: none;
  position: relative;
  padding-right: 36px;
}
.tg-faq summary::-webkit-details-marker { display: none; }
.tg-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: -2px;
  font-size: 26px;
  font-weight: 400;
  color: var(--tg-muted);
  transition: transform 200ms ease;
}
.tg-faq details[open] summary::after { transform: rotate(45deg); }
.tg-faq details p { color: var(--tg-grey); margin: 12px 0 0; }

/* Closing panel */
.tg-cta { border-radius: 32px; text-align: center; padding: clamp(56px, 7vw, 80px) 32px; }
.tg-cta h2 { color: #fff; font-size: clamp(32px, 4.5vw, 52px); line-height: 1.06; margin-top: 0; }
.tg-cta p { color: #c7d2fe; }

/* Inner pages and legal text */
.tg-page h1.wp-block-post-title { font-size: clamp(36px, 5vw, 52px); line-height: 1.08; margin-bottom: 0.4em; }
.tg-page .wp-block-post-content h2 { font-size: 26px; line-height: 1.25; margin-top: 2em; }
.tg-page .wp-block-post-content h3 { font-size: 19px; margin-top: 1.8em; }
.tg-page .wp-block-post-content .tg-card h3 { font-size: 21px; margin-top: 0; }
.tg-page .wp-block-post-content .tg-card { margin-top: 0; }

/* Footer */
.tg-footer { border-top: 1px solid var(--tg-line); font-size: 15px; color: var(--tg-grey); }
.tg-footer h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tg-muted); margin: 0 0 10px; }
.tg-footer p { margin: 6px 0; }
.tg-footer a { color: var(--tg-ink); text-decoration: none; }
.tg-footer a:hover { color: var(--tg-indigo); }

@media (max-width: 781px) {
  .tg-stage .tg-sheet img { width: 250px; }
  .tg-stage .tg-device img { width: 160px; border-width: 6px; border-radius: 30px; }
  .tg-stage .tg-device { margin-left: -70px !important; margin-bottom: -20px !important; }
  .tg-row .tg-device img { width: 240px; }
  .tg-row .tg-media { order: 2; }
  .tg-papers .tg-sheet img { width: 220px; }
  .tg-papers .tg-sheet:last-child { margin-left: -140px !important; }
  .tg-badge img { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .tg-badge img, .wp-element-button, .tg-faq summary::after { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .tg-header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* SEO pages: comparison tables and the download box inside a page. */
.tg-compare table { min-width: 620px; }
.tg-compare figure, figure.tg-compare { overflow-x: auto; }
.tg-compare td:first-child { white-space: normal; width: 26%; color: var(--tg-ink); }
.tg-compare td { font-size: 16px; }
.tg-inline-cta {
  background: var(--tg-soft);
  border-radius: 22px;
  padding: 28px 32px;
  margin-top: 40px !important;
}
.tg-inline-cta h3 { margin-top: 0 !important; }
.tg-inline-cta p { color: var(--tg-grey); }
.tg-inline-cta .tg-badge { margin-top: 12px !important; }
.tg-page .tg-lede { max-width: var(--wp--style--global--content-size); }