/*
 * WorldCupSpain V7 UI Polish
 * Visual-only override: contrast + responsive header/mobile polish.
 * Loaded AFTER site.css so existing application logic remains untouched.
 */

/* ---------- Shared polish ---------- */
:root{
  --ui-shadow:0 14px 36px rgba(2,12,23,.18);
  --ui-radius:14px;
}

.topbar{
  box-shadow:0 1px 0 rgba(255,255,255,.04),0 8px 24px rgba(2,12,23,.08);
}
.nav{gap:22px}
.brand{flex-shrink:0}
.brand span{min-width:0}
.brand b,.brand small{white-space:nowrap}
.plan,.premium-nav,.account-nav{white-space:nowrap}
.plan{display:inline-flex;align-items:center;justify-content:center;line-height:1.1}

.hero-copy h1{
  text-wrap:balance;
  text-shadow:0 3px 18px rgba(0,0,0,.35);
}
.hero-copy p,.hero-copy small{text-shadow:0 2px 10px rgba(0,0,0,.32)}
.countbox{color:#f8fafc}
.countbox label,.countbox p{color:#dbe8f4}
.countdown b{color:#fff}
.countdown span{color:#cbd7e3}

.panel,.explore,.partners,.toolgrid,.contentpanel{
  box-shadow:var(--ui-shadow);
}

/* ---------- Light theme: enforce real contrast ---------- */
body.theme-light{
  --text:#17283a;
  --muted:#53677b;
  --line:#c8d4df;
  --theme-link:#b92130;
  color:#17283a;
}

body.theme-light .topbar{
  background:rgba(255,255,255,.98);
  border-color:#d7e0e8;
}
body.theme-light .brand b,
body.theme-light .nav nav a,
body.theme-light .account-nav{color:#142538}
body.theme-light .brand small{color:#ef3f46}
body.theme-light .premium-nav{color:#a87400}
body.theme-light .langs{border-color:#9aabba}
body.theme-light .langs a{color:#24384b;background:#fff}
body.theme-light .langs a:hover{background:#eef3f7}

/* Hero remains dark/photo-based even when site theme is light. */
body.theme-light .hero{color:#fff}
body.theme-light .hero-shade{
  background:
    linear-gradient(90deg,rgba(3,16,29,.94) 0%,rgba(3,16,29,.78) 48%,rgba(3,16,29,.56) 100%),
    linear-gradient(0deg,#eaf1f7 0%,rgba(3,16,29,.04) 34%);
}
body.theme-light .hero-copy h1,
body.theme-light .hero-copy p,
body.theme-light .hero-copy small{color:#fff!important}
body.theme-light .hero-copy p{opacity:.97}
body.theme-light .hero-copy small{color:#d9e5ef!important}
body.theme-light .btn.dark{
  color:#fff;
  background:rgba(4,17,30,.68);
  border-color:#9db0c1;
}
body.theme-light .btn.dark:hover{background:rgba(4,17,30,.9)}
body.theme-light .countbox{
  background:rgba(4,17,30,.92);
  border-color:#71869a;
  color:#fff;
}
body.theme-light .countbox label,
body.theme-light .countbox p{color:#dce8f3}
body.theme-light .countdown div{
  background:#091a2b;
  border-color:#41596e;
}
body.theme-light .countdown b{color:#fff}
body.theme-light .countdown span{color:#d6e0ea}

/* White cards must use dark readable text. */
body.theme-light .toolgrid{background:#fff;color:#102235;border-color:#c8d4df}
body.theme-light .toolgrid a{color:#102235;border-color:#d2dce5}
body.theme-light .toolgrid a:hover{background:#f0f5f9;color:#b92130}
body.theme-light .toolgrid b{color:#102235}

body.theme-light .panel,
body.theme-light .explore,
body.theme-light .partners,
body.theme-light .contentpanel,
body.theme-light .admin-card,
body.theme-light .settings-group,
body.theme-light .statbox,
body.theme-light .stadium-picker,
body.theme-light .weather-city{
  background:#fff;
  color:#17283a;
  border-color:#c8d4df;
}
body.theme-light .panel h1,
body.theme-light .panel h2,
body.theme-light .panel h3,
body.theme-light .panel h4,
body.theme-light .explore h3,
body.theme-light .partners h3,
body.theme-light .contentpanel h1,
body.theme-light .contentpanel h2,
body.theme-light .contentpanel h3{color:#102235}
body.theme-light .panel p,
body.theme-light .contentpanel p,
body.theme-light .prose,
body.theme-light .tickets ul{color:#42576b}
body.theme-light .panelhead>a,
body.theme-light .tickets>a{color:#c82935;font-weight:700}

/* News cards are intentionally dark; force their text light. */
body.theme-light .newscards a,
body.theme-light .news-index-card{
  background:#081a2a;
  border-color:#29445d;
  color:#f7fafc;
}
body.theme-light .newscards h4,
body.theme-light .news-index-card h2,
body.theme-light .news-index-card h3{color:#f7fafc}
body.theme-light .newscards small,
body.theme-light .news-index-card p{color:#b9c8d6}
body.theme-light .news-empty{color:#53677b;border-color:#aebdca;background:#f7fafc}
body.theme-light .news-empty b{color:#17283a}

/* Explore cards and lists: no grey-on-grey. */
body.theme-light .exploregrid a{
  background:#f8fbfd;
  border-color:#ccd8e2;
  color:#142538;
}
body.theme-light .exploregrid b{color:#142538}
body.theme-light .exploregrid span{color:#5a6e82}
body.theme-light .stadiumlist>a{border-color:#d6e0e8;color:#142538}
body.theme-light .stadiumlist span small{color:#66798b}

body.theme-light .pagehero h1,
body.theme-light .pagehero p{color:#fff}
body.theme-light .notice{background:#f5f8fb;color:#20364a;border-color:#c3d0dc}
body.theme-light .table th{color:#4c6175}
body.theme-light .table td{color:#1b3043;border-color:#d8e1e9}
body.theme-light footer,
body.theme-light .independent-note{color:#53677b}
body.theme-light .subscribe span b{color:#17283a}
body.theme-light .subscribe span small{color:#5c7084}

/* ---------- Desktop refinement ---------- */
@media (min-width:1101px){
  .topbar{height:70px}
  .brand img{width:38px;height:46px}
  .brand b{font-size:21px}
  .nav nav{gap:24px}
  .nav-actions{gap:11px}
  .plan{padding:12px 18px}
}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .nav{gap:14px}
  .brand{min-width:0;flex:1}
  .brand b{font-size:19px}
  .nav-actions{margin-left:auto;flex-shrink:0}
}

/* ---------- Mobile header: two clean rows, no ugly word wrapping ---------- */
@media (max-width:700px){
  .topbar{
    height:auto;
    min-height:98px;
    position:sticky;
  }
  .nav{
    height:auto;
    min-height:98px;
    padding:7px 0 8px;
    display:flex;
    flex-wrap:wrap;
    align-content:center;
    column-gap:8px;
    row-gap:6px;
  }
  .brand{
    width:100%;
    max-width:100%;
    flex:0 0 100%;
    gap:8px;
  }
  .brand img{
    width:32px;
    height:39px;
    flex:0 0 auto;
  }
  .brand span{display:block;overflow:hidden}
  .brand b{
    display:block;
    width:100%;
    font-size:clamp(16px,5vw,20px);
    line-height:1.05;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
  }
  .brand small{
    display:block;
    font-size:clamp(7px,2.35vw,9px);
    line-height:1.25;
    white-space:nowrap;
  }
  .nav-actions{
    width:100%;
    flex:0 0 100%;
    margin:0;
    justify-content:flex-end;
    gap:10px;
    min-width:0;
  }
  .nav-actions .langs{display:none!important}
  .premium-nav,.account-nav{
    font-size:11px;
    line-height:1;
    white-space:nowrap;
  }
  .plan{
    font-size:11px;
    padding:10px 13px;
    min-height:36px;
    white-space:nowrap;
    border-radius:7px;
  }

  .hero-grid{
    padding-top:32px;
    padding-bottom:28px;
    min-height:0;
    gap:18px;
  }
  .hero-copy{max-width:100%}
  .hero-copy h1{
    font-size:clamp(29px,8.8vw,40px);
    line-height:1.06;
    letter-spacing:.01em;
    margin-bottom:18px;
  }
  .hero-copy p{
    font-size:15px;
    line-height:1.55;
    max-width:100%;
  }
  .hero-copy .btn{
    font-size:13px;
    padding:12px 16px;
    margin-right:8px;
  }
  .hero-copy small{
    font-size:12px;
    line-height:1.55;
  }
  .toolstrip{margin-top:0}
  .toolgrid a{min-height:122px;display:flex;flex-direction:column;justify-content:center}
  .toolgrid i{font-size:30px}
  .toolgrid b{font-size:12px;line-height:1.3}
}

@media (max-width:430px){
  .wrap{width:min(100% - 16px,var(--max))}
  .topbar{min-height:94px}
  .nav{min-height:94px;padding-top:6px;padding-bottom:7px}
  .brand img{width:29px;height:36px}
  .brand b{font-size:16px}
  .brand small{font-size:7px}
  .nav-actions{gap:7px;justify-content:space-between}
  .premium-nav,.account-nav{font-size:10.5px}
  .plan{font-size:10.5px;padding:9px 10px;min-height:34px}
  .hero-copy h1{font-size:clamp(27px,9vw,34px)}
}

/* Accessible focus states */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #ff4a52;
  outline-offset:2px;
}


/* =========================================================
   WORLD CUP SPAIN - CITY CARDS CONTRAST FIX
   ========================================================= */

.city-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}


/* CARD */
.city-image-card {
    position: relative;
    display: block;
    min-height: 330px;
    overflow: hidden;

    border-radius: 16px;
    border: 1px solid rgba(15, 39, 63, 0.22);

    background: #07182a;

    box-shadow:
        0 6px 18px rgba(8, 25, 43, 0.10),
        0 2px 5px rgba(8, 25, 43, 0.08);

    text-decoration: none !important;

    isolation: isolate;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


/* IMAGE */
.city-image-card img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;

    filter:
        saturate(1.05)
        contrast(1.03)
        brightness(1.02);

    transition:
        transform .4s ease,
        filter .4s ease;
}


/*
   DARKEN ONLY THE LOWER AREA.
   Top of image stays highly visible.
*/
.city-image-card::after {
    content: "";

    position: absolute;
    z-index: 1;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,

            rgba(2, 12, 24, 0.00) 0%,
            rgba(2, 12, 24, 0.00) 38%,
            rgba(2, 12, 24, 0.18) 51%,
            rgba(2, 12, 24, 0.55) 65%,
            rgba(2, 12, 24, 0.86) 81%,
            rgba(2, 12, 24, 0.97) 100%
        );
}


/* TEXT CONTAINER */
.city-image-card > div {
    position: absolute;
    z-index: 3;

    left: 22px;
    right: 22px;
    bottom: 20px;

    color: #ffffff !important;
}


/* COUNTRY LABEL */
.city-image-card .pill {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-bottom: 8px;

    padding: 5px 11px;

    border: 1px solid rgba(255,255,255,.20);
    border-radius: 6px;

    background: #ef3f49 !important;

    color: #ffffff !important;

    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;

    text-transform: uppercase;
    letter-spacing: .035em;

    box-shadow:
        0 2px 8px rgba(0,0,0,.22);

    text-shadow: none !important;
}


/* CITY NAME */
.city-image-card h2 {
    position: relative;

    margin: 2px 0 11px;

    color: #ffffff !important;

    font-size: clamp(25px, 2vw, 34px);
    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -0.025em;

    text-shadow:
        0 2px 4px rgba(0,0,0,.75),
        0 6px 18px rgba(0,0,0,.65);
}


/* SMALL RED ACCENT UNDER CITY NAME */
.city-image-card h2::after {
    content: "";

    display: block;

    width: 42px;
    height: 4px;

    margin-top: 9px;

    border-radius: 99px;

    background: #f13f49;
}


/* CITY DESCRIPTION */
.city-image-card p {
    margin: 0 0 12px;

    max-width: 95%;

    color: #f7f9fc !important;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;

    opacity: 1 !important;

    text-shadow:
        0 1px 3px rgba(0,0,0,.95),
        0 3px 12px rgba(0,0,0,.75);

    display: -webkit-box;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* OPEN CITY GUIDE */
.city-image-card small {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-top: 1px;

    color: #ffffff !important;

    font-size: 14px;
    font-weight: 800;

    opacity: 1 !important;

    text-shadow:
        0 1px 3px rgba(0,0,0,.9);
}


/* HOVER */
.city-image-card:hover {
    transform: translateY(-4px);

    border-color: rgba(239,63,73,.45);

    box-shadow:
        0 15px 35px rgba(8,25,43,.18),
        0 4px 10px rgba(8,25,43,.10);
}


.city-image-card:hover img {
    transform: scale(1.045);

    filter:
        saturate(1.10)
        contrast(1.04)
        brightness(1.04);
}


/* Keep all text white even when LIGHT THEME is active */
.theme-modern-light .city-image-card,
.theme-modern-light .city-image-card h2,
.theme-modern-light .city-image-card p,
.theme-modern-light .city-image-card small,

.theme-light .city-image-card,
.theme-light .city-image-card h2,
.theme-light .city-image-card p,
.theme-light .city-image-card small {

    color: #ffffff !important;
}


/* TABLET */
@media (max-width: 1000px) {

    .city-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* MOBILE */
@media (max-width: 650px) {

    .city-card-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }


    .city-image-card {
        min-height: 320px;
    }


    .city-image-card > div {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }


    .city-image-card h2 {
        font-size: 28px;
    }


    .city-image-card p {
        font-size: 14px;
        line-height: 1.42;
    }

}


/* VERY SMALL PHONES */
@media (max-width: 380px) {

    .city-image-card {
        min-height: 300px;
    }


    .city-image-card h2 {
        font-size: 25px;
    }


    .city-image-card p {
        font-size: 13.5px;
    }

}



/* =========================================================
   WORLD CUP 2030 - HOST COUNTRY COLORS
   Spain = Gold
   Portugal = Green
   Morocco = Red
   ========================================================= */

:root {
    --country-spain: #D9A400;
    --country-portugal: #168447;
    --country-morocco: #C62828;
}


/* HEADER COUNTRY NAMES */

.brand-countries {
    display: flex;
    align-items: center;
    gap: 4px;

    font-size: 12px;
    line-height: 1;
    font-weight: 900;

    white-space: nowrap;
}


.country-spain {
    color: var(--country-spain) !important;
}

.country-portugal {
    color: var(--country-portugal) !important;
}

.country-morocco {
    color: var(--country-morocco) !important;
}

.country-separator {
    color: #64748b !important;
}


/* =========================================================
   GLOBAL COUNTRY COLORS
   Use these classes anywhere on the website
   ========================================================= */

.spain-color,
.country-spain-color {
    color: var(--country-spain) !important;
}

.portugal-color,
.country-portugal-color {
    color: var(--country-portugal) !important;
}

.morocco-color,
.country-morocco-color {
    color: var(--country-morocco) !important;
}


/* BACKGROUNDS */

.spain-bg {
    background-color: var(--country-spain) !important;
    color: #111827 !important;
}

.portugal-bg {
    background-color: var(--country-portugal) !important;
    color: #ffffff !important;
}

.morocco-bg {
    background-color: var(--country-morocco) !important;
    color: #ffffff !important;
}


/* BORDERS */

.spain-border {
    border-color: var(--country-spain) !important;
}

.portugal-border {
    border-color: var(--country-portugal) !important;
}

.morocco-border {
    border-color: var(--country-morocco) !important;
}


/* =========================================================
   COUNTRY ICONS / BADGES
   ========================================================= */

.country-icon.spain,
.country-badge.spain {
    background: var(--country-spain) !important;
    border-color: var(--country-spain) !important;
}

.country-icon.portugal,
.country-badge.portugal {
    background: var(--country-portugal) !important;
    border-color: var(--country-portugal) !important;
}

.country-icon.morocco,
.country-badge.morocco {
    background: var(--country-morocco) !important;
    border-color: var(--country-morocco) !important;
}


/* SVG ICONS */

.country-icon.spain svg {
    fill: var(--country-spain) !important;
    color: var(--country-spain) !important;
}

.country-icon.portugal svg {
    fill: var(--country-portugal) !important;
    color: var(--country-portugal) !important;
}

.country-icon.morocco svg {
    fill: var(--country-morocco) !important;
    color: var(--country-morocco) !important;
}


/* =========================================================
   COUNTRY PILLS
   ========================================================= */

.country-pill.spain {
    background: rgba(217,164,0,.14) !important;
    color: #9A7400 !important;
    border: 1px solid rgba(217,164,0,.40) !important;
}

.country-pill.portugal {
    background: rgba(22,132,71,.13) !important;
    color: #168447 !important;
    border: 1px solid rgba(22,132,71,.35) !important;
}

.country-pill.morocco {
    background: rgba(198,40,40,.12) !important;
    color: #C62828 !important;
    border: 1px solid rgba(198,40,40,.35) !important;
}


/* Mobile */

@media (max-width: 650px) {

    .brand-countries {
        font-size: 10px;
        gap: 3px;
    }

}