/* ============================================================
   MagicSea Boats — theme layer on top of style.css
   Adds the turquoise accent + booking / yacht-sales UI. Loaded AFTER
   style.css so these rules win without touching the shared file. Nothing
   here should be needed by magic-sea.com — keep boats-only additions here.
   ============================================================ */

:root {
  --turquoise:      #14b8a6;
  --turquoise-deep: #0e8074;
  --turquoise-soft: #b7ece5;
  /* Bluer teal for solid fills (header/footer). The hero-kicker pill
     reads more blue than --turquoise-deep because it's a light,
     near-white cyan text (--turquoise-soft) over a translucent fill on
     top of the dark navy photo — that layering + a near-white text
     colour cools it visually. A flat, fully-opaque block of
     --turquoise-deep has more green in it by comparison. This variant
     is shifted toward blue so solid backgrounds read closer to the
     kicker. */
  --turquoise-blue: #0d6882; /* ~10% darker than #0e7490 */
}

/* ===== Top contact bar (phones / WhatsApp / "Marina · Cancun, MX —
   view on Google Maps") — dark turquoise-blue instead of the navy base.
   No logo sits here, so it can take the color the site-header can't. ===== */
.topbar { background: var(--turquoise-blue); }

/* ===== Header / nav — white background, navy text, matching the
   logo's own white background (the PNG isn't transparent, so the strip
   behind it needs to stay white or the logo shows a visible box). Only
   the site-header (logo + menu) changes; the contact topbar above it
   (phone numbers etc.) stays navy, untouched. ===== */
.site-header {
  background: rgba(255,255,255,.97);
  color: var(--navy);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 1px 0 rgba(11,37,69,.04);
}
/* Base site.css sizes the logo at 42px/34px tall, sized for magic-sea.com's
   own mark. The magicsea-boats PNG (magicseaboats-h.png) fills almost its
   entire 1400x400 canvas already (~1.5% margin), so that smaller size was
   just leaving the header bar's own padding unused — size it up instead. */
.brand-logo img { height: 54px; }
@media (max-width: 720px) {
  .brand-logo img { height: 42px; }
}
/* .nav-bar's own vertical padding (style.css: .9rem) didn't shrink when the
   logo above grew, so the whole header band just got taller by the same
   amount instead of tightening around the bigger logo. Cut it to a
   minimum — the header's height now tracks the logo size again instead of
   logo + a mostly-unused padding band. */
