/* ============================================================
   PLANET SOCIAL MARKETING - "The gap I close" section fix
   ------------------------------------------------------------
   Paste this into WordPress:
   Appearance -> Customize -> Additional CSS  (then Publish)

   Additional CSS loads after the theme and after any page's own
   pasted <style>, so these rules win and the dark section renders
   correctly no matter what else is on the page.
   ============================================================ */

/* Force the dark background back onto the section and let it span full width.
   Targets the section whether it sits on the front page, inside a page's
   .entry-content, or inside the full-width template. */
.position,
.block.position,
.entry-content .position,
.page-fullwidth .position {
  background-color: #0E1A14 !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.82) !important;
  max-width: none !important;
  width: auto !important;
}

/* Eyebrow label (THE GAP I CLOSE) - keep it teal/green */
.position .eyebrow,
.entry-content .position .eyebrow {
  color: #1F9D57 !important;
}

/* Main heading - white */
.position h2,
.position .sec-head h2,
.entry-content .position h2,
.entry-content .position .sec-head h2 {
  color: #ffffff !important;
}

/* Intro paragraph under the heading - light */
.position p,
.position .sec-head p,
.entry-content .position p,
.entry-content .position .sec-head p {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* The three cards: faint translucent fill, mint hairline border */
.position .pos-card,
.entry-content .position .pos-card {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(131, 252, 181, 0.18) !important;
  border-radius: 20px !important;
}

/* Card number (01 / 02 / 03) - mint accent */
.position .pos-card .n,
.entry-content .position .pos-card .n {
  color: #83fcb5 !important;
}

/* Card heading - white */
.position .pos-card h3,
.entry-content .position .pos-card h3 {
  color: #ffffff !important;
}

/* Card body text - light */
.position .pos-card p,
.entry-content .position .pos-card p {
  color: rgba(255, 255, 255, 0.66) !important;
}

/* ============================================================
   BREVO SIGNUP FORM — Planet Social Marketing theme styling
   Targets the plugin's sib-* classes + the psm-signup wrapper.
   Paste into Appearance > Customize > Additional CSS now;
   I will fold this into the theme stylesheet in v2.8.2.
   Uses the theme's CSS variables (--ink, --teal, --amber, etc.)
   with hardcoded fallbacks in case variables are unavailable.
============================================================ */

.psm-signup {
  background: #fff;
  border: 1px solid var(--line, #DCE4DA);
  border-radius: 20px;
  padding: 36px 32px;
  max-width: 560px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(14, 26, 20, 0.06);
}

/* teal accent rail across the top, matching the site's info cards */
.psm-signup::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--teal, #1F9D57);
}

.psm-signup-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-deep, #16713F);
  margin: 0 0 8px;
}

.psm-signup-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  color: var(--ink, #0E1A14);
  margin: 0 0 8px;
}

.psm-signup-lead {
  font-size: 14.5px;
  color: var(--slate, #3D4A41);
  margin: 0 0 22px;
}

/* two-up name row on desktop, stacked on mobile */
.psm-signup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  .psm-signup-row { grid-template-columns: 1fr; }
}

.psm-field { margin: 0 0 14px; }

.psm-field label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft, #1E3328);
  margin-bottom: 6px;
}

/* the inputs: pill-shaped, matching the capsule language */
.psm-signup input[type="text"],
.psm-signup input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  color: var(--ink, #0E1A14);
  background: var(--paper, #FAFBF9);
  border: 1.5px solid var(--line, #DCE4DA);
  border-radius: 999px;
  padding: 12px 18px;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.psm-signup input[type="text"]::placeholder,
.psm-signup input[type="email"]::placeholder {
  color: #9AA79E;
}

.psm-signup input[type="text"]:focus,
.psm-signup input[type="email"]:focus {
  border-color: var(--teal, #1F9D57);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(31, 157, 87, 0.14);
}

.psm-submit { margin: 6px 0 0; }

/* the button: amber capsule, matching Book a consult */
.psm-signup .sib-default-btn,
.psm-signup input[type="submit"] {
  display: inline-block;
  width: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--amber, #C8472E);
  border: none;
  border-radius: 999px;
  padding: 14px 24px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(200, 71, 46, 0.30);
  transition: transform .2s, background .2s;
}

.psm-signup .sib-default-btn:hover,
.psm-signup input[type="submit"]:hover {
  background: var(--amber-deep, #A8371F);
  transform: translateY(-2px);
}

.psm-signup-privacy {
  font-size: 12px;
  color: var(--slate, #3D4A41);
  margin: 14px 0 0;
}

.psm-signup-privacy a {
  color: var(--teal-deep, #16713F);
  font-weight: 600;
  text-decoration: none;
}
.psm-signup-privacy a:hover { text-decoration: underline; }

/* plugin success / error messages, styled to match */
.psm-signup .sib_msg_disp,
.psm-signup .sib-message,
.psm-signup .success,
.psm-signup .failure {
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  margin-top: 12px;
}
.psm-signup .success {
  background: var(--teal-wash, #E6F2EA);
  color: var(--teal-deep, #16713F);
  border: 1px solid rgba(31, 157, 87, 0.3);
}
.psm-signup .failure {
  background: rgba(200, 71, 46, 0.07);
  color: var(--amber-deep, #A8371F);
  border: 1px solid rgba(200, 71, 46, 0.22);
}

/* optional: dark-band variant if the form sits on a dark section.
   Wrap the shortcode in <div class="psm-signup-dark"> ... </div> */
.psm-signup-dark .psm-signup {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
.psm-signup-dark .psm-signup-title { color: #fff; }
.psm-signup-dark .psm-signup-lead,
.psm-signup-dark .psm-signup-privacy { color: rgba(255, 255, 255, 0.72); }
.psm-signup-dark .psm-field label { color: rgba(255, 255, 255, 0.85); }
.psm-signup-dark .psm-signup-kicker { color: #83fcb5; }
.psm-signup-dark .psm-signup::before { background: #83fcb5; }