/* --- SERVICE CARDS: EQUAL HEIGHT STYLING --- */
/* This section ensures that the left and right sides of the service cards 
   always match in length on desktop. */

/* 1. Makes the parent container a 'flex' box so children can stretch */
.equal-height-cards {
    display: flex;
    align-items: stretch;
}

/* 2. Forces the individual columns to also use flex behavior */
.equal-height-cards > .wp-block-column {
    display: flex;
}

/* 3. Forces the inner Group blocks (the colored cards) to grow and fill 
   the full vertical height of the column. */
.equal-height-cards > .wp-block-column > .wp-block-group {
    flex-grow: 1;
    height: 100%;
}

/* --- END OF SERVICE CARD STYLING --- */
.sticky-header-top { z-index: 9999 !important; }
/* ==========================================================================
   Lily Brannon Hair — Twenty Twenty-Four Re-skin
   ------------------------------------------------------
   Paste this entire file into:
     WordPress Admin → Appearance → Customize → Additional CSS
     (or Site Editor → Styles → Additional CSS, depending on your WP version)

   Targets standard Gutenberg / TT4 block classes. !important is used
   selectively to override the theme's default theme.json palette.
   ========================================================================== */


/* ----------- 1. Brand tokens ----------- */
:root {
  --lbh-cream:      #F6EFE7;
  --lbh-porcelain:  #FBF7F2;
  --lbh-ivory:      #FFFDF9;
  --lbh-espresso:   #3A241B;
  --lbh-cocoa:      #6B4A3A;
  --lbh-caramel:    #B68A63;
  --lbh-champagne:  #D9B98A;
  --lbh-blush:      #E8D4C3;
  --lbh-taupe:      #C8B9A9;
  --lbh-ink-12:     rgba(58,36,27,.12);
  --lbh-ink-20:     rgba(58,36,27,.20);

  --lbh-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --lbh-font-body:    'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --lbh-ease: cubic-bezier(.2,.6,.2,1);
  --lbh-dur:  240ms;
}


/* ----------- 2. Base canvas + typography ----------- */
html, body {
  background-color: var(--lbh-cream) !important;
}
body {
  color: var(--lbh-espresso) !important;
  font-family: var(--lbh-font-body) !important;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}
::selection { background: var(--lbh-champagne); color: var(--lbh-espresso); }

/* Headings — display serif */
h1, h2, h3, h4,
.wp-block-heading,
.wp-block-post-title,
.wp-block-post-title a,
.wp-block-site-title,
.wp-block-site-title a,
.wp-block-query-title {
  font-family: var(--lbh-font-display) !important;
  font-weight: 400 !important;
  color: var(--lbh-espresso) !important;
  letter-spacing: -0.01em;
  text-wrap: balance;
  line-height: 1.1;
}

h1, .wp-block-post-title, .wp-block-query-title {
  font-size: clamp(40px, 5.2vw, 64px) !important;
  line-height: 1.05 !important;
}
h2 { font-size: clamp(30px, 3.6vw, 44px) !important; line-height: 1.12 !important; }
h3 { font-size: clamp(24px, 2.4vw, 30px) !important; line-height: 1.2 !important; }
h4 { font-size: 22px !important; line-height: 1.25 !important; }

/* Italic display headings are a brand signature — apply to the largest hero
   heading via a utility class, OR globally to .wp-block-cover headings. */
.wp-block-cover h1,
.wp-block-cover h2,
.has-display-italic {
  font-style: italic !important;
}

p, .wp-block-paragraph { color: var(--lbh-espresso); }
strong, b { font-weight: 600; }

/* Links */
a {
  color: var(--lbh-espresso);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--lbh-dur) var(--lbh-ease),
              text-decoration-color var(--lbh-dur) var(--lbh-ease);
}
a:hover { color: var(--lbh-caramel); text-decoration-color: var(--lbh-caramel); }

/* Editorial rule */
hr, .wp-block-separator {
  border: 0 !important;
  border-top: 1px solid var(--lbh-ink-20) !important;
  height: 0 !important;
  margin: 64px 0 !important;
  max-width: 100% !important;
  opacity: 1 !important;
}


/* ----------- 3. Map theme.json palette slugs ----------- */
/* Standard TT4 palette slugs: base, contrast, accent, accent-2 ... 
   We remap them so any "Base" picker in the editor uses LBH cream, etc. */