.nav-bar { padding-top: .35rem; padding-bottom: .35rem; }
.nav-links a { color: var(--navy); opacity: .82; }
.nav-links a:hover, .nav-links a.active { color: var(--turquoise-deep); opacity: 1; }
.nav-cta { border: 1px solid var(--gold); }
.nav-toggle { color: var(--navy); }
@media (max-width: 800px) {
  .nav-links {
    background: var(--white);
    box-shadow: 0 20px 44px rgba(11,37,69,.18);
  }
  .nav-links > li { border-bottom: 1px solid var(--gray-100); }
}
.nav-sub {
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: 0 18px 40px rgba(11,37,69,.16);
}
.nav-sub a { color: var(--navy); opacity: .8; }
.nav-sub a:hover { opacity: 1; background: rgba(201,169,97,.14); color: var(--gold-deep, #a5822f); }
.nav-sub-heading { color: var(--gold-deep, #a5822f); opacity: .9; }
.nav-sub-heading:not(:first-child) { border-top: 1px solid var(--gray-100); }
@media (max-width: 800px) {
  .nav-sub { background: var(--gray-50); }
}
.nav-links .nav-search-btn {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  color: var(--navy);
}
.nav-links .nav-search-btn:hover {
  background: var(--gray-100);
  border-color: var(--gold);
  color: var(--gold-deep, #a5822f);
}

/* ===== Booking-first hero (half height vs. the base .hero) ===== */
.hero-booking {
  background: linear-gradient(rgba(6,26,51,.25), rgba(6,26,51,.55)),
              url('../../images/fondo2000-11.jpg') center/cover no-repeat;
  min-height: 41vh;
  padding: 2.5rem 1.25rem 2rem;
}
@media (max-width: 720px) {
  /* The booking form needs more room than 41vh on narrow screens —
     let it size to content instead of forcing a crush. */
  .hero-booking { min-height: 0; padding-top: 3rem; }
}
.hero-kicker {
  display: inline-block; margin-bottom: 1rem;
  padding: .4rem 1rem; border-radius: 999px;
  background: rgba(20,184,166,.18); border: 1px solid var(--turquoise-soft);
  color: var(--turquoise-soft); font-size: .78rem; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.hero-booking h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.hero .yacht-grid {
  /* Wider than the site's normal 1200px .container — at 1200px, 4
     even columns come out narrower than fleet.html's cards (fleet only
     ever fits 3 across at that width). Explicit column counts instead
     of the base .yacht-grid's auto-fill — with only 6 cards, auto-fill
     was leaving the last row short. fleet.html/brand.html/etc keep the
     original auto-fill grid — this override only targets the featured
     grid inside the hero. */
  max-width: 1640px; margin: 1.8rem auto 0;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1500px) {
  /* Below ~1500px, 4 columns would be narrower than fleet's cards —
     step down to 3 first so card width stays comparable. */
  .hero .yacht-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .hero .yacht-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hero .yacht-grid { grid-template-columns: 1fr; }
}
.hero-cta-secondary { margin-top: 1.2rem; }
.btn-ghost-light { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.55); }
.btn-ghost-light:hover { background: rgba(255,255,255,.14); color: var(--white); border-color: var(--white); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }
.btn-forsale { border-color: var(--turquoise); color: var(--turquoise-soft); }
.btn-forsale:hover { background: var(--turquoise); color: var(--navy-deep); border-color: var(--turquoise); }
a.btn-ghost.btn-forsale { color: var(--turquoise-deep); border-color: var(--turquoise); }
a.btn-ghost.btn-forsale:hover { background: var(--turquoise); color: var(--white); }

/* ===== Hero booking widget (search card) ===== */
.booking-widget {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem;
  background: rgba(255,255,255,.97); color: var(--gray-800);
  border-radius: var(--radius-lg); padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-lg);
  max-width: 900px; margin: 1.6rem auto 0;
  text-align: left;
}
.bw-field { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 150px; min-width: 130px; }
.bw-field label { font-size: .75rem; font-weight: 600; letter-spacing: .4px; color: var(--gray-600); text-transform: uppercase; }
.bw-field label em { font-style: normal; font-weight: 400; text-transform: none; color: var(--gray-400); letter-spacing: 0; }
.bw-field select, .bw-field input[type="date"] {
  font-family: inherit; font-size: .95rem; color: var(--gray-800);
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: .6rem .7rem; background: var(--white);
}
.bw-field select:focus, .bw-field input[type="date"]:focus {
  outline: none; border-color: var(--turquoise); box-shadow: 0 0 0 3px rgba(20,184,166,.18);
}
.bw-submit { flex: 0 0 auto; padding: .8rem 1.8rem; align-self: stretch; }
@media (max-width: 720px) {
  .booking-widget {
    flex-direction: column; align-items: stretch; padding: 1.1rem;
    /* Was the unchanged desktop gap (1rem) between every stacked field —
       noticeably more spread out than the fleet/search page's own mobile
       filter bar (.search-filters in style.css uses .75rem here). Match
       that so both search UIs feel consistent on mobile. */
    gap: .75rem;
  }
  .bw-field { min-width: 0; }
  .bw-submit { width: 100%; }
}

/* ===== Provider trust strip ===== */
.provider-strip { padding: 1.6rem 0; background: var(--sand); }
.provider-strip .container { text-align: center; }
.provider-strip-label {
  font-size: .78rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gray-600); margin-bottom: .8rem;
}
.provider-badges { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.provider-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-600);
}
.provider-badge em { font-style: normal; font-weight: 400; color: var(--gray-400); font-size: .78rem; }
.provider-badge.provider-live { border-color: var(--turquoise); color: var(--turquoise-deep); background: var(--turquoise-soft); }

/* ===== Nav: Boats for Sale highlight ===== */
.nav-links a.nav-forsale { position: relative; }
.nav-links a.nav-forsale::after {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--turquoise); margin-left: 5px; vertical-align: middle;
}

/* ===== "Buy a Yacht" homepage teaser ===== */
.forsale-teaser .section-title .eyebrow { color: var(--turquoise-deep); }

/* ===== Yachts-for-sale catalogue (venta.html) ===== */
.forsale-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.75rem;
}
.forsale-card {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s;
  display: block; color: inherit;
}
.forsale-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.forsale-card .img-wrap {
  display: block; position: relative; aspect-ratio: 4/3;
  background: var(--gray-100); overflow: hidden; color: inherit;
}
.forsale-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.badge-sale {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  background: var(--turquoise); color: var(--white);
  font-size: .72rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px;
}
.forsale-card-body { padding: 1.1rem 1.2rem 1.3rem; }
.forsale-card-body h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.forsale-card-body h3 a { color: inherit; text-decoration: none; }
.forsale-card-body h3 a:hover { color: var(--turquoise-deep); }
.forsale-price { color: var(--turquoise-deep); font-weight: 700; font-size: 1.05rem; margin: .3rem 0 .5rem; }
.forsale-meta { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .82rem; color: var(--gray-600); margin-bottom: .6rem; }
/* Action row — "View Details" (the yacht's own page) + "WhatsApp" (quick ask). */
.forsale-actions { display: flex; gap: .6rem; margin-top: .3rem; flex-wrap: wrap; }
.forsale-ask-btn {
  flex: 1 1 auto; text-align: center; text-decoration: none;
  background: var(--turquoise); color: var(--white); font-weight: 700; font-size: .85rem;
  padding: .55rem .8rem; border-radius: var(--radius-sm); transition: background .2s;
}
.forsale-ask-btn:hover { background: var(--turquoise-deep); }
.forsale-outline-btn {
  flex: 1 1 auto; text-align: center; text-decoration: none;
  border: 1.5px solid var(--gray-200); color: var(--navy); font-weight: 600; font-size: .85rem;
  padding: .5rem .8rem; border-radius: var(--radius-sm); transition: background .2s, border-color .2s;
}
.forsale-outline-btn:hover { background: var(--gray-50); border-color: var(--turquoise); }
.forsale-empty {
  text-align: center; padding: 3.5rem 1.5rem; background: var(--gray-50);
  border-radius: var(--radius-lg); color: var(--gray-600);
}
.forsale-empty h3 { color: var(--navy); margin-bottom: .6rem; }

