/*
Theme Name: Hotspot Digital Child Theme
Theme URI: https://www.hotspot.digital
Version: 1.0
Description: Child Theme developed by Hotspot Digital
Author: Hotspot Digital
Author URI: https://www.hotspot.digital
Template: Divi
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*____________________ STANDARD CSS TO REMAIN ____________________*/

.et_pb_contact_right p input {
    max-width: 55px !important;
}
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: normal !important;
}

/* Change these px values for Jumping posts 
#page-container {
    padding-top: 114px !important;
}
/* if you have top header remove this comment
   #main-header {
    top: 32px !important;
} */

/* Force footer on short pages to fill the screen. */
#page-container:not(.et-tb-has-template) {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
.et-tb-has-template #page-container #et-boc {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
#et-main-area {
    display: flex;
    flex-flow: column;
}
#et-main-area, #main-content {
    flex: 1 0 auto;
}
.logged-in #page-container:not(.et-tb-has-template) {
    min-height: calc(100vh - 30px);
}
.logged-in.et-tb-has-template #page-container #et-boc {
    min-height: calc(100vh - 30px);
}

/* correcting spacing for lists */
.entry-content ol, .entry-content ul {
    padding: 30px 0px 30px 50px;
    list-style-position: outside;
}
.entry-content ol li, .entry-content ul li {
    margin-bottom: 10px;
}

/* Forminator Float Button Right */
.forminator-row-last .forminator-field {
    display: flex;
    justify-content: flex-end;
}

/*_________________MEDIA QUERIES IF YOU WANT TO USE___________________*/

/* Responsive Styles Large Desktop And Above */
@media all and (min-width: 1405px) {
}

/* Responsive Styles Smartphone Portrait */
@media all and (max-width: 479px) {
}

/* Responsive Styles Smartphone Only */
@media all and (max-width: 767px) {
}

/* Responsive Styles Tablet Only */
@media all and (min-width: 768px) and (max-width: 980px) {
}

/* Responsive Styles Tablet And Below */
@media all and (max-width: 980px) {
}

/* Responsive Styles 981px – 1100px */
@media all and (min-width: 981px) and (max-width: 1100px) {
}

/* Responsive Styles Desktop Only */
@media all and (min-width: 981px) {
}

/* Responsive Styles Standard Desktop Only */
@media all and (min-width: 981px) and (max-width: 1405px) {
}

/*____________________ ADD CSS AFTER THIS ____________________*/ 
/*____________________ DESIGN SYSTEM (Task 4) ____________________*/
/* Source of truth: build/design_system.py, a rebrand is a one-value change here
   plus the matching Divi Design Variables (Colors/Fonts/Text groups, see
   build/reference/variables-schema.json for the harvested option shape). */

:root {
  /* Palette: mirrors build/design_system.py COLORS, and tests/test_design_system.py
     checks the two agree. Amber is for navy grounds only; amber on white is 1.56:1. */
  --color-navy: #00297C;
  --color-navy-dark: #002369;
  --color-amber: #FFC700;
  --color-ink: #1A1A1A;
  --color-muted: #6B6B6B;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F6F8;
  --color-line: #E2E5EA;

  /* Fonts */
  --font-heading: "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max). h1 is the spec value; h2-h6
     interpolate down to the fixed small/caption size. */
  --text-h1: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --text-h2: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
  --text-h3: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  --text-h4: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-h5: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-h6: 1rem;
  --text-body: 1.0625rem; /* 17px */
  --text-small: 0.875rem; /* 14px */

  /* Generous section spacing */
  --space-section-desktop: clamp(96px, 8vw, 140px);
  --space-section-mobile: clamp(64px, 12vw, 80px);

  /* Body copy measure */
  --measure-body: 68ch;
}

body, p, li, a, span, input, textarea, select, button {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
}

body, p {
  font-size: var(--text-body);
  line-height: 1.65;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }

small, .text-small { font-size: var(--text-small); }

/* Body copy measure — a ceiling, not a fixed width, so it never fights a narrower
   column. */
.entry-content p,
.entry-content li,
.et_pb_post_content p,
.measure-body {
  max-width: var(--measure-body);
}

/* Keyboard-navigation focus ring, in the brand accent — never suppressed. */
:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

/*____________________ SOLAR MADE SIMPLE LAYOUT ____________________*/

