/* =========================================================
   ADAM ZADRAZIL | ELITE FOOTBALL UI 2026
   UNIVERSAL ESTRANKY PREMIUM REDESIGN
   ========================================================= */

/* =========================
   GOOGLE FONTS
========================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Bebas+Neue&display=swap');

/* =========================
   ROOT
========================= */
:root{
  --bg:#060606;
  --bg2:#0d0d0d;
  --card:#121212;
  --card2:#1a1a1a;

  --red:#c00000;
  --red-light:#ff3a3a;

  --white:#ffffff;
  --text:#d4d4d4;
  --muted:#8d8d8d;

  --border:rgba(255,255,255,.08);

  --shadow:
    0 10px 35px rgba(0,0,0,.45);

  --shadow-hover:
    0 20px 50px rgba(0,0,0,.6);

  --radius:24px;

  --transition:.35s ease;
}

/* =========================
   GLOBAL RESET
========================= */
*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0 !important;
  padding:0 !important;

  background:
    radial-gradient(circle at top right,
    rgba(192,0,0,.12),
    transparent 22%),

    radial-gradient(circle at bottom left,
    rgba(255,255,255,.03),
    transparent 20%),

    var(--bg) !important;

  color:var(--text) !important;

  font-family:'Inter',sans-serif !important;

  overflow-x:hidden;
}

/* =========================
   TYPOGRAPHY
========================= */
h1,h2,h3,h4,h5{
  font-family:'Bebas Neue',sans-serif !important;
  letter-spacing:1px;
  color:var(--white) !important;
  line-height:1.1;
}

h1{
  font-size:clamp(48px,7vw,110px) !important;
}

h2{
  font-size:clamp(34px,5vw,60px) !important;
}

h3{
  font-size:clamp(26px,4vw,42px) !important;
}

p,
li,
td,
span,
div{
  font-family:'Inter',sans-serif !important;
}

/* =========================
   LINKS
========================= */
a{
  color:var(--white) !important;
  text-decoration:none !important;
  transition:var(--transition);
}

a:hover{
  color:var(--red-light) !important;
}

/* =========================
   WRAPPERS / MAIN AREAS
========================= */
#wrapper,
#main,
#container,
#content,
.content,
.page,
.page-content,
#main-wrapper,
.main,
.middle,
#middle{
  background:transparent !important;
}

/* =========================
   HEADER
========================= */
header,
#header,
.header,
#top,
.top,
#top-wrapper{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.92),
      rgba(0,0,0,.72)
    ) !important;

  backdrop-filter:blur(16px);

  border-bottom:
    1px solid rgba(255,255,255,.08);

  position:sticky !important;
  top:0;
  z-index:9999;

  box-shadow:
    0 5px 25px rgba(0,0,0,.35);
}

/* =========================
   NAVIGATION
========================= */
nav,
#nav,
.navigation,
.menu,
#menu,
ul.menu{
  display:flex !important;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;

  gap:12px;

  padding:16px !important;
}

nav a,
#nav a,
.navigation a,
.menu a,
#menu a{
  position:relative;

  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:1px;

  text-transform:uppercase;

  padding:13px 18px !important;

  border-radius:16px;

  transition:var(--transition);

  overflow:hidden;
}

nav a:hover,
#nav a:hover,
.navigation a:hover,
.menu a:hover,
#menu a:hover{
  background:
    rgba(255,255,255,.05);

  transform:
    translateY(-2px);
}

nav a::after,
#nav a::after,
.navigation a::after,
.menu a::after,
#menu a::after{
  content:"";

  position:absolute;

  left:15%;
  bottom:5px;

  width:0%;
  height:2px;

  background:
    linear-gradient(
      90deg,
      var(--red),
      var(--red-light)
    );

  transition:var(--transition);
}

nav a:hover::after,
#nav a:hover::after,
.navigation a:hover::after,
.menu a:hover::after,
#menu a:hover::after{
  width:70%;
}

/* =========================
   CONTENT AREA
========================= */
#content,
.content,
.page,
.article,
.post,
.news,
.box,
.text,
.main{
  width:min(1300px,94%);
  margin:auto !important;
}

/* =========================
   HERO STYLE
========================= */
.hero,
.banner,
.top-banner,
.intro{
  position:relative;

  min-height:480px;

  border-radius:32px;

  overflow:hidden;

  background:
    linear-gradient(
      120deg,
      rgba(0,0,0,.88),
      rgba(0,0,0,.4)
    ),

    url('https://www.adamzadrazil.cz/img/picture/123/main.jpg')
    center/cover no-repeat !important;

  box-shadow:
    var(--shadow);

  margin:
    35px auto 50px auto !important;
}

.hero::before,
.banner::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at top right,
    rgba(192,0,0,.25),
    transparent 25%);
}

/* =========================
   ARTICLES / CARDS
========================= */
.article,
.post,
.news,
.box,
.item,
.card,
.article-box{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.015)
    ) !important;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:var(--radius);

  padding:32px !important;

  margin-bottom:30px !important;

  backdrop-filter:blur(12px);

  transition:var(--transition);

  box-shadow:
    var(--shadow);

  position:relative;

  overflow:hidden;
}

