/*
Theme Name: Noxius
Theme URI: https://example.com/noxius
Author: Noxius
Author URI: https://example.com
Description: Тёмная эзотерическая тема-лендинг для личной практики Таро, астрологии и энергетической диагностики. Одностраничный дизайн с формой записи.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: noxius
Tags: one-column, custom-menu, footer-widgets, translation-ready
*/

:root{
  --ink: #0a0710;
  --night: #150d22;
  --night-2: #1c1230;
  --wine: #4a1530;
  --wine-bright: #7a2548;
  --gold: #c9a86a;
  --gold-dim: #8f7748;
  --moon: #ece6f4;
  --moon-dim: #a99fbc;
  --line: rgba(201,168,106,0.22);
  --radius: 2px;
}

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

html{scroll-behavior:smooth;}

body{
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(74,21,48,0.35), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 15%, rgba(122,37,72,0.12), transparent 60%),
    var(--ink);
  color: var(--moon);
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

h1,h2,h3, .eyebrow, .btn, nav a, .card-title{
  font-family: 'Cinzel', serif;
  letter-spacing: 0.04em;
}

a{color:inherit;}

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

/* -------- background stars -------- */
#stars{
  position: fixed; inset:0; z-index:0; pointer-events:none; opacity:0.55;
}

/* -------- nav -------- */
header.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(10,7,16,0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 32px; max-width:1080px; margin:0 auto;
}
.brand{ font-size:1.05rem; color:var(--gold); text-transform: uppercase; display:flex; align-items:center; gap:10px;}
.brand svg{ width:22px; height:22px; }
nav.links{ display:flex; gap:30px; font-size:0.85rem; text-transform:uppercase; }
nav.links a{ opacity:0.8; text-decoration:none; transition:opacity .25s; border-bottom:1px solid transparent;}
nav.links a:hover{ opacity:1; border-color: var(--gold-dim); }
nav.links a:focus-visible, .btn:focus-visible, select:focus-visible, input:focus-visible{
  outline: 1px solid var(--gold); outline-offset:3px;
}

/* -------- hero -------- */
.hero{
  position:relative; z-index:1;
  padding: 120px 32px 100px;
  text-align:center;
}
.eyebrow{
  color: var(--gold-dim); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.35em;
  margin-bottom: 26px; opacity:0; animation: fadeUp 1s ease-out 0.1s forwards;
}
.hero h1{
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 500;
  color: var(--moon);
  line-height:1.15;
  max-width: 780px; margin: 0 auto 28px;
  opacity:0; animation: fadeUp 1.1s ease-out 0.3s forwards;
}
.hero h1 em{ font-style: italic; color: var(--gold); font-family:'Cormorant Garamond', serif; font-weight:600;}
.hero p.lede{
  max-width: 560px; margin: 0 auto 44px;
  color: var(--moon-dim); font-size:1.2rem; font-style: italic;
  opacity:0; animation: fadeUp 1.1s ease-out 0.55s forwards;
}
.hero-cta{ opacity:0; animation: fadeUp 1.1s ease-out 0.8s forwards; }

@keyframes fadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }

.btn{
  display:inline-block;
  padding: 15px 42px;
  background: linear-gradient(180deg, rgba(201,168,106,0.14), rgba(201,168,106,0.05));
  border: 1px solid var(--gold);
  color: var(--gold);
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-decoration:none;
  cursor:pointer;
  transition: all .35s ease;
  position:relative;
  border-radius: var(--radius);
}
.btn:hover{ background: rgba(201,168,106,0.18); box-shadow: 0 0 26px rgba(201,168,106,0.28); transform: translateY(-1px);}

/* -------- moon phase divider (signature element) -------- */
.moon-divider{
  position:relative; z-index:1;
  display:flex; justify-content:center; align-items:center; gap:0;
  padding: 10px 0 70px;
}
.moon-divider svg{ width: min(720px, 90%); height:auto; }

/* -------- section shell -------- */
section{ position:relative; z-index:1; padding: 90px 32px; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 60px; }
.section-head .eyebrow{ animation:none; opacity: 0.85; }
.section-head h2{
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  color: var(--moon); font-weight:500; margin-top:14px;
}
.section-head p{ color: var(--moon-dim); margin-top:18px; font-size:1.08rem; }

hr.rule{
  border:none; height:1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin: 0 auto;
  width: 60%;
}

/* -------- about -------- */
.about{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:64px; align-items:center; max-width:1080px; margin:0 auto; }
.about .frame{
  aspect-ratio: 3/4; border:1px solid var(--line); position:relative; overflow:hidden;
  background: radial-gradient(circle at 50% 30%, rgba(122,37,72,0.35), transparent 65%), var(--night);
}
.about .frame svg{ position:absolute; inset:0; width:100%; height:100%; }
.about-text .eyebrow{ opacity:0.85; }
.about-text h3{ font-size:1.7rem; color:var(--moon); font-weight:500; margin: 14px 0 18px; }
.about-text p{ color: var(--moon-dim); margin-bottom: 14px; }
.about-text .sign{ margin-top:26px; color: var(--gold); font-style:italic; font-size:1.2rem; }

