/*
Theme Name: DatingHello
Theme URI: https://datinghello.com
Author: DatingHello
Author URI: https://datinghello.com
Description: Premium landing theme for DatingHello — a dating platform built around the idea that every connection starts with one genuine hello. Warm plum-and-gold palette, editorial serif type, and a slow, intentional feel.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: datinghello
*/

:root{
  --plum: #2A1620;
  --wine: #3B1F2C;
  --wine-light: #4A2837;
  --blush: #F0C4BE;
  --gold: #D4AF7A;
  --ivory: #F8F0E9;
  --rose: #C98A96;
  --rose-dim: rgba(201,138,150,0.55);
  --line: rgba(248,240,233,0.12);

  --display: 'Fraunces', serif;
  --body: 'Sora', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--plum);
  color:var(--ivory);
  font-family:var(--body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }

img{ max-width:100%; display:block; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* ---------- wave divider (signature motif) ---------- */
.wave-rule{
  display:block;
  width:64px;
  height:14px;
  margin:22px 0;
}
.wave-rule path{
  fill:none;
  stroke:var(--gold);
  stroke-width:2;
  stroke-linecap:round;
}

/* ---------- nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(42,22,32,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px;
  max-width:1180px; margin:0 auto;
}
.logo{
  font-family:var(--display);
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:-0.01em;
}
.logo span{ color:var(--gold); font-style:italic; font-weight:450; }
.nav-links{ display:flex; gap:40px; font-size:0.92rem; color:var(--rose); list-style:none; }
.nav-links a{ transition:color .25s ease; }
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--ivory); outline:none; }
.nav-cta{
  border:1px solid var(--gold);
  color:var(--gold);
  padding:9px 22px;
  border-radius:999px;
  font-size:0.88rem;
  transition:background .25s ease, color .25s ease;
}
.nav-cta:hover, .nav-cta:focus-visible{ background:var(--gold); color:var(--plum); outline:none; }
.menu-btn{ display:none; background:none; border:none; color:var(--ivory); font-size:1.4rem; cursor:pointer; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:120px 32px 100px;
  text-align:center;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 45% at 22% 15%, rgba(212,175,122,0.14), transparent 60%),
    radial-gradient(ellipse 55% 40% at 82% 30%, rgba(201,138,150,0.16), transparent 60%);
  pointer-events:none;
}
.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--rose);
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:28px;
}
.eyebrow::before{
  content:'';
  width:6px; height:6px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(212,175,122,0.18);
}

.greet-stage{
  position:relative;
  height:1.15em;
  font-family:var(--display);
  font-style:italic;
  font-weight:450;
  color:var(--gold);
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
}
.greet-stage span{
  display:block;
  animation: cycle 8s steps(1) infinite;
}
@keyframes cycle{
  0%, 11%   { transform:translateY(0); }
  12.5%, 23.5% { transform:translateY(-1.15em); }
  25%, 36%  { transform:translateY(-2.3em); }
  37.5%, 48.5%{ transform:translateY(-3.45em); }
  50%, 61%  { transform:translateY(-4.6em); }
  62.5%, 73.5%{ transform:translateY(-5.75em); }
  75%, 86%  { transform:translateY(-6.9em); }
  87.5%, 98%{ transform:translateY(-8.05em); }
  100%      { transform:translateY(0); }
}

h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.6rem, 6vw, 5rem);
  line-height:1.04;
  letter-spacing:-0.02em;
  max-width:900px;
  margin:0 auto;
}
h1 em{
  font-style:italic;
  font-weight:450;
  color:var(--blush);
}

.hero-sub{
  max-width:520px;
  margin:28px auto 0;
  color:var(--rose);
  font-size:1.05rem;
  font-weight:300;
}

.hero-actions{
  display:flex; gap:16px; justify-content:center;
  margin-top:44px;
  flex-wrap:wrap;
}
.btn-primary{
  background:var(--gold);
  color:var(--plum);
  padding:15px 34px;
  border-radius:999px;
  font-size:0.95rem;
  font-weight:500;
  transition:transform .25s ease, box-shadow .25s ease;
  display:inline-block;
  border:none;
  cursor:pointer;
}
.btn-primary:hover, .btn-primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(212,175,122,0.28);
  outline:none;
}
.btn-ghost{
  border:1px solid var(--line);
  color:var(--ivory);
  padding:15px 30px;
  border-radius:999px;
  font-size:0.95rem;
  transition:border-color .25s ease, background .25s ease;
}
.btn-ghost:hover, .btn-ghost:focus-visible{ border-color:var(--rose); background:rgba(248,240,233,0.04); outline:none; }

.hero-proof{
  margin-top:64px;
  display:flex; justify-content:center; gap:56px;
  flex-wrap:wrap;
}
.proof-item{ text-align:center; }
.proof-num{
  font-family:var(--display);
  font-size:2rem;
  font-weight:600;
  color:var(--ivory);
}
.proof-label{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--rose-dim);
  margin-top:4px;
}

/* ---------- section shared ---------- */
section{ padding:110px 32px; position:relative; }
.section-head{ max-width:620px; margin-bottom:64px; }
.section-head .wave-rule{ margin-left:0; }
.section-eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold);
}
h2{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.9rem, 3.4vw, 2.75rem);
  letter-spacing:-0.01em;
  margin-top:14px;
}
.section-head p{
  color:var(--rose);
  margin-top:16px;
  font-size:1rem;
}

