/* ============================================================
   SITE.CSS — custom helpers for the static PHP build
   - full-bleed stretched sections (replaces Elementor JS)
   - generic game-card styles (used when a new game is added
     without Elementor element ids)
   - simple page (about/contact/disclaimer) styles
   ============================================================ */

/* --- Stretched sections: break out of the .ast-container --- */
.elementor-section-stretched {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    left: 0;
    max-width: 100vw;
}

/* --- Vertically center game-card content (desktop + mobile) --- */
.yg-section > .elementor-container { align-items: center !important; }
.yg-section > .elementor-container > .elementor-column > .elementor-widget-wrap { align-content: center !important; align-items: center !important; }
@media (max-width: 767px) {
    .yg-section > .elementor-container { align-items: center !important; }
    .yg-section > .elementor-container > .elementor-column > .elementor-widget-wrap { align-content: center !important; align-items: center !important; }
}

/* --- Game cards: full-bleed, box spans the full page width (like the real site) --- */
html, body { overflow-x: hidden; }
.elementor-section.yg-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    left: 0 !important;
}

/* --- Generic game card (fallback for games without ids) --- */
.yg-section > .elementor-container { max-width: 1140px; }
.yg-section > .elementor-background-overlay { opacity: 0.13; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; }
.yg-section { transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s; padding: 30px 0 30px 0; }
@media (min-width: 768px) { .yg-section { padding: 80px 100px 80px 100px; } }
@media (max-width: 767px) { .yg-section { padding: 20px 0 20px 0; } }

/* --- Column widths: scoped like the reference per-id rules so they beat
       Elementor's `.elementor-column.elementor-col-25 { width:25% }` (0,2,0) --- */
.elementor .elementor-column.yg-col-num { width: 5%; }
@media (min-width: 768px) { .elementor .elementor-column.yg-col-num { width: 5%; } }
@media (max-width: 767px) { .elementor .elementor-column.yg-col-num { width: 10%; } }

.yg-col-img.elementor-column > .elementor-widget-wrap { justify-content: flex-start; }
.elementor .elementor-column.yg-col-img > .elementor-element-populated { padding: 0 0 0 0; }
.elementor .elementor-column.yg-col-img { width: 10%; }
@media (min-width: 768px) { .elementor .elementor-column.yg-col-img { width: 10%; } }
@media (max-width: 767px) { .elementor .elementor-column.yg-col-img { width: 20%; } }
@media (min-width: 768px) and (max-width: 1024px) { .elementor .elementor-column.yg-col-img { width: 45%; } }

.yg-num-w { font-family: "Plus Jakarta Sans", Sans-serif; font-weight: 400; }
@media (max-width: 767px) { .yg-num-w { font-size: 11px; } }

.yg-img-w { text-align: start; }

