/*
Theme Name: biz-e-place
Theme URI: https://biz-e-place.com/
Description: Child theme for biz-e-place.com. Carries the brand design tokens from the build brief (Appendix G) so blocks, custom patterns and inline diagrams all draw from one palette.
Author: biz-e-place
Template: neve
Version: 1.0.10
Text Domain: bizeplace
*/

:root {
  /* Brand palette. Appendix G of the build brief is the source of truth. */
  --bp-navy-900: #0B1F3A;
  --bp-navy-700: #16325C;
  --bp-navy-100: #DCE3EF;
  --bp-teal-700: #115E59;
  --bp-teal-600: #0F766E;
  --bp-teal-400: #2DD4BF;
  --bp-teal-100: #CCFBF1;
  --bp-sand-50:  #F7F4EF;
  --bp-sand-100: #EDE7DD;
  --bp-white:    #FFFFFF;
  --bp-ink-900:  #1B1F24;
  --bp-ink-600:  #5B6472;
  --bp-ink-300:  #C9CED6;
  --bp-success:  #1F7A4D;
  --bp-error:    #B42318;

  /* Spacing rhythm, base unit 8px. */
  --bp-space-1: 4px;  --bp-space-2: 8px;  --bp-space-3: 12px;
  --bp-space-4: 16px; --bp-space-6: 24px; --bp-space-8: 32px;
  --bp-space-12: 48px; --bp-space-16: 64px; --bp-space-24: 96px;

  --bp-radius-card: 12px;
  --bp-radius-control: 8px;
  --bp-shadow-card: 0 2px 8px rgba(11, 31, 58, .06);
}

/* Teal-600 on sand-100 lands at 4.5:1, which is borderline, so running text
   always uses teal-700. See the contrast table in Appendix G. */
.bp-prose a { color: var(--bp-teal-700); text-underline-offset: 2px; }
.bp-prose a:hover { color: var(--bp-navy-900); }

.bp-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bp-teal-700);
}

.bp-band { padding-block: var(--bp-space-24); }
.bp-band--dark { background: var(--bp-navy-900); color: var(--bp-white); }
.bp-band--dark .bp-eyebrow { color: var(--bp-teal-400); }
.bp-band--alt { background: var(--bp-sand-100); }

.bp-card {
  background: var(--bp-white);
  border-radius: var(--bp-radius-card);
  padding: var(--bp-space-8);
  box-shadow: var(--bp-shadow-card);
}
.bp-band--alt .bp-card { border: 1px solid var(--bp-ink-300); box-shadow: none; }

/* Focus ring must stay visible on sand, white and navy alike. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bp-teal-400);
  outline-offset: 2px;
}

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

@media (max-width: 960px) { .bp-band { padding-block: var(--bp-space-16); } }
@media (max-width: 600px) { .bp-band { padding-block: var(--bp-space-12); } }

/* ---------------------------------------------------------------------------
   Band layout.
   Each band is an alignfull group with a constrained inner width from
   theme.json (720px prose, 1240px wide). The gutter lives here so it applies
   once, at every width.
   --------------------------------------------------------------------------- */
body { background: var(--bp-sand-50); }

.bp-band { padding-inline: var(--bp-space-4); }
.bp-band--dark { color: var(--bp-white); }
.bp-band--dark .wp-block-heading,
.bp-band--dark p { color: var(--bp-white); }
.bp-band--dark a { color: var(--bp-teal-400); }

.bp-band .wp-block-heading { color: var(--bp-navy-900); }
.bp-band--dark .wp-block-heading { color: var(--bp-white); }

.bp-lead { font-size: 20px; line-height: 1.6; color: var(--bp-ink-900); }
.bp-band--dark .bp-lead { color: var(--bp-navy-100); }

.bp-band li { margin-bottom: var(--bp-space-3); }
.bp-band li::marker { color: var(--bp-teal-600); }
.bp-band--dark li::marker { color: var(--bp-teal-400); }

/* Buttons. Teal-600 fill with white text is 5.5:1, which passes AA. */
.bp-band .wp-block-button__link {
  background-color: var(--bp-teal-600);
  color: var(--bp-white);
  border-radius: var(--bp-radius-control);
  padding: 14px 24px;
  font-weight: 600;
  transition: background-color .15s;
}
.bp-band .wp-block-button__link:hover { background-color: var(--bp-teal-700); }

.bp-band .is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--bp-navy-900);
  border: 2px solid var(--bp-navy-900);
}
.bp-band .is-style-outline .wp-block-button__link:hover {
  background-color: var(--bp-navy-900);
  color: var(--bp-white);
}
.bp-band--dark .is-style-outline .wp-block-button__link {
  color: var(--bp-white);
  border-color: var(--bp-teal-400);
}
.bp-band--dark .is-style-outline .wp-block-button__link:hover {
  background-color: var(--bp-teal-400);
  color: var(--bp-navy-900);
}
/* On navy, the solid button flips to teal-400 with navy text: 8.9:1. */
.bp-band--dark .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--bp-teal-400);
  color: var(--bp-navy-900);
}
.bp-band--dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--bp-teal-100);
}

/* Every page carries its own H1 inside the hero band, so Neve's page title
   would be a second H1 on the same document. Hide it rather than ship two. */
.page .nv-page-title-wrap { display: none; }

/* Neve wraps the content in a .container that is narrower than the viewport
   and offset from the left edge. Pulling each band out by the difference
   between half the container and half the viewport makes it full bleed AND
   keeps its inner content centered on the page, not on the container. */
