/*
 Theme Name:  Epic Entertainment – Hello Elementor Child
 Theme URI:   https://epicentertainmentgames.com/
 Description: Child theme for Hello Elementor. Holds custom styles and overrides.
 Author:      Epic Entertainment
 Author URI:  https://epicentertainmentgames.com/
 Template:    hello-elementor
 Version:     1.0.0
 License:     GPL-2.0-or-later
 Text Domain: epic-hello-child
*/

/* =========================================================
   Epic Entertainment Games — Core Theme Styles (v1)
   Typography: Barlow / Roboto / Poppins
   Palette: #000E28, #131E5E, #000E25, #02153D, #1D70C0, #046BD2, #C40C3E, #FFFFFF, #F8F9FF
   ========================================================= */

/* ---- Fonts (self-host if preferred) ---- */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Poppins:wght@400;600;700&family=Roboto:wght@400;600;700&display=swap");

/* ---- CSS Variables ---- */
:root {
  --ep-blue-900:#000E28; --ep-blue-800:#000E25; --ep-blue-700:#131E5E; --ep-blue-600:#02153D;
  --ep-blue-300:#1D70C0; --ep-link:#046BD2; --ep-crimson:#C40C3E; --ep-white:#FFFFFF;
  --ep-white-88:rgba(255,255,255,.88); --ep-offwhite:#F8F9FF; --ep-ink:var(--ep-white);
  --ep-muted:var(--ep-white-88); --ep-line:rgba(255,255,255,.08);
  --h1:clamp(36px,6vw,60px); --h2:clamp(30px,5vw,48px); --h2-sub:clamp(22px,3.2vw,30px);
  --h3:27px; --text:16px; --small:15px; --num:55px;
  --radius:16px; --radius-sm:12px; --container:1200px; --gutter:24px;
  --shadow:0 12px 36px rgba(0,0,0,.28); --transition:.25s ease;
}

/* Reset & base */
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--ep-blue-800);color:var(--ep-ink);
  font:400 var(--text)/1.7 "Barlow",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block;border-radius:var(--radius-sm)}
