/*
 Theme Name:   The Gardens at Ooralea — Child
 Theme URI:    https://gardens.maximisemarketing.com.au/
 Description:  Divi child theme for The Gardens at Ooralea. Houses brand fonts (Ace Sans, White Star), colour tokens and the button system so they survive Divi updates.
 Author:       Maximise Marketing
 Template:     Divi
 Version:      1.0.0
 Text Domain:  the-gardens-child
*/

/* =====================================================================
   BRAND TOKENS
   ===================================================================== */
:root {
  --gar-green:      #528E5D;
  --gar-blush:      #EDBCAF;
  --gar-gold:       #C99001;
  --gar-dark:       #221A1D;
  --gar-white:      #FFFFFF;
  --gar-gold-hover: #A57601;
  --gar-dark-hover: #000000;
  --gar-radius:     6px;
}

/* =====================================================================
   FONTS  (files live in /fonts next to this stylesheet — relative paths
   resolve correctly here, unlike in Divi's Custom CSS box)
   ===================================================================== */
@font-face {
  font-family: 'Ace Sans';
  src: url('fonts/ace-sans.woff2') format('woff2'),
       url('fonts/ace-sans.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'White Star';
  src: url('fonts/white-star.woff2') format('woff2'),
       url('fonts/white-star.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Body, UI and headings/eyebrows use Ace Sans */
/* body, p, a, .et_pb_text,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Ace Sans', sans-serif !important;
} */

/* ONLY the script subtitle lines use White Star.
   Add CSS Class "gar-script" to those specific modules
   (Live. Relax. Enjoy / Convenience. Location. Lifestyle / etc.) */
#page-container .gar-script,
#page-container .gar-script * {
  font-family: 'White Star', cursive !important;
  font-weight: 400 !important;       /* never bold a script */
  text-transform: none !important;   /* never uppercase a script */
  letter-spacing: 0 !important;
}

/* =====================================================================
   BUTTON SYSTEM
   Apply two classes on a Divi Button module (Advanced > CSS ID & Classes),
   e.g.  gar-btn gar-btn--gold
   ===================================================================== */
#page-container .gar-btn {
  display: inline-block !important;
  font-family: 'Ace Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  text-decoration: none !important;
  padding: 16px 34px !important;
  border: 2px solid transparent !important;
  border-radius: var(--gar-radius) !important;
  cursor: pointer !important;
  transition: all .25s ease !important;
}
/* remove Divi's slide-in hover arrow */
#page-container .et_pb_button.gar-btn::after,
#page-container .et_pb_button.gar-btn:hover::after {
  display: none !important;
  content: none !important;
}

/* 1. Gold filled */
#page-container .gar-btn--gold        { background: var(--gar-gold) !important; border-color: var(--gar-gold) !important; color: var(--gar-white) !important; }
#page-container .gar-btn--gold:hover  { background: var(--gar-gold-hover) !important; border-color: var(--gar-gold-hover) !important; color: var(--gar-white) !important; }

/* 2. Outline (light bg) */
#page-container .gar-btn--outline       { background: var(--gar-white) !important; border-color: var(--gar-gold) !important; color: var(--gar-dark) !important; }
#page-container .gar-btn--outline:hover { background: var(--gar-gold) !important; border-color: var(--gar-gold) !important; color: var(--gar-white) !important; }

/* 3. Outline on dark (ENQUIRE NOW) */
#page-container .gar-btn--outline-light       { background: var(--gar-white) !important; border-color: var(--gar-gold) !important; color: var(--gar-gold) !important; }
#page-container .gar-btn--outline-light:hover { background: var(--gar-gold) !important; border-color: var(--gar-gold) !important; color: var(--gar-white) !important; }

/* 4. Dark filled (SUBMIT) */
#page-container .gar-btn--dark        { background: var(--gar-dark) !important; border-color: var(--gar-dark) !important; color: var(--gar-gold) !important; }
#page-container .gar-btn--dark:hover  { background: var(--gar-dark-hover) !important; border-color: var(--gar-dark-hover) !important; color: var(--gar-gold) !important; }




/* =====================================================================
   THE GARDENS — SECTION + TYPOGRAPHY SYSTEM
   SECTION classes  → add to the Divi SECTION's CSS Class field
   ROLE classes     → add to individual Text/Heading module CSS Class field
   ===================================================================== */

/* ---- SECTION CONTEXTS (background + base text colour) --------------- */
#page-container .gar-sec-dark  { background-color: var(--gar-dark)  !important; }
#page-container .gar-sec-light { background-color: var(--gar-white) !important; }
#page-container .gar-sec-green { background-color: var(--gar-green) !important; }

