/* =========================================================
   Cinco de Mayo (dmc) — Custom Styles (FULL / Safe)
   - Header waves (clip)
   - Vertical logo overflow
   - WP menu styles
   - Sticky footer
   - Safe-area polish (iPhone/Android UI)
   ========================================================= */

/* ---------------------------------------------------------
   1) Design Tokens
--------------------------------------------------------- */
:root{
  --site-bg: #f6efe2;
  --ink: #0f3650;

  --sky: #fcc60e;
  --oval-a: #9fc5e3;
  --oval-b: #b9d7ee;

  --hero-l1: #035084;
  --hero-l2: #0d2b43;
  --hero-l3: #19344f;

  --container: 1050px;

  --header-h: 140px;

  /* Logo sizing */
  --logo-w: clamp(120px, 12.5vw, 170px);
  --logo-w-mobile: 118px;

  /* Desktop tall logo positioning */
  --logo-offset-top: -8px;       /* sube/baja */
  --brand-slot-w: 190px;         /* “columna” del logo (desktop) */
  --brand-slot-h: 140px;         /* alto mínimo para evitar colapso */

  /* Footer */
  --footer-bg: #0d2b43;
}

/* ---------------------------------------------------------
   2) Base + Sticky Footer + Safe-area polish
--------------------------------------------------------- */
*{ box-sizing: border-box; }

html, body{
  height: 100%;
}

/* iOS: el “canvas” fuera del body (rebote / barras) */
html{
  background: var(--footer-bg); /* abajo se siente azul */
}

body{
  margin: 0;
  color: var(--ink);
  background: var(--site-bg);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Wrapper pushes footer down */
.siteWrapper{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--site-bg);
}

/* main grows */
main{
  flex: 1;
  background: var(--site-bg);
}

/* Optional container utility */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 18px;
  padding-right: 18px;
}

/* ---------------------------------------------------------
   3) Header (Waves) — logo vertical + fondo recortado
   IMPORTANT:
   - .siteHeader overflow visible (logo puede salir)
   - .siteHeader__clip overflow hidden (solo recorta olas/oval)
--------------------------------------------------------- */
.siteHeader{
  position: relative;
  height: var(--header-h);
  overflow: visible;          /* CLAVE: el logo no se recorta */
  background: var(--site-bg);
  isolation: isolate;
}

/* Clip SOLO del fondo */
.siteHeader__clip{
  position: absolute;
  inset: 0;
  overflow: hidden;           /* recorta olas/oval */
  z-index: 1;
  pointer-events: none;
}

.siteHeader__oval{
  position: absolute;
  right: -26%;
  top: -62px;
  width: 62%;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--oval-a) 0%, var(--oval-b) 72%);
  opacity: .92;
  z-index: 0;
}

.siteHeader__bg{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.siteHeader__svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* Foreground */
.siteHeader__inner{
  position: relative;
  z-index: 10;
  max-width: var(--container);
  margin: 0 auto;
  height: 100%;
  padding: calc(12px + env(safe-area-inset-top)) 18px 12px; /* safe-area top */
  display: flex;
  justify-content: space-between;
  gap: 14px;
  overflow: visible;
}

/* Brand slot */
.siteHeader__brand{
  position: relative;
  width: var(--brand-slot-w);
  min-width: var(--brand-slot-w);
  height: var(--brand-slot-h);
  overflow: visible;
  z-index: 20;
}

/* Logo link wrapper (WP + custom) */
.siteHeader__logoLink,
.siteHeader__brand .custom-logo-link{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 0;
  overflow: visible;
  z-index: 25;
}

/* Logo vertical flotante (desktop) */
.siteHeader__logoImg,
.siteHeader__brand .custom-logo{
  width: var(--logo-w);
  height: auto;
  display: block;
  position: absolute;
  top: var(--logo-offset-top);
  left: 0;
  z-index: 999;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.18));
}

/* ---------------------------------------------------------
   WordPress Menu (wp_nav_menu)
   Markup:
   <nav class="siteHeader__nav">
     <ul class="siteHeader__menu">
       <li class="menu-item"><a>...</a></li>
     </ul>
   </nav>
--------------------------------------------------------- */
.siteHeader__nav{
  margin-top: 10px;
  position: relative;
  z-index: 20;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.siteHeader__nav::-webkit-scrollbar{ display:none; }

.siteHeader__menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  font-weight: 800;
}

.siteHeader__menu li{
  list-style: none;
  margin: 0;
  padding: 0;
}

.siteHeader__menu a{
  display: block;
  text-decoration: none;
  color: rgba(15,54,80,.9);
  padding: 8px 12px;
  border-radius: 999px;
}

.siteHeader__menu a:hover{
  background: rgba(255,255,255,.35);
}

/* Active states */
.siteHeader__menu .current-menu-item > a,
.siteHeader__menu .current_page_item > a,
.siteHeader__menu .current-menu-ancestor > a{
  background: rgba(255,255,255,.45);
}