@media (max-width: 820px){
  .about{ grid-template-columns:1fr; }
}

/* -------- services / cards -------- */
.cards{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1px;
  background: var(--line);
  border: 1px solid var(--line);
  max-width: 1080px; margin: 0 auto;
}
.card{
  background: var(--night);
  padding: 42px 28px;
  text-align:center;
  perspective: 1000px;
  cursor:default;
  transition: background .35s;
}
.card:hover{ background: var(--night-2); }
.card .glyph{ width:46px; height:46px; margin:0 auto 22px; color: var(--gold); }
.card .glyph svg{ width:100%; height:100%; }
.card-title{ font-size:1rem; color: var(--moon); text-transform: uppercase; margin-bottom:14px; }
.card p{ color: var(--moon-dim); font-size:0.98rem; }

@media (max-width: 900px){
  .cards{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  .cards{ grid-template-columns: 1fr; }
}

/* -------- reviews -------- */
.reviews{ background: var(--night); }
.review-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; max-width:1080px; margin:0 auto;
}
.review{
  border: 1px solid var(--line); padding: 32px 26px; position:relative;
  background: linear-gradient(180deg, rgba(201,168,106,0.04), transparent);
}
.review .mark{ color: var(--gold-dim); font-size:2.2rem; font-family:'Cinzel',serif; line-height:1; margin-bottom:10px; display:block;}
.review p{ color: var(--moon-dim); font-style:italic; margin-bottom:18px; }
.review .who{ color: var(--gold); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.1em; font-family:'Cinzel',serif;}

@media (max-width: 820px){ .review-grid{ grid-template-columns:1fr; } }

/* -------- articles -------- */
.article-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; max-width:1080px; margin:0 auto;
}
.article-card{
  border: 1px solid var(--line); padding: 32px 26px; position:relative;
  background: linear-gradient(180deg, rgba(201,168,106,0.04), transparent);
  display:flex; flex-direction:column;
  transition: background .35s, border-color .35s;
}
.article-card:hover{ background: rgba(28,18,48,0.6); border-color: var(--gold-dim); }
.article-date{
  color: var(--gold-dim); font-family:'Cinzel',serif; font-size:0.72rem;
  text-transform:uppercase; letter-spacing:0.12em; margin-bottom:14px;
}
.article-title{
  font-family:'Cinzel',serif; font-size:1.15rem; font-weight:500; color: var(--moon);
  line-height:1.35; margin-bottom:14px;
}
.article-title a{ text-decoration:none; border-bottom:1px solid transparent; transition:border-color .25s; }
.article-title a:hover{ border-color: var(--gold-dim); }
.article-excerpt{ color: var(--moon-dim); font-size:0.98rem; margin-bottom:22px; flex:1; }
.article-more{
  color: var(--gold); font-family:'Cinzel',serif; font-size:0.76rem;
  text-transform:uppercase; letter-spacing:0.12em; text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .25s; align-self:flex-start;
}
.article-more:hover{ border-color: var(--gold); }

@media (max-width: 820px){ .article-grid{ grid-template-columns:1fr; } }

.article-cat{
  align-self:flex-start; margin-bottom:12px; text-decoration:none;
  color: var(--gold-dim); font-family:'Cinzel',serif; font-size:0.66rem;
  text-transform:uppercase; letter-spacing:0.12em;
  border-bottom:1px solid transparent; transition:border-color .25s;
}
.article-cat:hover{ border-color: var(--gold-dim); }

/* -------- articles page: hero + filter + pagination -------- */
.articles-hero{ position:relative; z-index:1; padding: 90px 32px 20px; }
.articles-hero .section-head{ margin-bottom:0; }

.cat-filter{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  max-width:1080px; margin:0 auto 50px;
}
.cat-chip{
  display:inline-block; padding:9px 20px;
  border:1px solid var(--line); border-radius:999px;
  color:var(--moon-dim); font-family:'Cinzel',serif; font-size:0.72rem;
  text-transform:uppercase; letter-spacing:0.1em; text-decoration:none;
  transition:all .25s;
}
.cat-chip:hover{ border-color:var(--gold-dim); color:var(--moon); }
.cat-chip.active{ background:rgba(201,168,106,0.12); border-color:var(--gold); color:var(--gold); }

