/*
 Theme Name:   Astra Zenify Child
 Theme URI:    https://zenifyhq.com/
 Description:  Child theme for Astra - Opendoor-inspired clean modern UI
 Author:       Zenify
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-zenify-child
*/

/* -------------------------------------------------------
   Design tokens (Opendoor-ish clean system)
-------------------------------------------------------- */
:root{
  --z-bg: #ffffff;
  --z-surface: #f6f7f9;
  --z-border: rgba(15, 23, 42, 0.10);

  --z-text: #0f172a;        /* slate-900 */
  --z-muted: #475569;       /* slate-600 */

  --z-primary: #0f766e;     /* teal-700-ish (adjust to brand) */
  --z-primary-600: #0d9488;
  --z-primary-50: rgba(13,148,136,0.10);

  --z-radius: 18px;
  --z-radius-sm: 12px;

  --z-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --z-shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.06);

  --z-max: 1200px;
  --z-gutter: 24px;

  --z-h1: clamp(2.2rem, 2.4vw + 1.6rem, 3.2rem);
  --z-h2: clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem);
  --z-body: 1.0625rem;
  --z-lead: 1.15rem;
}

/* Global */
html { scroll-behavior: smooth; }
body{
  color: var(--z-text);
  background: var(--z-bg);
  font-size: var(--z-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{ text-underline-offset: 0.18em; }

/* Astra container width */
.ast-container{
  max-width: var(--z-max);
  padding-left: var(--z-gutter);
  padding-right: var(--z-gutter);
}

/* Header spacing */
.main-header-bar{
  border-bottom: 1px solid var(--z-border);
}
.main-header-bar .ast-container{
  min-height: 72px;
}

/* Nav style (simple, crisp) */
.main-header-menu > .menu-item > a{
  font-weight: 600;
  color: var(--z-text);
  padding: 18px 14px;
}
.main-header-menu > .menu-item > a:hover{
  color: var(--z-primary);
}

/* Buttons – pill, modern */
.ast-button,
.button,
.wp-block-button__link{
  border-radius: 999px !important;
  padding: 14px 18px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background: transparent !important;
  border-color: var(--z-border) !important;
  color: var(--z-text) !important;
}
.wp-block-button__link:hover{
  transform: translateY(-1px);
  box-shadow: var(--z-shadow-sm);
}

/* Section utilities */
.z-section{
  padding: 64px 0;
}
.z-section--tight{ padding: 44px 0; }
.z-surface{
  background: var(--z-surface);
}
.z-card{
  background: #fff;
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius);
  box-shadow: var(--z-shadow-sm);
  padding: 22px;
}
.z-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background: var(--z-primary-50);
  color: var(--z-primary);
  border: 1px solid rgba(13,148,136,0.20);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.95rem;
}
.z-hero h1{
  font-size: var(--z-h1);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 14px 0;
}
.z-hero p.lead{
  font-size: var(--z-lead);
  color: var(--z-muted);
  margin: 0 0 22px 0;
}
.z-muted{ color: var(--z-muted); }
.z-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.z-col-6{ grid-column: span 6; }
.z-col-7{ grid-column: span 7; }
.z-col-5{ grid-column: span 5; }
.z-col-4{ grid-column: span 4; }
.z-col-12{ grid-column: span 12; }

@media (max-width: 980px){
  .z-col-6,.z-col-7,.z-col-5,.z-col-4{ grid-column: span 12; }
  .z-section{ padding: 52px 0; }
}

/* Hero image container */
.z-hero-media{
  border-radius: var(--z-radius);
  overflow: hidden;
  border: 1px solid var(--z-border);
  box-shadow: var(--z-shadow);
  background: #fff;
}
.z-hero-media img{ display:block; width:100%; height:auto; }

/* FAQ details */
.z-faq details{
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-sm);
  padding: 16px 16px;
  background: #fff;
}
.z-faq summary{
  cursor: pointer;
  font-weight: 800;
}
.z-faq summary::-webkit-details-marker { display:none; }
.z-faq details + details{ margin-top: 10px; }

/* Fine-print */
.z-fineprint{
  font-size: 0.95rem;
  color: var(--z-muted);
}