/*
Theme Name: The Little Green Door (Kadence Child)
Theme URI: https://thelittlegreendoor.example/
Description: Child theme for The Little Green Door counseling practice. Overrides palette, typography, and layout on top of Kadence.
Author: Willowcrest Digital
Author URI: https://willowcrestdigital.example/
Template: kadence
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: lgd
*/

/* -------------------------------------------------------------------------
   Brand tokens — placeholder palette. Override in theme.json too.
   ------------------------------------------------------------------------- */
:root {
  --lgd-green-deep: #3E6A4B;
  --lgd-green-moss: #6E8F72;
  --lgd-cream:      #F6F1E7;
  --lgd-ink:        #223026;
  --lgd-bark:       #8A6A4F;
  --lgd-sage:       #D3DCC6;
  --lgd-alert:      #A8443C;
}

body {
  background-color: var(--lgd-cream);
  color: var(--lgd-ink);
}

/* Headings lean serif; body stays sans. Kadence's global styles will pick
   up the theme.json entries — this is a belt-and-suspenders fallback. */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title {
  color: var(--lgd-ink);
  font-family: "Fraunces", "Source Serif 4", "Crimson Pro", Georgia, serif;
  letter-spacing: -0.01em;
}

a {
  color: var(--lgd-green-deep);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--lgd-bark);
}

/* Primary button — pill shape, uppercase letter-spaced, mirrors the Gottman hero CTA */
.wp-block-button.is-style-lgd-primary .wp-block-button__link,
.wp-block-button__link.lgd-btn-primary {
  background-color: var(--lgd-green-deep);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 0.95em 2em;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color .15s ease, transform .15s ease;
}
.wp-block-button.is-style-lgd-primary .wp-block-button__link:hover,
.wp-block-button__link.lgd-btn-primary:hover {
  background-color: #315a3d;
  color: #FFFFFF;
}

/* Secondary (outline) button — same pill silhouette */
.wp-block-button.is-style-lgd-secondary .wp-block-button__link,
.wp-block-button__link.lgd-btn-secondary {
  background-color: transparent;
  color: var(--lgd-green-deep);
  border: 1.5px solid var(--lgd-green-deep);
  border-radius: 999px;
  padding: 0.85em 1.9em;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wp-block-button.is-style-lgd-secondary .wp-block-button__link:hover {
  background-color: var(--lgd-sage);
}

/* PHI notice callout */
.lgd-phi-notice {
  background-color: var(--lgd-sage);
  border-left: 4px solid var(--lgd-alert);
  padding: 1rem 1.25rem;
  border-radius: 6px;
  color: var(--lgd-ink);
  font-size: 0.95rem;
}
.lgd-phi-notice strong { color: var(--lgd-alert); }

/* Soft card */
.lgd-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Section rhythm */
.lgd-section-sage  { background-color: var(--lgd-sage);  }
.lgd-section-cream { background-color: var(--lgd-cream); }
.lgd-section-moss  { background-color: var(--lgd-green-moss); color: var(--lgd-cream); }
.lgd-section-moss a { color: var(--lgd-cream); text-decoration: underline; }

/* Prose width */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3 { max-width: 65ch; }

/* Forms: minimal styling */
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field textarea,
.frm-fluent-form input[type="text"],
.frm-fluent-form input[type="email"],
.frm-fluent-form textarea {
  border-radius: 8px;
  border: 1px solid #CFD4C6;
  padding: 0.6em 0.8em;
}

/* -------------------------------------------------------------------------
   Display type — larger, tighter serif headings to match the Gottman mock.
   ------------------------------------------------------------------------- */
h1, .has-hero-font-size {
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
h2 { font-weight: 500; letter-spacing: -0.01em; }

/* Kicker / eyebrow text — appears above main headings in hero and feature rows.
   Small caps, wide letter-spacing, deep green. */
.lgd-eyebrow {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lgd-green-deep);
  margin-bottom: 1rem;
}

/* Ornamental horizontal divider with a centered leaf/heart glyph. */
.lgd-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0.8rem 0 1.6rem;
  color: var(--lgd-bark);
}
.lgd-divider::before,
.lgd-divider::after {
  content: "";
  height: 1px;
  width: min(120px, 22vw);
  background: currentColor;
  opacity: 0.55;
}
.lgd-divider > span {
  font-size: 0.9rem;
  line-height: 1;
  display: inline-block;
  transform: translateY(-1px);
}

