/*
Theme Name: Viasat Ukraine
Theme URI: https://www.viasatworld.com
Author: Fire Up Design
Description: Single-page landing site for Viasat World channels in Ukraine. All sections editable via Appearance > Customise.
Version: 1.0.3
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: viasat-ukraine
*/

  @font-face{font-family:'Roobert';src:url('assets/fonts/Roobert-Regular.woff2') format('woff2');font-weight:400;font-display:swap;}
  @font-face{font-family:'Roobert';src:url('assets/fonts/Roobert-Medium.woff2') format('woff2');font-weight:500;font-display:swap;}
  @font-face{font-family:'Roobert';src:url('assets/fonts/Roobert-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap;}
  @font-face{font-family:'Roobert';src:url('assets/fonts/Roobert-Bold.woff2') format('woff2');font-weight:700 800;font-display:swap;}

  :root{
    --font:'Roobert','Figtree','Segoe UI',system-ui,sans-serif;
    --navy:#16234A;
    --navy-deep:#0E1A38;
    --navy-ink:#0A1229;
    --navy-line:#26355F;
    --white:#FFFFFF;
    --mist:#B9C4E2;
    --soft:#DCE3F5;
    --c-kino:#C99A17;
    --c-action:#B33A1B;
    --c-world:#2E7D32;
    --c-comedy:#C536A4;
    --c-crime:#F2C400;
    --c-drama:#6A3AA8;
    --c-serial:#17A366;
    --c-history:#35C4F0;
    --c-explore:#E14A1F;
    --c-nature:#4CAF2E;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation:none!important;transition:none!important;}
  }
  body{
    font-family:var(--font);
    background:var(--navy);
    color:var(--white);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  a:focus-visible,button:focus-visible{outline:3px solid var(--c-history);outline-offset:3px;border-radius:2px;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

  /* ---------- signature: channel spectrum bar ---------- */
  .spectrum{display:flex;height:4px;}
  .spectrum span{flex:1;}
  .spectrum .s1{background:var(--c-kino);}   .spectrum .s2{background:var(--c-action);}
  .spectrum .s3{background:var(--c-world);}  .spectrum .s4{background:var(--c-comedy);}
  .spectrum .s5{background:var(--c-crime);}  .spectrum .s6{background:var(--c-drama);}
  .spectrum .s7{background:var(--c-serial);} .spectrum .s8{background:var(--c-history);}
  .spectrum .s9{background:var(--c-explore);}.spectrum .s10{background:var(--c-nature);}

  /* ---------- header ---------- */
  header{position:sticky;top:0;z-index:50;background:rgba(10,18,41,.92);backdrop-filter:blur(10px);}
  .nav{display:flex;align-items:center;justify-content:space-between;height:70px;}
  .logo{display:flex;align-items:center;text-decoration:none;}
  .logo img{height:52px;width:auto;display:block;}
  footer .brand img{height:72px;width:auto;display:block;margin-bottom:14px;}
  nav ul{display:flex;gap:34px;list-style:none;}
  nav ul a{text-decoration:none;font-size:.94rem;font-weight:600;color:var(--mist);transition:color .2s;}
  nav ul a:hover{color:var(--white);}
  .burger{display:none;}

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;background:var(--navy-deep);}
  .hero-bands{position:absolute;inset:0;display:flex;}
  .hero-bands span{flex:1;}
  .hero-bands .b1{background:#194668;} /* history */
  .hero-bands .b2{background:#1F4135;} /* nature  */
  .hero-bands .b3{background:#462632;} /* explore */
  .hero-bands .b4{background:#272255;} /* drama   */
  .hero-bands .b5{background:#3F3B2F;} /* kino    */
  .hero-bands .b6{background:#4A4629;} /* crime   */
  .hero-bands::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(10,18,41,.55) 0%,rgba(10,18,41,.15) 40%,rgba(10,18,41,.35) 100%);}
  .hero .wrap{position:relative;z-index:2;text-align:center;padding-top:25px;padding-bottom:40px;}
  .hero h1{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;letter-spacing:.005em;line-height:1.12;
    text-shadow:0 2px 20px rgba(0,0,0,.35);animation:rise .9s cubic-bezier(.22,1,.36,1) backwards;}
  .hero p{margin:10px auto 0;max-width:620px;font-size:clamp(.95rem,1.6vw,1.1rem);color:var(--soft);font-weight:500;
    text-shadow:0 1px 12px rgba(0,0,0,.35);animation:rise .9s .12s cubic-bezier(.22,1,.36,1) backwards;}
  .hero .cta{display:inline-block;margin-top:38px;background:var(--white);color:var(--navy-ink);font-weight:700;
    font-size:1rem;text-decoration:none;padding:16px 40px;border-radius:6px;
    transition:transform .2s,box-shadow .2s;animation:rise .9s .22s cubic-bezier(.22,1,.36,1) backwards;}
  .hero .cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.4);}

  /* banner: supplied key art, static and non-clickable */
  .hero-strip{margin:20px auto 0;width:fit-content;max-width:100%;border-radius:12px;overflow:hidden;
    box-shadow:0 26px 60px rgba(0,0,0,.5);
    animation:rise .9s .24s cubic-bezier(.22,1,.36,1) backwards;}
  .hero-strip img{display:block;width:auto;max-width:100%;max-height:calc(100vh - 280px);max-height:calc(100svh - 280px);}
  @keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}

  /* ---------- sections ---------- */
  section{padding:92px 0;}
  .eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--mist);margin-bottom:12px;}
  h2{font-size:clamp(1.55rem,3.4vw,2.3rem);font-weight:800;letter-spacing:.005em;margin-bottom:14px;}
  .h2-rule{width:72px;height:4px;display:flex;margin-bottom:44px;}
  .h2-rule span{flex:1;}

  /* ---------- channel cards ---------- */
  .grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
  .card{background:var(--navy-deep);border:1px solid var(--navy-line);border-radius:12px;overflow:hidden;
    transition:transform .25s,box-shadow .25s;}
  .card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.45);}
  .card .art{aspect-ratio:1/1;background-size:cover;background-position:center;position:relative;}
  .card:hover .art::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.05);}
  .card .art.placeholder{display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 100%);}
  .card .art.placeholder b{font-size:1.3rem;font-weight:800;letter-spacing:.08em;color:var(--accent);opacity:.9;text-align:center;padding:0 20px;}
  .card .body{padding:20px 22px 24px;border-top:4px solid var(--accent);}
  .card h3{font-size:1.12rem;font-weight:700;margin-bottom:6px;}
  .card .art .ch-logo{position:absolute;left:16px;bottom:14px;height:54px;width:auto;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.4));}
  .card.featured .art .ch-logo{height:72px;left:20px;bottom:18px;}
  .card p{font-size:.92rem;color:var(--mist);}

  /* featured flagship card: full row, art beside text */
  .card.featured{grid-column:1/-1;display:grid;grid-template-columns:1.6fr 1fr;}
  .card.featured .art{aspect-ratio:auto;min-height:320px;height:100%;}
  .card.featured .body{border-top:none;border-left:4px solid var(--accent);
    display:flex;flex-direction:column;justify-content:center;padding:36px 40px;}
  .card.featured h3{font-size:1.5rem;margin-bottom:10px;}
  .card.featured p{font-size:1rem;}
  @media (max-width:760px){
    .card.featured{display:block;}
    .card.featured .art{aspect-ratio:16/10;min-height:0;height:auto;}
    .card.featured .body{border-left:none;border-top:4px solid var(--accent);padding:20px 22px 24px;}
    .card.featured h3{font-size:1.2rem;}
  }

  /* ---------- viewers ---------- */
  #viewers{background:var(--navy-deep);}
  .viewers-note{color:var(--soft);font-size:clamp(1rem,2vw,1.18rem);max-width:720px;}
  .viewers-note a{color:var(--c-history);font-weight:600;text-decoration:none;}
  .viewers-note a:hover{text-decoration:underline;}

  /* ---------- partners ---------- */
  .partner{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;}
  .partner p{color:var(--soft);margin-bottom:16px;}
  .partner .box{background:var(--navy-deep);border:1px solid var(--navy-line);border-radius:12px;padding:36px;}
  .partner .box strong{display:block;margin-bottom:8px;font-size:1.02rem;}
  .partner .box a{color:var(--c-history);font-weight:600;text-decoration:none;}
  .partner .box a:hover{text-decoration:underline;}
  .partner .box .row{margin-bottom:20px;}
  .partner .box .row:last-child{margin-bottom:0;}

  /* ---------- footer ---------- */
  footer{background:var(--navy-ink);padding:0 0 40px;font-size:.9rem;color:var(--mist);}
  footer .wrap{padding-top:52px;}
  footer .cols{display:flex;justify-content:flex-start;gap:clamp(48px,10vw,140px);flex-wrap:wrap;}
  footer .brand{font-weight:800;letter-spacing:.14em;color:var(--white);margin-bottom:10px;}
  footer a{color:var(--mist);}
  footer .legal{margin-top:34px;padding-top:22px;border-top:1px solid var(--navy-line);font-size:.82rem;line-height:1.7;}

  @media (max-width:760px){
    nav ul{display:none;}
    .burger{display:block;background:none;border:none;color:var(--white);font-size:1.6rem;cursor:pointer;line-height:1;}
    nav.open ul{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:70px;
      background:var(--navy-ink);border-bottom:1px solid var(--navy-line);}
    nav.open ul a{display:block;padding:16px 24px;}
    .hero .wrap{padding-top:32px;padding-bottom:36px;}
    .hero-strip{margin-top:18px;width:100%;}
    .hero-strip img{width:100%;max-height:none;}
    section{padding:64px 0;}
    .partner{grid-template-columns:1fr;}
  }