.article::before,
.post::before,
.news::before,
.box::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--red),
      transparent
    );
}

.article:hover,
.post:hover,
.news:hover,
.box:hover{
  transform:
    translateY(-6px);

  border-color:
    rgba(192,0,0,.3);

  box-shadow:
    var(--shadow-hover),
    0 0 25px rgba(192,0,0,.12);
}

/* =========================
   IMAGES
========================= */
img{
  max-width:100% !important;

  border-radius:24px !important;

  transition:var(--transition);

  box-shadow:
    0 10px 30px rgba(0,0,0,.4);
}

img:hover{
  transform:
    scale(1.02);
}

/* =========================
   TABLES / STATS
========================= */
table{
  width:100% !important;

  border-collapse:collapse !important;

  overflow:hidden;

  border-radius:24px;

  background:
    var(--card);

  box-shadow:
    var(--shadow);
}

table th{
  background:
    linear-gradient(
      90deg,
      var(--red),
      #820000
    ) !important;

  color:#fff !important;

  padding:18px !important;

  font-size:13px !important;

  text-transform:uppercase;

  letter-spacing:1px;
}

table td{
  padding:16px !important;

  border-bottom:
    1px solid rgba(255,255,255,.06);

  text-align:center;

  color:var(--text);
}

table tr:hover{
  background:
    rgba(255,255,255,.03);
}

/* =========================
   SIDEBAR
========================= */
#sidebar,
.sidebar,
.side,
.right,
.left{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.01)
    ) !important;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:24px;

  padding:24px !important;

  box-shadow:
    var(--shadow);
}

/* =========================
   BUTTONS
========================= */
button,
.btn,
input[type="submit"],
input[type="button"]{
  background:
    linear-gradient(
      135deg,
      var(--red),
      var(--red-light)
    ) !important;

  color:#fff !important;

  border:none !important;

  border-radius:18px !important;

  padding:14px 28px !important;

  font-weight:700 !important;

  letter-spacing:.5px;

  cursor:pointer;

  transition:var(--transition);

  box-shadow:
    0 10px 25px rgba(192,0,0,.3);
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  transform:
    translateY(-3px);

  box-shadow:
    0 18px 35px rgba(192,0,0,.4);
}

/* =========================
   FORMS
========================= */
input,
textarea,
select{
  background:
    rgba(255,255,255,.04) !important;

  border:
    1px solid rgba(255,255,255,.08) !important;

  border-radius:18px !important;

  padding:15px !important;

  color:#fff !important;

  transition:var(--transition);
}

input:focus,
textarea:focus,
select:focus{
  outline:none;

  border-color:
    rgba(192,0,0,.45) !important;

  box-shadow:
    0 0 15px rgba(192,0,0,.18);
}

/* =========================
   FOOTER
========================= */
footer,
#footer,
.footer{
  margin-top:70px !important;

  padding:60px 20px !important;

  background:
    linear-gradient(
      180deg,
      #090909,
      #000
    ) !important;

  border-top:
    1px solid rgba(255,255,255,.08);

  color:var(--muted) !important;

  text-align:center;
}

/* =========================
   BLOCKQUOTES
========================= */
blockquote{
  border-left:
    4px solid var(--red);

  background:
    rgba(255,255,255,.03);

  padding:24px 28px;

  border-radius:20px;

  font-style:italic;
}

/* =========================
   SELECTION
========================= */
::selection{
  background:var(--red);
  color:#fff;
}

/* =========================
   SCROLLBAR
========================= */
::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#0b0b0b;
}

::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      var(--red),
      var(--red-light)
    );

  border-radius:20px;
}

/* =========================
   PREMIUM HOVER LIGHT
========================= */
.article::after,
.post::after,
.news::after,
.box::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.03),
      transparent
    );

  opacity:0;

  transition:1s ease;
}

.article:hover::after,
.post:hover::after,
.news:hover::after,
.box:hover::after{
  opacity:1;
}

/* =========================
   ANIMATIONS
========================= */
.article,
.post,
.news,
.box,
img,
table{
  animation:
    fadeUp .8s ease;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:
      translateY(20px);
  }

  to{
    opacity:1;
    transform:
      translateY(0);
  }
}

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

  body{
    font-size:15px;
  }

  .hero,
  .banner{
    min-height:340px;
    border-radius:24px;
  }

  nav,
  #nav,
  .navigation,
  .menu,
  #menu{
    gap:6px;
    padding:10px !important;
  }

  nav a,
  #nav a,
  .navigation a,
  .menu a,
  #menu a{
    padding:10px 12px !important;
    font-size:11px !important;
  }

  .article,
  .post,
  .news,
  .box{
    padding:22px !important;
    border-radius:20px;
  }

  table{
    display:block;
    overflow-x:auto;
  }

  h1{
    font-size:60px !important;
  }

  h2{
    font-size:40px !important;
  }
}