/* ============================================
   Bloom Sol Co — Shared Styles
   ============================================ */

:root {
  --navy: #3D332F;
  --cream: #FAF6F2;
  --sage: #9C8B85;
  --sand: #E4D5CC;
  --gold: #C9A09A;
  --gold-deep: #A07A6E;

  --navy-soft: #4A3F3A;
  --cream-deep: #F2E9E2;

  --font-display: "Cormorant Garamond", serif;
  --font-body: "Inter", sans-serif;

  --max-width: 1180px;
  --radius: 4px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--cream);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.18;
  margin: 0 0 0.5em;
  letter-spacing: 0.015em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }

p { margin: 0 0 1em; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 0.85em;
  display: block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 14px 32px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn-primary {
  background: var(--navy);
  color: var(--cream);
}
.btn-primary:hover { background: var(--gold); color: var(--navy); transform: translateY(-1px); }

.btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}
.btn-secondary:hover { background: var(--navy); color: var(--cream); }

.btn-on-navy {
  background: transparent;
  color: var(--gold-deep);
  border: 1px solid var(--gold-deep);
}
.btn-on-navy:hover { background: var(--gold-deep); color: var(--cream); }

.btn-ghost-on-navy {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--sand);
}
.btn-ghost-on-navy:hover { border-color: var(--navy); background: rgba(61,51,47,0.05); }

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid rgba(30,43,58,0.08);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  transform-origin: center;
  animation: logoSettle 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes logoSettle {
  0%   { transform: rotate(-26deg); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: rotate(0deg); opacity: 1; }
}

.logo:hover .logo-mark {
  animation: none;
  transform: rotate(8deg);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .logo-mark { animation: none; }
  .logo:hover .logo-mark { transform: none; transition: none; }
}

.nav-links {
  display: flex;
  gap: 36px;
  font-size: 0.92rem;
  font-weight: 500;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  position: relative;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active,
.nav-links li.current-menu-item > a,
.nav-links li.current_page_item > a {
  color: var(--gold);
}

.nav-links a.active::after,
.nav-links li.current-menu-item > a::after,
.nav-links li.current_page_item > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--gold);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-deep) 100%);
  color: var(--navy);
  padding: 96px 0 110px;
  position: relative;
  overflow: hidden;
}

.hero .container { position: relative; z-index: 1; }

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.hero-content h1 { color: var(--navy); margin-bottom: 0.4em; }

.hero-content .subhead {
  font-size: 1.15rem;
  color: var(--sage);
  max-width: 520px;
  margin-bottom: 2em;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.compass {
  width: 100%;
  max-width: 380px;
  opacity: 0.95;
}

/* Sub-page hero — now light, matches homepage hero rather than a dark band */
.page-hero {
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-deep) 100%);
  color: var(--navy);
  padding: 80px 0 70px;
}
.page-hero h1 { color: var(--navy); }
.page-hero .subhead {
  font-size: 1.1rem;
  color: var(--sage);
  max-width: 680px;
}
.page-hero .eyebrow { color: var(--gold-deep); letter-spacing: 0.28em; }

/* ---------- Sections ---------- */
section { padding: 88px 0; }

.section-cream { background: var(--cream); }
.section-deep { background: var(--cream-deep); }
/* Formerly a dark navy CTA band — now a warm light band with a border
   to still feel like a distinct "final CTA" moment without going dark. */
.section-navy {
  background: var(--cream-deep);
  color: var(--navy);
  border-top: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
}
.section-navy h2, .section-navy h3 { color: var(--navy); }
.section-navy .eyebrow { color: var(--gold-deep); letter-spacing: 0.28em; }

.section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-head.left {
  text-align: left;
  margin: 0 0 56px;
}

/* ---------- Credibility bar ---------- */
.credibility-bar {
  background: var(--cream-deep);
  border-top: 1px solid rgba(30,43,58,0.08);
  border-bottom: 1px solid rgba(30,43,58,0.08);
  padding: 36px 0;
}

.credibility-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px 48px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.credibility-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.credibility-list .check {
  color: var(--gold-deep);
  font-size: 1.1rem;
}

/* ---------- Grids ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }

/* ---------- Cards ---------- */
.card {
  background: var(--cream);
  border: 1px solid rgba(30,43,58,0.08);
  border-radius: var(--radius);
  padding: 36px 32px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(30,43,58,0.08);
  border-color: var(--gold);
}

.card .icon {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  color: var(--gold-deep);
}

.card h3 { margin-bottom: 0.4em; }
.card p { color: rgba(30,43,58,0.75); margin-bottom: 0; font-size: 0.96rem; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--navy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}

/* ---------- Problem section ---------- */
.problem {
  text-align: center;
}
.problem .lede {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  max-width: 760px;
  margin: 0 auto 1em;
  font-weight: 600;
}
.problem .lede strong { color: var(--gold-deep); }
.problem .body-copy {
  max-width: 640px;
  margin: 0 auto 2em;
  color: rgba(30,43,58,0.75);
}

