/*
Theme Name: FEBACAM 2026
Theme URI: https://febacam.com
Author: FEBACAM
Author URI: https://febacam.com
Description: Tema personalizado Federación de Bádminton de Castilla-La Mancha
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: febacam26
*/

/* ==============================
   RESET / BASE
================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html, body { overflow-x: hidden; }

body{
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f4f6f8;
  color: #222;
  line-height: 1.5;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; height: auto; display:block; }

.wrap{
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

.section-title{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 900;
}

/* ==============================
   HEADER (GLOBAL) + MENÚ
   (Basado en tu header.php con .topbar .topbar__inner .brand .main-nav .menu__list)
================================ */
.site-header{ width:100%; }

.topbar{
  background: #0a4fa3;
  height: 64px;
}

.topbar__inner{
  height: 100%;
  display:flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
}

.brand{
  display:flex;
  align-items:center;
  font-weight: 900;
  color: #fff;
  padding: 0 4px;
  letter-spacing: .2px;
}

.main-nav{
  height: 100%;
  display:flex;
  align-items: stretch;
  gap: 10px;
}

.menu-toggle{
  display:none;
  height:100%;
  padding: 0 18px;
  background:none;
  border:0;
  color:#fff;
  font-size:26px;
  cursor:pointer;
}

/* UL del menú principal */
.menu__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  height:100%;
}

/* Items a alto completo (no botones) */
.menu__list > li{
  position:relative;
  height:100%;
}

.menu__list > li > a{
  height:100%;
  display:flex;
  align-items:center;
  padding: 0 18px;
  color:#fff;
  font-weight:800;
  white-space:nowrap;
}

.menu__list > li:hover > a,
.menu__list > li > a:hover{
  background:#f57c00;
}

/* Submenú escritorio */
.menu__list li ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width: 220px;
  background:#0a4fa3;
  margin:0;
  padding:0;
  list-style:none;
  z-index:9999;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.menu__list li:hover > ul{ display:block; }

.menu__list li ul li a{
  display:block;
  padding: 12px 14px;
  color:#fff;
  font-weight:700;
}

.menu__list li ul li a:hover{ background:#f57c00; }

/* ==============================
   HOME: BANNERS (FULL WIDTH + IMAGEN + BOTÓN ABAJO)
================================ */

/* FULL BLEED REAL (sale de cualquier contenedor) */
.banners--full{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 18px 0;
}

.banners--full .banners__grid{
  width: 100%;
  margin: 0;
  padding: 0 16px; /* respiración lateral */
}

/* 3 columnas */
.banners__grid--3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Banner con imagen destacada */
.banner.banner--post{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 260px;
  color:#fff;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* fallback si no hay imagen */
  background-image: linear-gradient(135deg, #0a4fa3, #f57c00);

  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  display:flex;
  min-width:0;
}

/* overlay */
.banner__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.20) 0%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0.75) 100%
  );
  z-index:1;
}

/* contenido con botón abajo centrado */
.banner__content{
  position:relative;
  z-index:2;
  width:100%;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.banner__content h2{
  margin:0;
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0,0,0,1);
}

.banner__content p{
  margin:0;
  opacity:.95;
  text-shadow: 0 2px 10px rgba(0,0,0,1);
}

.banner__cta{
  margin-top:auto;      /* abajo */
  align-self:center;    /* centrado */
  display:inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 900;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.30);
  backdrop-filter: blur(6px);
}

.banner:hover .banner__cta{
  background: rgba(255,255,255,0.28);
}

/* ==============================
   HOME: POSTS
================================ */
.posts{ padding: 18px 0 28px; }

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

.postcard{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,0.08);
  display:flex;
  gap:14px;
  padding:14px;
}

.postcard__thumb{
  width: 170px;
  flex: 0 0 170px;
  border-radius:14px;
  overflow:hidden;
  background:#e9eef5;
}

.postcard__thumb img{
  width:100%;
  height:120px;
  object-fit:cover;
}

