/*
Theme Name: Wavfolio Site
Theme URI: https://wavfolio.com/
Author: Wavfolio
Author URI: https://wavfolio.com/
Description: A lightweight marketing and membership theme designed to visually match the Wavfolio app. Includes PMPro-friendly styles, app-style cards/forms, a responsive header, a fully editable block-editor homepage, and an optional demo homepage reference.
Version: 1.6.3
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: wavfolio-site
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: dark, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments
*/

:root {
  --wf-bg: #070606;
  --wf-bg-2: #120d10;
  --wf-surface: #171214;
  --wf-surface-2: #22191d;
  --wf-panel: rgba(34, 25, 29, 0.94);
  --wf-panel-soft: rgba(24, 18, 20, 0.88);
  --wf-line: #3a3036;
  --wf-line-soft: rgba(225, 177, 110, 0.16);
  --wf-text: #fff7ed;
  --wf-muted: #b9a99f;
  --wf-soft: #f1ded1;
  --wf-gold: #d7a05e;
  --wf-gold-bright: #f1c987;
  --wf-teal: #42d9c8;
  --wf-violet: #b084ff;
  --wf-danger: #ff7b83;
  --wf-success: #7be0b8;
  --wf-radius-sm: 12px;
  --wf-radius: 18px;
  --wf-radius-lg: 28px;
  --wf-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  --wf-content: 1180px;
  --wf-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 0%, rgba(215, 160, 94, 0.19), transparent 30rem),
    radial-gradient(circle at 90% 10%, rgba(66, 217, 200, 0.13), transparent 31rem),
    radial-gradient(circle at 48% 100%, rgba(176, 132, 255, 0.09), transparent 32rem),
    linear-gradient(180deg, var(--wf-bg) 0%, var(--wf-bg-2) 52%, #080607 100%);
  background-attachment: fixed;
  color: var(--wf-text);
  font-family: var(--wf-font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
a { color: var(--wf-teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #83eee2; }
button, input, textarea, select { font: inherit; }
::selection { background: rgba(215, 160, 94, 0.35); color: #fff; }

.wf-site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.wf-wrap { width: min(calc(100% - 40px), var(--wf-content)); margin-inline: auto; }
.wf-main { flex: 1; }

/* Header */
.wf-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(225, 177, 110, 0.12);
  background: rgba(7, 6, 6, 0.79);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.admin-bar .wf-site-header { top: 32px; }
.wf-header-inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.wf-site-brand-wrap { display: flex; align-items: center; flex: 0 0 auto; }
.wf-site-brand, .custom-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--wf-text);
  font-weight: 900;
  text-decoration: none;
  letter-spacing: -0.025em;
}
.wf-site-brand:hover, .custom-logo-link:hover { color: var(--wf-text); }
.wf-site-brand img, .custom-logo {
  display: block;
  width: auto;
  max-width: 152px;
  max-height: 42px;
  object-fit: contain;
}
.wf-brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--wf-gold-bright), var(--wf-gold) 47%, var(--wf-teal));
  color: #090706;
  box-shadow: 0 10px 32px rgba(215, 160, 94, 0.2);
  font-size: 18px;
}
.wf-site-title { font-size: 20px; }
.wf-site-nav { margin-left: auto; }
.wf-site-nav ul { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
.wf-site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px;
  color: var(--wf-muted);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
}
.wf-site-nav a:hover, .wf-site-nav .current-menu-item > a, .wf-site-nav .current_page_item > a {
  color: var(--wf-text);
  background: rgba(255, 247, 237, 0.07);
}
.wf-header-actions { display: flex; align-items: center; gap: 9px; }
.wf-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 247, 237, 0.1);
  border-radius: 999px;
  background: rgba(255, 247, 237, 0.06);
  color: var(--wf-text);
  cursor: pointer;
}
.wf-nav-toggle span, .wf-nav-toggle::before, .wf-nav-toggle::after {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  border-radius: 99px;
  background: currentColor;
  content: "";
}

