/*
Theme Name: Divine Modern
Theme URI: https://divinehairsalons.com
Template: kadence
Author: Divine OS
Description: Modern Divine brand kit for Divine Hair Salon — a Kadence child theme. Warm cream + plum/gold palette, Playfair Display + Manrope. Overrides Kadence defaults for the approved look.
Version: 1.0.3
*/

:root{
  --divine-plum:#5A2A4A;
  --divine-plum-dark:#45203A;
  --divine-gold:#C8A24B;
  --divine-cream:#FAF6F0;
  --divine-surface:#FFFDF9;
  --divine-charcoal:#2B2622;
  --divine-muted:#7A6E63;
  --divine-border:#E8DDCE;
}

/* ---- Type: Playfair headings, Manrope body ---- */
body,.content-container,button,input,select,textarea{ font-family:"Manrope",system-ui,-apple-system,sans-serif; }
h1,h2,h3,h4,h5,h6,.wp-block-heading,.entry-title,.site-title,.kadence-blocks-heading{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif !important;
  font-weight:600; letter-spacing:-.01em; color:var(--divine-plum-dark);
}
body{ background:var(--divine-cream); color:var(--divine-charcoal); line-height:1.7; }

/* ---- Brand buttons (override Kadence blue palette1) ---- */
.wp-block-button .wp-block-button__link,
a.wp-block-button__link.wp-element-button{
  background-color:var(--divine-plum) !important;
  color:var(--divine-cream) !important;
  border:1px solid var(--divine-plum) !important;
  border-radius:8px !important;
  padding:.72em 1.6em !important;
  font-weight:500 !important;
}
.wp-block-button .wp-block-button__link:hover{
  background-color:var(--divine-plum-dark) !important; border-color:var(--divine-plum-dark) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent !important; color:var(--divine-plum) !important; border:1px solid var(--divine-plum) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--divine-plum) !important; color:var(--divine-cream) !important;
}
a{ color:var(--divine-plum); }

/* ---- Un-box the content (kill the floating white box → clean cream page) ---- */
.content-style-boxed .content-container.site-container,
.content-container.site-container{ background:transparent !important; box-shadow:none !important; border:none !important; }
.site,#wrapper,.wp-site-blocks{ background:var(--divine-cream); }

/* ---- Page title banner: hide on Home; tidy (cream + Playfair) elsewhere ---- */
.home .page-hero-section{ display:none !important; }
.page-hero-section{ background:var(--divine-surface) !important; border-bottom:1px solid var(--divine-border); padding:2.25rem 0 !important; }
.page-hero-section .entry-title{ color:var(--divine-plum-dark) !important; }

/* ---- Section rhythm + readable measure ---- */
.entry-content>.wp-block-group.alignfull{ padding-top:3.75rem; padding-bottom:3.75rem; }
.entry-content .is-layout-constrained>:where(:not(.alignfull):not(.alignwide)){ max-width:760px; }
.entry-content>.wp-block-group+.wp-block-group{ margin-top:0; }

/* Hero (first section): centered + airy */
.entry-content>.wp-block-group:first-child{ text-align:center; padding-top:4.5rem; padding-bottom:3rem; background:var(--divine-cream) !important; }
.entry-content>.wp-block-group:first-child .wp-block-buttons{ justify-content:center; }
.entry-content>.wp-block-group:first-child h1{ font-size:clamp(2.4rem,5vw,3.4rem); line-height:1.1; margin:.25em 0 .35em; }

/* Buttons row spacing */
.wp-block-buttons{ gap:.75rem; }

/* ---- Service cards: even height, padded, soft hover ---- */
.wp-block-columns{ gap:1.25rem; margin-bottom:1.25rem; align-items:stretch; }
.divine-card{
  background:#ffffff; border:1px solid var(--divine-border); border-radius:14px;
  padding:1.6rem 1.5rem; height:100%; transition:transform .15s ease, box-shadow .15s ease;
}
.divine-card:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(90,42,74,.08); }
.divine-card h3{ margin:0 0 .35rem; }

/* ---- Kicker, quotes, lists ---- */
.divine-kicker{ color:var(--divine-gold) !important; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; font-weight:500; margin-bottom:.5rem; }
.divine-quote{ font-style:italic; color:var(--divine-plum-dark); font-size:1.15rem; }
.wp-block-list.is-style-none{ list-style:none; padding-left:0; }
.wp-block-list li{ margin:.35rem 0; }