/* ===== Yachts-for-sale — individual yacht page (yachts-for-sale/<slug>.html) ===== */
.fs-hero { background-attachment: scroll; }
.fs-back {
  display: inline-block; color: var(--gold-soft); font-size: .85rem; font-weight: 600;
  text-decoration: none; margin-bottom: 1rem;
}
.fs-back:hover { color: var(--gold); }
.fs-badge {
  display: inline-block; background: var(--turquoise); color: var(--white);
  font-size: .75rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px; margin-bottom: .8rem;
}
.fs-price-big { font-size: 1.6rem; font-weight: 700; color: var(--gold); margin: .3rem 0 1rem; }
.fs-specs-bar {
  display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap;
  font-size: .95rem; margin-bottom: 1.8rem; opacity: .95;
}
.fs-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem; margin-bottom: 1rem;
}
.fs-gallery a {
  display: block; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--gray-100);
}
.fs-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.fs-gallery a:hover img { transform: scale(1.06); }
.fs-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 860px) { .fs-layout { grid-template-columns: 1fr; gap: 2rem; } }
.fs-main h2 { margin-bottom: .8rem; }
.fs-main p.fs-description { color: var(--gray-600); line-height: 1.7; margin-bottom: 2rem; }
.fs-main h3 { margin-bottom: .8rem; }
.fs-highlights { list-style: none; padding: 0; display: grid; gap: .6rem; }
.fs-highlights li {
  padding-left: 1.6rem; position: relative; color: var(--gray-800); font-size: .95rem;
}
.fs-highlights li::before {
  content: '✓'; position: absolute; left: 0; color: var(--turquoise-deep); font-weight: 700;
}
.fs-specs { background: var(--gray-50); border-radius: var(--radius); padding: 1.5rem; }
.fs-specs h3 { margin-bottom: 1rem; }
.fs-specs-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fs-specs-table tr { border-bottom: 1px solid var(--gray-200); }
.fs-specs-table tr:last-child { border-bottom: none; }
.fs-specs-table td { padding: .55rem 0; vertical-align: top; }
.fs-specs-table td:first-child { color: var(--gray-600); padding-right: 1rem; white-space: nowrap; }
.fs-specs-table td:last-child { color: var(--navy); font-weight: 600; text-align: right; }