/* text colour inside each context (excludes buttons) */
#page-container .gar-sec-dark :is(p,h1,h2,h3,h4,h5,h6,li,.et_pb_text),
#page-container .gar-sec-green :is(p,h1,h2,h3,h4,h5,h6,li,.et_pb_text) {
  color: var(--gar-white) !important;
}

/* Keep the eyebrow gold even inside dark / green sections */
body #page-container .gar-sec-dark  .gar-eyebrow,
body #page-container .gar-sec-dark  .gar-eyebrow *,
body #page-container .gar-sec-green .gar-eyebrow,
body #page-container .gar-sec-green .gar-eyebrow *,
body #page-container .gar-sec-light .gar-eyebrow,
body #page-container .gar-sec-light .gar-eyebrow *
{
  color: var(--gar-gold) !important;
}

#page-container .gar-sec-light :is(p,h1,h2,h3,h4,h5,h6,li,.et_pb_text) {
  color: var(--gar-dark) !important;
}
/* links inside sections: match text, gold on hover (buttons untouched) */
#page-container .gar-sec-dark a:not(.gar-btn),
#page-container .gar-sec-green a:not(.gar-btn) { color: var(--gar-white) !important; }
#page-container .gar-sec-light a:not(.gar-btn) { color: var(--gar-dark) !important; }
#page-container [class*="gar-sec-"] a:not(.gar-btn):hover { color: var(--gar-gold) !important; }

/* ---- ROLE: EYEBROW (small gold uppercase label) -------------------- */
#page-container .gar-eyebrow,
#page-container .gar-eyebrow * {
  font-family: 'Ace Sans', sans-serif !important;
  color: var(--gar-gold) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  /* font-size: 15px !important; */
  letter-spacing: 0.18em !important;
  line-height: 1.3 !important;
  margin-bottom: 30px !important;
}

#page-container .gar-sec-light .gar-eyebrow.inspiring-eyebrow {
    color: var(--gar-gold) !important;
}

/* ---- ROLE: SCRIPT SUBTITLE (White Star, colour follows section) ---- */
#page-container .gar-script,
#page-container .gar-script * {
  font-family: 'White Star', cursive !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 56px !important;
  line-height: 1.05 !important;
  color: white !important;
}

/* ---- ROLE: HERO TAGLINE (big white uppercase over the photo) ------- */
#page-container .gar-tagline,
#page-container .gar-tagline * {
  font-family: 'Ace Sans', sans-serif !important;
  color: var(--gar-white) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 42px !important;
  letter-spacing: 2px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-shadow: 0 1px 10px rgba(34,26,29,0.35);
}

/* ---- ROLE: ANNOUNCEMENT BAR ("NEW STAGE COMING SOON…") ------------- */
#page-container .gar-bar,
#page-container .gar-bar * {
  font-family: 'Ace Sans', sans-serif !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  /* font-size: 18px !important; */
  letter-spacing: 0.1em !important;
  text-align: center !important;
}

/* ---- ROLE: LEAD line (bold intro sentence) ------------------------- */
#page-container .gar-lead,
#page-container .gar-lead * {
  /* font-family: 'Ace Sans', sans-serif !important; */
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 1.4 !important;
}

/* ---- ROLE: BODY paragraph ------------------------------------------ */
#page-container .gar-body,
#page-container .gar-body * {
  /* font-family: 'Ace Sans', sans-serif !important; */
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* ---- RESPONSIVE (tablet / phone) ----------------------------------- */
@media (max-width: 980px) {
  #page-container .gar-tagline, #page-container .gar-tagline * { font-size: 30px !important; }
  #page-container .gar-script,  #page-container .gar-script *  { font-size: 40px !important; }
  #page-container .gar-bar,     #page-container .gar-bar *     { font-size: 15px !important; }
}
@media (max-width: 767px) {
  #page-container .gar-tagline, #page-container .gar-tagline * { font-size: 22px !important; }
  #page-container .gar-script,  #page-container .gar-script *  { font-size: 30px !important; }
  #page-container .gar-eyebrow, #page-container .gar-eyebrow * { font-size: 13px !important; }
}

#page-container .gar-btn--titlecase {
  /* text-transform: none !important; */
  letter-spacing: 0.02em !important;
}

#page-container .gar-btn--gold.button-default, #page-container .et_pb_button.gar-btn--gold.button-default {
      font-family: Open Sans, Arial, sans-serif !important;
}