:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --primary: #01bb38;
  --primary-dark: #019330;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

/* Hide leftover WordPress interactive shells (no JS/theme now). */
.ct-drawer-canvas,
#search-modal,
#offcanvas,
.ct-header-search,
.ct-header-trigger,
.ct-share-box,
.skip-link {
  display: none !important;
}

a {
  color: #166534;
}

img {
  max-width: 100%;
  height: auto;
}

#main-container,
.page-shell {
  max-width: 1100px;
  margin: 0 auto;
}

.site-header-disclaimer {
  background: #fef3c7;
  color: #78350f;
  text-align: center;
  padding: 8px 14px;
  font-size: 12px;
  line-height: 1.45;
  border-bottom: 1px solid #fde68a;
  position: relative;
  z-index: 9998;
}

.site-header-disclaimer strong {
  font-weight: 600;
}

header#header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.ct-container {
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: 0 16px;
}

[data-row="middle"] .ct-container {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Only desktop header layout is used in static mode. */
header#header [data-device="mobile"] {
  display: none !important;
}

header#header [data-device="desktop"] [data-column-set="2"] {
  width: 100%;
}

header#header [data-device="desktop"] [data-column="start"],
header#header [data-device="desktop"] [data-column="end"] {
  display: flex;
  align-items: center;
}

.site-logo-container {
  display: inline-flex;
  align-items: center;
}

.menu {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu .ct-menu-link {
  text-decoration: none;
  color: #1f2937;
  font-weight: 500;
}

.menu .ct-menu-link:hover {
  color: var(--primary-dark);
}

.site-main .ct-container {
  background: var(--surface);
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 16px 28px;
}

h1,
h2,
h3 {
  line-height: 1.3;
  color: #0f172a;
}

.cta_btn,
.xp-btn,
.btn--green {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff !important;
  background: var(--primary);
  border: 0;
}

.entry-content .cta_btn {
  display: table;
  margin: 12px auto;
}

.xpanel {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin: 22px 0;
  background: #fcfcfc;
  text-align: center;
}

.xp-title {
  font-size: 22px;
  font-weight: 700;
  margin-top: 8px;
}

.xpanel img {
  display: block;
  margin: 10px auto;
}

.xp-btn {
  margin: 10px auto 0;
}

.xpanel .xp-label,
.xpanel .xp-subtitle,
.xpanel .xp-text,
.xpanel .xp-title {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

.xpanel .xp-text {
  max-width: 760px;
}

/* Local fallback for removed WP rating plugin styles. */
.kksr-stars {
  position: relative;
  display: inline-block;
  line-height: 1;
}

.kksr-stars-inactive,
.kksr-stars-active {
  display: flex;
  white-space: nowrap;
}

.kksr-stars-active {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

.kksr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kksr-icon::before {
  content: "★";
  font-size: 24px;
}

.kksr-stars-inactive .kksr-icon::before {
  color: #d1d5db;
}

.kksr-stars-active .kksr-icon::before {
  color: #f59e0b;
}

#sticky-container {
  position: static;
  bottom: auto;
  z-index: auto;
  margin-top: 18px;
}

.sticky-content {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  color: #fff;
}

footer#footer,
.site-footer {
  margin-top: 28px;
}

.site-footer {
  background: #f5f7fa;
  padding: 28px 20px 32px;
  border-top: 1px solid var(--line);
}

.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
  text-align: center;
}

.site-footer-title {
  margin: 0 0 12px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.site-footer p {
  margin: 0 0 6px;
}

.site-footer a {
  color: #166534;
}

/* Stack legal footer under centered cards on hypertea pages. */
body:has(> .page-shell) {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

body:has(> .page-shell) > .site-footer {
  width: 100%;
  max-width: 800px;
  margin-top: 0;
  box-sizing: border-box;
}

body:has(> .ct-container) {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

body:has(> .ct-container) > .site-footer {
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  header#header [data-device="desktop"] [data-row="middle"] .ct-container {
    min-height: 58px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .menu {
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: flex-end;
  }

  .sticky-content {
    flex-direction: column;
    align-items: flex-start;
  }
}