/* ---------- Wayfinder Method (steps) ---------- */
.method-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
}

.method-step {
  flex: 1;
  min-width: 200px;
  text-align: center;
  padding: 0 20px;
  position: relative;
}

.method-step .step-label {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--gold-deep);
  margin-bottom: 0.3em;
}

.method-step p {
  color: var(--sage);
  font-size: 0.94rem;
}

.method-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-deep);
  font-size: 1.4rem;
  padding: 0 8px;
}

/* ---------- Industries ---------- */
.industry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.industry-tag {
  border: 1px solid var(--sage);
  border-radius: 999px;
  padding: 10px 26px;
  font-size: 0.92rem;
  font-weight: 500;
  background: var(--cream);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.industry-tag:hover {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}

/* ---------- Featured / lead magnet ---------- */
/* Formerly a dark navy block — now light cream-deep with a border, still
   visually distinct from surrounding sections without going dark. */
.featured-box {
  background: var(--cream-deep);
  color: var(--navy);
  border: 1px solid var(--sand);
  border-radius: 8px;
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.featured-box h2, .featured-box h3 { color: var(--navy); }

.featured-box .quote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--gold-deep);
  font-style: italic;
  margin-bottom: 1em;
}

.featured-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6em;
}
.featured-list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(61,51,47,0.1);
  font-size: 0.96rem;
}
.featured-list li:last-child { border-bottom: none; }
.featured-list li::before {
  content: "→";
  color: var(--gold-deep);
  margin-right: 12px;
}

/* ---------- Founder section ---------- */
.founder {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

.founder-photo {
  aspect-ratio: 4/5;
  border-radius: 6px;
  background: var(--sand);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder-photo svg { width: 60%; opacity: 0.5; }

.founder blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-style: italic;
  border-left: 3px solid var(--gold-deep);
  padding-left: 24px;
  margin: 1.4em 0;
  color: var(--navy-soft);
}

.founder ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 1.4em 0;
  font-weight: 500;
  font-size: 0.94rem;
}
.founder ul li::before {
  content: "✓";
  color: var(--gold-deep);
  margin-right: 8px;
  font-weight: 700;
}

/* ---------- Case study cards ---------- */
.case-card {
  border: 1px solid rgba(30,43,58,0.08);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream);
}

.case-card-top {
  background: var(--sand);
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-card-top svg { width: 50px; height: 50px; color: var(--navy); opacity: 0.55; }

.case-card-body { padding: 28px; }

.case-card-body .tag {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  margin-bottom: 0.6em;
}

.case-card-body dl {
  margin: 1em 0 0;
}
.case-card-body dt {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 0.9em;
}
.case-card-body dd {
  margin: 0.25em 0 0;
  font-size: 0.95rem;
}

/* ---------- Testimonials ---------- */
.testimonial {
  background: var(--cream-deep);
  border-radius: var(--radius);
  padding: 40px;
  position: relative;
}
.testimonial::before {
  content: "“";
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--gold-deep);
  position: absolute;
  top: 8px;
  left: 24px;
  line-height: 1;
  opacity: 0.5;
}
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
  margin: 0.4em 0 1.2em;
  position: relative;
  z-index: 1;
}
.testimonial .author {
  font-weight: 700;
  font-size: 0.9rem;
}
.testimonial .role {
  color: var(--sage);
  font-size: 0.85rem;
}

/* ---------- Final CTA ---------- */
.final-cta {
  text-align: center;
}
.final-cta h2 { max-width: 680px; margin: 0 auto 0.6em; }
.final-cta p { max-width: 580px; margin: 0 auto 1.6em; color: var(--sage); }
.final-cta .btn-row { justify-content: center; }

/* ---------- Forms ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: flex-start;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-grid .full { grid-column: 1 / -1; }

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

input, select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 13px 14px;
  border: 1px solid rgba(30,43,58,0.18);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--navy);
  transition: border-color 0.2s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
}

textarea { resize: vertical; min-height: 120px; }

.contact-side h3 { margin-bottom: 0.5em; }
.contact-side .info-block { margin-bottom: 28px; }
.contact-side .info-block .label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid rgba(30,43,58,0.1);
  padding: 26px 0;
}
.faq-item h3 { margin-bottom: 0.5em; font-size: 1.15rem; }
.faq-item p { color: rgba(30,43,58,0.75); margin-bottom: 0; }

/* ---------- Resource list ---------- */
.resource-item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid rgba(30,43,58,0.08);
}
.resource-item .res-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-deep);
}
.resource-item .res-icon svg { width: 26px; height: 26px; }
.resource-item h3 { margin-bottom: 0.25em; }
.resource-item p { margin: 0; color: rgba(30,43,58,0.7); font-size: 0.92rem; }
.resource-item .tag {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
}