.elementor .elementor-column.yg-col-name { width: 60%; }
@media (min-width: 768px) { .elementor .elementor-column.yg-col-name { width: 60%; } }
@media (max-width: 767px) { .elementor .elementor-column.yg-col-name { width: 40%; } }
.elementor .elementor-column.yg-col-name > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute) { --kit-widget-spacing: 5px; }
.yg-name-w .elementor-heading-title { font-family: "Plus Jakarta Sans", Sans-serif; font-weight: 700; color: #000000; }
@media (max-width: 767px) { .yg-name-w .elementor-heading-title { font-size: 15px; } }

.yg-icon-w .elementor-icon-list-icon svg { fill: #EB2800; transition: fill 0.3s; }
.yg-icon-w { --e-icon-list-icon-size: 20px; --icon-vertical-offset: 0px; }
.yg-icon-w .elementor-icon-list-item > .elementor-icon-list-text { font-family: "Plus Jakarta Sans", Sans-serif; font-weight: 600; color: #EB2800; }
@media (max-width: 767px) {
    .yg-icon-w { --e-icon-list-icon-size: 10px; }
    .yg-icon-w .elementor-icon-list-item > .elementor-icon-list-text { font-size: 10px; line-height: 1.3em; }
}

.yg-wd-w .elementor-icon-list-icon svg { fill: #009C18; }
.yg-wd-w .elementor-icon-list-icon { padding-inline-end: 0; }
.yg-wd-w .elementor-icon-list-item > .elementor-icon-list-text { font-family: "Plus Jakarta Sans", Sans-serif; font-size: 16px; font-weight: 600; color: #009C18; }
@media (max-width: 767px) { .yg-wd-w .elementor-icon-list-item > .elementor-icon-list-text { font-size: 10px; line-height: 1.3em; } }

.elementor .elementor-column.yg-col-btn > .elementor-element-populated { padding: 0 0 0 50px; }
.elementor .elementor-column.yg-col-btn { width: 30%; }
.yg-col-btn.elementor-column > .elementor-widget-wrap { justify-content: flex-end; }
@media (max-width: 1024px) { .elementor .elementor-column.yg-col-btn > .elementor-element-populated { padding: 0 0 0 20px; } }
@media (max-width: 767px) {
    .elementor .elementor-column.yg-col-btn { width: 30%; }
    .yg-col-btn.elementor-column > .elementor-widget-wrap { justify-content: flex-end; }
    .elementor .elementor-column.yg-col-btn > .elementor-element-populated { margin: 20px 0 0 0; padding: 0 0 0 0; }
}

.yg-btn-w .elementor-button { background-color: #D80000; font-family: "Plus Jakarta Sans", Sans-serif; font-weight: 500; }
.yg-btn-w { margin: 30px 0 calc(var(--kit-widget-spacing, 0px) + 0px) 0; }
.yg-btn-w .elementor-button-content-wrapper { flex-direction: row; }
@media (max-width: 1024px) { .yg-btn-w { margin: 0 0 calc(var(--kit-widget-spacing, 0px) + 0px) 0; } }
@media (max-width: 767px) {
    .yg-btn-w { margin: 0 0 calc(var(--kit-widget-spacing, 0px) + 0px) 15px; }
    .yg-btn-w .elementor-button { font-size: 13px; padding: 10px 10px 10px 10px; }
}

/* --- App pages: related-app cards use the same red download button as the home page --- */
.elementor-2047 .yg-btn-w .elementor-button { background-color: #D80000; }

/* --- App name / icon act as links to the app page (home cards) --- */
.yg-name-w .elementor-heading-title a { color: inherit; text-decoration: none; }
.yg-name-w .elementor-heading-title a:hover { color: #D80000; text-decoration: underline; }
.yg-img-w a { display: inline-block; }

/* --- Header menu: red + bold on hover (overrides Astra green --ast-global-color-1) --- */
.main-header-menu .menu-link:hover,
.main-header-menu .menu-link:focus,
.ast-header-break-point .main-header-menu .menu-link:hover,
.ast-header-break-point .main-header-menu .menu-link:focus {
    color: #D80000 !important;
    font-weight: 700 !important;
}

/* --- Simple pages (About / Contact / Disclaimer) --- */.elementor-element-about1w { margin: 20px 0 15px 0; }
.elementor-element-about1w .elementor-heading-title { font-family: "Plus Jakarta Sans", Sans-serif; font-weight: 700; color: #000000; font-size: 26px; }
.elementor-element-about1t { color: #4a4a4a; }
.elementor-element-about1t p { font-family: "Plus Jakarta Sans", Sans-serif; font-size: 16px; line-height: 1.8; margin: 0 0 1.5em; }
.elementor-element-about1t h2 { font-family: "Plus Jakarta Sans", Sans-serif; font-size: 21px; font-weight: 700; color: #000000; line-height: 1.4; margin: 1.6em 0 0.6em; }
.elementor-element-about1t h3 { font-family: "Plus Jakarta Sans", Sans-serif; font-size: 17px; font-weight: 700; color: #222222; line-height: 1.4; margin: 1.4em 0 0.5em; }
.elementor-element-about1t ul { margin: 0 0 1.5em; padding-left: 1.4em; }
.elementor-element-about1t li { font-family: "Plus Jakarta Sans", Sans-serif; font-size: 15px; line-height: 1.8; color: #4a4a4a; margin-bottom: 0.5em; }
.elementor-element-about1t a { color: #D80000; text-decoration: underline; }