/* Numbered circular icon bubble — pairs with the 5-column feature pattern. */
.lgd-icon-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--lgd-sage);
  color: var(--lgd-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: 1rem;
  border: 1px solid rgba(62,106,75,0.18);
}
.lgd-icon-circle svg { width: 28px; height: 28px; stroke-width: 1.6; }

.lgd-feature-title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lgd-ink);
  margin: 0 0 0.6rem;
  line-height: 1.3;
}
.lgd-feature-copy {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--lgd-ink);
  opacity: 0.85;
}

/* Thin vertical divider between feature columns (faint bark color). */
.lgd-feature-row .wp-block-column + .wp-block-column {
  border-left: 1px solid rgba(138,106,79,0.25);
  padding-left: 1.25rem;
}
@media (max-width: 781px) {
  .lgd-feature-row .wp-block-column + .wp-block-column {
    border-left: none; padding-left: 0; border-top: 1px solid rgba(138,106,79,0.25); padding-top: 1.25rem;
  }
}

/* Full-bleed deep-green tagline banner (footer of the Gottman hero strip). */
.lgd-banner-green {
  background: var(--lgd-green-deep);
  color: var(--lgd-cream);
  padding: 1.1rem 1.5rem;
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lgd-banner-green::before,
.lgd-banner-green::after {
  content: "❦"; /* ornamental leaf/heart */
  opacity: 0.7;
  margin: 0 0.9em;
  font-size: 0.95rem;
}

/* Pull-quote frame on the right side of the Gottman hero. */
.lgd-quote-frame {
  background: #FFFFFF;
  border: 1px solid rgba(138,106,79,0.35);
  padding: 1.4rem 1.5rem 1.3rem;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  max-width: 240px;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  color: var(--lgd-ink);
}
.lgd-quote-frame::before { content: "“"; font-size: 2rem; color: var(--lgd-bark); line-height: 0; vertical-align: -0.2em; margin-right: 0.2em; }
.lgd-quote-frame .lgd-quote-attribution {
  display: block;
  margin-top: 0.8rem;
  font-style: normal;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lgd-bark);
}

/* -------------------------------------------------------------------------
   Palette overrides — Kadence's default theme sets --global-palette-highlight
   to #2B6CB0 (dark blue) and --global-palette4 to #2D3748 (near-black). Those
   show up on nav hover states and current-menu-item submenu backgrounds and
   look completely off-brand. Rewrite them to LGD tokens so every place
   Kadence uses them stays in palette.
   ------------------------------------------------------------------------- */
html body {
  --global-palette-highlight: var(--lgd-green-deep) !important;
  --global-palette-highlight-alt: #315a3d !important;
  --global-palette-highlight-alt2: var(--lgd-sage) !important;
  /* palette1/2 are the blue accents — remap to green so any stray usage is on-brand. */
  --global-palette1: var(--lgd-green-deep) !important;
  --global-palette2: #315a3d !important;
  /* palette3/4/5 drive dark "card" backgrounds (submenu hover, etc.) — replace
     with ink / sage / bark so they read as part of our palette, not a dark chrome. */
  --global-palette3: var(--lgd-ink) !important;
  --global-palette4: var(--lgd-sage) !important;
  --global-palette5: var(--lgd-bark) !important;
  /* palette7/8/9 are the near-white tones Kadence uses for text inversion on
     dark surfaces. With our palette remap, dark surfaces are gone — keep them
     as cream-spectrum so any residual usage lands on-palette. */
  --global-palette7: #ECE6D6 !important;
  --global-palette8: #F6F1E7 !important;
  --global-palette9: #FFFFFF !important;
}

/* -------------------------------------------------------------------------
   Site header — cream background + serif site title to match the reference.
   ------------------------------------------------------------------------- */
.site-main-header-inner-wrap,
.site-header-row-container-inner,
.kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
  background: var(--lgd-cream) !important;
}
#masthead,
.site-branding .site-title,
.site-branding a.brand,
.site-branding .site-title-wrap {
  color: var(--lgd-ink);
}
.site-branding .site-title,
.site-branding p.site-title,
.site-branding div.site-title,
.site-branding .site-title a,
.site-branding p.site-title a,
.site-branding div.site-title a {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.5rem !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  color: var(--lgd-green-deep) !important;
}
/* Tree-with-door icon to the left of the serif title.
   Flex layout on the .brand link keeps icon and text on the same baseline.
   Icon dimensions in rem so they stay independent of the title's font-size. */