/* ---------- Footer ---------- */
/* Formerly dark navy — now a warm deep-cream band, visually distinct from
   the page body without breaking the all-light palette. */
.site-footer {
  background: var(--cream-deep);
  color: var(--navy);
  padding: 64px 0 32px;
  border-top: 1px solid var(--sand);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-grid .logo { color: var(--navy); margin-bottom: 14px; }
.footer-grid p { color: rgba(61,51,47,0.65); font-size: 0.92rem; max-width: 320px; }

.footer-col h4 {
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 700;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.92rem;
}

.footer-col a { color: rgba(61,51,47,0.75); transition: color 0.2s ease; }
.footer-col a:hover { color: var(--gold-deep); }

.footer-bottom {
  border-top: 1px solid rgba(61,51,47,0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(61,51,47,0.55);
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--sage);
  margin-bottom: 1.2em;
}
.breadcrumb a { color: var(--sage); border-bottom: 1px solid rgba(61,51,47,0.25); }
.breadcrumb a:hover { color: var(--gold-deep); }

/* ---------- Misc utility ---------- */
.text-center { text-align: center; }
.mt-lg { margin-top: 48px; }
.divider {
  height: 1px;
  background: rgba(30,43,58,0.08);
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { order: -1; max-width: 280px; margin: 0 auto; }
  .founder { grid-template-columns: 1fr; }
  .founder-photo { max-width: 320px; margin: 0 auto; }
  .featured-box { grid-template-columns: 1fr; padding: 40px 28px; }
  .contact-layout { grid-template-columns: 1fr; }
  .method-flow { flex-direction: column; }
  .method-arrow { transform: rotate(90deg); padding: 8px 0; }
}

@media (max-width: 760px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: block; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .credibility-list { gap: 20px 28px; justify-content: flex-start; }
  section { padding: 64px 0; }
  .hero { padding: 64px 0 80px; }
  .resource-item { grid-template-columns: 56px 1fr; }
  .resource-item .tag { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Mobile nav (open state) ---------- */
.nav-links.open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--cream);
  padding: 24px;
  gap: 20px;
  border-bottom: 1px solid rgba(30,43,58,0.08);
}

/* ---------- WordPress core compatibility ---------- */
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px;
  overflow: hidden;
}
.wp-block-image img { border-radius: var(--radius); }

/* ============================================
   WPConsent cookie banner — brand match
   ============================================
   WPConsent renders its banner inside a Shadow DOM, which isolates it
   from normal theme CSS by design (for compatibility across all themes).
   It exposes its own official CSS custom properties for exactly this
   kind of customization — see:
   https://wpconsent.com/docs/how-to-customize-the-wpconsent-banner-with-css-variables/
   Regular class/element selectors targeting the banner's internals will
   NOT work; only these documented variables (and ::part() selectors,
   if finer control is ever needed) can reach inside it.
*/
#wpconsent-container {
  /* Layout */
  --wpconsent-min-width: 480px;
  --wpconsent-padding: 24px 28px;
  --wpconsent-border-radius: 4px;
  --wpconsent-shadow: 0 14px 30px rgba(61, 51, 47, 0.16);

  /* Colors — matched to the Bloom Sol Co palette */
  --wpconsent-background: #FAF6F2;   /* cream */
  --wpconsent-text: #3D332F;         /* navy / warm charcoal */
  --wpconsent-border: #E4D5CC;       /* sand */
  --wpconsent-outline-color: rgba(61, 51, 47, 0.12);

  /* Buttons */
  --wpconsent-accept-bg: #3D332F;        /* navy, matches .btn-primary */
  --wpconsent-accept-color: #FAF6F2;     /* cream */
  --wpconsent-cancel-bg: transparent;
  --wpconsent-cancel-color: #3D332F;
  --wpconsent-preferences-bg: transparent;
  --wpconsent-preferences-color: #A07A6E; /* gold-deep / dusty rose */

  /* Typography */
  --wpconsent-font-size: 15px;
  --wpconsent-title-size: 19px;
  --wpconsent-line-height: 1.6;

  /* Interactive */
  --wpconsent-close-color: #9C8B85;  /* sage */

  /* Accessibility — kept high-contrast even though it departs from the
     gold/rose accent, since focus indicators need to stay clearly visible */
  --wpconsent-focus-outline-color: #A07A6E;
  --wpconsent-focus-outline-width: 2px;
  --wpconsent-focus-outline-offset: 2px;
}

/* Floating "reopen preferences" button — these are global variables and
   must be set on :root, not #wpconsent-container, per WPConsent's docs. */
:root {
  --wpconsent-floating-button-bg: #3D332F;
  --wpconsent-floating-button-color: #FAF6F2;
}

/* Optional finer-grained styling via ::part() selectors, for elements not
   covered by the variables above. Title font is set here so the banner
   heading (if any) picks up the site's display serif rather than its
   default system font. */
#wpconsent-container::part(title) {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
}