.has-base-color                       { color: var(--lbh-cream) !important; }
.has-base-background-color            { background-color: var(--lbh-cream) !important; }
.has-contrast-color                   { color: var(--lbh-espresso) !important; }
.has-contrast-background-color        { background-color: var(--lbh-espresso) !important; }
.has-contrast-2-color                 { color: var(--lbh-cocoa) !important; }
.has-contrast-2-background-color      { background-color: var(--lbh-cocoa) !important; }
.has-contrast-3-color                 { color: var(--lbh-cocoa) !important; }
.has-contrast-3-background-color      { background-color: var(--lbh-cocoa) !important; }
.has-accent-color                     { color: var(--lbh-caramel) !important; }
.has-accent-background-color          { background-color: var(--lbh-caramel) !important; }
.has-accent-2-color                   { color: var(--lbh-champagne) !important; }
.has-accent-2-background-color        { background-color: var(--lbh-champagne) !important; }
.has-accent-3-color                   { color: var(--lbh-blush) !important; }
.has-accent-3-background-color        { background-color: var(--lbh-blush) !important; }
.has-accent-4-color                   { color: var(--lbh-porcelain) !important; }
.has-accent-4-background-color        { background-color: var(--lbh-porcelain) !important; }
.has-accent-5-color                   { color: var(--lbh-blush) !important; }
.has-accent-5-background-color        { background-color: var(--lbh-blush) !important; }

/* Common WP "white"/"black" presets */
.has-white-color { color: var(--lbh-cream) !important; }
.has-white-background-color { background-color: var(--lbh-cream) !important; }
.has-black-color { color: var(--lbh-espresso) !important; }
.has-black-background-color { background-color: var(--lbh-espresso) !important; }


/* ----------- 4. Site header / navigation ----------- */
.wp-block-template-part[data-type="wp_template_part"][data-slug*="header"],
.wp-site-blocks > header,
header.wp-block-template-part {
  background: rgba(246,239,231,.82) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lbh-ink-12);
}

/* Logo / site title */
.wp-block-site-title,
.wp-block-site-title a {
  font-family: var(--lbh-font-display) !important;
  font-style: italic;
  font-size: 28px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

/* Top-level nav links — uppercase tracked */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation a {
  font-family: var(--lbh-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--lbh-espresso) !important;
  text-decoration: none !important;
  padding: 8px 0;
}
.wp-block-navigation a:hover { color: var(--lbh-caramel) !important; }

/* Dropdown submenu */
.wp-block-navigation .wp-block-navigation__submenu-container {
  background: var(--lbh-porcelain) !important;
  border: 1px solid var(--lbh-ink-12) !important;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(58,36,27,.06), 0 20px 48px rgba(58,36,27,.10);
  padding: 8px 0;
  min-width: 200px;
}


/* ----------- 5. Buttons (Gutenberg button block) ----------- */
.wp-block-button .wp-block-button__link {
  font-family: var(--lbh-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  background-color: var(--lbh-espresso) !important;
  color: var(--lbh-cream) !important;
  border: 1px solid var(--lbh-espresso) !important;
  border-radius: 3px !important;
  padding: 16px 28px !important;
  min-height: 48px;
  text-decoration: none !important;
  transition: background-color var(--lbh-dur) var(--lbh-ease),
              color var(--lbh-dur) var(--lbh-ease),
              transform 120ms var(--lbh-ease);
}
.wp-block-button .wp-block-button__link:hover {
  background-color: #271610 !important;
  color: var(--lbh-cream) !important;
}
.wp-block-button .wp-block-button__link:active { transform: scale(0.98); }

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--lbh-espresso) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--lbh-espresso) !important;
  color: var(--lbh-cream) !important;
}


/* ----------- 6. Cover blocks (hero sections) ----------- */
.wp-block-cover {
  border-radius: 0 !important;
  min-height: 520px;
}
.wp-block-cover .wp-block-cover__inner-container {
  padding: 32px;
}
.wp-block-cover h1,
.wp-block-cover h2 {
  color: var(--lbh-cream) !important;
}
/* Subtle dark overlay so warm photos read well */
.wp-block-cover::before {
  background: linear-gradient(180deg, rgba(58,36,27,0) 40%, rgba(58,36,27,.35)) !important;
}


/* ----------- 7. Media & Text, columns, groups ----------- */
.wp-block-media-text { gap: 56px; align-items: center; }
.wp-block-media-text .wp-block-media-text__media img {
  border-radius: 10px;
}

