/* ===============================
   NFL PARIS THEME (PRIMARY BLUE)
   - Primary: French Blue
   - Accent: Champagne Gold
   - Base: Porcelain + Ink Navy
   - ZERO green/red theme leftovers
   =============================== */

:root{
  /* Paris palette */
  --paris-blue:#1D4ED8;        /* PRIMARY */
  --paris-blue-2:#163FC1;      /* deeper hover */
  --paris-gold:#D8B25C;        /* champagne */
  --paris-gold-2:#B8903E;
  --paris-ink:#0B1220;         /* navy/ink */
  --paris-ink-2:#0F1A33;
  --paris-porcelain:#FBFAF7;   /* warm white */
  --paris-light:#F5F6F8;
  --paris-white:#ffffff;
  --paris-text:#0f172a;
  --paris-muted:#6b7280;

  /* Map to template tokens (Bootstrap-ish) */
  --bs-primary: var(--paris-blue);
  --bs-secondary: var(--paris-ink);
  --bs-success: var(--paris-gold);   /* kill green */
  --bs-danger: var(--paris-gold-2);  /* kill red */
  --bs-warning: var(--paris-gold);
  --bs-info: var(--paris-ink-2);
  --bs-light: var(--paris-light);
  --bs-dark: var(--paris-ink);
  --bs-white: var(--paris-white);

  /* Legacy variables used in your old file */
  --sp-primary: var(--paris-blue);
  --sp-primary-rgb: 29, 78, 216;
  --sp-accent: var(--paris-gold);
  --sp-accent-rgb: 216, 178, 92;
  --sp-gold: var(--paris-gold);
  --sp-dark: var(--paris-ink);
  --sp-light: var(--paris-light);

  /* In your template, this was used as dark header/footer bg */
  --bs-amarillo: var(--paris-ink);
}

/* ---------- Base ---------- */
html, body{ height:100%; }
body{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--paris-porcelain) 0%, #fff 60%);
  color: var(--paris-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{ color: inherit; text-decoration:none; }
a:hover{ color: var(--paris-blue); }

/*** Spinner ***/
#spinner{
  opacity:0;
  visibility:hidden;
  transition: opacity .5s ease-out, visibility 0s linear .5s;
  z-index:99999;
}
#spinner.show{
  transition: opacity .5s ease-out, visibility 0s linear 0s;
  visibility:visible;
  opacity:1;
}

/*** Back to Top ***/
.back-to-top, #scrollUp, .scroll-top{
  position:fixed;
  right:30px;
  bottom:30px;
  display:flex;
  width:45px;
  height:45px;
  align-items:center;
  justify-content:center;
  transition:.3s;
  z-index:99;
  border-radius:999px;
  background: linear-gradient(180deg, var(--paris-gold) 0%, var(--paris-gold-2) 100%);
  color:#111827;
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 12px 28px rgba(2,6,23,.18);
}
.back-to-top:hover{ transform: translateY(-2px); }

/*** Buttons ***/
.btn{ font-weight:600; transition:.3s; border-radius:999px; }

.btn-square{ width:32px; height:32px; }
.btn-sm-square{ width:34px; height:34px; }
.btn-md-square{ width:44px; height:44px; }
.btn-lg-square{ width:56px; height:56px; }

.btn-square,.btn-sm-square,.btn-md-square,.btn-lg-square{
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:normal;
  border-radius:50%;
}

.btn.btn-primary{
  background: var(--paris-blue) !important;
  border: 1px solid var(--paris-blue) !important;
  color: var(--paris-white) !important;
  box-shadow: 0 10px 24px rgba(29,78,216,.25);
}
.btn.btn-primary:hover{
  background: var(--paris-blue-2) !important;
  border-color: var(--paris-blue-2) !important;
  box-shadow: 0 14px 30px rgba(29,78,216,.30);
}

.btn.btn-secondary{
  background: transparent !important;
  color: var(--paris-blue) !important;
  border: 1px solid rgba(29,78,216,.35) !important;
}
.btn.btn-secondary:hover{
  background: rgba(29,78,216,.10) !important;
  color: var(--paris-blue-2) !important;
  border-color: rgba(29,78,216,.55) !important;
}