/* ===== Booking-provider embeds on yacht pages ===== */
.fareharbor-embed, .bokun-embed, .rezdy-embed { margin-top: .5rem; }
.calendar-card h4, .booking-card h3 { display: flex; align-items: center; gap: .4rem; }

/* ===== Yacht page — "Check availability" calendar, Book Now button and
   the main photo (as a banner strip), stacked back-to-back with NO gaps
   between them in one card, moved into the hero photo frame below the
   title/specs. The base .calendar-card (style.css) has its own padding
   all around and the h4 has its own margin — that framing is exactly
   what read as "empty space" above/below the iframe, so it's zeroed out
   here and only the heading keeps a small inset. Book Now uses the same
   dark turquoise as the footer/topbar. ===== */
.yacht-hero-content .calendar-card.yacht-hero-calendar {
  /* Fixed width, not max-width — the embedded calendar (api.magicsea.boats,
     a separate page inside the iframe) has its own internal layout that
     doesn't reflow cleanly below ~420px: letting the card fluidly shrink
     with the viewport was squeezing the iframe down to odd in-between
     widths where the calendar's own content needed a horizontal
     scrollbar to show it all. Holding it at one fixed width avoids that;
     max-width:100% is only a safety net so it can't force the page to
     scroll horizontally on phones narrower than 420px. */
  width: 420px;
  max-width: 100%;
  margin: 1.5rem 0 0;
  padding: 1.1rem 0 0;
  overflow: hidden;
  border-top: 3px solid var(--turquoise-blue);
}
.yacht-hero-content .calendar-card.yacht-hero-calendar h4 { margin: 0 1.2rem .8rem; }
@media (max-width: 480px) {
  /* On phones the card is forced narrower than its normal fixed 420px
     (max-width:100% above), which very likely makes the calendar embed
     itself switch to a shorter, more compact mobile layout internally —
     while our iframe height stayed fixed at 520px either way, leaving a
     big blank gap at the bottom before Book Now. This is a first-pass
     guess at the shorter mobile height; tell me how much gap is still
     showing (or if it's now cut off) and I'll dial in the exact number. */
  .yacht-hero-content .calendar-card.yacht-hero-calendar iframe { height: 400px; }
}
.yacht-hero-content .calendar-card.yacht-hero-calendar iframe {
  width: 100%; display: block; margin: 0;
}
.yacht-hero-content .calendar-card.yacht-hero-calendar .btn-book-now {
  /* Rounded corners, flush top/bottom against the iframe and photo
     (no vertical margin) — just enough side inset for the curve to
     actually show against the card's straight edges. The photo's own
     1px border-top below is the "line", not a gap. */
  display: block; margin: 0 4px; border-radius: var(--radius-sm);
}
.yacht-hero-content .calendar-card.yacht-hero-calendar img {
  display: block; width: 100%; margin: 0;
  /* Hairline so the photo doesn't read as glued to the button above it. */
  border-top: 1px solid var(--gray-200);
  aspect-ratio: 16 / 5; /* banner strip — about half the height of a normal 16/10 photo crop */
  object-fit: cover;
}
/* .yacht-hero (style.css) is height:70vh with content pinned to the
   BOTTOM (align-items:flex-end) — the position of the title was
   whatever space was left over after subtracting the (now taller,
   calendar-card-included) content height from the box height, which
   changes with the box height itself, i.e. with the screen. Pin to the
   TOP instead: the title then sits right after its own fixed padding,
   full stop, regardless of screen size — same fix in spirit as the
   width:420px calendar card (fixed instead of computed-relative-to-
   viewport). min-height (not a fixed height) still lets the box grow
   to fit the calendar without clipping it. */
.yacht-hero { height: auto; min-height: 70vh; align-items: flex-start; padding-top: 0; }
/* The 112px gap that was still showing above the title even after the
   flex-start fix turned out to be two STACKED, always-there paddings —
   not something screen-size-dependent: style.css's generic
   `section { padding: 4rem 0 }` (64px, applies to every <section> incl.
   .yacht-hero) plus .yacht-hero-content's own 3rem/48px top padding.
   Override just the top side of both so the title sits close to the
   header with a small fixed gap instead — same on every screen size,
   since none of this is vh/percentage-based. */