.site-branding a.brand {
  display: inline-flex !important;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.site-branding a.brand::before {
  content: "";
  display: inline-block;
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  background: url('assets/images/lgd-tree-icon.png') center/contain no-repeat;
}
.mobile-site-branding a.brand::before {
  width: 3.15rem;
  height: 3.15rem;
}
.site-branding .site-description {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lgd-bark);
}

/* -------------------------------------------------------------------------
   Navigation — letter-spaced uppercase links; right-side "Book a Consultation"
   menu item rendered as a pill. Targets both Kadence's primary nav and the
   mobile drawer.
   ------------------------------------------------------------------------- */
.header-navigation .menu > .menu-item > a,
.main-navigation .menu > .menu-item > a,
#primary-menu .menu-item > a {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lgd-ink);
}
.header-navigation .menu > .menu-item > a:hover,
.header-navigation .menu > .menu-item > a:focus,
.header-navigation .menu > .menu-item.current-menu-item > a,
.header-navigation .menu > .menu-item.current-menu-ancestor > a,
.main-navigation .menu > .menu-item > a:hover,
.main-navigation .menu > .menu-item > a:focus,
.main-navigation .menu > .menu-item.current-menu-item > a,
.main-navigation .menu > .menu-item.current-menu-ancestor > a {
  color: var(--lgd-green-deep) !important;
  background: transparent !important;
}
/* Pill CTA menu item — added by adding class "lgd-cta-pill" in the menu editor. */
.menu-item.lgd-cta-pill > a,
.menu-item.lgd-cta-pill > a:visited {
  background: var(--lgd-green-deep);
  color: #FFFFFF !important;
  border-radius: 999px;
  padding: 0.7em 1.4em !important;
  letter-spacing: 0.14em;
}
.menu-item.lgd-cta-pill > a:hover { background: #315a3d; }

/* Dropdown submenus inherit the uppercase letter-spaced treatment so the
   Services / Getting Started children match the parent nav visually.
   Selectors mirror Kadence's own customizer output so specificity matches. */
.header-navigation .header-menu-container ul ul li.menu-item > a,
.header-navigation .header-menu-container ul ul.submenu li.menu-item > a,
.main-navigation .main-menu-container ul ul li.menu-item > a {
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--lgd-ink) !important;
}
.header-navigation .header-menu-container ul ul li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul li.menu-item > a:focus,
.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a,
.header-navigation .header-menu-container ul ul li.menu-item.current-menu-ancestor > a,
.main-navigation .main-menu-container ul ul li.menu-item > a:hover,
.main-navigation .main-menu-container ul ul li.menu-item > a:focus,
.main-navigation .main-menu-container ul ul li.menu-item.current-menu-item > a,
.main-navigation .main-menu-container ul ul li.menu-item.current-menu-ancestor > a {
  color: var(--lgd-green-deep) !important;
  background: var(--lgd-sage) !important;
}
/* Dropdown panel itself — cream background + soft shadow + thin bark border. */
.header-navigation .header-menu-container ul ul,
.header-navigation .header-menu-container ul ul.submenu,
.main-navigation .main-menu-container ul ul {
  background: var(--lgd-cream) !important;
  border: 1px solid rgba(138,106,79,0.2) !important;
  box-shadow: 0 8px 24px rgba(34,48,38,0.08) !important;
  padding: 0.35rem 0;
  min-width: 14rem;
}
/* Remove Kadence's hairline border between submenu items (it's white-on-cream
   noise with our palette). */
.header-navigation .header-menu-container ul ul li.menu-item {
  border-bottom: 1px solid rgba(138,106,79,0.10) !important;
}
.header-navigation .header-menu-container ul ul li.menu-item:last-child {
  border-bottom: none !important;
}

/* Mobile drawer nav — same uppercase letter-spaced treatment. */
.mobile-navigation ul li > a,
.mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap > a,
.drawer-inner .mobile-navigation .menu .menu-item > a {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Full-bleed image page hero — any page starting with .lgd-page-hero
   gets an edge-to-edge banner. Uses the 50vw trick so the image breaks out
   of Kadence's .content-container regardless of theme alignfull support. */
.lgd-page-hero {
  margin: 0 calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  padding: 0 !important;
}
.lgd-page-hero img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  max-width: none;
}

