/* Mint SEO — site shell (header + footer). Rendered via GP hook Block Elements.
   Brand: cream/ink header, deep-teal footer. All font-sizes >= 16px (house floor). */

/* ================= HEADER ================= */
.mint-header {
  position: relative; /* not sticky — header scrolls away on every page */
  z-index: 100;
  background: rgba(245, 243, 238, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.mint-header .in {
  max-width: 1300px;
  margin: 0 auto;
  padding: 15px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.mint-header .logo { text-decoration: none; display: block; }
.mint-header .logo img { height: 44px; width: auto; display: block; }
.mint-header .wordmark { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.mint-header .wordmark i { color: var(--mint); font-style: normal; }
.mint-nav { display: flex; align-items: center; gap: 30px; }
.mint-nav a {
  font-size: 16px; font-weight: 600; color: var(--ink);
  text-decoration: none; transition: color 0.2s;
}
.mint-nav a:hover { color: var(--mint); }
.mint-header .cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; font-weight: 700; font-size: 16px;
  padding: 12px 22px; border-radius: 999px; text-decoration: none;
  transition: background 0.2s, transform 0.2s; white-space: nowrap;
}
.mint-header .cta:hover { background: var(--mint-deep); color: #fff; transform: translateY(-1px); }

/* ---- Hamburger + mobile menu ---- */
.mint-burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; margin-left: auto; }
.mint-burger span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
.mint-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mint-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mint-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mint-mobile { display: none; position: fixed; left: 0; right: 0; top: 67px; bottom: 0; background: var(--page); overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 99; padding: 6px 22px 48px; }
.mint-mobile.is-open { display: block; }
.mint-mobile__inner { display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; }
.mint-mobile__h { font-size: 16px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint); margin: 22px 0 4px; }
.mint-mobile a { font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 13px 2px; border-bottom: 1px solid var(--border); }
.mint-mobile a:active { color: var(--mint); }
.mint-mobile__cta { margin-top: 24px; background: var(--ink); color: #fff !important; text-align: center; border-radius: 999px; padding: 16px !important; border-bottom: 0 !important; }
body.mint-menu-open { overflow: hidden; }

@media (max-width: 900px) {
  .mint-nav { display: none; }
  .mint-header .cta { display: none; }
  .mint-burger { display: flex; }
  .mint-header .in { padding: 13px 22px; }
}
/* Home: transparent header → white burger bars */
.home .mint-burger span { background: #fff; }

/* Homepage: transparent nav floating over the dark hero */
.home .mint-header {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 0;
}
.home .mint-header .mint-nav a { color: #fff; }
.home .mint-header .mint-nav a:hover { color: #4fd6c4; }
/* mega dropdown links sit on a white panel — keep them dark even under the home white-nav rule */
.home .mint-header .mint-nav .mint-mega__col a, .home .mint-header .mint-nav .mint-mega__web a { color: var(--ink); }
.home .mint-header .mint-nav .mint-mega__col a:hover, .home .mint-header .mint-nav .mint-mega__web a:hover { color: var(--mint-ink); }
.home .mint-header .logo img { filter: brightness(0) invert(1); }
.home .mint-header .cta { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
.home .mint-header .cta:hover { background: rgba(255,255,255,0.12); border-color: #4fd6c4; color: #fff; }

/* Free-consultation (squeeze): same transparent nav floating over the dark hero as the homepage */
.mintseo-squeeze .mint-burger span { background: #fff; }
.mintseo-squeeze .mint-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
.mintseo-squeeze .mint-header .mint-nav a { color: #fff; }
.mintseo-squeeze .mint-header .mint-nav a:hover { color: #4fd6c4; }
.mintseo-squeeze .mint-header .mint-nav .mint-mega__col a, .mintseo-squeeze .mint-header .mint-nav .mint-mega__web a { color: var(--ink); }
.mintseo-squeeze .mint-header .mint-nav .mint-mega__col a:hover, .mintseo-squeeze .mint-header .mint-nav .mint-mega__web a:hover { color: var(--mint-ink); }
.mintseo-squeeze .mint-header .logo img { filter: brightness(0) invert(1); }
.mintseo-squeeze .mint-header .cta { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
.mintseo-squeeze .mint-header .cta:hover { background: rgba(255,255,255,0.12); border-color: #4fd6c4; color: #fff; }
.mintseo-squeeze .fc-sq__in { padding-top: clamp(98px, 11vh, 132px); } /* clear the absolute header */

/* ================= FOOTER (Figma 54:2) ================= */
.mint-footer { background: #0a1f1c; color: rgba(255, 255, 255, 0.6); }
.mint-footer .in { max-width: 1312px; margin: 0 auto; padding: 84px 64px 40px; }
.mint-footer__top { display: grid; grid-template-columns: 1fr auto; gap: 60px; }
.mint-footer__logo { display: inline-block; }
.mint-footer__logo img { height: 34px; width: auto; display: block; filter: brightness(0) invert(1); }
.mint-footer .tagline { margin: 22px 0 0; max-width: 42ch; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.6); }
.mint-footer__contact { margin-top: 26px; display: flex; flex-direction: column; gap: 8px; }
.mint-footer__contact div { font-size: 16px; color: rgba(255,255,255,0.6); }
.mint-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(140px, auto)); gap: 60px; }
.mint-footer h4 { margin: 0 0 22px; font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint); }
.mint-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mint-footer a { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 16px; transition: color 0.2s; }
.mint-footer a:hover { color: var(--mint-light); }
.mint-footer__bar {
  margin-top: 48px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 16px; color: rgba(255,255,255,0.5);
}
.mint-footer__bar .legal { display: flex; gap: 30px; }
@media (max-width: 900px) {
  .mint-footer .in { padding: 56px 22px 28px; }
  .mint-footer__top { grid-template-columns: 1fr; gap: 40px; }
  .mint-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ---- Universal sticky CTA — compact floating pill (matches Figma "Sticky footer (universal)" 935:184) ---- */
.mint-stickybar { position: fixed; left: 50%; bottom: 24px; z-index: 90; display: inline-flex; align-items: center; gap: 30px; max-width: calc(100% - 32px); padding: 14px 16px 14px 30px; background: #123430; color: #fff; border-radius: 18px; box-shadow: 0 22px 44px rgba(13,33,31,0.6); transform: translate(-50%, 160%); transition: transform 0.42s cubic-bezier(0.3, 0.8, 0.3, 1); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.mint-stickybar.is-shown { transform: translate(-50%, 0); }
.mint-stickybar__msg { display: inline-flex; align-items: center; gap: 13px; flex: none; min-width: 0; }
.mint-stickybar__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint-light, #8fd6cf); flex: none; }
.mint-stickybar__t { font-size: 17px; font-weight: 800; color: #fff; white-space: nowrap; }
.mint-stickybar__acts { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.mint-stickybar__ghost { font-size: 16px; font-weight: 800; color: #fff; border: 1px solid rgba(143,214,207,0.28); background: rgba(255,255,255,0.06); padding: 12px 22px; border-radius: 12px; text-decoration: none; white-space: nowrap; transition: background 0.2s; }
.mint-stickybar__ghost:hover { background: rgba(255,255,255,0.12); }
.mint-stickybar__prim { font-size: 16px; font-weight: 800; color: #0c211e; background: var(--mint-light, #8fd6cf); padding: 12px 22px; border-radius: 12px; text-decoration: none; white-space: nowrap; transition: background 0.2s, transform 0.2s; }
.mint-stickybar__prim:hover { background: #a5e0da; transform: translateY(-1px); }
.mint-stickybar__x { flex: none; margin-left: -14px; background: transparent; border: 0; color: rgba(255,255,255,0.5); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; transition: color 0.2s; }
.mint-stickybar__x:hover { color: #fff; }
body.mint-menu-open .mint-stickybar { transform: translate(-50%, 160%); }
@media (max-width: 640px) {
  .mint-stickybar { left: 12px; right: 12px; bottom: 12px; transform: translateY(160%); flex-wrap: wrap; gap: 12px; max-width: none; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .mint-stickybar.is-shown { transform: translateY(0); }
  .mint-stickybar__t { font-size: 16px; }
  .mint-stickybar__msg { padding-right: 26px; }
  .mint-stickybar__acts { width: 100%; }
  .mint-stickybar__ghost { display: none; }
  .mint-stickybar__prim { flex: 1; text-align: center; justify-content: center; }
  .mint-stickybar__x { position: absolute; top: 12px; right: 14px; margin: 0; }
  body.mint-menu-open .mint-stickybar { transform: translateY(160%); }
}
@media (prefers-reduced-motion: reduce) { .mint-stickybar { transition: none; } }

/* ---- Desktop Services mega menu (from cap-megamenu-final) ---- */
.mint-nav__item { position: relative; }
.mint-has-mega > a { display: inline-flex; align-items: center; gap: 6px; }
.mint-car { font-size: 11px; transition: transform 0.2s; }
.mint-has-mega:hover .mint-car, .mint-has-mega.is-open .mint-car { transform: rotate(180deg); }
/* Anchor the mega panel to the header container so it spans the width like Figma (956:184). */
.mint-header .in { position: relative; }
.mint-has-mega { position: static; }
.mint-mega { position: absolute; top: calc(100% + 14px); left: 0; right: 0; margin: 0 auto; max-width: 1300px; display: flex; align-items: stretch; background: #fff; border: 1px solid #e4e2dc; border-radius: 20px; box-shadow: 0 50px 80px -40px rgba(20,20,19,0.28); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 120; }
.mint-mega::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.mint-has-mega:hover .mint-mega, .mint-has-mega.is-open .mint-mega, .mint-has-mega:focus-within .mint-mega { opacity: 1; visibility: visible; transform: translateY(0); }
/* zone 1 — Ecommerce SEO (two link columns + retainer bar) */
.mint-mega__main { flex: 1; min-width: 0; padding: 34px 30px 30px; }
.mint-mega__eyebrow { margin: 0 0 16px; font-size: 16px; font-weight: 800; color: #6b6b63; letter-spacing: 1.6px; text-transform: uppercase; }
.mint-mega__cols { display: flex; gap: 24px; }
.mint-mega__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mint-mega__col a, .mint-mega__web a { padding: 11px 10px; border-radius: 10px; color: var(--ink); font-weight: 700; font-size: 17px; line-height: 1.28; text-decoration: none; transition: background 0.15s; }
.mint-mega__col a:hover, .mint-mega__web a:hover { background: var(--mint-tint); }
.mint-mega__retainer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 20px 24px; border-radius: 16px; background: linear-gradient(to right, #1c4f4a, #08201d); text-decoration: none; }
.mint-mega__retainer-txt { display: flex; flex-direction: column; gap: 6px; }
.mint-mega__retainer-txt b { font-size: 15px; font-weight: 800; color: var(--mint-light); letter-spacing: 1.8px; text-transform: uppercase; }
.mint-mega__retainer-txt > span { font-size: 17px; font-weight: 800; color: #fff; }
.mint-mega__retainer-cta { flex: none; background: var(--mint-light); color: #141413; font-size: 15px; font-weight: 800; padding: 11px 18px; border-radius: 100px; white-space: nowrap; transition: background 0.2s; }
.mint-mega__retainer:hover .mint-mega__retainer-cta { background: #a5e0da; }
/* zone 2 — Websites & Development */
.mint-mega__web { flex: none; width: 225px; border-left: 1px solid #e4e2dc; padding: 34px 30px 30px; display: flex; flex-direction: column; gap: 4px; }
/* zone 3 — Free consultation featured card */
.mint-mega__featured { flex: none; width: 300px; padding: 24px; display: flex; }
.mint-mega__card { flex: 1; display: flex; flex-direction: column; background: linear-gradient(to right, #1c4f4a, #08201d); border-radius: 16px; padding: 30px 30px 28px; }
.mint-mega__card .k { margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--mint-light); letter-spacing: 1.6px; text-transform: uppercase; }
.mint-mega__card .h { margin: 0 0 10px; font-size: 23px; font-weight: 800; color: #fff; line-height: 1.2; }
.mint-mega__card .s { margin: 0; font-size: 15px; color: rgba(255,255,255,0.8); line-height: 1.55; }
.mint-mega__card .fb { margin-top: auto; align-self: flex-start; background: var(--mint-light); color: #141413; font-size: 16px; font-weight: 800; padding: 12px 20px; border-radius: 100px; text-decoration: none; transition: background 0.2s; }
.mint-mega__card .fb:hover { background: #a5e0da; }
@media (max-width: 900px) { .mint-mega, .mint-car { display: none; } }

/* ===== Single blog post — Figma template: dark hero banner + drop cap + TOC/CTA rail ===== */
.single-post .inside-article { max-width: 1140px; margin-inline: auto; padding: 12px 32px 80px; }
.single-post .entry-header { display: none; } /* replaced by the .bp-hero banner */
.single-post .post-image, .single-post .featured-image, .single-post .inside-article > .post-image, .single-post .entry-content > .wp-post-image { display: none; } /* featured image appears inline in body only */
/* dark hero banner */
.bp-hero { position: relative; overflow: hidden; border-radius: 22px; background: radial-gradient(120% 170% at 82% -20%, #1c5049, #0a1f1c 62%), #0a1f1c; text-align: center; padding: clamp(48px,6vw,76px) 24px; margin: 0 0 46px; }
.bp-hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(143,214,207,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(143,214,207,0.08) 1px, transparent 1px); background-size: 64px 64px; }
.bp-hero__in { position: relative; max-width: 780px; margin: 0 auto; }
.bp-hero__k { margin: 0 0 16px; font-size: 14px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-light); }
.bp-hero__h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: #fff; }
.bp-hero__by { margin: 18px 0 0; font-size: 15px; color: rgba(255,255,255,0.7); }
/* drop cap on the first paragraph */
.bp-body > p:first-of-type::first-letter { float: left; font-size: 66px; line-height: 0.8; font-weight: 800; color: var(--mint-ink); margin: 6px 12px 0 0; }
/* CTA card beneath the TOC */
.bp-cta { position: relative; overflow: hidden; margin-top: 20px; border-radius: 16px; background: radial-gradient(130% 170% at 88% -10%, #1c5049, #08201d 60%), #08201d; }
.bp-cta__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(143,214,207,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(143,214,207,0.08) 1px, transparent 1px); background-size: 44px 44px; }
.bp-cta__in { position: relative; padding: 24px 24px 26px; }
.bp-cta__h { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; color: #fff; }
.bp-cta__s { margin: 10px 0 18px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.75); }
.bp-cta__btn { display: inline-block; background: var(--mint-light); color: #07211d; font-size: 15px; font-weight: 800; padding: 11px 18px; border-radius: 10px; text-decoration: none; transition: background 0.2s; }
.bp-cta__btn:hover { background: #a5e0da; }
/* TOC links must not pick up the article's underlined link style */
.single-post .entry-content .bp-toc a { text-decoration: none; color: var(--ink); }
.single-post .entry-content .bp-toc a:hover, .single-post .entry-content .bp-toc a.is-active { color: var(--mint-ink); }
.single-post .entry-content .bp-toc .n { color: var(--mint-ink); }
.single-post .entry-content:not(:has(.bp-layout)) { max-width: 820px; }
/* 2-col reading layout: article body + sticky TOC rail */
.bp-layout { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 56px; align-items: start; }
.bp-body { min-width: 0; max-width: 760px; }
.bp-body h2 { scroll-margin-top: 100px; }
.bp-toc-col { position: sticky; top: 100px; align-self: start; }
.bp-toc { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px 22px 8px; }
.bp-toc__h { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-ink); }
.bp-toc ol { list-style: none; margin: 0; padding: 0; }
.bp-toc li { border-top: 1px solid #eef1ef; }
.bp-toc li:first-child { border-top: 0; }
.bp-toc a { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 12px 2px; text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.35; transition: color 0.15s; }
.bp-toc a:hover, .bp-toc a.is-active { color: var(--mint-ink); }
.bp-toc .n { font-size: 14px; font-weight: 800; color: var(--mint-ink); }
html { scroll-behavior: smooth; }
@media (max-width: 900px) {
  .single-post .inside-article { max-width: 820px; padding: 10px 20px 56px; }
  .single-post .site-main, .single-post .content-area, .single-post #primary, .single-post .entry-content { padding-top: 0; margin-top: 0; }
  .single-post .bp-hero { margin-top: 0; }
  .bp-layout { grid-template-columns: 1fr; gap: 24px; }
  .bp-toc-col { position: static; order: -1; }
}
.single-post .entry-header { margin-bottom: 26px; }
.single-post .entry-title { font-size: clamp(32px, 5vw, 52px); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 12px; }
.single-post .entry-meta { font-size: 15px; color: #6b706d; }
.single-post .entry-meta .byline { display: none; } /* empty author byline */
.single-post .entry-content { font-size: 18px; line-height: 1.75; }
.single-post .entry-content > * { max-width: 100%; }
.single-post .entry-content h2 { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.2; margin: 42px 0 14px; }
.single-post .entry-content h3 { font-size: 22px; margin: 30px 0 10px; }
.single-post .entry-content p { margin: 0 0 18px; }
.single-post .entry-content ul, .single-post .entry-content ol { margin: 0 0 18px; padding-left: 24px; }
.single-post .entry-content li { margin: 0 0 8px; }
.single-post .entry-content a { color: #0d7268; text-decoration: underline; text-underline-offset: 2px; }
.single-post .entry-content img { border-radius: 12px; height: auto; margin: 8px 0; }
@media (max-width: 600px) { .single-post .inside-article { padding: 36px 18px 56px; } .single-post .entry-content { font-size: 17px; } }