a{color:var(--ep-link);text-decoration:none;transition:color var(--transition),opacity var(--transition)}
a:hover{color:#2A8BEA}
.container{width:min(100%,var(--container));margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:84px;border-top:1px solid var(--ep-line)}

/* Typography */
h1,h2,h3{margin:0 0 12px;line-height:1.15;letter-spacing:-.015em;color:var(--ep-white)}
h1{font:600 var(--h1)/1.08 "Barlow",sans-serif}
h2{font:600 var(--h2)/1.12 "Barlow",sans-serif;text-align:center}
h2.sub{font-size:var(--h2-sub);font-weight:600}
h3{font:600 var(--h3)/1.2 "Barlow",sans-serif}
p{margin:0 0 14px;color:var(--ep-muted)}
.lead{color:var(--ep-offwhite);font-size:clamp(18px,1.8vw,22px);line-height:1.65}
.num,.step-num,.big-num{font:600 var(--num)/1 "Roboto",sans-serif;color:var(--ep-crimson)}

/* Background hierarchy / shell */
.topbar{background:var(--ep-blue-300);color:var(--ep-white)}
.header{background:var(--ep-blue-900);color:var(--ep-white)}
.section--deep{background:var(--ep-blue-700)}
.section--dark{background:var(--ep-blue-900)}
.dropdown,.panel--light{background:var(--ep-offwhite);color:#232323;border:1px solid rgba(0,0,0,.06)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border:0;cursor:pointer;border-radius:18px;
  font:400 16px/1 "Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;white-space:nowrap;text-align:center}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--ep-crimson);color:#fff;box-shadow:0 10px 24px rgba(196,12,62,.35)}
.btn--primary:hover{filter:brightness(.94);box-shadow:0 12px 32px rgba(196,12,62,.45);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ep-offwhite);border:2px solid var(--ep-line)}
.btn--ghost:hover{border-color:var(--ep-crimson);background:rgba(196,12,62,.12)}
.btn--block{width:100%}
.btn--pill{background:var(--ep-crimson);color:#fff;padding:12px 20px;border-radius:14px;font-weight:600}

/* Components (hero/cards/strips/tabs/etc.) */
.hero{background:var(--ep-blue-700);border-top:none}
.hero__grid{display:grid;gap:32px;grid-template-columns:1.1fr .9fr;align-items:center}
.hero__badge{display:inline-block;margin-bottom:14px;padding:8px 14px;border-radius:999px;font-weight:700;color:var(--ep-offwhite);background:#0F1D55;border:1px solid rgba(255,255,255,.08)}
.hero__stats{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
.hero__stat{display:flex;gap:12px;align-items:center;padding:12px;background:#0A1732;border:1px solid var(--ep-line);border-radius:14px}
.hero__image{position:relative}
.hero__image img{border-radius:18px;box-shadow:var(--shadow)}
.hero__float{position:absolute;left:12px;bottom:12px;padding:10px 12px;gap:8px;display:flex;align-items:center;background:rgba(0,14,37,.85);border:1px solid var(--ep-line);border-radius:14px;backdrop-filter:blur(4px)}

.card{background:linear-gradient(180deg,rgba(19,30,94,.33),rgba(0,14,40,.25));border:1px solid var(--ep-line);border-radius:var(--radius);padding:22px;box-shadow:0 6px 22px rgba(0,0,0,.2);transition:transform var(--transition),border-color var(--transition)}
.card:hover{transform:translateY(-4px);border-color:var(--ep-crimson)}

.platform{display:flex;flex-direction:column;gap:12px}
.platform img{width:100%;height:180px;object-fit:cover;background:#13264A}

.strip--trust{background:linear-gradient(180deg,#142859,#131E5E)}
.trust__row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.trust__badge{display:flex;gap:10px;align-items:center;padding:10px 16px;border:1px solid var(--ep-line);background:#0A1732;color:var(--ep-offwhite);border-radius:999px;font-weight:800}

.tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:12px 0 20px}
.tab{padding:10px 16px;border-radius:999px;border:1px solid var(--ep-line);background:#0C1731;color:#DCE6FF;font-weight:800;cursor:pointer;transition:var(--transition)}
.tab.is-active{border-color:var(--ep-crimson);background:rgba(196,12,62,.14);color:#FFE4EA}

.locs{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.loc{text-align:center;padding:16px;border:1px solid var(--ep-line);border-radius:14px;background:#0A1732;color:var(--ep-offwhite);font-weight:600}

.bullets{display:grid;gap:12px}
.bullet{display:flex;gap:12px;align-items:flex-start;color:var(--ep-offwhite)}
.bullet i{margin-top:7px;width:10px;height:10px;border:2px solid var(--ep-crimson);border-radius:3px}

/* Forms */
.form{background:var(--ep-blue-700);border:1px solid var(--ep-line);border-radius:18px;padding:24px}
.form__grid{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.form label>span{display:block;margin-bottom:6px;font:600 14px/1 "Poppins",sans-serif;color:var(--ep-offwhite)}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--ep-line);background:#0A1732;color:var(--ep-white);font:400 15px/1.4 "Poppins",sans-serif;transition:var(--transition)}
.form textarea{min-height:120px;resize:vertical;grid-column:1/-1}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--ep-crimson);box-shadow:0 0 0 3px rgba(196,12,62,.14)}
.form .submit{grid-column:1/-1}

.channels{display:flex;gap:10px;flex-wrap:wrap}
.ch-btn{display:inline-flex;gap:10px;align-items:center;padding:12px 18px;border-radius:999px;font-weight:800}
.ch-btn--wa{background:#0b2b20;color:#E9F1FF;border:2px solid #25D366}
.ch-btn--tg{background:#0b2233;color:#E9F1FF;border:2px solid #2A82C7}
.ch-btn--sg{background:#1d1d1d;color:#E9F1FF;border:2px solid #8e8e8e}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.72);z-index:9999}
.modal[aria-hidden="false"]{display:flex}
.modal__panel{width:min(760px,96vw);background:var(--ep-blue-700);border:1px solid var(--ep-line);border-radius:20px;box-shadow:var(--shadow);padding:26px}
.modal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.modal__close{background:transparent;color:var(--ep-offwhite);border:0;font:700 20px/1 "Barlow";cursor:pointer}

/* Footer CTA */
.footer-cta{text-align:center;padding:48px;border-top:1px solid var(--ep-line);background:linear-gradient(180deg,#142859,#131E5E)}

/* Utilities */
.center{text-align:center}
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:1.1fr .9fr}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.block{display:block}
.mt-0{margin-top:0}.mt-12{margin-top:12px}.mt-20{margin-top:20px}
.mb-0{margin-bottom:0}.mb-10{margin-bottom:10px}

/* Responsive */
@media (max-width:1100px){.g-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .hero__grid{grid-template-columns:1fr;gap:28px}
  section{padding-block:68px}
}
@media (max-width:680px){
  .container{padding-inline:16px}
  .hero__stats{grid-template-columns:1fr 1fr}
  .locs{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
  .btn--block{width:100%}
}

/* Elementor helpers */
.elementor-container,.e-con{--container-max-width:var(--container)}
.elementor a.elementor-button,.e-button{border-radius:18px;font-family:"Poppins",sans-serif;font-weight:400;font-size:16px}
.e-btn-primary{background:var(--ep-crimson);color:#fff}
.e-btn-primary:hover{filter:brightness(.94)}
.elementor-section{background-color:transparent}

/* Extra layout helpers from your snippet */
.container{max-width:1200px;padding-left:24px;padding-right:24px}
h1{max-width:18ch;font-size:clamp(2rem,5.2vw,3.75rem);line-height:1.08}
.lead{max-width:46rem}
.hero{isolation:isolate}
.hero-grid{display:grid;gap:24px;grid-template-columns:1fr;align-items:center}
.hero-grid>.col-img{order:-1}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:32px}
  .hero-grid>.col-img{order:unset}
}
.media{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0A1732}
.media--hero{aspect-ratio:16/10}
.media--wide{aspect-ratio:21/10}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
@media (min-width:1024px){.media--hero{aspect-ratio:21/9}}
.hero-float{left:12px;bottom:12px;max-width:80%;display:flex;gap:8px;align-items:center;padding:8px 10px;background:rgba(7,18,37,.85);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(4px)}
.hero-float .muted{font-size:.9rem}
.hero-stats{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:12px}
@media (min-width:740px){.hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stat-item{display:flex;gap:10px;align-items:center;background:#0A1732;border:1px solid var(--line);border-radius:12px;padding:10px}
.stack-sm{display:flex;flex-wrap:wrap;gap:10px}
.stack-sm .btn{flex:1 1 100%}
@media (min-width:640px){.stack-sm .btn{flex:0 0 auto}}
.platform-card .media,.card .media{aspect-ratio:16/10}
.card:hover{transform:translateY(-3px)}
#why .media--wide{aspect-ratio:16/9}
@media (min-width:1280px){#why .media--wide{aspect-ratio:21/9}}
.loc-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (min-width:640px){.loc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.loc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.leadform form{grid-template-columns:1fr}
@media (min-width:740px){.leadform form{grid-template-columns:1fr 1fr}.leadform textarea,.leadform .submit-row{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:1.1fr .9fr}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.grid>*{min-width:0}
.card{height:100%}

/* ---- Force all headings to white (keep .grad accent) ---- */
h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-heading .elementor-heading-title *:not(.grad) {
  color: #fff !important;
  -webkit-text-fill-color: #fff;       /* fixes odd dark fills on some browsers */
  mix-blend-mode: normal;              /* neutralize blend/overlay effects */
  opacity: 1;                          /* defeat dimmed heading styles */
}

/* if any headings got tinted by a utility class */
[class*="heading"] h1,
[class*="heading"] h2,
[class*="heading"] h3 {
  color: #fff !important;
}

/* keep your accent spans */
.grad { color: var(--ep-crimson, #C40C3E) !important; }

/* ===== TYPOGRAPHY + COLOR FIX ===== */

/* Use Elementor or fallback fonts */
:root {
  --ep-heading-font: var(--e-global-typography-primary-font-family, inherit);
  --ep-body-font: var(--e-global-typography-text-font-family, inherit);
}

/* Body text */
body {
  font-family: var(--ep-body-font), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: var(--ep-white, #FFFFFF);
}

/* Headings — always white on dark backgrounds */
h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--ep-heading-font), var(--ep-body-font), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  line-height: 1.15;
}

/* Accent span inside headings */
.grad { color: var(--ep-crimson, #C40C3E) !important; }

/* Paragraphs + light backgrounds (like red blocks) */
p, .elementor-widget-text-editor, .card p, .elementor-text-editor p {
  font-family: var(--ep-body-font), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: #111 !important;  /* readable on white/red backgrounds */
}

/* Automatically detect dark sections and invert text to white */
.section--dark p,
.section--deep p,
.card[style*="background:#0"],
.elementor-section[data-background-color*="#0"] p,
.elementor-section[data-background-color*="rgb(0"] p {
  color: #fff !important;
}

/* Buttons & labels inherit */
.btn,
.form label > span,
.elementor a.elementor-button,
.e-button {
  font-family: inherit !important;
}

/* Fix Mission section red card text (white text) */
.elementor-section [style*="background-color:#C40C3E"] p,
.elementor-section [style*="background-color: rgb(196,12,62)"] p,
.elementor-section [style*="background:#C40C3E"] p {
  color: #fff !important;
}

/* Safety for mixed media cards */
.card, .loc, .trust__badge, .tab {
  color: #fff;
}

.entry-hero-img { width: 100%; height: auto; display: block; }

/* Ensure H2s are left-aligned sitewide on posts (and guides later) */
.single-post .entry-content h2,
.single-guides .entry-content h2 { text-align: left; }

/* Archive card image: no crop, natural ratio */
.ba-card .ba-thumb { display:block; border-radius:12px; overflow:hidden; border:1px solid #1a2a4a; background:#0b1731; }
.ba-card .ba-thumb img { width:100%; height:auto; display:block; }

/* Optional: style for TOC */
.entry-toc { padding:14px; border:1px solid #1a2a4a; border-radius:12px; background:#0e1d3a; margin: 18px 0; }
.entry-toc ul { margin:0; padding-left:16px; }
.entry-toc li { margin:8px 0; }
.entry-toc a { text-decoration:none; }