/* ---------------------------------------------------------
   3.1) Mobile adjustments
--------------------------------------------------------- */
@media (max-width: 640px){
  .siteHeader__inner{
    padding: calc(6px + env(safe-area-inset-top)) 14px 6px;
    align-items: flex-start;
  }

  .siteHeader__oval{
    right: -40%;
    top: -72px;
    width: 58%;
    height: 175px;
  }

  .siteHeader__brand{
    width: auto;
    min-width: 0;
    height: auto;
  }

  /* Mobile logo returns to normal flow */
  .siteHeader__logoImg,
  .siteHeader__brand .custom-logo{
    position: relative;
    top: 0;
    left: 0;
    width: var(--logo-w-mobile);
  }

  .siteHeader__nav{
    margin-top: 2px;
  }

  .siteHeader__menu{
    gap: 10px;
  }

  .siteHeader__menu a{
    padding: 7px 10px;
    font-size: 14px;
  }
}

@media (max-width: 380px){
  .siteHeader__oval{ right:-48%; width:56%; height:165px; }
  .siteHeader__menu a{ font-size:13px; padding:6px 9px; }
}

/* ---------------------------------------------------------
   Hero Title (compact + no se pega a la derecha en medianas)
--------------------------------------------------------- */

.heroTitle{
  background: var(--site-bg);
  padding: 2px 18px 8px; /* pegado al header */
}

.heroTitle__inner{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
}

/* Desktop grande (derecha “bonito”, no a la orilla) */
.heroTitle__block{
  justify-self: end;
  text-align: right;

  width: min(520px, 70vw);
  line-height: 1.02 !important;
}

/* RESET contra estilos globales (Blocksy) */
.heroTitle__block *{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.02 !important;
}

/* Tipografía */
.heroTitle__l1{
  font-weight: 900;
  color: #035084;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: clamp(28px, 3.2vw, 54px);
}

.heroTitle__l2{
  font-weight: 500;
  color: #0d2b43;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: clamp(20px, 2.8vw, 44px);
}

.heroTitle__l3{
  font-weight: 300;
  color: #19344f;
  font-size: clamp(16px, 2.0vw, 30px);
  margin-top: 2px !important;
}

/* -------- Pantallas medianas (tablet / laptop pequeña) -------- */
/* Evita que se “pegue” a la derecha */
@media (max-width: 1099px){
  .heroTitle__block{
    justify-self: center;
    text-align: center;
    width: min(520px, 92vw);
  }
}

/* -------- Mobile -------- */
@media (max-width: 768px){
  .heroTitle{
    padding: 10px 14px 8px;
  }

  .heroTitle__block{
    justify-self: center;
    text-align: center;
    width: 100%;
    max-width: 520px;
  }

  .heroTitle__block *{
    line-height: 1.05 !important;
  }
}

/* ---------------------------------------------------------
   Minimal Footer (single line)
--------------------------------------------------------- */
.siteFooter{
  background: #0d2b43;
  color: #fff;
  padding: 10px 16px;   /* delgado */
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
}

.siteFooter__copy{
  margin: 0;
  opacity: .88;
  letter-spacing: .4px;
}

/* Mobile: aún más compacto */
@media (max-width:640px){
  .siteFooter{
    padding: 9px 14px;
    font-size: 11px;
  }
}


/* ---------------------------------------------------------
   Intro Text Module
--------------------------------------------------------- */

.introText{
  padding: 26px 20px;
  background: var(--site-bg);
}

.introText__inner{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.introText__main{
  margin: 0;
  font-weight: 600;                 /* principal negro negritas */
  color: #000;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.35;                /* compacto */
}

/* Asociación de Hoteles de Cancún */
.introText__ahc{
  color: #3f7fbf;                   /* azul más claro */
  font-weight: 700;
}

/* Networking Estratégico + Caribe Mexicano */
.introText__highlight{
  font-weight: 700;
  font-size: 1.05em;                /* un poco más grande */
}

/* Mobile ajuste fino */
@media (max-width: 768px){
  .introText{
    padding: 22px 18px;
  }

  .introText__main{
    font-size: 16px;
  }
}


/* ---------------------------------------------------------
   Event Pill Banner — Minimal Blue (sin sombras)
--------------------------------------------------------- */

.eventPill{
  background: var(--site-bg);
  padding: 8px 18px 4px;
}

.eventPill__inner{
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.eventPill__card{
  width: min(980px, 96vw);
  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 999px;

  background: #cfe7ff;
  color: #0d2b43;

  border: none;
}

/* Texto */
.eventPill__text{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.eventPill__date{
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.eventPill__sep{
  opacity: .7;
}

.eventPill__place{
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Quitamos flecha */
.eventPill__hint{
  display: none;
}

/* Mobile */
@media (max-width: 640px){
  .eventPill{
    padding: 8px 14px 4px;
  }

  .eventPill__card{
    padding: 10px 14px;
  }

  .eventPill__text{
    gap: 6px;
  }
}