/* Header ------------------------------------------------------------ */
/* Divi's native header, wearing the brand. The menu lives in Appearance >
   Menus so Neil can reorder it without touching a builder. */
#main-header {
  box-shadow: 0 1px 0 var(--color-line);
}
#logo { max-height: 62px !important; }
#top-menu li a { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.01em; }
#top-menu li.current-menu-item > a,
#top-menu li.current_page_parent > a { color: var(--color-navy) !important; }

/* The last top-level nav item is the call to action, so it should look like one.
   Scoped with a child combinator: a bare `li:last-child` also matches the last
   service inside the "What We Do" dropdown and turns it into a second button. */
#top-menu > li:last-child > a {
  background: var(--color-navy);
  color: #fff !important;
  padding: 10px 22px !important;
  border-radius: 4px;
  transition: background 0.18s ease;
}
#top-menu > li:last-child > a:hover { background: var(--color-navy-dark); opacity: 1; }

/* The dropdown stays a white panel with ink links, navy on hover. */
#top-menu li ul { background: #fff; border-top-color: var(--color-navy); }
#top-menu li li > a { color: var(--color-ink) !important; }
#top-menu li li > a:hover { color: var(--color-navy) !important; background: var(--color-bg-alt); opacity: 1; }

/* Heroes ------------------------------------------------------------ */
/* A scrim, not a wash: the photographs are 2013 phone snapshots with flat
   light, and white type sitting straight on them is unreadable. The gradient
   is weighted to the left, where the headline sits and the sky is clearest. */
#home-hero {
  position: relative;
  min-height: min(76vh, 640px);
  display: flex;
  align-items: center;
  background-size: cover !important;
  background-position: center 62% !important;
}
#home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(0, 41, 124, 0.92) 0%,
              rgba(0, 41, 124, 0.72) 42%,
              rgba(0, 41, 124, 0.28) 100%);
  pointer-events: none;
}
#home-hero > .et_pb_row { position: relative; z-index: 1; width: 90%; max-width: 1180px; }
#home-hero h1 {
  /* Wide enough for "townhouses," to sit on one line at desktop — a five-line
     headline reads as a wall, not a statement. */
  font-size: clamp(2rem, 1.1rem + 2.4vw, 3.1rem);
  line-height: 1.08;
  max-width: 22ch;
  margin-bottom: 0.55em;
}
#home-hero .standfirst {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.55;
  max-width: 46ch;
  opacity: 0.94;
}
#home-hero .et_pb_button { margin-top: 1.6rem; }

/* Inside pages: a quiet band, not a second hero competing with the home page. */
#page-hero, #solar-hero { padding: clamp(56px, 7vw, 88px) 0 clamp(48px, 6vw, 72px); }
#page-hero h1, #solar-hero h1 { margin-bottom: 0.35em; }
#page-hero .standfirst, #solar-hero .standfirst {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.5;
}

/* Trust bar --------------------------------------------------------- */
#trust-bar { padding: clamp(40px, 4vw, 56px) 0; border-bottom: 1px solid var(--color-line); }
#trust-bar .et_pb_column { display: flex; flex-direction: column; gap: 0.2rem; }
#trust-bar h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  color: var(--color-navy);
  margin: 0;
}
#trust-bar p { margin: 0; color: var(--color-muted); font-size: 0.95rem; line-height: 1.45; }

/* Help cards -------------------------------------------------------- */
/* Equal height with the button pinned to the bottom, so four cards of unequal
   copy still line up. This is the pattern the client will duplicate, so it has
   to survive him writing a longer sentence than we did.
   Scoped to the cards row only — the section heading sits in its own row and
   must not inherit the card frame.
   The same frame carries the three system-option cards (Home Saver, Standard,
   Plus) on the home page, so the card rules match both section ids. */