.page .alignfull,
.single-page-container .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: auto;
}
/* The negative margins above are measured against the viewport, which includes
   the scrollbar on some browsers; clip the couple of pixels rather than show a
   horizontal scrollbar on every page. */
body { overflow-x: hidden; }

/* Hero: copy left, image right. Core columns stack below 782px on their own. */
.bp-hero-cols { gap: var(--bp-space-12); align-items: center; }
.bp-hero-img { margin: 0; }
.bp-hero-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bp-radius-card);
  box-shadow: var(--bp-shadow-card);
}
@media (max-width: 781px) {
  .bp-hero-cols { gap: var(--bp-space-8); }
}

/* Standing affiliate disclosure, last thing on every page. */
.bp-disclosure-bar {
  background: var(--bp-navy-900);
  color: var(--bp-navy-100);
  padding: var(--bp-space-4) var(--bp-space-4);
  border-top: 1px solid var(--bp-navy-700);
}
.bp-disclosure-bar p {
  max-width: 1240px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--bp-navy-100);
}
.bp-disclosure-bar a { color: var(--bp-teal-400); text-underline-offset: 2px; }
.bp-disclosure-bar a:hover { color: var(--bp-teal-100); }

/* Brand logos on the tools page: kept small and level, never badge-like. */
.bp-tool-logo { margin: 0 0 var(--bp-space-4); }
.bp-tool-logo img { height: auto; }
.bp-band small { color: var(--bp-ink-600); font-size: 14px; line-height: 1.5; display: block; }

/* "Powered by Hostinger" badge, sitting with its own disclosure. */
.bp-disclosure-bar { text-align: center; }
.bp-footer-badge {
  display: inline-block;
  margin-bottom: var(--bp-space-3);
  opacity: .9;
  transition: opacity .15s;
}
.bp-footer-badge:hover { opacity: 1; }
.bp-footer-badge img { display: block; width: 180px; height: auto; }

/* Footer navigation, printed with the disclosure because Neve will not. */
.bp-footer-nav {
  list-style: none;
  margin: 0 0 var(--bp-space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bp-space-2) var(--bp-space-6);
}
.bp-footer-nav a {
  color: var(--bp-navy-100);
  font-size: 15px;
  text-decoration: none;
}
.bp-footer-nav a:hover { color: var(--bp-teal-400); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Two-column content sections (first used on /products/biz-ai-dmarc/).
   A section head spans the wide width, then two core columns, which stack
   below 782px on their own.
   --------------------------------------------------------------------------- */
.bp-section-head { margin-bottom: var(--bp-space-8); }
.bp-section-head .bp-eyebrow { margin-bottom: var(--bp-space-2); }
.bp-section-head .wp-block-heading { margin-top: 0; }

.bp-cols { gap: var(--bp-space-12); }
.bp-cols--center { align-items: center; }
.bp-cols--cards { gap: var(--bp-space-6); }
.bp-cols--cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-6);
}
.bp-cols > .wp-block-column > *:first-child { margin-top: 0; }

.bp-card > *:first-child { margin-top: 0; }
.bp-card > *:last-child { margin-bottom: 0; }
.bp-card h3.wp-block-heading { font-size: 20px; margin-bottom: var(--bp-space-3); }
.bp-cols .bp-card + .bp-card,
.bp-section-img + .bp-card { margin-top: var(--bp-space-6); }
.bp-cols--cards .bp-card + .bp-card { margin-top: 0; }

/* Feature cards carry a teal rule on top so a grid of them reads as a set. */
.bp-feature { border-top: 4px solid var(--bp-teal-600); }
.bp-band--alt .bp-feature { border-top: 4px solid var(--bp-teal-600); }

/* Accent card: navy with light text, used once per section at most. */
.bp-card--accent,
.bp-band--alt .bp-card--accent {
  background: var(--bp-navy-900);
  border: 0;
  color: var(--bp-navy-100);
}
.bp-band .bp-card--accent .wp-block-heading { color: var(--bp-white); }
.bp-card--accent p, .bp-card--accent li { color: var(--bp-navy-100); }
.bp-card--accent strong { color: var(--bp-white); }
.bp-card--accent li::marker { color: var(--bp-teal-400); }

.bp-section-img { margin: 0 0 var(--bp-space-6); }
.bp-section-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bp-radius-card);
  box-shadow: var(--bp-shadow-card);
}

/* Code: DNS records in a dark block, inline tags as a light chip. */
.bp-band .wp-block-code {
  background: var(--bp-navy-900);
  color: var(--bp-teal-100);
  border: 0;
  border-radius: var(--bp-radius-control);
  padding: var(--bp-space-4);
  font-size: 14px;
  line-height: 1.6;
  overflow-x: auto;
}
.bp-band .wp-block-code code { white-space: pre-wrap; overflow-wrap: anywhere; color: inherit; background: none; padding: 0; }
.bp-band :not(pre) > code {
  background: var(--bp-navy-100);
  color: var(--bp-navy-900);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .9em;
}
.bp-card--accent :not(pre) > code { background: var(--bp-navy-700); color: var(--bp-teal-100); }

.bp-band ol li::marker { font-weight: 700; }
.bp-cols--faq h3.wp-block-heading { font-size: 18px; margin: var(--bp-space-6) 0 var(--bp-space-2); }
.bp-cols--faq .wp-block-column > h3.wp-block-heading:first-child { margin-top: 0; }
/* Links on the navy accent card: teal-400 on navy-900 is 8.9:1. */
.bp-card--accent a,
.bp-card--accent a strong { color: var(--bp-teal-400); text-decoration: underline; text-underline-offset: 2px; }
.bp-card--accent a:hover,
.bp-card--accent a:hover strong { color: var(--bp-teal-100); }