.yacht-hero-content { padding-top: 1.5rem; }
.btn-book-now {
  display: block; text-align: center; margin-top: 1.5rem;
  background: var(--turquoise-deep); color: var(--white) !important;
  font-weight: 700; letter-spacing: .3px;
  padding: .8rem 1.4rem; border-radius: var(--radius-sm);
  transition: background .2s, transform .2s;
  /* Bokun-provider yachts render this as a real <button> (see app.js
     bookingBtn) instead of an <a> — strip the browser's default button
     chrome so it looks identical either way. */
  border: none; width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 1rem; cursor: pointer;
}
.btn-book-now:hover { background: var(--turquoise-blue); color: var(--white) !important; transform: translateY(-2px); }
.btn-book-now:disabled {
  /* Starts disabled until Bokun's loader script finishes wiring the
     overlay click handler, exactly like Bokun's own snippet. */
  opacity: .75; cursor: default; transform: none;
}

/* ===== Yacht card — "Book Now" next to "View details", only shown for
   yachts with a provider configured in data-booking-providers.js. Same
   gold as the header's nav-cta button, sized down to fit the card row. */
.yacht-card .card-footer-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem;
}
.card-book-now {
  background: var(--gold); color: var(--navy) !important;
  font-weight: 700; font-size: .78rem; letter-spacing: .2px;
  padding: .42rem .9rem; border-radius: var(--radius-sm);
  border: none; cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background .2s, transform .2s;
}
.card-book-now:hover { background: var(--gold-soft); transform: translateY(-1px); }
.card-book-now:disabled {
  /* Starts disabled until Bokun's loader script finishes wiring the
     overlay click handler, same as the hero button. */
  opacity: .75; cursor: default; transform: none;
}

/* Reserve-this-yacht card now sits after the TikTok / TripAdvisor cards
   in the aside (when present) instead of leading it — give it the same
   spacing those cards use when it's not the first child. */
.tiktok-video-card + .booking-card,
.tripadvisor-card + .booking-card { margin-top: 1.25rem; }

/* ===== "Where We Sail" — same photo as the hero banner, navy overlay
   kept so the white/gold text stays readable. ===== */
#locations.bg-navy {
  background: linear-gradient(rgba(6,26,51,.72), rgba(6,26,51,.82)),
              url('../../images/fondo2000-11.jpg') center/cover no-repeat;
}

/* ===== Footer — dark turquoise background, shifted bluer
   (--turquoise-blue) so it reads closer to the hero-kicker pill instead
   of the greener --turquoise-deep. Replaces the navy-deep base. Trying
   it out. ===== */
.site-footer {
  background: var(--turquoise-blue);
  border-top: 3px solid var(--gold);
}
.site-footer a:hover { color: var(--gold); }
.footer-social a:hover { background: var(--gold); color: var(--navy-deep); }

/* ===== Home hero — promo-code callout under the "Book Your Yacht..." H1.
   Smaller than the default .tagline size; PROMO CODE reads as a soft-
   blinking pill so it draws the eye without feeling like an error state. ===== */
.hero .tagline-promo {
  font-size: .92rem;
  font-weight: 400;
}
.promo-badge {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: .3px;
  animation: promoBlink 1.6s ease-in-out infinite;
}
@keyframes promoBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50% { opacity: .55; box-shadow: 0 0 10px 1px rgba(255,255,255,.55); }
}
@media (prefers-reduced-motion: reduce) {
  .promo-badge { animation: none; }
}

/* ===== Language switcher (EN <-> ES flag) — nav-links, next to Search.
   Hidden by default (inline style on the <li>); site-chrome.js reveals it
   only once it has confirmed the equivalent page actually exists. ===== */
.nav-lang-li { display: flex; align-items: center; }
.nav-lang-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 1.05rem; line-height: 1;
  transition: border-color .2s, background .2s, transform .2s;
}
.nav-lang-btn svg { width: 1.5rem; height: 1.5rem; border-radius: 999px; flex-shrink: 0; }
.nav-lang-btn:hover {
  background: rgba(255,255,255,.16);
  border-color: var(--gold);
  transform: translateY(-1px);
}
@media (max-width: 800px){
  .nav-lang-li { justify-content: flex-start; padding: .5rem 0; }
}