/* marcadislaw.com — site additions on top of the carried Divi CSS (which is loaded verbatim, per page, before this).
   Palette measured on staging 2026-10-24: page #101012, sections #010102, gold #d5a75f, wine #7a1c24, light text #cfcfcf.
   Nothing here restyles carried content; it only covers what WordPress plugins / Divi JS used to provide. */
:root { --mlf-gold: #d5a75f; --mlf-ink: #010102; --mlf-page: #101012; --mlf-text: #cfcfcf; --mlf-wine: #7a1c24; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--mlf-gold); color: #000; padding: 10px 14px; font-weight: 700; }
.skip-link:focus { left: 10px; top: 10px; }
.jb-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#main-content:focus { outline: none; }

/* Divi module links carried as real links keep the module's look */
a.jb-block-link { display: block; color: inherit; text-decoration: none; }

/* Divi sticky header (Divi did this with JS: section 0 of the header stays at the top) */
.et-l--header { position: sticky; top: 0; z-index: 99999; }

/* Divi Mega Pro "Services" panel, carried as a plain two-column dropdown (no plugin JS) */
/* Measured on staging (hover, 1440 wide): panel 900px wide starting 439px from the left, #010102, radius 10px, 2px gold
   bottom border, gold glow, 20px padding, two 424px columns with a thin divider; links Inter 14px uppercase, 1px tracking,
   gold, 9px top/bottom padding, 16px list indent. Position is fixed to the viewport like the plugin's panel. */
.et-menu .jb-mega-parent { position: static !important; }
.et-menu .jb-mega-parent:not(:hover):not(.et-hover) > .sub-menu.jb-mega { display: none !important; }
.et_pb_menu .et-menu .jb-mega-parent > .sub-menu.jb-mega { position: fixed; top: calc(68px + var(--mlf-mm-h, 32px)); left: max(16px, calc(50vw - 281px)); width: 900px; max-width: calc(100vw - 32px); box-sizing: border-box;
  display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows, 7), auto); grid-auto-flow: column; column-gap: 40px;
  padding: 20px 20px 20px 36px; background: #010102 !important;
  background-image: linear-gradient(rgba(213,167,95,.35), rgba(213,167,95,.35)) !important; background-size: 1px calc(100% - 40px) !important; background-position: 50% 20px !important; background-repeat: no-repeat !important;
  border: 0; border-bottom: 2px solid #d5a75f; border-radius: 10px; box-shadow: 0 2px 18px rgba(213,167,95,.2); }