/* ---------- features ---------- */
.features{ background:var(--wine); }
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  list-style:none;
}
.feature{
  background:var(--wine);
  padding:40px 34px;
  transition:background .3s ease;
}
.feature:hover{ background:var(--wine-light); }
.feature-mark{
  font-family:var(--display);
  font-style:italic;
  font-size:1.6rem;
  color:var(--gold);
  margin-bottom:22px;
  display:block;
}
.feature h3{
  font-family:var(--display);
  font-weight:600;
  font-size:1.25rem;
  margin-bottom:10px;
}
.feature p{ color:var(--rose); font-size:0.94rem; }

/* ---------- how it works ---------- */
.flow{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center; }
.flow-steps{ display:flex; flex-direction:column; list-style:none; }
.step{
  display:flex; gap:22px;
  padding:26px 0;
  border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step-tag{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--gold);
  padding-top:2px;
  min-width:52px;
}
.step h4{
  font-family:var(--display);
  font-weight:600;
  font-size:1.15rem;
  margin-bottom:6px;
}
.step p{ color:var(--rose); font-size:0.92rem; max-width:420px; }

.phone{
  background:var(--wine);
  border:1px solid var(--line);
  border-radius:28px;
  padding:26px;
  max-width:340px;
  margin:0 auto;
  box-shadow:0 30px 70px rgba(0,0,0,0.35);
}
.bubble{
  padding:14px 18px;
  border-radius:16px;
  font-size:0.92rem;
  margin-bottom:12px;
  max-width:82%;
  opacity:0;
  animation:rise .6s ease forwards;
}
.bubble.them{ background:var(--wine-light); border-bottom-left-radius:4px; }
.bubble.me{
  background:var(--gold); color:var(--plum);
  margin-left:auto;
  border-bottom-right-radius:4px;
}
.bubble:nth-child(1){ animation-delay:.1s; }
.bubble:nth-child(2){ animation-delay:.5s; }
.bubble:nth-child(3){ animation-delay:.9s; }
@keyframes rise{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- testimonials ---------- */
.testimonials{ background:var(--wine); }
.testi-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  list-style:none;
}
.testi{
  background:var(--plum);
  border:1px solid var(--line);
  border-radius:18px;
  padding:32px;
}
.testi-quote{
  font-family:var(--display);
  font-style:italic;
  font-size:1.08rem;
  line-height:1.5;
  color:var(--blush);
}
.testi-who{
  margin-top:22px;
  font-family:var(--mono);
  font-size:0.76rem;
  color:var(--rose);
  text-transform:uppercase;
  letter-spacing:0.08em;
}

/* ---------- pricing ---------- */
.plans{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; list-style:none; }
.plan{
  border:1px solid var(--line);
  border-radius:20px;
  padding:38px 32px;
  display:flex; flex-direction:column;
  position:relative;
}
.plan.highlight{
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(212,175,122,0.08), transparent 40%);
}
.plan-tag{
  position:absolute; top:-13px; left:32px;
  background:var(--gold); color:var(--plum);
  font-family:var(--mono); font-size:0.68rem;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}
.plan-name{ font-family:var(--display); font-weight:600; font-size:1.3rem; }
.plan-price{ font-family:var(--display); font-size:2.4rem; font-weight:600; margin:18px 0 4px; }
.plan-price span{ font-size:0.95rem; color:var(--rose); font-family:var(--body); }
.plan ul{ list-style:none; margin:26px 0 32px; flex:1; }
.plan li{
  padding:9px 0;
  border-top:1px solid var(--line);
  font-size:0.9rem;
  color:var(--ivory);
}
.plan li:first-child{ border-top:none; }
.plan-btn{
  text-align:center;
  padding:13px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:0.9rem;
  transition:all .25s ease;
}
.plan.highlight .plan-btn{ background:var(--gold); color:var(--plum); border-color:var(--gold); }
.plan-btn:hover, .plan-btn:focus-visible{ border-color:var(--gold); outline:none; }

/* ---------- closing cta ---------- */
.closing{
  text-align:center;
  background:radial-gradient(ellipse 70% 90% at 50% 30%, rgba(201,138,150,0.14), transparent 65%);
}
.closing .wave-rule{ margin:0 auto 24px; }
.closing h2{ max-width:560px; margin-left:auto; margin-right:auto; }

/* ---------- footer ---------- */
footer.site-footer{
  border-top:1px solid var(--line);
  padding:52px 32px 40px;
}
.footer-inner{
  max-width:1180px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
.footer-links{ display:flex; gap:28px; font-size:0.85rem; color:var(--rose); list-style:none; }
.footer-links a:hover, .footer-links a:focus-visible{ color:var(--ivory); outline:none; }
.footer-copy{ font-family:var(--mono); font-size:0.72rem; color:var(--rose-dim); }

/* ---------- WordPress core alignment helpers ---------- */
.alignwide{ max-width:1180px; margin-left:auto; margin-right:auto; }
.alignfull{ max-width:none; }
.wp-caption, .wp-block-image{ max-width:100%; }
.screen-reader-text{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .greet-stage span, .bubble, .btn-primary{ animation:none !important; }
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .nav-links{ display:none; }
  .feature-grid{ grid-template-columns:1fr; }
  .testi-grid{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr; gap:48px; }
}