/*
Theme Name: Phlox by IA
Theme URI: https://phloxdrssolution.com
Description: Child theme of Astra for Phlox by IA — Dr's Solution. Simple white theme with purple accents, built for Astra + Elementor.
Author: Phlox by IA
Template: astra
Version: 1.0.0
Text Domain: phlox-by-ia
*/

/* ===================================================================
   1. DESIGN TOKENS — single source of truth for color. Set Astra's
   own Customizer → Global → Colors to the SAME hex values (see
   README), so Astra's native elements (menu, buttons, headings) and
   Elementor's Global Colors both match these automatically.
=================================================================== */
:root{
  --phlox-indigo:#3B3A8F;      /* logo text, dividers */
  --phlox-purple:#5B2A91;      /* headings accent, buttons, links */
  --phlox-teal:#1E6B3A;        /* checkmarks / tick marks (leaf green) */
  --phlox-ink:#1F1F2E;         /* body text */
  --phlox-mute:#6B6B7B;        /* secondary / paragraph text */
  --phlox-line:#ECECF1;        /* borders, dividers */
  --phlox-soft:#F7F7FA;        /* alternating section background */
  --phlox-grad1:#FFFFFF;       /* page background (flat white, no gradient) */
  --phlox-grad2:#FFFFFF;
}

/* ===================================================================
   2. BASE / TYPOGRAPHY
   Fonts enqueued in functions.php (Cormorant Garamond for headings,
   Inter for body). Astra's Customizer → Global → Typography can also
   be set to these two fonts so Astra's own widgets (menu, footer,
   widget titles) match without extra CSS.
=================================================================== */
body{
  background:linear-gradient(170deg,var(--phlox-grad1) 0%,var(--phlox-grad2) 42%,var(--phlox-grad2) 100%);
  color:var(--phlox-ink);
  font-family:'Inter',system-ui,sans-serif;
}
h1,h2,h3,h4{
  font-family:'Cormorant Garamond',Georgia,serif;
  color:var(--phlox-ink);
  font-weight:700;
  line-height:1.15;
}
p{ color:var(--phlox-mute); }
a{ color:var(--phlox-indigo); }

/* Astra wraps page content in #content / .ast-container — make sure
   our body gradient still shows through Astra's own background. */
.ast-separate-container,
#content{ background:transparent; }

/* ===================================================================
   3. REUSABLE UTILITY CLASSES
   Add these as CSS Classes on Elementor widgets/containers (Advanced
   tab), or as Astra's own "Block/Row CSS Class" field if building
   with Astra's native blocks. Same classes work in either builder.
=================================================================== */

.phlox-btn{
  display:inline-block;
  padding:14px 28px;
  border-radius:4px;
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  background:var(--phlox-purple);
  color:#fff !important;
  box-shadow:none;
  border:none;
}
.phlox-btn-outline{
  background:#fff;
  color:var(--phlox-purple) !important;
  border:1.5px solid var(--phlox-purple);
  box-shadow:none;
}

.phlox-section-soft{ background:var(--phlox-soft); }
.phlox-section-pad{ padding:90px 0; }

.phlox-card{
  background:#fff;
  border:1px solid var(--phlox-line);
  border-radius:10px;
  padding:28px;
  box-shadow:none;
}

.phlox-eyebrow{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--phlox-indigo);
}

.phlox-check .elementor-icon-list-icon{ color:var(--phlox-teal) !important; }

.phlox-placeholder{
  background:var(--phlox-soft);
  border:1px dashed #c9c9d6;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--phlox-mute);
  font-size:13px;
  border-radius:16px;
  padding:16px;
}

/* Astra's native button element, in case the site uses Astra's own
   Button widget/block anywhere instead of Elementor's. */
.ast-button, button, input[type="submit"]{
  border-radius:999px;
  background:linear-gradient(135deg,var(--phlox-indigo),var(--phlox-purple));
}

/* ===================================================================
   4. RESPONSIVE RULES
   Astra's own breakpoints (Customizer → Global → Typography/Spacing
   has separate Desktop/Tablet/Mobile tabs) default to:
   Desktop  > 921px
   Tablet   545px – 921px
   Mobile   < 545px
   Elementor (if used for page content) defaults to 1024 / 768 —
   slightly different from Astra's own. Set BOTH to match (see
   README Section 4) so header/menu (Astra) and page content
   (Elementor) break at the same point.
=================================================================== */
@media (max-width:921px){
  .phlox-section-pad{ padding:60px 0; }
  h1{ font-size:44px !important; }
  h2{ font-size:32px !important; }
}
@media (max-width:544px){
  .phlox-section-pad{ padding:40px 0; }
  h1{ font-size:34px !important; }
  h2{ font-size:26px !important; }
  .phlox-card{ padding:20px; }
}