/* Pages whose hero image already bakes in the page title — suppress the
   Kadence-rendered title banner so the H1 isn't duplicated visually and
   strip the white card frame so the image sits flush against the header. */
.page-slug-gottman-method .entry-hero,
.page-slug-emdr-trauma-therapy .entry-hero,
.page-slug-couples-counseling .entry-hero,
.page-slug-what-to-expect .entry-hero,
.page-slug-fees-insurance .entry-hero,
.page-slug-intake-appointments .entry-hero {
  display: none !important;
}
/* Kill every padding/margin that Kadence inserts between the header and
   the first block so the hero image is truly the first thing below the nav.
   Critical one: .content-area has margin-top: 5rem at desktop (3rem tablet,
   2rem mobile) from Kadence's customizer output. */
.page-slug-gottman-method .content-area,
.page-slug-gottman-method .content-container,
.page-slug-gottman-method .content-wrap,
.page-slug-gottman-method .entry-content-wrap,
.page-slug-gottman-method .entry-content,
.page-slug-gottman-method .entry.content-bg,
.page-slug-emdr-trauma-therapy .content-area,
.page-slug-emdr-trauma-therapy .content-container,
.page-slug-emdr-trauma-therapy .content-wrap,
.page-slug-emdr-trauma-therapy .entry-content-wrap,
.page-slug-emdr-trauma-therapy .entry-content,
.page-slug-emdr-trauma-therapy .entry.content-bg,
.page-slug-couples-counseling .content-area,
.page-slug-couples-counseling .content-container,
.page-slug-couples-counseling .content-wrap,
.page-slug-couples-counseling .entry-content-wrap,
.page-slug-couples-counseling .entry-content,
.page-slug-couples-counseling .entry.content-bg,
.page-slug-what-to-expect .content-area,
.page-slug-what-to-expect .content-container,
.page-slug-what-to-expect .content-wrap,
.page-slug-what-to-expect .entry-content-wrap,
.page-slug-what-to-expect .entry-content,
.page-slug-what-to-expect .entry.content-bg,
.page-slug-fees-insurance .content-area,
.page-slug-fees-insurance .content-container,
.page-slug-fees-insurance .content-wrap,
.page-slug-fees-insurance .entry-content-wrap,
.page-slug-fees-insurance .entry-content,
.page-slug-fees-insurance .entry.content-bg,
.page-slug-intake-appointments .content-area,
.page-slug-intake-appointments .content-container,
.page-slug-intake-appointments .content-wrap,
.page-slug-intake-appointments .entry-content-wrap,
.page-slug-intake-appointments .entry-content,
.page-slug-intake-appointments .entry.content-bg {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Also ensure the first block inside the article has no default top margin. */
.page-slug-gottman-method .entry-content > *:first-child,
.page-slug-emdr-trauma-therapy .entry-content > *:first-child,
.page-slug-couples-counseling .entry-content > *:first-child,
.page-slug-what-to-expect .entry-content > *:first-child,
.page-slug-fees-insurance .entry-content > *:first-child,
.page-slug-intake-appointments .entry-content > *:first-child {
  margin-top: 0 !important;
}
/* Drop Kadence's white "card" background on these pages so the hero and the
   cream body flow as one visual. */
.page-slug-gottman-method .entry.content-bg,
.page-slug-emdr-trauma-therapy .entry.content-bg,
.page-slug-couples-counseling .entry.content-bg,
.page-slug-what-to-expect .entry.content-bg,
.page-slug-fees-insurance .entry.content-bg,
.page-slug-intake-appointments .entry.content-bg {
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Also widen the .content-container so the viewport-wide hero doesn't sit
   inside a narrower column. */
.page-slug-gottman-method .content-container.site-container,
.page-slug-emdr-trauma-therapy .content-container.site-container,
.page-slug-couples-counseling .content-container.site-container,
.page-slug-what-to-expect .content-container.site-container,
.page-slug-fees-insurance .content-container.site-container,
.page-slug-intake-appointments .content-container.site-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Motion reduction respect */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}