/* Signature arched-top imagery — opt-in by adding "is-style-arch" to image/cover */
.wp-block-image.is-style-arch img,
.wp-block-cover.is-style-arch,
.is-style-arch > img {
  border-radius: 999px 999px 16px 16px !important;
  overflow: hidden;
}

/* Default images: soft rounding */
.wp-block-image img { border-radius: 10px; }

/* Columns + groups: comfortable spacing */
.wp-block-columns { gap: 40px; }
.wp-block-group { padding: 0; }


/* ----------- 8. Cards / Group surfaces (use class "is-style-card") ----------- */
.wp-block-group.is-style-card,
.wp-block-column.is-style-card {
  background: var(--lbh-porcelain) !important;
  border: 1px solid var(--lbh-ink-12);
  border-radius: 10px;
  padding: 32px !important;
  box-shadow: 0 1px 2px rgba(58,36,27,.04), 0 8px 24px rgba(58,36,27,.06);
}


/* ----------- 9. Forms (Contact 7, WPForms, Gravity, native search) ----------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="url"], textarea, select,
.wp-block-search__input {
  background: var(--lbh-ivory) !important;
  border: 1px solid var(--lbh-ink-12) !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  font-family: var(--lbh-font-body) !important;
  font-size: 15px !important;
  color: var(--lbh-espresso) !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus, .wp-block-search__input:focus {
  outline: 2px solid var(--lbh-caramel) !important;
  outline-offset: 2px;
  border-color: transparent !important;
}
::placeholder { color: rgba(58,36,27,.4); }

/* Search submit */
.wp-block-search__button,
button[type="submit"], input[type="submit"] {
  background-color: var(--lbh-espresso) !important;
  color: var(--lbh-cream) !important;
  border: 0 !important;
  border-radius: 3px !important;
  padding: 12px 22px !important;
  font-family: var(--lbh-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background-color var(--lbh-dur) var(--lbh-ease);
}
button[type="submit"]:hover, input[type="submit"]:hover,
.wp-block-search__button:hover {
  background-color: #271610 !important;
}


/* ----------- 10. Quotes, pullquotes, testimonials ----------- */
.wp-block-quote,
.wp-block-pullquote {
  border-left: 0 !important;
  background: transparent !important;
  padding: 32px 0 !important;
  text-align: center;
}
.wp-block-quote p,
.wp-block-pullquote p,
blockquote p {
  font-family: var(--lbh-font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  line-height: 1.35 !important;
  color: var(--lbh-espresso) !important;
  text-wrap: balance;
}
.wp-block-quote cite,
.wp-block-pullquote cite,
blockquote cite {
  font-style: normal;
  font-family: var(--lbh-font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--lbh-cocoa) !important;
  margin-top: 16px;
  display: block;
}


/* ----------- 11. WooCommerce (cart icon, shop pages, mini-cart) ----------- */
.woocommerce-store-notice,
.wc-block-cart, .wc-block-checkout,
.wc-block-mini-cart__drawer {
  font-family: var(--lbh-font-body) !important;
  color: var(--lbh-espresso) !important;
}
.woocommerce-Price-amount, .price { font-variant-numeric: tabular-nums; }
.wc-block-mini-cart__button { color: var(--lbh-espresso) !important; }


/* ----------- 12. Footer ----------- */
footer.wp-block-template-part,
.wp-block-template-part[data-slug*="footer"] {
  background: var(--lbh-porcelain) !important;
  color: var(--lbh-espresso);
  border-top: 1px solid var(--lbh-ink-12);
  padding: 64px 32px 24px !important;
}
footer.wp-block-template-part a {
  color: var(--lbh-espresso);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
footer.wp-block-template-part a:hover {
  color: var(--lbh-caramel);
  border-bottom-color: var(--lbh-caramel);
}


/* ----------- 13. Utility classes you can hand-add in the editor ----------- */
.has-eyebrow {
  font-family: var(--lbh-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--lbh-cocoa) !important;
  font-style: normal !important;
}
.has-link-arrow::after { content: ' →'; }


/* ----------- 14. Mobile tweaks ----------- */
@media (max-width: 781px) {
  .wp-block-cover { min-height: 420px; }
  .wp-block-columns { gap: 24px; }
  .wp-block-media-text { gap: 28px; }
}