/*** Section Title ***/
.section-title{ max-width:900px; text-align:center; margin:0 auto; }
.section-title .sub-style,
.sub-title{
  position:relative;
  display:inline-block;
  text-transform:uppercase;
  color: var(--paris-blue);
  letter-spacing:.08em;
}

/* Replace the old green/red decorative lines with gold + blue */
.section-title .sub-style::before,
.sub-title::before{
  content:"";
  width:100px;
  position:absolute;
  bottom:50%;
  transform:translateY(-50%);
  border:1.5px solid rgba(216,178,92,.75);
}
.section-title .sub-style::before{ left:0; margin-left:-100px; }
.sub-title::before{ right:0; margin-right:-100px; }

.section-title .sub-style::after,
.sub-title::after{
  content:"";
  width:50px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:1.5px solid rgba(29,78,216,.75);
}
.section-title .sub-style::after{ left:0; margin-left:-50px; }
.sub-title::after{ right:0; margin-right:-50px; }

/*** Topbar ***/
.fixed-top .container{ transition:.3s; }
.topbar{
  padding:2px 10px 2px 20px;
  background: var(--paris-ink) !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar a,.topbar a i{ transition:.2s; color: rgba(255,255,255,.82); }
.topbar a:hover,.topbar a i:hover{ color: var(--paris-gold) !important; }
@media (max-width:768px){ .topbar{ display:none; } }

/*** Navbar ***/
.navbar-light .navbar-nav .nav-link{
  font-family:'Poppins',sans-serif;
  position:relative;
  margin-right:25px;
  padding:35px 0;
  color: var(--paris-ink) !important;
  font-size:17px;
  font-weight:500;
  outline:none;
  transition:.2s;
}

/* When sticky, navbar background becomes ink, links become white */
.sticky-top .navbar-light{
  background: rgba(11,18,32,.96) !important;
  backdrop-filter: blur(10px);
}
.sticky-top .navbar-light .navbar-nav .nav-link{
  padding:20px 0;
  color: rgba(255,255,255,.92) !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active{
  color: var(--paris-gold) !important;
}

.navbar-light .navbar-brand img{
  max-height:120px;
  transition:.3s;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.20));
}
.sticky-top .navbar-light .navbar-brand img{ max-height:45px; }

.navbar .dropdown-toggle::after{
  border:none;
  content:"\f107";
  font-family:"Font Awesome 5 Free";
  font-weight:600;
  vertical-align:middle;
}

@media (min-width:1200px){
  .navbar .nav-item .dropdown-menu{
    display:block;
    visibility:hidden;
    top:100%;
    transform:rotateX(-75deg);
    transform-origin:0% 0%;
    border:0;
    border-radius:12px;
    transition:.35s;
    opacity:0;
    box-shadow:0 24px 60px rgba(0,0,0,.18);
  }
}

.dropdown .dropdown-menu a:hover{
  background: rgba(29,78,216,.10);
  color: var(--paris-blue-2);
}
.navbar .nav-item:hover .dropdown-menu{
  transform:rotateX(0deg);
  visibility:visible;
  background: var(--paris-light) !important;
  opacity:1;
}