.et_pb_menu .et-menu .jb-mega-parent > .sub-menu.jb-mega > li { display: block; width: 100%; padding: 0; margin: 0; }
.et_pb_menu .et-menu .jb-mega-parent > .sub-menu.jb-mega > li > a { width: 100%; padding: 9px 0; font-size: 14px; line-height: 26.6px; letter-spacing: 1px; text-transform: uppercase; color: #d5a75f !important; background: none; }
.et_pb_menu .et-menu .jb-mega-parent > .sub-menu.jb-mega > li > a:hover { opacity: .75; }
/* staging's mobile menu had no Services sub-list (the Mega Pro panel was desktop hover only): same here */
/* (phone menu rebuilt 2026-10-28: the Services list is shown there too, as a tap-to-open section) */

/* Divi background videos (Divi sized them with JS): cover the column */
.et-pb-background-video:not(.et-pb-background-video--empty) { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.et-pb-background-video video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto !important; height: 100% !important; max-width: none; transform: translate(-50%, -50%); object-fit: cover; }
.et-pb-has-background-video { position: relative; }
.et-pb-has-background-video > :not(.et-pb-background-video) { position: relative; z-index: 1; }
.mejs-container, .mejs-mediaelement { max-width: 100%; }

/* YouTube click-to-load */
.yt-facade { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; overflow: hidden; max-width: 100%; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 50px; margin: -25px 0 0 -36px; background: #e00; border-radius: 12px; }
.yt-play::after { content: ''; position: absolute; left: 29px; top: 15px; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; }
.yt-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

/* Contact form messages (the form keeps Divi's own markup and styling) */
.et-pb-contact-message { min-height: 0; }
.et-pb-contact-message.jb-msg--ok { color: var(--mlf-gold); font-weight: 600; }
.et-pb-contact-message.jb-msg--err { color: #ff9b9b; font-weight: 600; }
.et_pb_contact_form .et_pb_contact_field input:focus-visible, .et_pb_contact_form .et_pb_contact_field textarea:focus-visible { outline: 2px solid var(--mlf-gold); outline-offset: 1px; }


/* plain pages built here (404, form thanks page) */
.jb-plain { background: var(--mlf-ink); color: var(--mlf-text); padding: 120px 16px 100px; }
.jb-wrap { max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.7; }
.jb-plain h1 { font-family: 'Cormorant Garamond', Georgia, serif; color: #fff; font-size: clamp(40px, 6vw, 72px); line-height: 1.05; font-weight: 400; padding-bottom: 20px; }
.jb-plain a { color: var(--mlf-gold); }
.jb-btn { display: inline-block; margin: 6px 8px 6px 0; padding: 10px 22px; background: var(--mlf-gold); color: var(--mlf-ink) !important; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; }

/* Cookie consent banner (replaces Complianz). High contrast: dark text on white. */
.cc-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100000; display: flex; justify-content: center; }
.cc-banner[hidden] { display: none; }
.cc-inner { background: #fff; color: #111; max-width: 760px; width: 100%; border-radius: 8px; padding: 18px 20px; box-shadow: 0 6px 30px rgba(0,0,0,.45); border-top: 4px solid var(--mlf-gold); font: 15px/1.5 Inter, Arial, sans-serif; }
.cc-title { font-weight: 700; font-size: 17px; margin: 0 0 4px; padding: 0; color: #111; }
.cc-text { margin: 0 0 10px; padding: 0; color: #222; }
.cc-text a { color: #6b4a12; text-decoration: underline; }
.cc-choices { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 12px; color: #222; }
.cc-choices[hidden] { display: none; }
.cc-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-btn { font: inherit; font-weight: 600; border-radius: 4px; padding: 9px 16px; border: 2px solid #8a6424; background: #fff; color: #4d3609; cursor: pointer; }
.cc-btn[hidden] { display: none; }
.cc-accept { background: #8a6424; color: #fff; }
.cc-link { border-color: transparent; text-decoration: underline; }
@media (max-width: 600px) { .cc-inner { padding: 14px; font-size: 14px; } .cc-banner { left: 8px; right: 8px; bottom: 8px; } }

/* h1 house rule without changing the look (tools/wp-convert.py):
   - Divi post template showed the post title as a <p>; it is now that same element as <h1> and inherits the <p>'s look
   - pages that had several h1s keep the first; the others are <div role=heading aria-level=2> with the h1 look */
h1.jb-h1-as-p { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; text-shadow: inherit !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important; }
/* demoted extra h1s keep the h1 look Divi gave them (post body h1 rule = .et_pb_post_content h1) */
.et_pb_post_content div.jb-h1-demoted { font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; line-height: 1em; font-weight: 600; padding-bottom: 10px; color: #d5a75f; }

/* Mini-Miranda (FDCPA) notice, 2026-10-28 client request: header is two lines, notice on top, logo + menu below;
   the whole header stays pinned while scrolling. Same wording in the footer, made readable (was 11px grey italic). */
.mlf-mm { background: #010102; border-bottom: 1px solid rgba(213,167,95,.35); padding: 7px 16px; }
.mlf-mm p { margin: 0; padding: 0; max-width: 1280px; margin-inline: auto; text-align: center; color: #ffffff; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 18px; font-style: normal; }
@media (max-width: 980px) { .mlf-mm { padding: 6px 12px; } .mlf-mm p { font-size: 11.5px; line-height: 15px; } }
.mlf-mm-foot .et_pb_text_inner p { color: #ffffff !important; font-size: 13px !important; font-style: normal !important; line-height: 1.5 !important; }
/* Header is pinned on phones too, so close the 40px gap Divi left between the logo row and the menu row there. */
@media (max-width: 767px) { .et_pb_row_0_tb_header.et_pb_row { row-gap: 12px !important; } }
/* Body text white, 2026-10-28 client request (was Divi's default #666666 grey, plus #cfcfcf/#e6e6e6 module text, which
   washed out on phones). Gold accents and headings keep their own colours. Inputs on light fields keep Divi's dark text. */
body { color: #ffffff; }

/* Phone menu, rebuilt 2026-10-28 (staging's opened as a 44px-wide column with overlapping sub-lists): a full-width dark
   panel under the pinned header, scrolls on its own, sections open on tap. */
.et_pb_menu .mobile_nav .et_mobile_menu.jb-mnav { position: fixed !important; top: var(--jb-mnav-top, 180px) !important; left: 0 !important; right: 0 !important;
  width: 100vw !important; max-height: calc(100vh - var(--jb-mnav-top, 180px)); max-height: calc(100dvh - var(--jb-mnav-top, 180px)); overflow-y: auto; overscroll-behavior: contain;
  margin: 0 !important; padding: 6px 0 24px !important; background: #010102 !important; border: 0 !important; border-top: 2px solid #d5a75f !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.6) !important; z-index: 100000; text-align: left !important; box-sizing: border-box; }
.et_mobile_menu.jb-mnav, .et_mobile_menu.jb-mnav ul { list-style: none !important; }
.et_mobile_menu.jb-mnav li { position: relative !important; display: block !important; width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.et_mobile_menu.jb-mnav li a { display: block !important; width: auto !important; padding: 14px 64px 14px 22px !important; margin: 0 !important;
  font-family: 'Inter', sans-serif !important; font-size: 15px !important; line-height: 1.35 !important; letter-spacing: 1px !important; text-transform: uppercase !important;
  color: #ffffff !important; background: none !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; opacity: 1 !important; white-space: normal !important; }
.et_mobile_menu.jb-mnav li a:hover, .et_mobile_menu.jb-mnav li a:focus-visible { background: rgba(213,167,95,.12) !important; }
.et_mobile_menu.jb-mnav .current-menu-item > a, .et_mobile_menu.jb-mnav .current-menu-ancestor > a, .et_mobile_menu.jb-mnav .current-menu-parent > a { color: #d5a75f !important; }
.et_mobile_menu.jb-mnav li ul, .et_pb_menu .et_mobile_menu.jb-mnav li ul.sub-menu, .et_pb_menu .et_mobile_menu.jb-mnav li ul.sub-menu.jb-mega {
  position: static !important; display: none !important; visibility: visible !important; opacity: 1 !important; transform: none !important;
  width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: rgba(255,255,255,.04) !important; grid-template-columns: none !important; }
.et_pb_menu .et_mobile_menu.jb-mnav li.jb-open > ul.sub-menu, .et_pb_menu .et_mobile_menu.jb-mnav li.jb-open > ul.sub-menu.jb-mega { display: block !important; }
.et_mobile_menu.jb-mnav li li a { padding-left: 38px !important; font-size: 14px !important; letter-spacing: .5px !important; color: #ffffff !important; }
.et_mobile_menu.jb-mnav li li li a { padding-left: 54px !important; }
.et_mobile_menu.jb-mnav .menu-item-has-children > a:after, .et_mobile_menu.jb-mnav li a:after { display: none !important; content: none !important; }
.jb-mnav-tog { position: absolute; top: 0; right: 0; width: 56px; height: 50px; border: 0; border-left: 1px solid rgba(255,255,255,.08); background: none; color: #d5a75f; cursor: pointer; padding: 0; }
.jb-mnav-tog:before { content: ''; display: block; width: 9px; height: 9px; margin: -4px auto 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.jb-open > .jb-mnav-tog:before { transform: rotate(-135deg); margin-top: 4px; }
.jb-mnav-tog:focus-visible { outline: 2px solid #d5a75f; outline-offset: -2px; }
/* Old-style (Divi 4) content blocks inside posts and the Payments page set a white background under white/light text,
   so their text was invisible (on staging too). Let them sit on the site's dark background instead. */
.et_d4_element.et_pb_section { background-color: transparent !important; }
/* Contact page "A Word On Email Communications" box is gold: dark text there, white was unreadable. */
.page-id-142 .et_pb_cta_0.et_pb_promo h2, .page-id-142 .et_pb_cta_0.et_pb_promo p, .page-id-142 .et_pb_cta_0.et_pb_promo .et_pb_promo_description { color: #010102 !important; }
/* Blog category pages: sidebar titles were #333 and links #666 on black. Match the post pages (gold titles, white links). */
.et_pb_widget .widgettitle { color: #d5a75f !important; }
.et_pb_widget li a, .et_pb_widget a:not(.et_pb_button) { color: #ffffff; }
/* Old posts with pasted-in dark text colours (from the old blog) on the dark page; old data tables on white keep theirs. */
.et_pb_post_content [style*="color: #333"]:not(table *), .et_pb_post_content [style*="color:#333"]:not(table *), .et_pb_post_content [style*="color: rgb(51, 51, 51)"]:not(table *),
.et_pb_post_content [style*="color: #444"]:not(table *), .et_pb_post_content [style*="color:#444"]:not(table *), .et_pb_post_content [style*="color: rgb(68, 68, 68)"]:not(table *),
.et_pb_post_content [style*="color: #222"]:not(table *), .et_pb_post_content [style*="color: rgb(34, 34, 34)"]:not(table *),
.et_pb_post_content [style*="color: #4c4c4c"]:not(table *), .et_pb_post_content [style*="color: rgb(76, 76, 76)"]:not(table *),
.et_pb_post_content [style*="color: #545454"]:not(table *), .et_pb_post_content [style*="color: rgb(84, 84, 84)"]:not(table *),
.et_pb_post_content [style*="color: #000"]:not(table *), .et_pb_post_content [style*="color:#000"]:not(table *), .et_pb_post_content [style*="color: black"]:not(table *) { color: #ffffff !important; }
/* Old pasted blog content: white/light-grey highlight backgrounds and image-caption boxes under light text (unreadable on
   staging too). Clear them so the text sits on the dark page; old data tables keep their own white background. */
.et_pb_post_content [style*="background"]:not(table):not(table *):not(img):not(iframe),
.et_pb_post_content .wp-caption { background-color: transparent !important; background-image: none !important; }