:is(#how-can-we-help, #system-options) .et_pb_row:last-child { align-items: stretch; }
:is(#how-can-we-help, #system-options) .et_pb_row:last-child .et_pb_column {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
:is(#how-can-we-help, #system-options) .et_pb_row:last-child .et_pb_column:hover {
  border-color: var(--color-navy);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -18px rgba(0, 41, 124, 0.5);
}
:is(#how-can-we-help, #system-options) .et_pb_row:last-child h3 {
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0 0 0.55rem;
}
:is(#how-can-we-help, #system-options) .et_pb_row:last-child .et_pb_text {
  flex: 1 0 auto;
}
:is(#how-can-we-help, #system-options) .et_pb_row:last-child p {
  color: var(--color-muted);
  font-size: 0.94rem;
  line-height: 1.5;
  margin: 0;
}
#how-can-we-help .et_pb_button_module_wrapper { margin-top: auto; padding-top: 1.15rem; }
#how-can-we-help .et_pb_button {
  border: 0;
  padding: 0 !important;
  background: transparent;
  color: var(--color-navy);
  font-weight: 500;
}
#how-can-we-help .et_pb_button:hover { background: transparent; color: var(--color-navy-dark); }
:is(#how-can-we-help, #system-options) > .et_pb_row:first-child { margin-bottom: 8px; }
/* The system-options heading row carries an intro paragraph; hold it to the measure. */
#system-options > .et_pb_row:first-child p { max-width: var(--measure-body); }

/* Footer template --------------------------------------------------- */
.et-l--footer h2, .et-l--footer h3 { color: #fff; }
.et-l--footer a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); }
.et-l--footer a:hover { border-bottom-color: #fff; }
.et-l--footer .footer-nav { list-style: none !important; padding: 0 !important; }
.et-l--footer .footer-nav li { line-height: 2; }

/* Amber headings on the navy band: the one place amber carries text, because the
   ground is navy (8.35:1). Never amber on white. */
#footer-contact-band h2,
.et-l--footer .et_pb_section:first-child h2 { color: var(--color-amber); }

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.35rem !important;
}

/* Team ------------------------------------------------------------- */
/* Monogram cards. Real headshots drop straight in above the name later
   without the layout changing. */
.et_pb_column .team-role { color: var(--color-muted); font-size: 0.9rem; margin: 0; }

/* Buttons ----------------------------------------------------------- */
.et_pb_button {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: 4px;
}

/* Mobile ------------------------------------------------------------ */
@media (max-width: 980px) {
  #home-hero { min-height: 60vh; }
  #home-hero::before {
    background: linear-gradient(180deg, rgba(0,41,124,0.86) 0%, rgba(0,41,124,0.78) 100%);
  }
  :is(#how-can-we-help, #system-options) .et_pb_column { margin-bottom: 18px; }
  :is(#how-can-we-help, #system-options) .et_pb_column h3 { min-height: 0; }
  #trust-bar .et_pb_column { margin-bottom: 22px; text-align: center; }
}


/* Divi's page template prints the post title above the builder content. Every page
   here opens with its own hero carrying the h1, so the template title is a duplicate
   heading — bad for a screen reader and worse for the design. Divi's _et_pb_show_title
   meta does not suppress it on this template, so it goes here. */
.page .et_post_meta_wrapper > h1.entry-title,
.page h1.main_title {
  display: none;
}

/*____________________ SECTION BACKGROUNDS ____________________*/
/* Divi scopes some generated section rules to `.et-l--post > .et_builder_inner_content`
   wrappers that this theme does not emit, so those rules never match and the section
   renders white. Rather than fight the scoping, the backgrounds that matter are pinned
   here against CSS IDs the build controls. Divi's own attributes stay in place so the
   builder still shows the right colour to whoever opens it. */

/* Contact bands: the in-page "get in touch" section and the footer template's
   "ready to make solar simple" band share one treatment. Navy ground, amber
   heading, white copy, and the WhatsApp button as the one amber fill on the
   page with navy text (8.35:1). Hover is amber at 90%. */
#footer-contact-band {
  background-color: var(--color-navy) !important;
  padding: clamp(56px, 6vw, 80px) 0;
}
#footer-contact-band h2 { color: var(--color-amber) !important; }
#footer-contact-band p, #footer-contact-band li, #footer-contact-band .et_pb_text { color: #fff; }
#footer-contact-band .et_pb_row { align-items: center; }
#footer-contact-band .et_pb_button {
  background: var(--color-amber) !important;
  border-color: var(--color-amber) !important;
  color: var(--color-navy) !important;
}
#footer-contact-band .et_pb_button:hover {
  background: #E6B300 !important;
  border-color: #E6B300 !important;
}
#footer-contact-band ul { padding: 0 0 0 1.2em; }
#footer-contact-band li { margin-bottom: 0.3em; }