.pagination{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:50px;
}
.pagination a, .pagination span{
  padding:10px 16px; border:1px solid var(--line);
  color:var(--moon-dim); text-decoration:none;
  font-family:'Cinzel',serif; font-size:0.8rem; border-radius:var(--radius);
  transition:all .25s;
}
.pagination a:hover{ border-color:var(--gold-dim); color:var(--moon); }
.pagination .current{ background:rgba(201,168,106,0.12); border-color:var(--gold); color:var(--gold); }

.articles-all-cta{ text-align:center; margin-top:50px; }

/* -------- single article -------- */
.single-article{ max-width: 760px; margin: 0 auto; }
.single-article .article-date{ text-align:center; margin-bottom:18px; }
.single-article h1.entry-title{
  font-family:'Cinzel',serif; font-weight:500; color: var(--moon);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem); text-align:center; margin-bottom: 40px; line-height:1.25;
}
.entry-content{ color: var(--moon-dim); font-size: 1.12rem; }
.entry-content p{ margin-bottom: 22px; }
.entry-content h2, .entry-content h3{ color: var(--moon); font-weight:500; margin: 32px 0 14px; }
.entry-content a{ color: var(--gold); }
.entry-content ul, .entry-content ol{ margin: 0 0 22px 1.4em; }
.entry-content li{ margin-bottom: 8px; }
.entry-content blockquote{
  border-left: 2px solid var(--gold-dim); padding-left: 22px; margin: 26px 0;
  font-style: italic; color: var(--moon);
}
.entry-content img{ max-width:100%; height:auto; border:1px solid var(--line); }
.back-link{ display:block; text-align:center; margin-top: 50px; }

/* -------- booking form -------- */
.booking{
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(74,21,48,0.4), transparent 60%),
    var(--night);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.booking-inner{ max-width: 620px; margin:0 auto; }

form#booking-form{
  display:flex; flex-direction:column; gap:22px; margin-top: 40px;
}
.field{ display:flex; flex-direction:column; gap:8px; text-align:left; }
.field label{
  font-family:'Cinzel',serif; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.14em; color: var(--gold-dim);
}
.field input, .field select{
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  color: var(--moon);
  padding: 14px 16px;
  font-family:'Cormorant Garamond', serif;
  font-size: 1.05rem;
  border-radius: var(--radius);
  transition: border-color .25s, background .25s;
}
.field input:focus, .field select:focus{
  border-color: var(--gold); background: rgba(201,168,106,0.05); outline:none;
}
.field input[type="file"]{ cursor:pointer; padding:11px 16px; }
.field input[type="file"]::file-selector-button{
  background: rgba(201,168,106,0.12);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-family:'Cinzel',serif; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em;
  padding: 8px 16px; margin-right:14px; border-radius: var(--radius); cursor:pointer;
  transition: background .25s;
}
.field input[type="file"]::file-selector-button:hover{ background: rgba(201,168,106,0.2); }
.field select{ appearance:none; cursor:pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' stroke='%23c9a86a' stroke-width='1.4' fill='none'/></svg>");
  background-repeat:no-repeat; background-position: right 16px center;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap: 18px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

.form-note{ color: var(--moon-dim); font-size:0.88rem; margin-top:4px; }
.submit-row{ margin-top:10px; display:flex; flex-direction:column; align-items:center; gap:14px; }
button.btn{ width:100%; font-size:0.85rem; }
.disclaimer{ font-size:0.8rem; color: var(--moon-dim); opacity:0.75; max-width:480px; text-align:center; }

#form-status{ min-height:1.4em; font-size:0.9rem; text-align:center; }
#form-status.ok{ color: var(--gold); }
#form-status.err{ color: var(--wine-bright); }

.thankyou{
  display:none; text-align:center; padding: 30px 10px;
}
.thankyou.show{ display:block; animation: fadeUp .6s ease-out; }
.thankyou .glyph{ width:52px; height:52px; margin:0 auto 20px; color:var(--gold); }
.thankyou h3{ font-size:1.5rem; color:var(--moon); margin-bottom:12px; }
.thankyou p{ color: var(--moon-dim); }

.qr-block{
  margin-top: 34px; padding-top: 30px;
  border-top: 1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.qr-block .eyebrow{ color: var(--gold-dim); font-size:0.74rem; letter-spacing:0.25em; }
.qr-block .qr-note{ color: var(--moon-dim); font-size:0.95rem; max-width:360px; }
.qr-img{
  margin-top: 8px;
  width: min(300px, 80%); height:auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 0 30px rgba(122,37,72,0.25);
}

/* -------- footer -------- */
footer.site-footer{
  padding: 50px 32px 40px; text-align:center; position:relative; z-index:1;
}
footer.site-footer .brand{ justify-content:center; margin-bottom:14px; }
footer.site-footer p{ color: var(--moon-dim); font-size:0.85rem; }
footer.site-footer .legal{ margin-top:10px; font-size:0.76rem; color: var(--gold-dim); opacity:0.7; max-width:560px; margin-left:auto; margin-right:auto;}