/*
Theme Name: Ferroni Traveling
Theme URI: https://ferronitraveling.com
Author: Ferroni Traveling
Description: Tema a la medida para Ferroni Traveling. Bilingüe (ES/EN), cotizaciones por WhatsApp y paquetes de MegaTravel. El contenido vive en /data/content.json y /data/packages.json.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ferroni
*/

/* Base (same as the design canvas) */
body{margin:0; background:#FAFAF8}
a{color:#263163}
a:where(:not(.btn,.board-cta,.svc-bubble,.gal-item,.pk-btn,.hdr-logo,.nav-link,.link-arrow,.ft-lang-a,.pkg-media,.pkg-more)):hover{color:#568B33}

/* Real links that replace the design's buttons keep the exact look */
.ft a.hdr-logo,.ft a.nav-link,.ft a.link-arrow,.ft a.pk-btn,.ft a.btn,.ft a.gal-item,.ft .ftr ul a{text-decoration:none}
.ft a.nav-link{display:inline-block}
.ft .ftr ul a{color:inherit; transition:color .3s}
.ft a.gal-item{display:block}
.ft .mnav[hidden]{display:none !important}
.ft .mnav a.nav-link{display:block; width:100%; text-align:left; font-family:var(--serif); font-size:34px; letter-spacing:0; text-transform:none; font-weight:400; padding:14px 0; border-bottom:1px solid var(--g3); color:var(--navy)}
.ft .mnav a.nav-link::after{display:none}
.ft .mnav a.nav-link.is-active{color:var(--green)}
.ft [hidden]{display:none !important}
.ft .field .msg[hidden]{display:none}
html.ft-lock,html.ft-lock body{overflow:hidden}

/* WordPress admin bar keeps the sticky header below it */
body.admin-bar .ft .hdr{top:32px}
@media (max-width:782px){ body.admin-bar .ft .hdr{top:46px} }

/* Quote form: spam trap, sending state, error line */
.ft .ft-hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}
.ft .form-err{margin:22px 0 0; padding:14px 18px; border-radius:12px; background:#FDECEA; color:#A42A17; font-size:14px; line-height:1.5}
.ft #ft-form button[type=submit][aria-busy=true]{opacity:.7; pointer-events:none}

/* Phone hero: everything fits below the header in the first screen, same composition as desktop */
@container site (max-width: 600px){
  .ft .hero-v3.hero-pin{height:100svh; min-height:560px; max-height:none}
  .ft .hero-v3 .hero-inner{padding:96px 0 92px; height:100%; display:flex; flex-direction:column; justify-content:flex-end}
  .ft .hero-v3 .wrap{padding-left:20px; padding-right:20px}
  .ft .hero-v3 .hero-grid{gap:18px; align-items:end}
  .ft .hero-v3 .hero-kicker{font-size:12.5px; gap:10px}
  .ft .hero-v3 .hero-kicker::before{width:26px}
  .ft .hero-v3 .hero-title{margin-top:12px; font-size:clamp(38px, 11.5cqi, 52px); line-height:1.02}
  .ft .hero-v3 .hero-sub{margin-top:14px !important; font-size:14.5px; line-height:1.55; max-width:36ch}
  .ft .hero-v3 .hero-ctas{margin-top:20px; gap:10px; flex-wrap:nowrap}
  .ft .hero-v3 .hero-ctas .btn{width:auto; flex:1 1 0; min-height:46px; padding:0 14px; gap:8px; font-size:13px}
  .ft .hero-v3 .board{padding:16px 18px}
  .ft .hero-v3 .route{display:none}
  .ft .hero-v3 .board-row{border-top:0; padding-top:0; gap:14px}
  .ft .hero-v3 .board-cell b{font-size:22px}
  .ft .hero-v3 .board-cta{margin-top:14px; min-height:44px; font-size:13.5px; padding:0 18px}
  .ft .hero-progress{display:none}
}
/* Very short phones (landscape or small screens): drop the description so nothing slides under the header */
@container site (max-width: 600px){
  @media (max-height: 680px){
    .ft .hero-v3 .hero-sub{display:none}
    .ft .hero-v3 .hero-title{font-size:clamp(34px, 10cqi, 44px)}
  }
}
@container site (max-width: 600px){ @media (max-height: 680px){ .ft .hero-v3 .hero-inner{padding-bottom:84px} } }

/* Language switch: real links to the /en/ and Spanish URLs, same look as the design's toggle */
.ft .lang a.ft-lang-a{display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; min-width:44px; height:34px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--g6); text-decoration:none; transition:all .4s var(--ease)}
.ft .lang a.ft-lang-a.is-on{background:var(--navy); color:#fff}
.ft .hdr.is-top .lang a.ft-lang-a{color:#fff}
.ft .hdr.is-top .lang a.ft-lang-a.is-on{background:#fff; color:var(--navy)}

/* Tour page */
.ft .tour-page .sub-hero .hero-kicker{color:rgba(255,255,255,.85); font-size:14px; margin:0 0 18px}
.ft .tour-page .sub-hero .hero-kicker a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.ft .tour-page .sub-hero h1{max-width:20ch}
.ft .tour-body{padding:0}
.ft .tour-body .pkm-side{top:124px}
.ft .tour-lead{margin:0 0 8px; font-size:16px}
.ft .tour-ask{margin-top:28px; font-size:14.5px}
.ft a.pkg-media{display:block}
.ft a.pkg-more{text-decoration:none; color:var(--navy)}
.ft .pkm-page{margin-top:10px; color:#fff; font-size:13.5px}

/* Cookie notice */
.ft .ft-cookies{position:fixed; left:20px; bottom:20px; z-index:300; max-width:440px; padding:20px 22px; border-radius:16px; background:#fff; color:var(--g8); box-shadow:0 24px 60px -24px rgba(22,28,61,.45); font-size:13.5px; line-height:1.55}
.ft .ft-cookies p{margin:0 0 14px}
.ft .ft-cookies .consent-link{font-size:13.5px}
.ft .ft-cookies-btns{display:flex; gap:10px; justify-content:flex-end}
.ft .ft-cookies .btn{min-height:40px; padding:0 18px}
@container site (max-width: 600px){ .ft .ft-cookies{left:12px; right:12px; bottom:12px; max-width:none} }