/*
Theme Name: Pir Azmat
Theme URI: https://pirazmat.com
Author: Pir Azmat
Description: Royal purple & gold spiritual guidance theme (Istikhara, Dua, Rohani Ilaj). Fully Elementor-compatible — every template calls the_content() unconditionally so Elementor can hook into every page.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: pir-azmat
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --radius: 0.75rem;
  --background: oklch(0.14 0.05 300);
  --foreground: oklch(0.97 0.02 90);
  --card: oklch(0.19 0.06 300);
  --card-foreground: oklch(0.97 0.02 90);
  --primary: oklch(0.82 0.16 85);
  --primary-foreground: oklch(0.16 0.05 300);
  --secondary: oklch(0.28 0.11 305);
  --secondary-foreground: oklch(0.97 0.02 90);
  --muted: oklch(0.24 0.06 300);
  --muted-foreground: oklch(0.78 0.04 90);
  --accent: oklch(0.68 0.20 340);
  --accent-foreground: oklch(0.14 0.05 300);
  --border: oklch(0.35 0.08 305 / 60%);
  --input: oklch(0.30 0.08 305);
  --ring: oklch(0.82 0.16 85);

  --gold: oklch(0.82 0.16 85);
  --gold-soft: oklch(0.90 0.12 88);
  --gradient-royal: linear-gradient(135deg, oklch(0.20 0.09 300), oklch(0.14 0.05 300) 55%, oklch(0.10 0.04 295));
  --gradient-gold: linear-gradient(135deg, oklch(0.90 0.13 88), oklch(0.72 0.17 70));
  --shadow-royal: 0 25px 60px -20px oklch(0.10 0.05 300 / 70%);
  --shadow-gold: 0 12px 40px -10px oklch(0.82 0.16 85 / 35%);

  --font-display: "Cinzel", "Playfair Display", Georgia, serif;
  --font-body: "Cormorant Garamond", "Playfair Display", Georgia, serif;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--gradient-royal);
  background-attachment: fixed;
  color: var(--foreground);
  font-family: var(--font-body);
  min-height: 100vh;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  margin: 0;
  font-weight: 600;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.container-md { max-width: 1152px; margin: 0 auto; padding: 0 1.5rem; }
.container-sm { max-width: 1024px; margin: 0 auto; padding: 0 1.5rem; }

.text-gold { color: var(--gold); }
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; }

.btn-gold {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 9999px;
  background: var(--gradient-gold);
  color: var(--primary-foreground);
  padding: 0.9rem 1.75rem;
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 600;
  box-shadow: var(--shadow-gold);
  border: none; cursor: pointer;
  transition: opacity 0.2s ease;
}
.btn-gold:hover { opacity: 0.9; }
.btn-outline-gold {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid oklch(0.82 0.16 85 / 0.5);
  color: var(--gold);
  padding: 0.9rem 1.75rem;
  font-size: 1rem;
  transition: background 0.2s ease;
}
.btn-outline-gold:hover { background: oklch(0.82 0.16 85 / 0.1); }
.pill-gold {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid oklch(0.82 0.16 85 / 0.4);
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold);
}

/* ==========================================================================
   Top bar
   ========================================================================== */