#site-footer {
  background-color: var(--color-navy) !important;
  padding: clamp(56px, 6vw, 84px) 0 clamp(28px, 3vw, 40px);
  color: #fff;
}
#site-footer p, #site-footer li, #site-footer h3 { color: #fff; }
#site-footer .et_pb_row:last-child {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 22px;
  margin-top: 34px;
}
#site-footer .et_pb_row:last-child p { font-size: 0.86rem; opacity: 0.75; margin: 0; }

/* Alternating content bands. #why-sms is always a band; #founder is one on the
   home page (between two white sections) and white on Who We Are, so it is pinned
   through the body class rather than the id. */
[id^="band-alt-"], #why-sms, .home #founder { background-color: var(--color-bg-alt) !important; }

/* Section rhythm: generous, and consistent between bands. */
.et-db #et-boc .et_pb_section { padding: clamp(56px, 6vw, 92px) 0; }
.et-db #et-boc #home-hero { padding: 0; }
.et-db #et-boc #trust-bar { padding: clamp(40px, 4vw, 56px) 0; }

/*____________________ CORRECTIONS ____________________*/

/* The hero section is display:flex to centre its content vertically, which made the
   row a flex item that shrank to its widest word — a headline 145px wide wrapping
   every two words. The row has to be told to take the full line. */
#home-hero .et_pb_row {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 90%;
  max-width: 1180px;
}
#home-hero h1 { max-width: 20ch; }

/* The help band is an alternating band but carries its own ID, so it misses the
   [id^="band-alt-"] rule. */
#how-can-we-help { background-color: var(--color-bg-alt) !important; }
:is(#how-can-we-help, #system-options) .et_pb_row:last-child .et_pb_column { background: #fff; }

/* Footer links inherit Divi's global link colour, which is the brand navy, and navy
   on the navy footer is invisible. On the navy ground the links are white. */
#site-footer a { color: #fff !important; }
#site-footer a:hover { border-bottom-color: #fff; }
#site-footer .et_pb_image { margin-bottom: 1.1rem; }
#site-footer h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }

/* Contact band copy needs the same treatment on its blue ground. */
#footer-contact-band a { color: #fff; }

/*____________________ BLOG ____________________*/
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-navy);
}
.video-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* Article measure and rhythm — a 958-word post needs to be readable, not wide. */
.single-post .et_pb_text_inner > p,
.single-post .et_pb_text_inner > ul { max-width: 72ch; }
.single-post .et_pb_text_inner h3 { margin-top: 2rem; }
.single-post .et_pb_text_inner h4,
.single-post .et_pb_text_inner h5,
.single-post .et_pb_text_inner h6 {
  margin-top: 1.6rem;
  font-size: 1.05rem;
  color: var(--color-ink);
}
.single-post .et_pb_text_inner strong { color: var(--color-ink); }

/* Blog index cards */
.et_pb_blog_grid .et_pb_post {
  border: 1px solid var(--color-line);
  border-radius: 6px;
  overflow: hidden;
  padding: 0 0 22px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.et_pb_blog_grid .et_pb_post:hover { border-color: var(--color-navy); transform: translateY(-2px); }
.et_pb_blog_grid .et_pb_post .entry-featured-image-url { margin-bottom: 18px; }
.et_pb_blog_grid .et_pb_post .entry-title { padding: 0 22px; font-size: 1.15rem; line-height: 1.3; }
.et_pb_blog_grid .et_pb_post .post-content { padding: 0 22px; color: var(--color-muted); }
.et_pb_blog_grid .et_pb_post .post-meta { padding: 0 22px; font-size: 0.82rem; }

/* Forminator ships its own blue submit button; it has to wear the brand navy and the
   brand font, not Forminator's defaults. */
.forminator-ui .forminator-button-submit,
.forminator-ui.forminator-custom-form .forminator-button-submit {
  background-color: var(--color-navy) !important;
  border-color: var(--color-navy) !important;
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
}
.forminator-ui .forminator-button-submit:hover {
  background-color: var(--color-navy-dark) !important;
  border-color: var(--color-navy-dark) !important;
}
.forminator-ui .forminator-label { font-family: var(--font-heading) !important; }
/* Forminator's own focus state is a blue glow; keyboard focus wears the brand ring. */
.forminator-ui .forminator-button-submit:focus-visible,
.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
  border-color: var(--color-navy) !important;
  box-shadow: none !important;
}

