/* ============================================================
   Inclusive Nutrition Counseling — site styles
   Built on top of the Zensical / Material base theme.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Nunito:wght@300;400;500;600;700&display=swap");

/* ---------- Palette ---------- */
:root {
  --inc-teal:        #2c7873;
  --inc-teal-dark:   #1f5754;
  --inc-teal-soft:   #6fb3b8;
  --inc-orange:      #e88a3c;
  --inc-orange-soft: #f4b988;
  --inc-cream:       #fbf7f1;
  --inc-cream-warm:  #f6ecdc;
  --inc-sand:        #efe5d3;
  --inc-ink:         #2a2a2a;
  --inc-ink-soft:    #5a5a5a;

  /* Override Material variables */
  --md-primary-fg-color:        var(--inc-teal);
  --md-primary-fg-color--light: var(--inc-teal-soft);
  --md-primary-fg-color--dark:  var(--inc-teal-dark);
  --md-accent-fg-color:         var(--inc-orange);
  --md-typeset-a-color:         var(--inc-teal);
  --md-default-bg-color:        #ffffff;
  --md-text-font:               "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-code-font:               "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- Typography ---------- */
body {
  font-family: var(--md-text-font);
  color: var(--inc-ink);
}

.md-typeset {
  font-size: .82rem;
  line-height: 1.75;
  color: var(--inc-ink);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--inc-teal-dark);
  line-height: 1.18;
}

.md-typeset h1 {
  font-size: 2.6rem;
  font-weight: 500;
  margin: 2rem 0 1.25rem;
}

.md-typeset h2 {
  font-size: 1.7rem;
  margin-top: 2.5rem;
  border-bottom: 1px solid var(--inc-sand);
  padding-bottom: .35rem;
}

.md-typeset h3 {
  font-size: 1.2rem;
  margin-top: 1.8rem;
}

.md-typeset p,
.md-typeset li {
  max-width: 42rem;
}

/* ---------- Top announce bar (phone-forward) ---------- */
.md-banner {
  background: var(--inc-teal-dark);
  color: #fff;
  font-family: var(--md-text-font);
}

.md-banner__inner {
  margin: 0 auto;
  padding: .55rem 1rem;
}

.inc-announce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .8rem;
  font-size: .85rem;
  color: rgba(255,255,255,.95);
}

.inc-announce__brand {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: .01em;
}

.inc-announce__sep { opacity: .45; }

.md-banner a,
.inc-announce a,
.inc-announce__phone,
.inc-announce__email,
.inc-announce__cta {
  color: #fff;
  text-decoration: none !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: none;
}

.inc-announce__phone {
  font-size: 1rem;
  color: #ffe2c4;
}

.inc-announce__phone:hover,
.inc-announce__email:hover { color: var(--inc-orange-soft); }

.inc-announce__cta {
  margin-left: .25rem;
  background: var(--inc-orange);
  color: #fff;
  padding: .25rem .8rem;
  border-radius: 999px;
  font-size: .8rem;
  transition: background .15s ease;
}

