/* Lighthouse contrast + accessibility fixes — appended LAST so it wins specificity */ /* Force font-display:swap on Google Fonts (Roboto) — fixes the "Web font" CLS culprit */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: local("Roboto"), local("Roboto-Regular");
}
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: local("Roboto Medium"), local("Roboto-Medium");
}
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: local("Roboto Bold"), local("Roboto-Bold");
}
* { font-display: swap; } /* ============= FAQ accordion / toggle title — high contrast ============= */
.elementor-tab-title,
.elementor-toggle-title,
.elementor-accordion-title,
a.elementor-toggle-title,
h3.elementor-tab-title,
h2.elementor-tab-title,
h3.elementor-tab-title.elementor-tab-title,
.elementor-toggle .elementor-tab-title,
.elementor-toggle .elementor-tab-title a,
.elementor-toggle-item .elementor-tab-title { color: #111827 !important; background-color: #ffffff !important; font-weight: 700 !important; min-height: 44px; padding: 12px 16px !important;
} .elementor-toggle .elementor-tab-title:hover,
.elementor-toggle .elementor-tab-title.elementor-active,
a.elementor-toggle-title:hover,
h3.elementor-tab-title:hover { color: #ffffff !important; background-color: #1f2937 !important;
} .elementor-tab-content,
.elementor-toggle .elementor-tab-content { color: #1f2937 !important; background-color: #ffffff !important;
} /* ============= Button text contrast ============= */
.elementor-button .elementor-button-text,
.elementor-button-content-wrapper .elementor-button-text,
a.elementor-button .elementor-button-text,
a.elementor-button,
button.elementor-button { color: #ffffff !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
} /* Ensure buttons themselves have a high-contrast background */
a.elementor-button,
button.elementor-button,
.elementor-widget-button .elementor-button { background-color: #047857 !important; color: #ffffff !important; min-height: 44px; min-width: 44px; display: inline-flex !important; align-items: center; justify-content: center;
} a.elementor-button:hover,
button.elementor-button:hover,
.elementor-widget-button .elementor-button:hover { background-color: #065f46 !important;
} /* ============= Icon list text contrast ============= */
.elementor-icon-list-text,
span.elementor-icon-list-text,
li.elementor-icon-list-item span { color: #111827 !important;
} /* On dark sections (footer-style) flip to light */
[class*="footer"] .elementor-icon-list-text,
[class*="dark-bg"] .elementor-icon-list-text,
[style*="background-color:#1"] .elementor-icon-list-text,
[style*="background-color:#2"] .elementor-icon-list-text,
[style*="background-color:#0"] .elementor-icon-list-text,
[style*="background:#0"] .elementor-icon-list-text,
[style*="background:#1"] .elementor-icon-list-text,
[style*="background:#2"] .elementor-icon-list-text,
section[class*="elementor-section"][style*="dark"] .elementor-icon-list-text { color: #f9fafb !important;
} /* ============= Heading title min-contrast ============= */
.elementor-heading-title,
p.elementor-heading-title,
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
h4.elementor-heading-title,
h5.elementor-heading-title,
.elementor-heading-title.elementor-size-default,
p.elementor-heading-title.elementor-size-default,
.elementor-widget-heading .elementor-heading-title { color: #111827 !important;
} /* On dark / colored sections force text to white */
section[class*="elementor-element-5eb"] .elementor-heading-title,
section[class*="elementor-element-5eb"] .elementor-icon-list-text,
section[class*="elementor-element-5eb"] p,
section[style*="background"] .elementor-heading-title,
section[style*="background"] .elementor-icon-list-text { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
} /* Deep-dive: any section with green-ish background gets white text */
[style*="background-color:#04"] .elementor-heading-title,
[style*="background-color:#06"] .elementor-heading-title,
[style*="background:#04"] .elementor-heading-title,
[style*="background:#06"] .elementor-heading-title,
.elementor-section[class*="green"] .elementor-heading-title,
.elementor-section[class*="green"] .elementor-icon-list-text { color: #ffffff !important;
} /* ============= Touch targets ============= */
a, button, [role="button"], input, select, textarea { min-height: 24px;
}
.elementor-button, .elementor-tab-title, .elementor-toggle-title { min-height: 44px;
} /* ============= Focus visibility ============= */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible, .elementor-button:focus-visible,
.elementor-tab-title:focus-visible, .elementor-toggle-title:focus-visible { outline: 3px solid #fbbf24 !important; outline-offset: 2px !important;
} /* ============= Reduce CLS — placeholder image bg ============= */
img.lzl, img.lzl-cached { background-color: #f3f4f6;
} /* ============= Avoid non-composited animations — promote to GPU ============= */
.elementor-toggle-icon,
.elementor-button { will-change: transform;
} /* ============= Green nav bar — white menu text ============= */
.elementor-element-63cea6e .elementor-heading-title,
.elementor-element-63cea6e .elementor-heading-title a,
.elementor-element-63cea6e a { color: #ffffff !important;
}
.elementor-element-63cea6e .elementor-heading-title a:hover,
.elementor-element-63cea6e a:hover { color: #fbbf24 !important; /* brand gold on hover */
}

/* ============= Listing-page child link grid ============= */
.m88-child-grid {
  background: #f8fafc;
  padding: 48px 24px;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.m88-child-grid-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.m88-child-grid h2 {
  font-size: 26px;
  font-weight: 700;
  color: #0a1628;
  margin: 0 0 8px 0;
}
.m88-child-tag {
  margin: 0 0 20px 0;
  color: #4b5563;
}
.m88-child-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 16px;
}
.m88-child-list li {
  padding: 0;
}
.m88-child-list a {
  display: block;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #1f2937;
  text-decoration: none;
  transition: all 0.15s ease;
  font-size: 14px;
}
.m88-child-list a:hover,
.m88-child-list a:focus {
  border-color: #047857;
  background: #ecfdf5;
  color: #047857;
  transform: translateY(-1px);
}
.m88-child-list a strong { font-weight: 600; }