/* Post title block */
.single-post .et_post_meta_wrapper h1 {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
  line-height: 1.12;
  max-width: 22ch;
}
.single-post .et_post_meta_wrapper { padding-bottom: 8px; }

/*____________________ TEAM ____________________*/
/* Monogram cards. Without an explicit card box the columns are different heights and
   the two rows interleave — a name from row two riding up beside a role from row one. */
#team .et_pb_row { align-items: stretch; margin-bottom: 22px; }
/* The first row is the section heading, not a card — it must not get the card frame
   or the monogram circle treatment. */
#team .et_pb_row:first-child { margin-bottom: 10px; }
#team .et_pb_row:first-child .et_pb_column {
  background: none; border: 0; padding: 0; display: block; text-align: left;
}
#team .et_pb_row:first-child .et_pb_module_header {
  display: block; width: auto; height: auto; margin: 0; background: none;
  border-radius: 0; color: var(--color-ink); font-size: inherit;
}
#team .et_pb_row:not(:first-child) .et_pb_column {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: 26px 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#team .et_pb_row:not(:first-child) .et_pb_column .et_pb_heading:first-child .et_pb_module_header {
  /* the monogram tile */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-navy);
  font-size: 1.4rem;
  line-height: 1;
}
#team .et_pb_row:not(:first-child) h4 { font-size: 1.02rem; margin: 0 0 4px; line-height: 1.25; }
#team .team-role { color: var(--color-muted); font-size: 0.86rem; line-height: 1.35; margin: 0; }
#team .et_pb_heading, #team .et_pb_text { width: 100%; }

@media (max-width: 980px) {
  #team .et_pb_column { margin-bottom: 16px; }
}

/*____________________ BLOG POST TEMPLATE ____________________*/
/* The post layout now lives in the Theme Builder and the post itself is plain
   Gutenberg, so these rules style whatever Neil writes rather than a fixed structure. */

#post-header { padding: clamp(48px, 5vw, 72px) 0 clamp(32px, 4vw, 48px); }
#post-header h1 {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
  line-height: 1.12;
  max-width: 22ch;
  margin-bottom: 0.4em;
}
#post-header .et_pb_title_meta_container {
  color: var(--color-muted);
  font-size: 0.9rem;
}

#post-featured { padding: 0; }
/* Align the featured image with the article column rather than the page — a
   1180px image above an 820px article reads as two unrelated widths. */
#post-featured .et_pb_row { width: 100%; max-width: 820px; }
#post-featured img { width: 100%; height: auto; border-radius: 6px; display: block; }

#post-body { padding: clamp(40px, 4.5vw, 64px) 0 clamp(48px, 5vw, 72px); }
#post-body .et_pb_row { max-width: 820px; }

/* Gutenberg content inside Divi's post-content module. */
#post-body .et_pb_post_content > p,
#post-body .et_pb_post_content > ul,
#post-body .et_pb_post_content > ol {
  max-width: 72ch;
  margin-bottom: 1.15em;
}
#post-body .et_pb_post_content > h2 {
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem);
  margin: 2.4rem 0 0.7rem;
  line-height: 1.2;
}
#post-body .et_pb_post_content > h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  margin: 2rem 0 0.6rem;
}
#post-body .et_pb_post_content > h4,
#post-body .et_pb_post_content > h5,
#post-body .et_pb_post_content > h6 {
  font-size: 1.05rem;
  margin: 1.7rem 0 0.5rem;
  color: var(--color-ink);
}
#post-body .et_pb_post_content strong { color: var(--color-ink); }
#post-body .et_pb_post_content a { color: var(--color-navy); }
#post-body .et_pb_post_content ul { padding-left: 1.2em; }
#post-body .et_pb_post_content li { margin-bottom: 0.4em; }

/* A pasted YouTube link becomes a core/embed block — keep it 16:9 and tidy. */
#post-body .wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; height: 0; }
#post-body .wp-block-embed__wrapper iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px;
}
#post-body .wp-block-embed { margin: 2rem 0; max-width: 820px; }

#post-cta { padding: clamp(48px, 5vw, 72px) 0; }