.top-bar {
  display: none;
  border-bottom: 1px solid oklch(0.35 0.08 305 / 0.6);
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
}
@media (min-width: 768px) { .top-bar { display: block; } }
.top-bar-inner {
  max-width: 1280px; margin: 0 auto; padding: 0.5rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.75rem; color: var(--muted-foreground);
}
.top-bar-inner .left { display: flex; align-items: center; gap: 1rem; }
.top-bar-inner .left span { display: flex; align-items: center; gap: 0.5rem; }
.top-bar-inner a { display: flex; align-items: center; gap: 0.5rem; color: var(--gold); }
.top-bar-inner a:hover { opacity: 0.8; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 999;
  border-bottom: 1px solid oklch(0.35 0.08 305 / 0.6);
  background: oklch(0.14 0.05 300 / 0.7);
  backdrop-filter: blur(20px);
}
.header-inner { max-width: 1280px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand-mark {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: var(--gradient-gold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-gold);
  color: var(--primary-foreground);
  flex-shrink: 0;
}
.brand-name { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.05em; color: var(--gold); }
.brand-sub { display: block; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--muted-foreground); }
.main-nav { display: none; gap: 2rem; }
.main-nav a { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted-foreground); }
.main-nav a:hover { color: var(--gold); }
@media (min-width: 768px) { .main-nav { display: flex; } }
.header-whatsapp {
  display: none; align-items: center; gap: 0.5rem;
  border-radius: 9999px; background: var(--gradient-gold);
  padding: 0.5rem 1.25rem; font-size: 0.9rem; font-weight: 600;
  color: var(--primary-foreground); box-shadow: var(--shadow-gold);
}
@media (min-width: 768px) { .header-whatsapp { display: inline-flex; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; }
.hero-bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, oklch(0.14 0.05 300 / 0.6), oklch(0.14 0.05 300 / 0.7) 50%, var(--background)); }
.hero-content { position: relative; max-width: 1280px; margin: 0 auto; padding: 7rem 1.5rem; text-align: center; }
.hero-title { margin-top: 1.5rem; font-size: 2.75rem; font-weight: 600; line-height: 1.2; }
@media (min-width: 768px) { .hero-title { font-size: 4.5rem; } }
.hero-text { margin: 1.5rem auto 0; max-width: 640px; font-size: 1.15rem; color: var(--muted-foreground); }
@media (min-width: 768px) { .hero-text { font-size: 1.25rem; } }
.hero-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.hero-stats { margin-top: 4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.hero-stats .num { font-family: var(--font-display); font-size: 2rem; color: var(--gold); }
@media (min-width: 768px) { .hero-stats .num { font-size: 2.25rem; } }
.hero-stats .label { margin-top: 0.25rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted-foreground); }

/* ==========================================================================
   About section
   ========================================================================== */
