/*
Theme Name: Pro Miroslav
Theme URI: https://www.youtube.com/@PROMIROSLAV
Author: Pro Miroslav
Description: Vlastní jednostránkový motiv pro kampaň Pro Miroslav – volební program, kandidáti, playlisty a reels.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pro-miroslav
*/


  :root{
    --blue-dark:#3496d5;
    --blue:#4aa3dd;
    --blue-light:#6bb5e4;
    --green:#7dbf75;
    --green-light:#eef7ea;
    --ink:#1f2937;
    --muted:#5b6b85;
    --white:#ffffff;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:"Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color:var(--ink);
    background:var(--white);
  }
  a{text-decoration:none;color:inherit;}

  /* ===== Header ===== */
  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 32px;
    border-bottom:1px solid #eee;
    flex-wrap:wrap;
    gap:12px;
  }
  .brand{display:flex;align-items:center;gap:12px;}
  .brand .logo{
    width:52px;height:52px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  .brand .logo img{width:100%;height:100%;object-fit:contain;}
  .brand h1{font-size:16px;margin:0;color:var(--blue-dark);}
  .brand p{font-size:12px;margin:0;color:var(--muted);}
  nav{display:flex;gap:28px;font-size:15px;font-weight:500;}
  nav a:hover{color:var(--blue);}
  .btn{
    background:var(--green);color:#fff;
    padding:10px 20px;border-radius:8px;
    font-weight:600;font-size:14px;
    border:none;cursor:pointer;
  }
  .btn.secondary{
    background:transparent;color:var(--blue-dark);
    font-weight:600;
  }
  .btn:hover{filter:brightness(1.08);}

  .hamburger{
    display:none;
    flex-direction:column;justify-content:center;gap:5px;
    width:32px;height:32px;border:none;background:none;
    cursor:pointer;padding:0;flex-shrink:0;
  }
  .hamburger span{
    display:block;width:100%;height:3px;border-radius:2px;
    background:var(--blue-dark);
    transition:transform .25s ease, opacity .25s ease;
  }
  .hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

  .menu-backdrop{
    position:fixed;inset:0;z-index:90;
    background:rgba(20,30,50,.45);
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
  }
  .menu-backdrop.open{opacity:1;pointer-events:auto;}

  .mobile-nav{
    position:fixed;top:0;right:0;height:100vh;width:min(300px,80vw);
    background:#fff;z-index:95;
    box-shadow:-10px 0 30px rgba(20,30,50,.2);
    display:flex;flex-direction:column;gap:4px;
    padding:96px 30px 30px;
    transform:translateX(100%);
    transition:transform .3s ease;
  }
  .mobile-nav.open{transform:translateX(0);}
  .mobile-nav a{
    padding:14px 0;font-size:16px;font-weight:600;color:var(--ink);
    border-bottom:1px solid #eee;
  }
  .mobile-nav a.btn{
    margin-top:18px;text-align:center;border-bottom:none;color:#fff;
  }

  /* ===== Hero ===== */
  .hero{
    background:var(--blue);
    color:#fff;
    padding:56px 32px 40px;
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:40px;
    align-items:start;
  }
  .hero h2{
    font-size:46px;
    line-height:1.15;
    margin:0 0 20px;
  }
  .hero h2 .accent{color:#8fd66b;}
  .hero p.lead{
    font-size:16px;color:#dde6f7;max-width:520px;margin-bottom:28px;
  }
  .hero .cta-row{display:flex;align-items:center;gap:24px;margin-bottom:36px;flex-wrap:wrap;}
  .hero .cta-row .btn.secondary{color:#fff;}
  .stats{display:flex;gap:40px;flex-wrap:wrap;}
  .stat b{display:block;font-size:26px;}
  .stat span{font-size:13px;color:#cfdcf5;}

  .video-card{
    background:var(--blue-light);
    border:1px solid rgba(255,255,255,.25);
    border-radius:14px;
    padding:20px;
  }
  .pill{
    display:inline-block;
    background:var(--green-light);
    color:var(--green);
    font-size:12px;font-weight:700;
    padding:5px 14px;border-radius:20px;
    margin-bottom:14px;
  }
  .video-frame{
    background:#33507f;
    border-radius:8px;
    aspect-ratio:16/9;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    position:relative;
  }
  .video-frame iframe{width:100%;height:100%;border:0;}
  .video-frame .placeholder{color:#9fb3d9;font-size:13px;text-align:center;padding:20px;}
  .video-title{margin-top:14px;font-weight:700;font-size:15px;}

  /* ===== Priority strip ===== */
  .strip{
    background:var(--green-light);
    padding:16px 32px;
    display:flex;gap:36px;flex-wrap:wrap;
    font-size:14px;font-weight:600;color:var(--blue-dark);
  }
  .strip span{display:inline-flex;align-items:center;gap:8px;}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;}

  /* ===== Sections ===== */
  section.block{padding:64px 32px;max-width:1180px;margin:0 auto;}
  .eyebrow{
    display:inline-block;background:var(--green-light);color:var(--green);
    font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px;margin-bottom:16px;
  }
  h3.section-title{font-size:32px;color:var(--blue-dark);margin:0 0 12px;}
  p.section-sub{color:var(--muted);font-size:15px;max-width:640px;margin-bottom:36px;}

  .priority-block{margin-bottom:44px;}
  .priority-block:last-child{margin-bottom:0;}
  .priority-header{
    display:inline-block;
    color:#fff;font-weight:800;font-size:18px;letter-spacing:.02em;
    padding:10px 26px;border-radius:10px;margin-bottom:20px;
    box-shadow:0 8px 18px rgba(31,41,55,.1);
  }
  .priority-header--blue{background:var(--blue);}
  .priority-header--green{background:var(--green);}

  .priority-row{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
  .priority-card{
    border-radius:16px;padding:26px 28px;color:#fff;
    box-shadow:0 10px 26px rgba(31,41,55,.1);
    transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  }
  .priority-card:hover{transform:translateY(-6px);box-shadow:0 20px 38px rgba(31,41,55,.18);}
  .priority-card--blue{background:var(--blue);}
  .priority-card--green{background:var(--green);}
  .priority-card h4{margin:0 0 12px;font-size:18px;}
  .priority-card p{margin:0 0 10px;font-size:14px;line-height:1.55;opacity:.95;}
  .priority-card p:last-child{margin-bottom:0;}
  .priority-card ul{margin:0 0 10px;padding-left:18px;font-size:14px;line-height:1.7;opacity:.95;}
  .priority-card ul:last-child{margin-bottom:0;}

  /* Scroll-reveal "pop up" animation for the three priority cards */
  .reveal-card{
    opacity:0;
    transform:translateY(36px) scale(.94);
    transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  }
  .reveal-card.visible{opacity:1;transform:translateY(0) scale(1);}
  .priority-block.reveal-card{transform:translateY(28px);}
  .priority-block.reveal-card.visible{transform:translateY(0);}
  .priority-block:nth-of-type(1){transition-delay:0s;}
  .priority-block:nth-of-type(2){transition-delay:.12s;}
  .priority-block:nth-of-type(3){transition-delay:.24s;}
  .priority-block:nth-of-type(4){transition-delay:.36s;}

  /* ===== Candidates ===== */
  .cand-featured{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0 auto 28px;max-width:900px;}
  .cand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}

  .cand-card{
    border:1px solid #e6e9f0;border-radius:12px;overflow:hidden;
    cursor:pointer;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .badge-num{
    position:absolute;top:14px;left:14px;
    background:var(--green);color:#fff;font-weight:700;
    width:26px;height:26px;border-radius:6px;
    display:flex;align-items:center;justify-content:center;font-size:13px;
  }
  .cand-card:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:0 14px 28px rgba(52,150,213,.2);
    border-color:var(--blue);
  }
  .cand-photo{
    background:var(--blue-light);color:#eaf3fc;
    aspect-ratio:1/0.85;
    display:flex;align-items:center;justify-content:center;
    font-size:32px;font-weight:800;position:relative;
    transition:background .22s ease;
    overflow:hidden;
  }
  .cand-photo img{width:100%;height:100%;object-fit:cover;}
  .cand-card:hover .cand-photo{background:var(--blue-dark);}
  .cand-info{padding:18px;}
  .cand-info h5{margin:0 0 6px;color:var(--blue-dark);font-size:16px;}
  .cand-info p{margin:0;color:var(--muted);font-size:13px;}
  .cand-info .role-tag{color:var(--green);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.02em;}
  .cand-info .job-tag{color:var(--blue-dark);font-size:12px;font-weight:600;margin-top:2px;}
  .cand-info .age-tag{color:var(--muted);font-size:12px;margin-top:2px;}

  /* Top 3 — slightly larger, stand out at first glance */
  .cand-card.featured .cand-photo{aspect-ratio:1/0.95;font-size:42px;}
  .cand-card.featured{border-width:2px;}
  .cand-card.featured .cand-info{padding:22px;}
  .cand-card.featured .cand-info h5{font-size:19px;}

  /* Positions 14–15 — "doplní se" */
  .cand-card.upcoming{cursor:default;border-style:dashed;}
  .cand-card.upcoming:hover{transform:none;box-shadow:none;border-color:#e6e9f0;}
  .cand-card.upcoming .cand-photo{background:#eef1f6;color:#c3cad9;}
  .cand-card.upcoming:hover .cand-photo{background:#eef1f6;}
  .cand-card.upcoming .cand-info h5{color:#9aa5b8;font-weight:600;}

  /* ===== Candidate modal ===== */
  .modal-overlay{
    position:fixed;inset:0;z-index:100;
    background:rgba(23,35,58,.55);
    display:flex;align-items:center;justify-content:center;padding:20px;
    opacity:0;pointer-events:none;
    transition:opacity .25s ease;
  }
  .modal-overlay.open{opacity:1;pointer-events:auto;}
  .modal-box{
    background:#fff;border-radius:16px;max-width:460px;width:100%;
    padding:32px;position:relative;display:flex;gap:20px;
    transform:translateY(14px) scale(.96);
    transition:transform .25s ease;
    box-shadow:0 30px 60px rgba(20,30,50,.3);
  }
  .modal-overlay.open .modal-box{transform:translateY(0) scale(1);}
  .modal-close{
    position:absolute;top:12px;right:14px;
    border:none;background:none;font-size:24px;line-height:1;
    color:var(--muted);cursor:pointer;
  }
  .modal-close:hover{color:var(--blue-dark);}
  .modal-photo{
    width:84px;height:84px;border-radius:12px;flex-shrink:0;
    background:var(--blue-dark);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:26px;font-weight:800;overflow:hidden;
  }
  .modal-photo img{width:100%;height:100%;object-fit:cover;}
  .modal-body h4{margin:6px 0 10px;color:var(--blue-dark);font-size:19px;}
  .modal-body p, .modal-bio{margin:0;color:var(--muted);font-size:14px;line-height:1.6;}
  .modal-bio{text-align:left;}
  .modal-bio ul{margin:0;padding-left:18px;text-align:left;list-style-position:outside;}
  .modal-bio li{margin-bottom:8px;}
  .modal-bio li:last-child{margin-bottom:0;}
  .modal-bio strong{color:var(--blue-dark);}

  /* ===== Poznej nás! — reels carousel ===== */
  .reels-carousel{
    display:flex;gap:18px;overflow-x:auto;padding:6px 4px 16px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .reels-carousel::-webkit-scrollbar{height:8px;}
  .reels-carousel::-webkit-scrollbar-track{background:#f0f2f6;border-radius:4px;}
  .reels-carousel::-webkit-scrollbar-thumb{background:#c7cfdc;border-radius:4px;}
  .reel-card{flex:0 0 auto;width:190px;scroll-snap-align:start;}
  .reel-frame{
    aspect-ratio:9/16;border-radius:16px;overflow:hidden;position:relative;
    background:#33507f;box-shadow:0 10px 24px rgba(31,41,55,.12);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .reel-card:hover .reel-frame{transform:translateY(-4px);box-shadow:0 18px 34px rgba(31,41,55,.2);}
  .reel-frame iframe{width:100%;height:100%;border:0;}
  .reel-frame .placeholder{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:#9fb3d9;font-size:12px;text-align:center;padding:14px;
  }
  .reel-name{margin-top:10px;font-weight:700;color:var(--blue-dark);font-size:13px;text-align:center;}
  @media (max-width:600px){
    .reel-card{width:150px;}
  }
  .video-section{background:#f6f7fb;}
  .playlist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:32px;}
  .playlist-card{
    background:#fff;border:1px solid #e6e9f0;border-radius:14px;overflow:hidden;
    box-shadow:0 8px 20px rgba(31,41,55,.05);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .playlist-card:hover{transform:translateY(-6px);box-shadow:0 18px 32px rgba(31,41,55,.12);}
  .playlist-frame{
    aspect-ratio:16/9;background:#33507f;position:relative;overflow:hidden;
  }
  .playlist-frame iframe{width:100%;height:100%;border:0;}
  .playlist-frame .placeholder{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:#9fb3d9;font-size:13px;text-align:center;padding:20px;
  }
  .playlist-card h5{margin:16px 18px 4px;color:var(--blue-dark);font-size:16px;}
  .playlist-card p{margin:0 18px 18px;color:var(--muted);font-size:13px;}
  @media (max-width:960px){
    .playlist-grid{grid-template-columns:repeat(2,1fr);}
  }
  .link-out{color:var(--blue);font-weight:600;font-size:14px;}

  @media (max-width:960px){
    .cand-grid{grid-template-columns:repeat(2,1fr);}
    .cand-featured{grid-template-columns:repeat(2,1fr);}
  }

  /* ===== Tablet & mobile: hamburger menu takes over ===== */
  @media (max-width:860px){
    nav{display:none;}
    #headerContactBtn{display:none;}
    .hamburger{display:flex;}

    header{padding:14px 20px;}
    .hero{grid-template-columns:1fr;padding:40px 20px 32px;gap:28px;}
    .hero h2{font-size:34px;}
    .stats{gap:28px;}
    section.block{padding:44px 20px;}
    h3.section-title{font-size:26px;}
    .strip{padding:14px 20px;gap:20px;}
    .priority-row{grid-template-columns:1fr;}
    .cand-featured{grid-template-columns:1fr;}
    .modal-box{flex-direction:column;text-align:center;}
    .modal-body{display:flex;flex-direction:column;align-items:center;}
    .modal-photo{margin:0 auto;}
  }

  @media (max-width:600px){
    .playlist-grid{grid-template-columns:1fr;}
  }

  @media (max-width:520px){
    .hero h2{font-size:28px;}
    .cand-grid{grid-template-columns:1fr;}
    .cand-featured{grid-template-columns:1fr;}
    .cta-row{flex-direction:column;align-items:flex-start;gap:14px;}
    .stats{gap:22px;}
    .mobile-nav{width:100vw;}
  }