.inc-announce__cta:hover { background: #d57828; color: #fff; }

@media (max-width: 600px) {
  .inc-announce { font-size: .8rem; gap: .25rem .55rem; }
  .inc-announce__brand { display: none; }
  .inc-announce__sep:first-of-type { display: none; }
}

/* ---------- Header / Nav (logo + tabs in ONE row) ---------- */
.md-header {
  background: #ffffff;
  color: var(--inc-teal-dark);
  box-shadow: 0 1px 0 var(--inc-sand);
}

.md-header__inner {
  min-height: 4.2rem;
  padding: .25rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.md-header__title,
.md-header__topic > .md-ellipsis {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--inc-teal-dark);
}

.md-header__button.md-logo {
  margin: 0;
  padding: 0;
  height: 4rem;
  width: 11rem;       /* fixed slot; the scaled img overflows it visually */
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  overflow: visible;
}

/* The source logo is a square PNG with lots of transparent padding
   around the contentful mark. Scale up and shift to crop the whitespace
   so the wordmark reads at a useful size. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 4rem;
  width: auto;
  max-width: none;
  color: var(--inc-orange);
  transform: scale(1.9) translateX(-8%);
  transform-origin: left center;
}

/* Hide the redundant title text — the logo already says it */
.md-header__title { display: none; }

/* Tabs, once merged into the header, are the right-hand nav of the single bar */
.md-tabs {
  display: block;
  background: transparent;
  color: var(--inc-teal-dark);
  border: none;
  box-shadow: none;
  flex: 1 1 auto;
  min-width: 0;
}

.md-tabs__list {
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

.md-tabs__link {
  color: var(--inc-teal-dark);
  opacity: .85;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
  padding: 0 .25rem;
  margin: 0 1rem;
  border-bottom: 2px solid transparent;
  text-decoration: none !important;   /* kill anchor underline (the doubled line) */
  transition: color .15s ease, border-color .15s ease;
}
.md-tabs__link::after { content: none !important; }   /* kill any pseudo-underline */

.md-tabs__link:hover {
  opacity: 1;
  color: var(--inc-orange);
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link--active {
  opacity: 1;
  color: var(--inc-teal-dark);
}

@media (max-width: 720px) {
  .md-tabs { display: none; }   /* hamburger drawer handles nav on mobile */
  .md-header__inner { min-height: 3.6rem; }
  .md-header__button.md-logo { width: 9rem; }
  .md-header__button.md-logo img,
  .md-header__button.md-logo svg { height: 3.4rem; transform: scale(1.8) translateX(-8%); }
}

/* Hide search — a 6-page site doesn't need it, and it crowds the header row */
.md-header__option,
.md-search,
[data-md-toggle="search"],
label[for="__search"] {
  display: none !important;
}

.md-search__form {
  background: var(--inc-cream);
}

/* ---------- Content container ---------- */
.md-main__inner { margin-top: 0; }

.md-content {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

.md-content__inner { padding-top: 1rem; }

/* Hide the edit-this-page pencil — this isn't a docs site */
.md-content__button { display: none; }

/* ---------- Hero ---------- */
.inc-hero {
  position: relative;
  margin: 0 calc(50% - 50vw) 2.5rem;     /* break out of content container */
  padding: 5.5rem 1.5rem 5rem;
  background:
    linear-gradient(135deg, rgba(44,120,115,.78), rgba(31,87,84,.66)),
    url("../assets/img/fe56e6_b44438ac1e314781b9684355f1aa0684~mv2.jpg") center/cover no-repeat;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.inc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.18) 100%);
  pointer-events: none;
}

.inc-hero__inner {
  position: relative;
  max-width: 44rem;
  margin: 0 auto;
}

.inc-hero h1,
.md-typeset .inc-hero h1 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 500;
  color: #fff;
  margin: 0 0 1rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  border: none;
  padding: 0;
}

.inc-hero p,
.md-typeset .inc-hero p {
  color: rgba(255,255,255,.95);
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 36rem;
  margin: 0 auto 1.75rem;
}

.inc-hero .cta-button {
  background: var(--inc-orange);
  color: #fff !important;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.45);
}

.inc-hero .cta-button:hover {
  background: #d57828;
}

/* ---------- Buttons ---------- */
.md-typeset .cta-button,
.md-typeset a.cta-button {
  display: inline-block;
  background: var(--inc-teal);
  color: #fff !important;
  padding: .8rem 1.7rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 14px -6px rgba(44,120,115,.55);
}

.md-typeset .cta-button:hover {
  background: var(--inc-teal-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(44,120,115,.65);
}

.md-typeset .cta-button.is-ghost {
  background: transparent;
  color: var(--inc-teal-dark) !important;
  border: 2px solid var(--inc-teal);
  box-shadow: none;
}

.md-typeset .cta-button.is-ghost:hover {
  background: var(--inc-teal);
  color: #fff !important;
}

/* ---------- Section intro / lede ---------- */
.inc-lede,
.md-typeset .inc-lede {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--inc-ink-soft);
  max-width: 38rem;
  margin: 0 auto 2rem;
  text-align: center;
}

/* ---------- Cards ---------- */
.inc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
}