.postcard__thumb--placeholder{
  width:100%;
  height:120px;
  background: repeating-linear-gradient(45deg,#e9eef5,#e9eef5 12px,#dfe7f2 12px,#dfe7f2 24px);
}

.postcard__title{
  margin: 0 0 6px;
  font-size:18px;
  font-weight:900;
}

.postcard__excerpt{
  margin: 0 0 10px;
  color:#444;
  font-size:14px;
}

.postcard__more{
  font-weight:900;
  color:#0a4fa3;
}
.postcard__more:hover{ text-decoration: underline; }

/* ==============================
   FOOTER
================================ */
.site-footer{
  background:#0a4fa3;
  color:#fff;
  padding: 40px 0 22px;
}

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

.footer__col h4{
  margin:0 0 10px;
  font-size:16px;
  font-weight:900;
}

.footer__bottom{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.18);
  opacity:.95;
}

/* ==============================
   RESPONSIVE
================================ */
@media (max-width: 1100px){
  .banners__grid--3{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px){
  .posts__grid{ grid-template-columns: 1fr; }
  .postcard{ flex-direction: column; }
  .postcard__thumb{ width:100%; flex:none; }
  .postcard__thumb img,
  .postcard__thumb--placeholder{ height: 200px; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .banners__grid--3{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .topbar{ height:auto; padding: 8px 0; }
  .topbar__inner{ flex-direction:column; align-items:flex-start; gap:8px; }

  .menu-toggle{ display:block; height:54px; }

  .menu__list{
    display:none;                 /* se abre con JS */
    flex-direction:column;
    width:100%;
    height:auto;
  }
  .menu__list.show{ display:flex; }

  .menu__list > li > a{
    height:54px;
    padding: 0 16px;
    border-top: 1px solid rgba(255,255,255,0.15);
  }

  /* submenús en flujo (visible) */
  .menu__list li ul{
    position:static;
    display:block;
    min-width:100%;
    box-shadow:none;
  }
  .menu__list li ul li a{ padding-left:32px; }

  .footer__grid{ grid-template-columns: 1fr; }
}



/* ==============================
   HEADER: LOGO IZQ + MENÚ DER (ÚNICO Y COHERENTE)
================================ */

.topbar{
  background:#0a4fa3;
  height:64px;
}

.topbar__inner{
  height:100%;
  display:flex;
  align-items:center;
  gap:16px;
}

/* Logo a la izquierda */
.site-logo{
  display:flex;
  align-items:center;
  height:100%;
  padding-left:16px;      /* “algo de padding” */
  padding-right:8px;
  flex:0 0 auto;
}

.custom-logo-link,
.custom-logo-link img{
  display:block;
}

.custom-logo-link img{
  max-height:42px;        /* tamaño final */
  width:auto;

  /* halo blanco */
  filter: drop-shadow(0 0 4px rgba(255,255,255,.75))
          drop-shadow(0 0 8px rgba(255,255,255,.45));
}

/* Nav ocupa el resto y empuja el menú a la derecha */
.main-nav{
  flex:1 1 auto;
  height:100%;
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  gap:10px;
}

/* Botón solo móvil */
.menu-toggle{ display:none; }

/* Menú a la derecha */
.menu__list{
  margin-left:auto;     /* CLAVE: se va a la derecha */
  list-style:none;
  margin-top:0;
  margin-bottom:0;
  padding:0;
  display:flex;
  height:100%;
  align-items:stretch;
}

.menu__list > li{ position:relative; height:100%; }

.menu__list > li > a{
  height:100%;
  display:flex;
  align-items:center;
  padding:0 18px;
  color:#fff;
  font-weight:800;
  white-space:nowrap;
}

.menu__list > li:hover > a{ background:#f57c00; }

/* Submenú escritorio */
.menu__list li ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  background:#0a4fa3;
  margin:0;
  padding:0;
  list-style:none;
  z-index:9999;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.menu__list li:hover > ul{ display:block; }
.menu__list li ul li a{ display:block; padding:12px 14px; color:#fff; font-weight:700; }
.menu__list li ul li a:hover{ background:#f57c00; }

/* ===== MÓVIL ===== */
@media (max-width:768px){
  .topbar{ height:auto; padding:8px 0; }
  .topbar__inner{ align-items:flex-start; }

  /* fila 1: logo izq, botón dcha */
  .site-logo{ height:54px; padding-left:12px; }
  .custom-logo-link img{ max-height:34px; }

  .main-nav{
    height:auto;
    flex:1 1 100%;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .menu-toggle{
    display:block;
    height:54px;
    padding:0 16px;
    background:none;
    border:0;
    color:#fff;
    font-size:26px;
    cursor:pointer;
  }

  /* fila 2: menú desplegable */
  .menu__list{
    width:100%;
    display:none;
    flex-direction:column;
    height:auto;
  }
  .menu__list.show{ display:flex; }

  .menu__list > li > a{
    height:54px;
    padding:0 16px;
    border-top:1px solid rgba(255,255,255,0.15);
  }

.main-nav .menu__list li ul{
  position:static;
  display:block;
  min-width:100%;
  box-shadow:none;
}
  .menu__list li ul li a{ padding-left:32px; }
}

/* ==============================
   SUBBAR: FIX PARA QUE SE VEA Y NO SE INFLA
================================ */

.subbar{ background:#083f83; padding: 6px 0; }

/* Asegura que el UL secundario NUNCA hereda display:none */
.subbar .menu__list.menu__list--secondary{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important; /* cambia a flex-end si lo quieres a la derecha */
  gap: 8px;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}

/* No heredar height:100% del menú principal */
.subbar .menu__list.menu__list--secondary > li{
  height: auto !important;
}

/* Altura real del link */
.subbar .menu__list.menu__list--secondary > li > a{
  height: 38px !important;
  line-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 10px;
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
}

.subbar .menu__list.menu__list--secondary > li > a:hover{
  background:#f57c00;
}

/* Si hay subniveles en el secundario, se ocultan */
.subbar .menu__list.menu__list--secondary ul{
  display: none !important;
}

/* CALENDARIO */

.febacam-calendar-wrapper {
  display: flex;
  justify-content: center;
  margin: 50px 0;
}

.febacam-calendar-card {
  width: 75%;
  max-width: 950px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
  overflow: hidden;
  border: 1px solid #e5e5e5;
}

/* Encabezado */
.febacam-calendar-header {
  background: linear-gradient(90deg, #0a4fa3, #083b7c);
  color: #ffffff;
  padding: 18px 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 4px solid #ff7a00; /* Naranja FEBACAM */
}

.febacam-calendar-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff !important;;
}

.calendar-icon {
  font-size: 22px;
}

/* Calendario */
.febacam-calendar-box {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
  height: 0;
}

.febacam-calendar-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .febacam-calendar-card {
    width: 95%;
  }

  .febacam-calendar-box {
    padding-bottom: 95%;
  }

  .febacam-calendar-header h3 {
    font-size: 16px;
  }
}

/* FIN CALENDARIO */


.page-content .febacam-calendar-wrapper {
  background: #f4f7fb;
  padding: 5px 0;
  margin: 50px -40px;
}




/* Contenedor */
.site-main{
  padding: 42px 16px;
}
.container{
  max-width: 1100px;
  margin: 0 auto;
}

/* Tarjeta */
.card{
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
  overflow: hidden;
}

/* Cabecera */
.page-header{
  padding: 26px 28px 14px;
  border-bottom: 4px solid #ff7a00; /* naranja */
  background: linear-gradient(180deg, rgba(10,79,163,.06), rgba(255,255,255,0));
}
.page-title{
  margin: 0;
  color: #0a4fa3; /* azul FEBACAM */
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
}

/* Meta */
.post-meta{
  margin-top: 10px;
  font-size: 14px;
  opacity: .75;
}
.post-meta .sep{ margin: 0 8px; }

/* Contenido */
.page-content{
  padding: 22px 28px 34px;
  font-size: 17px;
  line-height: 1.8;
  color: #1a1a1a;
}
.page-content h2{
  margin: 28px 0 10px;
  font-size: 24px;
  color: #0a4fa3;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.6);	
}
.page-content h3{
  margin: 22px 0 8px;
  font-size: 20px;
  color: #083b7c;
}
.page-content p{ margin: 0 0 14px; }
.page-content a{
  color: #0a4fa3;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-content img{
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Cajas destacadas */
.febacam-box{
  background: #f6f9ff;
  border: 2px solid rgba(10,79,163,.18);
  border-left: 6px solid #0a4fa3;
  border-radius: 16px;
  padding: 16px 18px;
  margin: 18px 0;
}

/* Botón tipo FEBACAM */
.febacam-btn{
  display: inline-block;
  padding: 12px 16px;
  border-radius: 14px;
  background: #0a4fa3;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
}
.febacam-btn:hover{ filter: brightness(0.95); }

/* Responsive */
@media (max-width: 768px){
  .page-header{ padding: 18px 16px 12px; }
  .page-content{ padding: 16px 16px 24px; }
}

/*  ARTICULOS DENTRO DE CAJA */
/* GRID */
.posts-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 22px;
}
@media (max-width: 900px){
  .posts-grid{ grid-template-columns: 1fr; }
}

/* CARD */
.post-card{
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
  display: flex;
  flex-direction: column;
}

/* IMAGEN */
.post-card__thumb{
  display: block;
  width: 100%;
  height: 210px;
  overflow: hidden;
}
.post-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-card__thumb--placeholder{
  width: 100%;
  height: 210px;
  background: linear-gradient(135deg, rgba(10,79,163,.15), rgba(255,122,0,.12));
}

/* CUERPO */
.post-card__body{
  padding: 18px 18px 20px;
  border-top: 4px solid #ff7a00; /* naranja */
}
.post-card__title{
  margin: 0 0 8px 0;
  font-size: 20px;
  line-height: 1.2;
}
.post-card__title a{
  color: #0a4fa3;
  text-decoration: none;
}
.post-card__title a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-card__meta{
  font-size: 13px;
  opacity: .75;
  margin-bottom: 10px;
}

.post-card__excerpt{
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 14px;
}

/* BOTÓN */
.post-card__btn{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 14px;
  background: #0a4fa3;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
}
.post-card__btn:hover{ filter: brightness(.95); }

/*  Navegación en artículos desde detalle de artículo */
.post-nav{
  margin: 30px 0 0;
  padding: 18px;
  border-radius: 16px;
  background: rgba(10,79,163,.10);
  border: 1px solid rgba(10,79,163,.18);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.post-nav__btn{
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration: none;
  background: #0a4fa3;
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  min-height: 76px;
}

.post-nav__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0,0,0,.16);
}

.post-nav__btn--next{
  background: #ff7a00; /* naranja FEBACAM */
  text-align: right;
}

.post-nav__label{
  display:block;
  font-weight: 700;
  font-size: 13px;
  opacity: .95;
  margin-bottom: 6px;
}

.post-nav__title{
  display:block;
  font-size: 15px;
  line-height: 1.25;
  opacity: .98;
}

.post-nav__btn--disabled{
  background: transparent;
  border: 1px dashed rgba(10,79,163,.25);
  border-radius: 14px;
  min-height: 76px;
}

@media (max-width: 700px){
  .post-nav{
    grid-template-columns: 1fr;
  }
  .post-nav__btn--next{
    text-align: left;
  }
}
/*  ===================================================== */

/* Estilos para que los artículos se vean como las páginas */

/* CONTENEDOR GENERAL */
.page-wrapper{
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

/* CAJA TIPO CARD */
.page-box{
  background: #ffffff;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0,0,0,.08);
}

/* TÍTULO */
.single-title{
  font-size: 32px;
  margin-bottom: 10px;
  color: #0a4fa3;
}

/* META */
.single-meta{
  font-size: 14px;
  color: #777;
  margin-bottom: 25px;
}

/* IMAGEN DESTACADA */
.single-thumb img{
  width: 100%;
  border-radius: 16px;
  margin-bottom: 25px;
}

/* CONTENIDO */
.single-content{
  font-size: 17px;
  line-height: 1.7;
  color: #333;
}

/* RESPONSIVE */
@media (max-width: 768px){
  .page-box{
    padding: 25px;
  }
  .single-title{
    font-size: 24px;
  }
}

/*  Imagen destacada en páginas*/

/* HERO IMAGEN DESTACADA */
.page-hero{
  margin: 0px -40px 30px -40px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

.page-hero img{
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
}

/* TÍTULO */
.page-title{
  font-size: 32px;
  margin-bottom: 20px;
  color: #0a4fa3;
}

/* RESPONSIVE */
@media (max-width: 768px){
  .page-hero{
    margin: -25px -25px 20px -25px;
  }

  .page-hero img{
    height: 220px;
  }
}