/* ---- CONSISTENCY: one uniform cream surface across every page ---- */
/* Neutralize the patchy near-white section bands (the plum reviews band stays). Kills the stray white strip. */
.entry-content .wp-block-group.has-surface-background-color{ background-color:transparent !important; }
/* Transparent content containers so the cream page shows through identically on every page */
.content-container.site-container,.entry-content,.entry-content-wrap,.entry-content-single,.hero-container{ background:transparent !important; box-shadow:none !important; }
/* Uniform vertical rhythm for every full-width section, site-wide */
.entry-content>.wp-block-group.alignfull{ padding-top:3.5rem !important; padding-bottom:3.5rem !important; padding-left:1.5rem; padding-right:1.5rem; }
.entry-content>.wp-block-group.alignfull:first-child{ padding-top:4rem !important; }
/* Inner-page content gets the same comfortable top/bottom breathing room as the homepage */
.page-hero-section+.content-container .entry-content,.single-content{ padding-top:.5rem; }
.entry-content>:where(:not(.wp-block-group)):first-child{ margin-top:1rem; }
/* Inner pages: same readable container as the homepage sections (homepage keeps full-width bands) */
body:not(.home) .entry-content{ max-width:840px; margin-left:auto; margin-right:auto; padding:1.25rem 1.5rem 2.5rem; }
body:not(.home) .entry-content .wp-block-columns,
body:not(.home) .entry-content .wp-block-gallery{ max-width:none; }

/* Centered, bullet-free highlight list (the "why" section) */
.wp-block-list.is-style-none{ list-style:none !important; padding-left:0 !important; text-align:center; }
.wp-block-list.is-style-none li{ list-style:none !important; margin:.4rem 0; }

/* ---- Fluent Forms: on-brand ---- */
.fluentform{ max-width:600px; margin:0 auto; }
.fluentform .ff-el-input--label label{ font-weight:500; color:var(--divine-charcoal); }
.fluentform input[type=text],.fluentform input[type=email],.fluentform input[type=tel],
.fluentform textarea,.fluentform select{
  border:1px solid var(--divine-border) !important; border-radius:8px !important; background:#fff !important; padding:.6em .8em !important;
}
.fluentform .ff-btn-submit,.fluentform button[type=submit]{
  background:var(--divine-plum) !important; color:var(--divine-cream) !important; border:none !important;
  border-radius:8px !important; font-weight:500 !important; padding:.72em 1.8em !important;
}
.fluentform .ff-btn-submit:hover,.fluentform button[type=submit]:hover{ background:var(--divine-plum-dark) !important; }

/* Footer: warm it to match */
.site-footer,.site-footer-row{ background:var(--divine-plum-dark) !important; }
.site-footer .footer-widget,.site-footer a,.site-footer p{ color:#EAD9E3 !important; }

/* Inner-page title header → cream (not Kadence blue-grey), tight to the content */
.page-hero-section,.page-hero-section .entry-hero-container-inner,.entry-hero-container{ background:var(--divine-cream) !important; border-bottom:none !important; }
.page-hero-section{ padding:2.5rem 0 0.5rem !important; }
/* Close the oversized inner-page title → content gap (Kadence vertical padding + hero inner) */
.entry-hero-container-inner{ padding-top:1rem !important; padding-bottom:0.25rem !important; min-height:0 !important; }
.entry-hero .entry-header.page-title,.page-hero-section .entry-header{ min-height:0 !important; }
.content-vertical-padding-show .content-container.site-container{ padding-top:0.5rem !important; }
body:not(.home) .entry-content>:first-child{ margin-top:0.5rem !important; }

/* Header logo: a small, soft-cornered emblem beside the wordmark (the mark is a dark square) */
.site-branding img.custom-logo,.site-header-item img.custom-logo,img.custom-logo{ max-height:62px !important; width:auto !important; height:auto !important; border-radius:10px; }
.site-branding{ gap:.65rem; }
.site-title,.site-branding .site-title a{ line-height:1.1; }

/* ---- Mobile: stop horizontal overflow + fit the hero headline on small screens ---- */
html,body{ max-width:100%; overflow-x:hidden; }
.alignfull{ max-width:100vw; }
.entry-content>.wp-block-group:first-child h1{ font-size:clamp(2rem,7vw,3.4rem) !important; }
@media (max-width:782px){
  .alignfull,.alignwide{ margin-left:0 !important; margin-right:0 !important; width:100% !important; max-width:100% !important; }
  .wp-block-columns{ gap:1rem; }
  .divine-card{ padding:1.25rem; }
  .entry-content>.wp-block-group.alignfull{ padding-left:1.15rem !important; padding-right:1.15rem !important; }
}