/* Buttons */
.wf-button,
.wp-element-button,
button[type="submit"],
input[type="submit"],
.pmpro_btn,
.pmpro_btn-submit,
.pmpro_button,
.pmpro_form .pmpro_btn,
.pmpro_form input[type="submit"] {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 19px;
  border: 1px solid rgba(255, 247, 237, 0.09);
  border-radius: 999px;
  background: rgba(255, 247, 237, 0.075);
  color: var(--wf-text);
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.wf-button:hover,
.wp-element-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.pmpro_btn:hover,
.pmpro_button:hover {
  color: var(--wf-text);
  transform: translateY(-1px);
  background: rgba(215, 160, 94, 0.13);
  border-color: rgba(215, 160, 94, 0.26);
}
.wf-button-primary,
.wp-block-button.is-style-fill .wp-element-button,
.pmpro_btn-submit,
.pmpro_form .pmpro_btn-submit {
  border-color: transparent;
  background: linear-gradient(135deg, var(--wf-gold-bright) 0%, var(--wf-gold) 46%, var(--wf-teal) 100%);
  color: #090706;
  box-shadow: 0 15px 38px rgba(215, 160, 94, 0.16), 0 0 24px rgba(66, 217, 200, 0.06);
}
.wf-button-primary:hover,
.wp-block-button.is-style-fill .wp-element-button:hover,
.pmpro_btn-submit:hover {
  color: #090706;
  background: linear-gradient(135deg, #f5d296 0%, #e5b36e 46%, #6ef0e2 100%);
}
.wf-button-small { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.wf-button-quiet { background: transparent; }


/* Fully editable front page -------------------------------------------------
   The theme does not inject any homepage sections. Everything between the
   header and footer comes from the WordPress page editor. */
.wf-front-page-content {
  min-height: 52vh;
  padding-block: clamp(42px, 6vw, 88px);
}
.wf-front-page-content:empty { min-height: 68vh; }
.wf-front-page-content > :where(*:not(.alignfull):not(.alignwide)) {
  width: min(calc(100% - 40px), 840px);
  margin-left: auto;
  margin-right: auto;
}
.wf-front-page-content > .alignwide {
  width: min(calc(100% - 40px), var(--wf-content));
  margin-left: auto;
  margin-right: auto;
}
.wf-front-page-content > .alignfull {
  width: 100%;
  max-width: none;
}
.wf-front-page-content > :first-child { margin-top: 0; }
.wf-front-page-content > :last-child { margin-bottom: 0; }
.wf-front-page-content .wp-block-cover.alignfull:first-child,
.wf-front-page-content .wp-block-group.alignfull:first-child {
  margin-top: calc(clamp(42px, 6vw, 88px) * -1);
}
.wf-front-page-content .wp-block-cover.alignfull:last-child,
.wf-front-page-content .wp-block-group.alignfull:last-child {
  margin-bottom: calc(clamp(42px, 6vw, 88px) * -1);
}

/* Front page */
.wf-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(74px, 10vw, 136px) 0 clamp(70px, 9vw, 120px);
}
.wf-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr); gap: clamp(42px, 7vw, 94px); align-items: center; }
.wf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--wf-gold-bright);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wf-kicker::before { width: 28px; height: 2px; background: linear-gradient(90deg, var(--wf-gold), var(--wf-teal)); content: ""; }
.wf-hero h1 {
  max-width: 900px;
  margin: 0 0 22px;
  font-size: clamp(48px, 7.2vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.063em;
  background: linear-gradient(90deg, #fff7ed 0%, #f1c987 45%, #b6fff7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wf-hero-copy > p { max-width: 720px; margin: 0 0 30px; color: var(--wf-muted); font-size: clamp(19px, 2vw, 23px); }
.wf-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.wf-hero-note { margin-top: 15px; color: #8f8179; font-size: 14px; }

.wf-app-preview {
  position: relative;
  min-height: 460px;
  padding: 22px;
  border: 1px solid rgba(225, 177, 110, 0.16);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(34, 25, 29, 0.95), rgba(14, 10, 12, 0.94));
  box-shadow: var(--wf-shadow), inset 0 1px 0 rgba(255, 247, 237, 0.04);
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
}
.wf-preview-top { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.wf-preview-dot { width: 9px; height: 9px; border-radius: 50%; background: #61545a; }
.wf-preview-dot:nth-child(1) { background: var(--wf-gold); }
.wf-preview-dot:nth-child(2) { background: var(--wf-teal); }
.wf-preview-dot:nth-child(3) { background: var(--wf-violet); }
.wf-preview-project { display: grid; grid-template-columns: 118px 1fr; gap: 20px; align-items: center; margin-bottom: 23px; }
.wf-preview-cover { aspect-ratio: 1; border-radius: 18px; background: linear-gradient(145deg, #d7a05e 0%, #7a3e41 47%, #151216 100%); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34); }
.wf-preview-meta small { color: var(--wf-muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.wf-preview-meta h3 { margin: 6px 0 7px; font-size: 31px; line-height: 1; letter-spacing: -0.045em; }
.wf-preview-meta p { margin: 0; color: var(--wf-muted); font-size: 14px; }
.wf-preview-tabs { display: flex; gap: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--wf-line); color: #95877f; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
.wf-preview-tabs strong { color: #fff; border-bottom: 2px solid var(--wf-gold); padding-bottom: 10px; }
.wf-preview-track { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 16px 10px; border-bottom: 1px solid rgba(255, 247, 237, 0.045); }
.wf-preview-track b { font-size: 14px; }
.wf-preview-track span { color: var(--wf-muted); font-size: 12px; }
.wf-preview-wave { height: 68px; margin-top: 18px; border-radius: 14px; background: repeating-linear-gradient(90deg, rgba(215,160,94,.52) 0 2px, transparent 2px 6px), linear-gradient(180deg, rgba(66,217,200,.06), transparent); mask-image: linear-gradient(180deg, transparent 4%, #000 29%, #000 71%, transparent 96%); }

.wf-section { padding: clamp(66px, 9vw, 112px) 0; }
.wf-section-tight { padding-top: 30px; }
.wf-section-head { max-width: 770px; margin-bottom: 38px; }
.wf-section-head .wf-kicker { margin-bottom: 13px; }
.wf-section-head h2 { margin: 0 0 13px; font-size: clamp(37px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.052em; }
.wf-section-head p { margin: 0; color: var(--wf-muted); font-size: 19px; }
.wf-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wf-feature-card,
.wf-panel,
.entry-content > .wp-block-group.has-background,
.wp-block-cover,
.wp-block-media-text,
.pmpro_card,
.pmpro_section,
.pmpro_checkout,
.pmpro_login_wrap,
.pmpro_member_profile_edit_wrap,
.pmpro_account,
.pmpro_content_message {
  border: 1px solid rgba(225, 177, 110, 0.14);
  border-radius: var(--wf-radius);
  background: linear-gradient(180deg, rgba(34, 25, 29, 0.92), rgba(18, 13, 15, 0.9));
  box-shadow: 0 20px 65px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 247, 237, 0.03);
}
.wf-feature-card { min-height: 230px; padding: 28px; }
.wf-feature-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; border-radius: 15px; background: rgba(215, 160, 94, 0.11); color: var(--wf-gold-bright); border: 1px solid rgba(215, 160, 94, 0.2); font-size: 21px; font-weight: 900; }
.wf-feature-card:nth-child(2n) .wf-feature-icon { background: rgba(66, 217, 200, 0.09); color: #9af8ed; border-color: rgba(66, 217, 200, 0.18); }
.wf-feature-card:nth-child(3n) .wf-feature-icon { background: rgba(176, 132, 255, 0.09); color: #d7c0ff; border-color: rgba(176, 132, 255, 0.17); }
.wf-feature-card h3 { margin: 0 0 10px; font-size: 23px; letter-spacing: -0.035em; }
.wf-feature-card p { margin: 0; color: var(--wf-muted); }
.wf-steps { counter-reset: wf-step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.wf-step { position: relative; padding: 27px; border-top: 1px solid var(--wf-line); }
.wf-step::before { counter-increment: wf-step; content: "0" counter(wf-step); display: block; margin-bottom: 22px; color: var(--wf-gold); font-size: 13px; font-weight: 900; letter-spacing: 0.1em; }
.wf-step h3 { margin: 0 0 8px; font-size: 20px; }
.wf-step p { margin: 0; color: var(--wf-muted); font-size: 15px; }
.wf-cta-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; padding: clamp(30px, 5vw, 58px); border-radius: var(--wf-radius-lg); background: linear-gradient(135deg, rgba(215, 160, 94, 0.15), rgba(34,25,29,.96) 44%, rgba(66,217,200,.08)); border: 1px solid rgba(225,177,110,.19); box-shadow: var(--wf-shadow); }
.wf-cta-panel h2 { margin: 0 0 9px; font-size: clamp(34px, 5vw, 59px); line-height: 1; letter-spacing: -0.05em; }
.wf-cta-panel p { margin: 0; color: var(--wf-muted); }

/* Standard content */
.wf-page-hero { padding: clamp(62px, 8vw, 108px) 0 32px; }
.wf-page-hero h1 { max-width: 920px; margin: 0; font-size: clamp(44px, 6.5vw, 82px); line-height: 1; letter-spacing: -0.058em; }
.wf-page-hero p { max-width: 720px; margin: 16px 0 0; color: var(--wf-muted); font-size: 20px; }
.wf-content-area { padding: 35px 0 96px; }
/* Standard pages intentionally hide the automatic WordPress page title hero. */
body.page.wf-hide-page-title-hero .wf-content-area { padding-top: clamp(28px, 4vw, 54px); }
body.page.wf-hide-page-title-hero .entry-content > :first-child { margin-top: 0; }

.wf-content-card { padding: clamp(22px, 4vw, 50px); }
.entry-content { color: var(--wf-soft); }
.entry-content > * { max-width: 840px; margin-left: auto; margin-right: auto; }
.entry-content > .alignwide { max-width: var(--wf-content); }
.entry-content > .alignfull { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.entry-content h2, .entry-content h3, .entry-content h4, .comment-content h2, .comment-content h3 { color: var(--wf-text); line-height: 1.15; letter-spacing: -0.035em; }
.entry-content h2 { margin-top: 2.1em; font-size: clamp(31px, 4vw, 48px); }
.entry-content h3 { margin-top: 1.8em; font-size: 27px; }
.entry-content p, .entry-content li { color: var(--wf-soft); }
.entry-content blockquote { padding: 18px 22px; border-left: 3px solid var(--wf-gold); background: rgba(215,160,94,.06); border-radius: 0 12px 12px 0; }
.entry-content table { width: 100%; border-collapse: collapse; background: rgba(255,247,237,.025); border-radius: 14px; overflow: hidden; }
.entry-content th, .entry-content td { padding: 13px; border: 1px solid var(--wf-line); text-align: left; }
.entry-content th { color: var(--wf-gold-bright); }
hr, .wp-block-separator { border: 0; border-top: 1px solid var(--wf-line); }
pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre { overflow: auto; padding: 18px; border: 1px solid var(--wf-line); border-radius: 14px; background: rgba(0,0,0,.28); }

/* Forms */
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="date"], input[type="tel"], input[type="search"], textarea, select,
.pmpro_form_input, .pmpro_form select, .pmpro_form textarea, .pmpro_checkout-fields input, .pmpro_checkout-fields select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--wf-line);
  border-radius: 12px;
  outline: none;
  background: rgba(8, 6, 7, 0.58);
  color: var(--wf-text);
}
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--wf-gold); box-shadow: 0 0 0 3px rgba(215, 160, 94, 0.14); }
label { color: var(--wf-soft); font-weight: 800; }
fieldset { padding: 20px; border: 1px solid var(--wf-line); border-radius: 14px; }
legend { padding: 0 8px; color: var(--wf-gold-bright); font-weight: 900; }

/* PMPro */
.pmpro, [class*="pmpro_"] { --pmpro--color--accent: var(--wf-gold); }
.pmpro_card, .pmpro_section, .pmpro_checkout, .pmpro_login_wrap, .pmpro_member_profile_edit_wrap, .pmpro_account, .pmpro_content_message { padding: clamp(20px, 4vw, 38px); color: var(--wf-soft); }
.pmpro_card_title, .pmpro_section_title, .pmpro_checkout h2, .pmpro_account h2, .pmpro_login_wrap h2 { color: var(--wf-text); }
.pmpro_form_field { margin-bottom: 18px; }
.pmpro_form_field label { display: block; margin-bottom: 7px; }
.pmpro_form_hint, .pmpro_form_description, .pmpro_level-description, .pmpro_checkout-h3-msg { color: var(--wf-muted); }
.pmpro_level, .pmpro_levels_table, #pmpro_levels_table { overflow: hidden; border: 1px solid var(--wf-line); border-radius: 16px; background: rgba(255,247,237,.025); }
.pmpro_levels_table table, #pmpro_levels_table table { width: 100%; border-collapse: collapse; }
.pmpro_levels_table th, .pmpro_levels_table td, #pmpro_levels_table th, #pmpro_levels_table td { padding: 16px; border-color: var(--wf-line); }
.pmpro_alert, .pmpro_message, .pmpro_content_message { border: 1px solid rgba(66,217,200,.2); background: rgba(66,217,200,.07); color: var(--wf-soft); border-radius: 14px; }
.pmpro_error { border-color: rgba(255,123,131,.25); background: rgba(255,123,131,.07); }

/* Posts, archives, comments */
.wf-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.wf-post-card { overflow: hidden; }
.wf-post-card a { text-decoration: none; }
.wf-post-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.wf-post-body { padding: 23px; }
.wf-post-body h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.12; }
.wf-post-body p { margin: 0; color: var(--wf-muted); }
.wf-post-meta { margin-bottom: 10px; color: var(--wf-gold); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.navigation.pagination { margin-top: 34px; }
.nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.page-numbers { display: grid; place-items: center; min-width: 42px; min-height: 42px; padding: 8px; border-radius: 999px; background: rgba(255,247,237,.06); color: var(--wf-text); text-decoration: none; }
.page-numbers.current { background: var(--wf-gold); color: #090706; }
.comments-area { max-width: 840px; margin: 70px auto 0; }
.comment-list { list-style: none; padding: 0; }
.comment-body { margin-bottom: 16px; padding: 20px; border: 1px solid var(--wf-line); border-radius: 16px; background: var(--wf-panel-soft); }

/* Footer */
.wf-site-footer { margin-top: 50px; padding: 42px 0; border-top: 1px solid rgba(225,177,110,.12); background: rgba(7,6,6,.56); }
.wf-footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.wf-footer-brand { display: flex; flex-direction: column; gap: 4px; }
.wf-footer-brand strong { font-size: 18px; }
.wf-footer-brand span { color: var(--wf-muted); font-size: 14px; }
.wf-footer-menu { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; margin: 0; padding: 0; }
.wf-footer-menu a { color: var(--wf-muted); font-size: 14px; font-weight: 800; text-decoration: none; }
.wf-footer-menu a:hover { color: var(--wf-text); }

/* Utilities */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { top: 8px; left: 8px; z-index: 100000; width: auto; height: auto; padding: 10px 14px; clip: auto; background: #fff; color: #000; }

@media (max-width: 980px) {
  .wf-hero-grid { grid-template-columns: 1fr; }
  .wf-app-preview { max-width: 700px; min-height: 420px; transform: none; }
  .wf-card-grid, .wf-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-site-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 20px;
    right: 20px;
    display: none;
    padding: 12px;
    border: 1px solid var(--wf-line);
    border-radius: 16px;
    background: rgba(18, 13, 16, 0.98);
    box-shadow: var(--wf-shadow);
  }
  .wf-site-nav.is-open { display: block; }
  .wf-site-nav ul { align-items: stretch; flex-direction: column; }
  .wf-site-nav a { width: 100%; }
  .wf-nav-toggle { display: block; margin-left: auto; }
  .wf-header-actions { margin-left: 0; }
}

@media (max-width: 782px) {
  .admin-bar .wf-site-header { top: 46px; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .wf-wrap { width: min(calc(100% - 28px), var(--wf-content)); }
  .wf-header-inner { min-height: 68px; gap: 10px; }
  .wf-site-title { display: none; }
  .wf-header-actions .wf-button-quiet { display: none; }
  .wf-header-actions .wf-button { min-height: 40px; padding: 8px 13px; font-size: 13px; }
  .wf-hero { padding-top: 65px; }
  .wf-hero h1 { font-size: clamp(46px, 15vw, 70px); }
  .wf-app-preview { min-height: 370px; padding: 16px; border-radius: 22px; }
  .wf-preview-project { grid-template-columns: 88px 1fr; gap: 15px; }
  .wf-preview-meta h3 { font-size: 24px; }
  .wf-preview-tabs { overflow: hidden; gap: 10px; font-size: 10px; }
  .wf-card-grid, .wf-post-grid, .wf-steps { grid-template-columns: 1fr; }
  .wf-cta-panel { grid-template-columns: 1fr; }
  .wf-footer-inner { grid-template-columns: 1fr; }
  .wf-footer-menu { justify-content: flex-start; }
  .wf-content-card { padding: 22px 18px; }
}

/* v1.2 page and PMPro refinements --------------------------------------- */
.wf-page-hero {
  padding: clamp(28px, 4vw, 52px) 0 16px;
}
.wf-page-hero h1 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.05em;
}
.wf-page-hero p {
  margin-top: 10px;
  font-size: 18px;
}
.wf-content-area {
  padding-top: 20px;
}

/* PMPro occasionally prints inherited dark text inside its account cards.
   Keep normal account copy readable without affecting form controls. */
.pmpro_account,
.pmpro_account p,
.pmpro_account li,
.pmpro_account td,
.pmpro_account th,
.pmpro_account span,
.pmpro_account strong,
.pmpro_account label,
.pmpro_member_profile_edit_wrap,
.pmpro_member_profile_edit_wrap p,
.pmpro_member_profile_edit_wrap span,
.pmpro_member_profile_edit_wrap strong,
.pmpro_member_profile_edit_wrap label,
#pmpro_account,
#pmpro_account p,
#pmpro_account li,
#pmpro_account td,
#pmpro_account span,
#pmpro_account strong {
  color: var(--wf-soft);
}
.pmpro_account h1,
.pmpro_account h2,
.pmpro_account h3,
.pmpro_account h4,
#pmpro_account h1,
#pmpro_account h2,
#pmpro_account h3,
#pmpro_account h4 {
  color: var(--wf-text);
}
.pmpro_account a,
.pmpro_member_profile_edit_wrap a,
#pmpro_account a {
  color: var(--wf-teal);
}
.pmpro_account input,
.pmpro_account textarea,
.pmpro_account select,
.pmpro_member_profile_edit_wrap input,
.pmpro_member_profile_edit_wrap textarea,
.pmpro_member_profile_edit_wrap select {
  color: var(--wf-text);
}

/* The demo-home page intentionally retains the v1.0 marketing layout. */
.page-template-demo-home .wf-site-footer {
  margin-top: 0;
}

@media (max-width: 700px) {
  .wf-page-hero { padding-top: 24px; }
  .wf-page-hero h1 { font-size: clamp(34px, 11vw, 52px); }
  .wf-content-area { padding-top: 14px; }
}

/* v1.3 PMPro account contrast fix --------------------------------------- */
/* PMPro may apply its own dark colors to nested profile/account headings.
   Force readable account copy while leaving buttons and form fields alone. */
.pmpro_account :where(p, span, strong, em, small, li, dt, dd, td, th, label, h1, h2, h3, h4, h5, h6),
#pmpro_account :where(p, span, strong, em, small, li, dt, dd, td, th, label, h1, h2, h3, h4, h5, h6),
.pmpro_member_profile_edit_wrap :where(p, span, strong, em, small, li, dt, dd, td, th, label, h1, h2, h3, h4, h5, h6),
.pmpro_account .pmpro_card_content,
.pmpro_account .pmpro_card_content *,
#pmpro_account .pmpro_card_content,
#pmpro_account .pmpro_card_content * {
  color: var(--wf-soft) !important;
  -webkit-text-fill-color: var(--wf-soft) !important;
  opacity: 1;
}

.pmpro_account :where(h1, h2, h3, h4, h5, h6),
#pmpro_account :where(h1, h2, h3, h4, h5, h6),
.pmpro_member_profile_edit_wrap :where(h1, h2, h3, h4, h5, h6) {
  color: var(--wf-text) !important;
  -webkit-text-fill-color: var(--wf-text) !important;
}

.pmpro_account a,
.pmpro_account a *,
#pmpro_account a,
#pmpro_account a *,
.pmpro_member_profile_edit_wrap a,
.pmpro_member_profile_edit_wrap a * {
  color: var(--wf-teal) !important;
  -webkit-text-fill-color: var(--wf-teal) !important;
}

/* Restore intended button text after the broad PMPro account correction. */
.pmpro_account :where(.pmpro_btn, .pmpro_btn-submit, .pmpro_button, button, input[type="submit"]),
#pmpro_account :where(.pmpro_btn, .pmpro_btn-submit, .pmpro_button, button, input[type="submit"]) {
  -webkit-text-fill-color: currentColor !important;
}

/* v1.4 targeted PMPro profile-card contrast fix ------------------------- */
/*
 * PMPro gives the profile welcome heading its own dark heading color.
 * Target the actual account-profile block directly so the welcome/email
 * text remains readable on Wavfolio's dark card background.
 */
#pmpro_account-profile,
#pmpro_account-profile .pmpro_card,
#pmpro_account-profile .pmpro_card_content,
.pmpro_account-profile,
.pmpro_account-profile .pmpro_card,
.pmpro_account-profile .pmpro_card_content {
  color: #fff7ed !important;
  -webkit-text-fill-color: #fff7ed !important;
}

#pmpro_account-profile :where(h1, h2, h3, h4, h5, h6, p, span, strong, em, small, div, li, dt, dd),
.pmpro_account-profile :where(h1, h2, h3, h4, h5, h6, p, span, strong, em, small, div, li, dt, dd),
#pmpro_account-profile .pmpro_card_content *,
.pmpro_account-profile .pmpro_card_content * {
  color: #fff7ed !important;
  -webkit-text-fill-color: #fff7ed !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Explicitly cover PMPro's welcome/display-name elements and heading IDs. */
#pmpro_account-profile h2,
#pmpro_account-profile h3,
#pmpro_account-profile .pmpro_member_display_name,
#pmpro_account-profile .pmpro_account-profile-name,
#pmpro_account-profile [class*="display_name"],
#pmpro_account-profile [class*="profile-name"],
.pmpro_account-profile h2,
.pmpro_account-profile h3,
.pmpro_account-profile .pmpro_member_display_name,
.pmpro_account-profile .pmpro_account-profile-name {
  color: #fffaf3 !important;
  -webkit-text-fill-color: #fffaf3 !important;
  opacity: 1 !important;
}

/* Keep profile action links in Wavfolio teal. */
#pmpro_account-profile a,
#pmpro_account-profile a *,
.pmpro_account-profile a,
.pmpro_account-profile a * {
  color: var(--wf-teal) !important;
  -webkit-text-fill-color: var(--wf-teal) !important;
}

/* Do not force light text into form fields or buttons. */
#pmpro_account-profile :where(input, textarea, select, option, button),
.pmpro_account-profile :where(input, textarea, select, option, button) {
  -webkit-text-fill-color: currentColor !important;
}

/* v1.5 comprehensive PMPro account-card contrast fix -------------------- */
/*
 * PMPro uses separate markup for Profile, Memberships, Orders, and other
 * account sections. Normalize text inside all account cards so headings
 * such as "Free" and "Pro" remain readable on the dark Wavfolio surface.
 */
#pmpro_account-membership,
#pmpro_account-memberships,
.pmpro_account-membership,
.pmpro_account-memberships,
[id^="pmpro_account-"],
[class*="pmpro_account-"] {
  color: #fff7ed !important;
  -webkit-text-fill-color: #fff7ed !important;
}

#pmpro_account-membership :where(h1,h2,h3,h4,h5,h6,p,span,strong,em,small,div,li,dt,dd,td,th),
#pmpro_account-memberships :where(h1,h2,h3,h4,h5,h6,p,span,strong,em,small,div,li,dt,dd,td,th),
.pmpro_account-membership :where(h1,h2,h3,h4,h5,h6,p,span,strong,em,small,div,li,dt,dd,td,th),
.pmpro_account-memberships :where(h1,h2,h3,h4,h5,h6,p,span,strong,em,small,div,li,dt,dd,td,th),
[id^="pmpro_account-"] .pmpro_card_content :where(h1,h2,h3,h4,h5,h6,p,span,strong,em,small,div,li,dt,dd,td,th),
[class*="pmpro_account-"] .pmpro_card_content :where(h1,h2,h3,h4,h5,h6,p,span,strong,em,small,div,li,dt,dd,td,th) {
  color: #fff7ed !important;
  -webkit-text-fill-color: #fff7ed !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Known PMPro level-name/title hooks across plugin versions. */
.pmpro_level_name,
.pmpro_account-membership-levelname,
.pmpro_account_membership_level_name,
.pmpro_card_title,
.pmpro_card_title *,
.pmpro_section_title,
.pmpro_section_title *,
[id^="pmpro_account-"] [class*="level_name"],
[id^="pmpro_account-"] [class*="level-name"],
[id^="pmpro_account-"] [class*="membership-name"],
[id^="pmpro_account-"] [class*="membership_name"] {
  color: #fffaf3 !important;
  -webkit-text-fill-color: #fffaf3 !important;
  opacity: 1 !important;
}

/* Preserve Wavfolio teal for account action links. */
#pmpro_account-membership a,
#pmpro_account-membership a *,
#pmpro_account-memberships a,
#pmpro_account-memberships a *,
.pmpro_account-membership a,
.pmpro_account-membership a *,
.pmpro_account-memberships a,
.pmpro_account-memberships a *,
[id^="pmpro_account-"] a,
[id^="pmpro_account-"] a * {
  color: var(--wf-teal) !important;
  -webkit-text-fill-color: var(--wf-teal) !important;
}

/* Keep native field/button text behavior. */
[id^="pmpro_account-"] :where(input,textarea,select,option,button),
[class*="pmpro_account-"] :where(input,textarea,select,option,button) {
  -webkit-text-fill-color: currentColor !important;
}

/* v1.6 PMPro order-history dark table fix ------------------------------- */
/*
 * PMPro's order-history table can retain a white table background even when
 * the surrounding account card is dark. Force the table surface and cells
 * to use the Wavfolio dark palette, then restore readable text colors.
 */
#pmpro_account-orders table,
#pmpro_account-orders thead,
#pmpro_account-orders tbody,
#pmpro_account-orders tr,
#pmpro_account-orders th,
#pmpro_account-orders td,
.pmpro_account-orders table,
.pmpro_account-orders thead,
.pmpro_account-orders tbody,
.pmpro_account-orders tr,
.pmpro_account-orders th,
.pmpro_account-orders td,
.pmpro_table,
.pmpro_table thead,
.pmpro_table tbody,
.pmpro_table tr,
.pmpro_table th,
.pmpro_table td {
  background: #211a1d !important;
  background-color: #211a1d !important;
  color: #fff7ed !important;
  -webkit-text-fill-color: #fff7ed !important;
  border-color: rgba(255,255,255,0.13) !important;
}

#pmpro_account-orders table,
.pmpro_account-orders table,
.pmpro_table {
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

#pmpro_account-orders th,
.pmpro_account-orders th,
.pmpro_table th {
  background: #2b2226 !important;
  background-color: #2b2226 !important;
  color: #fffaf3 !important;
  -webkit-text-fill-color: #fffaf3 !important;
}

#pmpro_account-orders td,
.pmpro_account-orders td,
.pmpro_table td {
  background: #211a1d !important;
  background-color: #211a1d !important;
  color: #f8efe7 !important;
  -webkit-text-fill-color: #f8efe7 !important;
}

#pmpro_account-orders a,
#pmpro_account-orders a *,
.pmpro_account-orders a,
.pmpro_account-orders a *,
.pmpro_table a,
.pmpro_table a * {
  color: var(--wf-teal) !important;
  -webkit-text-fill-color: var(--wf-teal) !important;
}

/* Paid/status badges should stay readable against the dark row. */
#pmpro_account-orders :where(.pmpro_tag, .pmpro_badge, [class*="status"], [class*="paid"]),
.pmpro_account-orders :where(.pmpro_tag, .pmpro_badge, [class*="status"], [class*="paid"]),
.pmpro_table :where(.pmpro_tag, .pmpro_badge, [class*="status"], [class*="paid"]) {
  color: #dff8ea !important;
  -webkit-text-fill-color: #dff8ea !important;
}