/*
Theme Name:   Mistress Ayn (Astra Child)
Theme URI:    https://mistressayn.com
Description:  Custom Astra child theme for the Mistress Ayn redesign. Holds design tokens, global effects, the 18+ age gate, and editorial post typography. Layout templates are built in Elementor Pro Theme Builder.
Author:       Oreoluwa
Template:     astra
Version:      1.0.0
Text Domain:  mistress-ayn
*/

/* =====================================================================
   DESIGN TOKENS  — the single source of truth for colour & type.
   Mirror these in Elementor > Site Settings > Global Colors / Fonts
   so widgets stay consistent, but these remain the fallback.
   ===================================================================== */
:root{
  --ink:#0c0a0b;          /* page background (black)        */
  --ink-soft:#161214;     /* card hover                     */
  --ink-mid:#1a1418;
  --paper:#ece4da;        /* primary text (cream)           */
  --paper-dim:#a89c8f;    /* secondary text                 */
  --paper-faint:#6e635a;  /* tertiary / dates               */
  --oxblood:#7c1d28;      /* primary accent (deep red)      */
  --oxblood-bright:#a8333f;
  --gold:#b89b6e;         /* secondary accent / lines       */
  --gold-dim:rgba(184,155,110,.22);
  --line:rgba(184,155,110,0.2);
  --display:"Bodoni Moda",serif;
  --body:"Hanken Grotesk",sans-serif;
}

/* =====================================================================
   GLOBAL BASE
   ===================================================================== */
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:300;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--oxblood);color:var(--paper);}

/* film-grain / noise overlay over the whole site */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.04;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* keep real content above the grain */
#page, .site, .ast-container{position:relative;z-index:2;}

/* =====================================================================
   REUSABLE COMPONENT CLASSES
   Apply these in Elementor via any widget's  Advanced > CSS Classes.
   All are namespaced  ma-  to avoid clashing with Astra/Elementor.
   ===================================================================== */

/* eyebrow / overline label */
.ma-lbl{
  font-family:var(--body);font-weight:500;font-size:.64rem;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold);
}

/* small gold divider rule */
.ma-divider{width:40px;height:1px;background:var(--gold);margin:18px 0 24px;}

/* buttons (apply to Elementor Button widget OR a link) */
.ma-btn{
  font-family:var(--body);font-weight:500;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;padding:15px 32px;border:1px solid var(--gold);
  background:transparent;color:var(--paper);cursor:pointer;transition:.35s;
  text-decoration:none;display:inline-block;
}
.ma-btn:hover{background:var(--gold);color:var(--ink);}
.ma-btn.solid{background:var(--oxblood);border-color:var(--oxblood);color:var(--paper);}
.ma-btn.solid:hover{background:var(--oxblood-bright);border-color:var(--oxblood-bright);color:var(--paper);}
.ma-btn.ghost{border-color:rgba(168,156,143,.35);color:var(--paper-dim);}
.ma-btn.ghost:hover{border-color:var(--paper-dim);color:var(--paper);}

/* display-serif heading helper (for headings built as Elementor Heading) */
.ma-display{font-family:var(--display);font-weight:400;line-height:1.05;}
.ma-display em{font-style:italic;color:var(--gold);}

/* service / discipline card */
.ma-svc{background:var(--ink);padding:46px 36px;transition:.4s;border:1px solid var(--line);}
.ma-svc:hover{background:var(--ink-soft);}
.ma-svc .num{font-family:var(--display);font-size:.9rem;color:var(--gold);font-style:italic;display:block;margin-bottom:28px;}
.ma-svc h3{font-family:var(--display);font-weight:400;font-size:1.65rem;margin-bottom:13px;line-height:1.15;}
.ma-svc p{font-size:.91rem;color:var(--paper-dim);line-height:1.75;}

/* category badge (oxblood overline used on cards & posts) */
.ma-cat{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oxblood-bright);display:block;}