.about-section { padding: 6rem 1.5rem; }
.about-grid { max-width: 1280px; margin: 0 auto; display: grid; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .about-grid { grid-template-columns: 1fr 1fr; } }
.about-image-wrap { position: relative; }
.about-image-glow { position: absolute; inset: -1rem; border-radius: 1.5rem; background: oklch(0.82 0.16 85 / 0.2); filter: blur(40px); }
.about-image-wrap img { position: relative; border-radius: 1.5rem; object-fit: cover; width: 100%; height: 480px; box-shadow: var(--shadow-royal); border: 1px solid oklch(0.82 0.16 85 / 0.4); }
.eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--gold); }
.about-section h2, .services-section h2, .contact-section h2 { margin-top: 0.75rem; font-size: 2.25rem; line-height: 1.2; }
@media (min-width: 768px) { .about-section h2, .services-section h2, .contact-section h2 { font-size: 3rem; } }
.about-section p { margin-top: 1.5rem; font-size: 1.1rem; color: var(--muted-foreground); line-height: 1.75; }
.about-tags { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.about-tags span { border-radius: 9999px; border: 1px solid oklch(0.82 0.16 85 / 0.4); padding: 0.4rem 1rem; font-size: 0.9rem; color: var(--gold); }

/* ==========================================================================
   Services
   ========================================================================== */
.services-section { position: relative; padding: 6rem 0; }
.section-head { max-width: 640px; margin: 0 auto; text-align: center; }
.section-head p { margin-top: 1.25rem; color: var(--muted-foreground); }
.services-grid { margin-top: 4rem; max-width: 1280px; margin-left: auto; margin-right: auto; padding: 0 1.5rem; display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: 1fr 1fr 1fr; } }
.service-card {
  position: relative; overflow: hidden; border-radius: 1rem;
  border: 1px solid oklch(0.82 0.16 85 / 0.2);
  background: var(--card);
  box-shadow: var(--shadow-royal);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.service-card:hover { transform: translateY(-4px); border-color: oklch(0.82 0.16 85 / 0.6); }
.service-card-img-wrap { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.service-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.service-card:hover .service-card-img-wrap img { transform: scale(1.1); }
.service-card-img-wrap .fade { position: absolute; inset: 0; background: linear-gradient(to top, var(--card), oklch(0.19 0.06 300 / 0.4), transparent); }
.service-card-num { position: absolute; left: 1rem; top: 1rem; border-radius: 9999px; background: rgba(0,0,0,0.5); padding: 0.25rem 0.75rem; font-size: 0.75rem; color: var(--gold); backdrop-filter: blur(4px); }
.service-card-icon { position: absolute; right: 1rem; top: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: var(--gradient-gold); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-gold); color: var(--primary-foreground); }
.service-card-body { padding: 1.5rem; }
.service-card-body h3 { font-size: 1.25rem; color: var(--gold); }
.service-card-body p { margin-top: 0.75rem; font-size: 0.9rem; line-height: 1.6; color: var(--muted-foreground); }
.service-card-body a { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--gold); }
.service-card-body a:hover { opacity: 0.8; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-section { max-width: 1024px; margin: 0 auto; padding: 6rem 1.5rem; }
.contact-box {
  position: relative; overflow: hidden; border-radius: 1.5rem;
  border: 1px solid oklch(0.82 0.16 85 / 0.4);
  background: var(--card);
  padding: 3rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-royal);
}
@media (min-width: 768px) { .contact-box { padding: 4rem; } }
.contact-box p { margin: 1.25rem auto 0; max-width: 560px; color: var(--muted-foreground); }
.contact-actions { margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
@media (min-width: 640px) { .contact-actions { flex-direction: row; justify-content: center; } }
.contact-info { margin-top: 2.5rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; font-size: 0.9rem; }
@media (min-width: 640px) { .contact-info { grid-template-columns: 1fr 1fr 1fr; } }
.contact-info-box { border-radius: 0.75rem; border: 1px solid oklch(0.35 0.08 305 / 0.6); background: oklch(0.14 0.05 300 / 0.4); padding: 1.25rem; text-align: center; }
.contact-info-box .icon { font-size: 1.25rem; color: var(--gold); }
.contact-info-box .label { margin-top: 0.5rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted-foreground); }
.contact-info-box .value { margin-top: 0.25rem; color: var(--gold); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid oklch(0.35 0.08 305 / 0.6); background: rgba(0,0,0,0.4); }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; }
@media (min-width: 768px) { .footer-inner { flex-direction: row; } }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.footer-brand-mark { width: 2rem; height: 2rem; border-radius: 9999px; background: var(--gradient-gold); display: flex; align-items: center; justify-content: center; color: var(--primary-foreground); }
.footer-brand-name { font-family: var(--font-display); color: var(--gold); letter-spacing: 0.05em; }
.footer-copy { font-size: 0.75rem; color: var(--muted-foreground); text-align: center; }
.footer-inner > a { font-size: 0.75rem; color: var(--gold); }
.footer-inner > a:hover { opacity: 0.8; }

/* ==========================================================================
   WhatsApp float
   ========================================================================== */
.whatsapp-float {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999;
  width: 3.5rem; height: 3.5rem; border-radius: 9999px;
  background: var(--gradient-gold); color: var(--primary-foreground);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-gold);
  transition: transform 0.2s ease;
}
.whatsapp-float:hover { transform: scale(1.1); }
.whatsapp-float .ping {
  position: absolute; inset: 0; border-radius: 9999px;
  background: oklch(0.82 0.16 85 / 0.6);
  opacity: 0.4;
  animation: ping 1.6s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes ping { 75%, 100% { transform: scale(1.7); opacity: 0; } }

/* ==========================================================================
   WordPress core / Elementor compatibility
   ========================================================================== */
.site-main { min-height: 40vh; }
.elementor-section, .elementor-widget-wrap, .elementor-element { box-sizing: border-box; }
.screen-reader-text { position: absolute; left: -9999px; }