/*____________________ BLOG INDEX GRID ____________________*/
/* Divi 5's grid blog module keeps three fixed columns at every width — at 390px the
   cards were 82px wide and titles wrapped to one or two characters per line. The
   wrapper is `.et_pb_blog_posts.et_grid_module`; there is no `.et_pb_blog_grid` class
   on this version, which is what an earlier attempt at this assumed. */
.et_pb_blog_posts.et_grid_module {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px;
}
.et_pb_blog_posts.et_grid_module .et_pb_post {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
}
.et_pb_blog_posts.et_grid_module .et_pb_post .entry-featured-image-url img {
  width: 100%;
  height: auto;
}

@media (max-width: 1100px) {
  .et_pb_blog_posts.et_grid_module {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 780px) {
  .et_pb_blog_posts.et_grid_module {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* SureCookie's blocked-content placeholder is a white card with a green button; on the
   navy footer it reads as a broken element. Make it belong. */
.et-l--footer [class*="surecookie"][class*="placeholder"],
#site-footer [class*="surecookie"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  border-radius: 6px;
}

/* Featured cards are typographic: the title is the artwork, so it must not be cropped.
   Divi's grid clips the image to its own ratio; `contain` on the card's own navy keeps
   the whole thing visible whichever size variant the browser picks. */
.et_pb_blog_posts.et_grid_module .entry-featured-image-url {
  display: block;
  aspect-ratio: 1200 / 750;
  background: var(--color-navy);
  overflow: hidden;
}
.et_pb_blog_posts.et_grid_module .entry-featured-image-url img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center;
}

/*____________________ SURECOOKIE PLACEHOLDER ____________________*/
/* Blocked embeds show the real video thumbnail (placeholder_video_thumbnails is on),
   so they read as a video rather than an empty box. The default button is green,
   which belongs to no part of this brand. */
[class*="surecookie"] button,
[class*="surecookie"] .surecookie-placeholder__button,
[class*="surecookie"] a[class*="button"] {
  background: var(--color-navy) !important;
  border-color: var(--color-navy) !important;
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
}
[class*="surecookie"] button:hover,
[class*="surecookie"] .surecookie-placeholder__button:hover {
  background: var(--color-navy-dark) !important;
  border-color: var(--color-navy-dark) !important;
}

/*____________________ EDITORIAL SECTIONS ____________________*/
/* Single-column and two-column text bands (#why-sms, #problem-solution, #founder).
   The measure is a ceiling, the same as .entry-content, so it never fights a
   half-width column. */
#why-sms p, #why-sms li,
#problem-solution p, #problem-solution li,
#founder p, #founder li { max-width: var(--measure-body); }
#why-sms h2, #problem-solution h2, #founder h2 { margin-bottom: 0.5em; }

/* Two h2s side by side at the full h2 scale shout; one step down keeps the pair
   as a comparison rather than two section titles. */
#problem-solution h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.2; }
#problem-solution .et_pb_text + .et_pb_text { margin-top: 1.2rem; }

/* The founder: image slot on the left, copy centred against it. The slot holds
   the placeholder at the photo's own portrait ratio, so the layout does not jump
   when the real photo drops in. */
#founder .et_pb_row { align-items: center; }
#founder .et_pb_column:first-child .placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  padding: 24px;
  text-align: center;
  background: var(--color-bg);
  border-radius: 6px;
}
#founder .et_pb_image img { width: 100%; height: auto; border-radius: 6px; display: block; }

/*____________________ PLACEHOLDERS AND CALL LINES ____________________*/
/* Copy still to come from the client. It has to read as temporary to anyone
   looking at the page, on white and on navy, without looking broken. */
.placeholder {
  display: inline-block;
  color: var(--color-muted);
  font-style: italic;
  font-size: var(--text-small);
  padding: 2px 8px;
  border: 1px dashed var(--color-line);
  border-radius: 4px;
}
#footer-contact-band .placeholder,
#site-footer .placeholder, #home-hero .placeholder {
  color: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.45);
}

/* "Or call 082 444 4034." under the WhatsApp buttons: quieter than the button,
   with the number still a visible link. */
.call-line {
  color: var(--color-muted);
  font-size: var(--text-small);
  margin: 0.75rem 0 0 !important;
}
.call-line a { color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; }
#footer-contact-band .call-line { color: rgba(255, 255, 255, 0.78); }
#footer-contact-band .call-line a { color: #fff; }