.inc-card {
  background: #ffffff;
  border: 1px solid var(--inc-sand);
  border-radius: 1rem;
  padding: 1.4rem 1.4rem 1.2rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.inc-card:hover {
  transform: translateY(-2px);
  border-color: var(--inc-teal-soft);
  box-shadow: 0 14px 30px -18px rgba(44,120,115,.35);
}

.inc-card h3,
.md-typeset .inc-card h3 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  color: var(--inc-teal-dark);
  border: none;
  padding: 0;
}

.inc-card p,
.md-typeset .inc-card p {
  margin: 0;
  color: var(--inc-ink-soft);
  font-size: .9rem;
  line-height: 1.55;
}

/* Markdown wraps a standalone <span> in <p>; tighten that case */
.md-typeset .inc-card > p:first-child:has(> .inc-icon:only-child) {
  margin-bottom: .25rem;
}

.md-typeset .inc-contact > div > p {
  margin: 0;
}

.md-typeset .inc-contact > div > p + p { margin-top: .15rem; }

.inc-card .inc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--inc-cream-warm);
  color: var(--inc-orange);
  font-size: 1.2rem;
  margin-bottom: .75rem;
}

/* Two-column "split" with image */
.inc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin: 2.5rem 0;
}

.inc-split img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.3);
}

@media (max-width: 720px) {
  .inc-split { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- Tag list (expertise) ---------- */
.inc-tags,
.md-typeset ul.inc-tags,
.md-typeset ul.inc-tags:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .5rem;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 2.25rem;
}

.md-typeset ul.inc-tags li,
[dir=ltr] .md-typeset ul.inc-tags li,
[dir=rtl] .md-typeset ul.inc-tags li,
.inc-tags li {
  display: inline-block;
  width: auto;
  flex: 0 0 auto;
  background: var(--inc-cream-warm);
  color: var(--inc-teal-dark);
  border: 1px solid var(--inc-sand);
  border-radius: 999px;
  padding: .35rem .7rem;   /* tighter horizontally */
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  max-width: none;
  list-style: none;
  line-height: 1.3;
}

.md-typeset .inc-tags li::before { content: none; }
.md-typeset .inc-tags li::marker { content: ""; }

/* ---------- "Call out" banner ---------- */
.inc-callout {
  background: linear-gradient(135deg, var(--inc-cream) 0%, var(--inc-cream-warm) 100%);
  border-radius: 1.25rem;
  padding: 2.25rem 2rem;
  margin: 3rem 0 1.5rem;
  text-align: center;
  border: 1px solid var(--inc-sand);
}

.inc-callout h2,
.md-typeset .inc-callout h2 {
  border: none;
  margin-top: 0;
  font-size: 1.8rem;
}

.inc-callout p,
.md-typeset .inc-callout p {
  margin: 0 auto 1.25rem;
  max-width: 32rem;
  color: var(--inc-ink-soft);
}

/* ---------- Contact strip ---------- */
.inc-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.inc-contact > div {
  background: var(--inc-cream);
  border: 1px solid var(--inc-sand);
  border-radius: .8rem;
  padding: 1rem 1.1rem;
}

.inc-contact .inc-label {
  display: block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--inc-teal);
  margin-bottom: .25rem;
}

.inc-contact .inc-value {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--inc-ink);
}

/* ---------- Portrait ---------- */
.inc-portrait {
  float: right;
  width: 14rem;
  margin: .25rem 0 1rem 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 16px 36px -22px rgba(0,0,0,.4);
}

@media (max-width: 600px) {
  .inc-portrait { float: none; width: 100%; margin: 0 0 1.5rem; }
}

/* ---------- Footer ---------- */
.md-footer {
  background: var(--inc-teal-dark);
  color: rgba(255,255,255,.9);
}

.md-footer-meta {
  background: #18403e;
}

.md-footer-meta__inner,
.md-footer__inner {
  font-family: var(--md-text-font);
}

/* ---------- Misc Material fixes ---------- */

.md-search__input {
  background: var(--inc-cream);
  color: var(--inc-ink);
}

.md-typeset .inc-card ul,
.md-typeset .inc-card ol {
  margin: .25rem 0;
}

@media (max-width: 600px) {
  .md-content { padding: 0 1rem 2rem; }
  .md-typeset h1 { font-size: 2rem; }
  .md-typeset h2 { font-size: 1.4rem; }
  .inc-hero { padding-top: 4rem; padding-bottom: 3.5rem; }
}