/* =====================================================================
   POST / LOOP CARD  (use on the Loop Grid template for the Journal)
   ===================================================================== */
.ma-card h4,.ma-card .ma-card-title{
  font-family:var(--display);font-weight:400;font-size:1.38rem;line-height:1.2;transition:.3s;
}
.ma-card:hover h4,.ma-card:hover .ma-card-title{color:var(--gold);}
.ma-card .ma-thumb{border:1px solid var(--line);transition:.5s;}
.ma-card:hover .ma-thumb{border-color:var(--gold);}
.ma-card .dt{font-size:.74rem;color:var(--paper-dim);}

/* =====================================================================
   SINGLE-POST CONTENT TYPOGRAPHY
   Add the class  ma-post-body  to the Elementor "Post Content" widget
   (Advanced > CSS Classes). Your client's posts then render in-style
   automatically — no per-post work.
   ===================================================================== */
.ma-post-body{font-size:1.05rem;line-height:1.9;color:#d5cabd;}
.ma-post-body h2{font-family:var(--display);font-weight:400;font-size:2rem;color:var(--paper);margin:48px 0 20px;line-height:1.1;}
.ma-post-body h3{font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--paper);margin:36px 0 16px;}
.ma-post-body p{margin-bottom:22px;}
.ma-post-body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;}
.ma-post-body strong{color:var(--paper);font-weight:500;}
.ma-post-body blockquote{
  border-left:2px solid var(--gold);padding:18px 28px;margin:36px 0;
  font-family:var(--display);font-style:italic;font-size:1.4rem;color:var(--paper);
  line-height:1.3;background:rgba(184,155,110,.04);
}
.ma-post-body ul{margin:0 0 22px 0;padding-left:0;list-style:none;}
.ma-post-body ul li{padding:6px 0 6px 20px;position:relative;color:#c9beb0;}
.ma-post-body ul li::before{content:"—";position:absolute;left:0;color:var(--gold);}

/* =====================================================================
   MARQUEE  (the scrolling italic strip under the hero)
   Markup:  <div class="ma-marquee"><div class="ma-marquee-track">
            <span>Bondage</span><span>Chastity</span> ... </div></div>
   Use an Elementor HTML widget for this.
   ===================================================================== */
.ma-marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 0;overflow:hidden;white-space:nowrap;}
.ma-marquee-track{display:inline-flex;gap:56px;animation:ma-slide 32s linear infinite;}
.ma-marquee span{font-family:var(--display);font-style:italic;font-size:1.35rem;color:var(--paper-dim);}
.ma-marquee span::after{content:"·";margin-left:56px;color:var(--gold);}
@keyframes ma-slide{to{transform:translateX(-50%);}}

/* =====================================================================
   SCROLL REVEAL  (optional — Elementor's Motion Effects also work)
   Add class  ma-reveal  to any element to fade-up on scroll.
   ===================================================================== */
.ma-reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);}
.ma-reveal.in{opacity:1;transform:none;}

/* =====================================================================
   18+ AGE GATE  (markup injected by functions.php, persisted in JS)
   ===================================================================== */
#ma-gate{
  position:fixed;inset:0;z-index:99999;background:rgba(8,6,7,.97);
  display:flex;align-items:center;justify-content:center;text-align:center;
  backdrop-filter:blur(6px);transition:opacity .8s,visibility .8s;
}
#ma-gate.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.ma-gate-card{max-width:460px;padding:0 32px;}
.ma-gate-mark{font-family:var(--display);font-size:2.6rem;font-style:italic;color:var(--paper);margin-bottom:6px;}
.ma-gate-card .ma-lbl{display:block;margin-bottom:26px;}
.ma-gate-card p{font-size:.9rem;color:var(--paper-dim);margin-bottom:32px;line-height:1.85;}
.ma-gate-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* =====================================================================
   RESPONSIVE helpers for the custom component classes
   ===================================================================== */
@media(max-width:640px){
  .ma-svc{padding:34px 26px;}
}