/* ============= Hub pages (/casino-review/, /maxim88/) ============= */
.m88-hub-hero {
  background: linear-gradient(135deg, #0a1628 0%, #047857 100%);
  color: #fff;
  padding: 64px 24px;
  text-align: center;
}
.m88-hub-hero h1 {
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 16px 0;
  color: #fff;
}
.m88-hub-lede {
  font-size: 18px;
  color: rgba(255,255,255,0.92);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.5;
}
.m88-hub-grid {
  background: #f8fafc;
  padding: 48px 24px;
}
.m88-hub-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.m88-hub-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.m88-hub-list a {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #0a1628;
  text-decoration: none;
  transition: all 0.15s ease;
  min-height: 70px;
  justify-content: center;
}
.m88-hub-list a:hover {
  border-color: #047857;
  background: #ecfdf5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(4,120,87,0.12);
}
.m88-hub-list strong {
  font-size: 16px;
  font-weight: 700;
  color: #0a1628;
  margin-bottom: 4px;
}
.m88-hub-list span {
  font-size: 13px;
  color: #047857;
}
.m88-hub-cta {
  background: #ffffff;
  padding: 56px 24px;
  text-align: center;
  border-top: 1px solid #e5e7eb;
}
.m88-hub-cta h2 {
  font-size: 24px;
  margin: 0 0 12px 0;
  color: #0a1628;
}
.m88-hub-cta h2 a { color: #047857; text-decoration: none; }
.m88-hub-cta h2 a:hover { text-decoration: underline; }
.m88-hub-cta p { color: #4b5563; margin: 0 0 20px 0; }
.m88-cta-btn {
  display: inline-block;
  padding: 12px 28px;
  background: #f7c948;
  color: #0a1628;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  margin: 0 6px;
  transition: all 0.15s ease;
}
.m88-cta-btn:hover { background: #fbbf24; transform: translateY(-1px); }
.m88-cta-secondary { background: #fff; color: #047857; border: 2px solid #047857; padding: 10px 26px; }
.m88-cta-secondary:hover { background: #ecfdf5; }

/* ============= A11y: in-content links must not rely on color alone ============= */
/* Underline only article-body links — explicitly exclude the green nav menu (#63cea6e),
   header, footer, breadcrumbs, and rating widgets so chrome stays clean. */
.elementor-widget-text-editor a:not(.elementor-button):not([role="button"]),
.elementor-widget-theme-post-content a:not(.elementor-button):not([role="button"]) {
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    color: #047857;
}
.elementor-widget-text-editor a:hover,
.elementor-widget-theme-post-content a:hover {
    color: #065f46;
    text-decoration-thickness: 2px;
}
/* Reset for the green nav bar — text was set to white earlier; never underline by default */
.elementor-element-63cea6e a,
.elementor-element-63cea6e .elementor-heading-title,
.elementor-element-63cea6e .elementor-heading-title a {
    text-decoration: none !important;
    font-weight: 800;
}
.elementor-element-63cea6e a:hover {
    text-decoration: none !important;
    color: #fbbf24 !important;
}

/* Maxim88 brand-anchor links specifically — make them stand out */
a[href="/"][title*="Maxim88"] {
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
    color: #047857 !important;
}
a[href="/"][title*="Maxim88"]:hover {
    color: #065f46 !important;
    text-decoration-thickness: 2px;
}

/* Footer/nav links keep their existing color-only style — this is consistent UI chrome
   that doesn't need to be visually emphasized inside text */

/* ============= Promotion page layout — card-style rows ============= */
.elementor-element-155d98e .elementor-inner-section {
    margin-bottom: 20px !important;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(10, 22, 40, 0.07);
    border: 1px solid #e5e7eb;
}
.elementor-element-155d98e .elementor-inner-section .elementor-container {
    align-items: stretch !important;
}
.elementor-element-155d98e .elementor-inner-section .elementor-column .elementor-widget-wrap {
    justify-content: center !important;
    padding: 20px 24px !important;
}
.elementor-element-155d98e .elementor-inner-section .elementor-column:first-child .elementor-widget-wrap {
    padding: 0 !important;
}
.elementor-element-155d98e .elementor-widget-image,
.elementor-element-155d98e .elementor-widget-image .elementor-widget-container {
    height: 100%;
}
.elementor-element-155d98e .elementor-widget-image img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0 !important;
}
.elementor-element-155d98e .elementor-widget-image,
.elementor-element-155d98e .elementor-widget-image .elementor-widget-container,
.elementor-element-155d98e .elementor-widget-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}
.elementor-element-155d98e .elementor-widget-heading .elementor-heading-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0a1628 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.3;
}
.elementor-element-155d98e .elementor-widget-text-editor {
    margin-bottom: 14px;
    color: #374151;
    line-height: 1.55;
}
.elementor-element-155d98e .elementor-widget-button {
    margin-top: 4px;
}
.elementor-element-155d98e .elementor-widget-button .elementor-button {
    background: #047857;
    color: #ffffff !important;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 6px;
}
.elementor-element-155d98e .elementor-widget-button .elementor-button:hover {
    background: #065f46;
}
@media (max-width: 767px) {
    .elementor-element-155d98e .elementor-widget-image img {
        height: auto !important;
        object-fit: contain !important;
    }
}