@media (max-width:991.98px){
  .sticky-top{ position:relative; background: var(--paris-white); }
  .navbar.navbar-expand-lg .navbar-toggler{
    padding:10px 20px;
    border:1px solid rgba(29,78,216,.55) !important;
    color: var(--paris-blue);
  }
  .navbar-light .navbar-collapse{ margin-top:15px; border-top:1px solid #DDDDDD; }
  .navbar-light .navbar-nav .nav-link,
  .sticky-top .navbar-light .navbar-nav .nav-link{
    padding:10px 0;
    margin-left:0;
    color: var(--paris-ink) !important;
  }
  .navbar-light .navbar-brand img{ max-height:45px; }
}

@media (min-width:991.98px){
  /* Replace old red/green underlines with subtle gold lines */
  .navbar-light .navbar-nav .nav-link:after,
  .navbar-light .navbar-nav .nav-link::before{
    position:absolute;
    content:"";
    top:30px;
    bottom:30px;
    left:0px;
    width:100%;
    height:2px;
    background: rgba(216,178,92,.85);
    opacity:0;
    transition:all .25s;
  }
  .navbar-light .navbar-nav .nav-link:before{ bottom:auto; }
  .navbar-light .navbar-nav .nav-link:after{ top:auto; }

  .navbar-light .navbar-nav .nav-link:hover:before,
  .navbar-light .navbar-nav .nav-link.active:before{ top:20px; opacity:1; }

  .navbar-light .navbar-nav .nav-link:hover::after,
  .navbar-light .navbar-nav .nav-link.active::after{ bottom:20px; opacity:1; }
}

#searchModal .modal-content{ background: rgba(245,246,248,0.7); }

/*** Single Page Hero Header ***/
.bg-breadcrumb{
  background: linear-gradient(rgba(11,18,32,.88), rgba(11,18,32,.86)), url(../img/breadcrumb.webp);
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:initial;
  background-size:cover;
  padding:100px 0 60px 0;
}

/*** Carousel Hero Header ***/
.carousel-header .carousel-control-prev .carousel-control-prev-icon,
.carousel-header .carousel-control-next .carousel-control-next-icon{
  width:4rem;
  height:4rem;
  margin-left:-60px;
  border-radius:50%;
  background-size:60% 60%;
  transition:.3s;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
}
.carousel-header .carousel-control-next .carousel-control-next-icon{ margin-left:0; margin-right:-60px; }

.carousel-header .carousel .carousel-indicators{ padding-bottom:0; transition:.3s; }
.carousel-header .carousel .carousel-indicators li{
  width:8px;
  height:8px;
  border:8px solid rgba(29,78,216,.55);
  border-radius:50%;
  margin-right:30px;
  transition:.3s;
}
.carousel-header .carousel .carousel-indicators li.active{
  width:8px;
  height:8px;
  border:8px solid rgba(216,178,92,.85);
}

.carousel-header .carousel-inner .carousel-item{ position:relative; min-height:50vh; }
.carousel-header .carousel-inner .carousel-item img{
  position:absolute; width:100%; height:100%; object-fit:cover;
}
.carousel-header .carousel-inner .carousel-item .carousel-caption{
  position:absolute;
  width:100%;
  height:100%;
  top:0; left:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background: linear-gradient(rgba(11,18,32,.62), rgba(11,18,32,.70));
}

@media (max-width:768px){
  .carousel-header{ height:700px !important; }
  .carousel-header .carousel-control-prev .carousel-control-prev-icon,
  .carousel-header .carousel-control-next .carousel-control-next-icon{ margin-top:500px; }
  .carousel-header .carousel-control-prev .carousel-control-prev-icon{ margin-left:0px; }
  .carousel-header .carousel-control-next .carousel-control-next-icon{ margin-right:0px; }
  .carousel-header .carousel .carousel-indicators{ padding:0; }
}

/*** Counter Facts ***/
.counter-facts{
  background: linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.85)), url(../img/breadcrumb.png);
  background-size:cover;
  background-attachment:fixed;
  background-position:center center;
  background-repeat:no-repeat;
}
.counter-facts .counter{
  position:relative;
  text-align:center;
  width:200px;
  min-height:215px;
  padding:10px 15px;
  margin:0 auto;
  border-radius:100px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  background: var(--paris-white);
}
.counter-facts .counter:before{
  content:"";
  position:absolute;
  height:105px;
  width:100%;
  left:0;
  top:0;
  border-radius:10px 10px 0 0;
  background-color: var(--paris-blue);
}
.counter-facts .counter .counter-icon{
  position:relative;
  width:120px;
  height:100px;
  margin:0 auto 10px;
  border-radius:10px 10px 0 0;
  transform:translateY(-20px);
  font-size:50px;
  line-height:90px;
  color: var(--paris-gold-2);
  background: rgba(216,178,92,.18);
  clip-path: polygon(0% 0%, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.counter-facts .counter h3{
  color: var(--paris-blue);
  font-size:17px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  margin:0 0 5px 0;
}
.counter-facts .counter .counter-value{
  font-size:30px;
  font-weight:800;
  display:block;
  color: var(--paris-ink);
}
@media screen and (max-width:1200px){ .counter-facts .counter{ margin-bottom:40px; } }

/*** Features ***/
.features .feature-item{
  position:relative;
  box-shadow:0 0 45px rgba(0,0,0,0.08);
  border-radius:12px;
  background: var(--paris-white);
  border: 1px solid rgba(0,0,0,.04);
}
.features .feature-item::after{
  content:"";
  position:absolute;
  width:100%;
  height:0;
  bottom:0;
  left:0;
  border-radius:12px;
  background: rgba(29,78,216,.06);
  z-index:-1;
  transition:.3s;
}
.features .feature-item:hover::after{ height:100%; }
.features .feature-item .feature-icon{
  width:120px;
  height:120px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background: var(--paris-light);
  transition:.3s;
  border: 1px solid rgba(0,0,0,.05);
}
.features .feature-item:hover .feature-icon{
  border-radius:50%;
  background: var(--paris-white) !important;
}
.features .feature-item:hover .feature-icon i{
  color: var(--paris-blue) !important;
  transform:rotate(360deg);
  transition:all .5s ease;
}

/*** Links that used to turn green/red **/
.text-success, .bg-success, .text-danger, .bg-danger{
  color: inherit !important;
  background: transparent !important;
}

/*** Disclaimer box (turn yellow into Paris editorial) ***/
.disclaimer,
.notice,
.alert,
.alert-warning,
.nfl-disclaimer{
  background: rgba(251,250,247,.98) !important;
  color: rgba(15,23,42,.88) !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  border-left: 4px solid rgba(216,178,92,.95) !important;
  box-shadow: 0 10px 26px rgba(2,6,23,.08) !important;
  border-radius: 18px !important;
}

/*** Footer ***/
.footer{
  background: var(--paris-ink) !important;
}
.footer .footer-item a{
  line-height:30px;
  color: rgba(255,255,255,.90) !important;
  transition:.2s;
}
.footer .footer-item p{
  line-height:30px;
  color: rgba(255,255,255,.72) !important;
}
.footer .footer-item a:hover{
  letter-spacing:1px;
  color: var(--paris-gold) !important;
}

/*** Copyright ***/
.copyright{
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(11,18,32,.98) !important;
  color: rgba(255,255,255,.80);
}
/* =========================================================
   COUNTRY GRID FIX (click + hover)
   Append at END of stylesheet
   ========================================================= */

/* Ensure the overlay link can actually be clicked */
.country .country-item { position: relative; }
.country .country-item .rounded { position: relative; z-index: 1; }
.country .country-item .country-flag { z-index: 2; }
.country .country-item .country-name { z-index: 3; }

/* Some templates set overlays that block clicks */
.country .country-item::after { pointer-events: none; }

/* Make the link a real clickable button area */
.country .country-item .country-name a{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  pointer-events: auto;
  position: relative;
  z-index: 4;
}

/* Hover animation: image zoom + soft lift (the “interactive” feel) */
.country .country-item .rounded img{
  transition: transform .45s ease, filter .45s ease;
  will-change: transform;
}
.country .country-item:hover .rounded img{
  transform: scale(1.08);
  filter: saturate(1.05) contrast(1.03);
}

/* Make sure the overlay text is visible and smooth */
.country .country-item .country-name{
  opacity: 0;
  transform: translate(-50%, -46%);
  transition: opacity .35s ease, transform .35s ease;
}
.country .country-item:hover .country-name{
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* Optional: subtle glow so it reads on bright images */
.country .country-item .country-name a{
  background: rgba(11, 18, 32, .60);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
}
.country .country-item .country-name a:hover{
  background: rgba(11, 18, 32, .78);
}