/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/* =====================================================================
   MBT — Bateaux (shop) hero + product cards
   ===================================================================== */

/* =====================================================================
   SITE-WIDE TYPOGRAPHY
   Overrides Salient's dynamic styles (headings: Lateef, text: Open Sans).
   Only font-family is changed — sizes/weights from the theme are kept.
   Loaded before the sections below, so hero/cards keep their own fonts.
   ===================================================================== */
/* Text -> system font stack */
body,
body p, body li, body td, body th, body dd, body dt, body blockquote,
body input, body textarea, body select, body button, body label,
body .container-wrap, body #footer-outer{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
/* Headings -> Cormorant Garamond (overrides Salient's Lateef) */
body h1, body h2, body h3, body h4, body h5, body h6,
body .nectar-inherit-h1, body .nectar-inherit-h2, body .nectar-inherit-h3,
body .nectar-inherit-h4, body .nectar-inherit-h5, body .nectar-inherit-h6,
body [data-inherit-heading-family],
body .row .col.section-title h1,
body #page-header-bg h1, body #page-header-bg h2{
  font-family:"Cormorant Garamond",Georgia,serif;
}

/* ---------- Full-width "Bateaux" hero (output via functions.php hook) ---------- */
.mbt-shop-archive #ajax-content-wrap,.home #ajax-content-wrap,.mbt-content-hero #ajax-content-wrap{overflow-x:hidden;}
/* Remove the content-wrapper top padding so the hero sits flush under the header
   (pages whose hero lives in the page content) */
.home .container-wrap,.mbt-content-hero .container-wrap{padding-top:0 !important;}
.mbt-boat-hero-fw{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;min-height:360px;background-size:cover;background-position:center center;display:flex;align-items:center;overflow:hidden;}
.mbt-boat-hero-fw::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,28,51,.88) 0%,rgba(6,28,51,.72) 7%,rgba(6,28,51,.35) 30%,rgba(6,28,51,0) 41%);}
/* #ajax-content-wrap (ID) beats Salient's ".container .container{padding:0!important}" rule,
   which otherwise strips the hero's inner gutter above 1000px.
   The site is a full-width layout, so use a constant, modest gutter (not a centered column). */
#ajax-content-wrap .mbt-boat-hero-fw .container{position:relative;z-index:2;width:100%;padding-left:clamp(30px,4vw,80px) !important;padding-right:clamp(30px,4vw,80px) !important;box-sizing:border-box;}
.mbt-boat-hero-fw__inner{padding:52px 0;}
.mbt-boat-hero-fw .mbt-hero-title{font-family:"Cormorant Garamond",Georgia,serif;color:#fff;font-size:clamp(30px,4.6vw,55px);line-height:1.06;font-weight:600;margin:0;letter-spacing:.01em;}
.mbt-boat-hero-fw .mbt-hero-rule{display:block;width:92px;height:2px;background:rgba(255,255,255,.75);margin:22px 0;}
/* Divider between title and subtitle (pure CSS — no empty span needed). */
.mbt-boat-hero-fw .mbt-hero-sub::before{content:"";display:block;width:92px;height:2px;background:rgba(255,255,255,.75);margin:22px 0;}
.mbt-boat-hero-fw .mbt-hero-sub{color:rgba(255,255,255,.9);font-size:clamp(15px,1.5vw,18px);line-height:1.5;max-width:520px;margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;}
/* title size is fluid (clamp) so no fixed mobile override is needed */
@media(max-width:768px){.mbt-boat-hero-fw{min-height:300px;}.mbt-boat-hero-fw__inner{padding:34px 0;}}
/* Home hero: show the full image (match its 3:2 ratio) behind the transparent header;
   min-height floor so the text never gets clipped on medium screens */
.home .mbt-boat-hero-fw{min-height:440px;aspect-ratio:1537 / 1023;max-height:820px;background-position:center center;}
/* Overlay (exact spec): top veil (::before, top 50%) + left fade (::after, left 60%). Color #051b32. */
.home .mbt-boat-hero-fw::before{bottom:auto;height:50%;background:linear-gradient(to bottom,rgba(5,27,50,.95) 0%,rgba(5,27,50,.8) 10%,rgba(5,27,50,.5) 25%,rgba(5,27,50,.2) 45%,rgba(5,27,50,0) 100%);}
.home .mbt-boat-hero-fw::after{content:"";position:absolute;top:0;left:0;width:60%;height:100%;z-index:1;pointer-events:none;background:linear-gradient(to right,rgba(5,27,50,.7) 0%,rgba(5,27,50,.4) 30%,rgba(5,27,50,.1) 60%,rgba(5,27,50,0) 100%);}
@media(max-width:768px){.home .mbt-boat-hero-fw::after{width:100%;background:linear-gradient(to bottom,rgba(5,27,50,.8) 0%,rgba(5,27,50,.4) 50%,rgba(5,27,50,.8) 100%);}}
.home .mbt-boat-hero-fw__inner{padding-top:90px;}
/* Keep the hero text in the dark left zone (safety on very wide screens) */
.home .mbt-boat-hero-fw .mbt-hero-title{max-width:min(720px,60%);}
/* Full-height container so the note can sit at the bottom of the hero, text block still centered */
.home .mbt-boat-hero-fw .container{align-self:stretch;display:flex;flex-direction:column;justify-content:center;}
/* Home subtitle: same serif as the title, one step smaller — the two read as a single lockup,
   so no divider rule here (the other heros keep theirs). */
.home .mbt-boat-hero-fw .mbt-hero-sub--display{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(22px,3.2vw,38px);line-height:1.15;font-weight:400;color:rgba(255,255,255,.92);letter-spacing:.01em;max-width:min(720px,60%);margin-top:10px;}
.home .mbt-boat-hero-fw .mbt-hero-sub--display::before{display:none;}
/* Bottom-left mention, aligned with the container gutter */
.home .mbt-boat-hero-fw .mbt-hero-note{position:absolute;left:clamp(30px,4vw,80px);bottom:34px;margin:0;color:rgba(255,255,255,.72);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;}
@media(max-width:768px){.home .mbt-boat-hero-fw{aspect-ratio:auto;min-height:460px;}.home .mbt-boat-hero-fw__inner{padding-top:70px;}.home .mbt-boat-hero-fw .mbt-hero-title,.home .mbt-boat-hero-fw .mbt-hero-sub--display{max-width:100%;}.home .mbt-boat-hero-fw .mbt-hero-note{bottom:22px;font-size:11px;}}

/* ---------- Bigger logo without a taller header ----------
   Salient sizes the header from the logo: it outputs "#header-outer #logo img{height:60px}"
   (Theme Options > Logo Height) and the header row simply follows the image. Raising that
   setting therefore grows the whole header.
   Instead we pin the logo's slot to the theme's 60px and let a larger image overflow it,
   so the logo grows while the header keeps its height.
   To resize: change --mbt-logo-h only. Source file is 150x150, so stay <= 150px to keep it sharp. */
@media(min-width:1000px){
	#header-outer #top #logo{--mbt-logo-h:100px;display:flex;align-items:center;height:60px;}
	#header-outer #top #logo img{height:var(--mbt-logo-h) !important;max-height:none !important;width:auto;}
}
/* Mobile keeps Salient's own logo height (24px) — nothing to override. */

/* Shop filter toggle: hidden on desktop (the sidebar is already visible there),
   shown on mobile so the filters stay reachable. */
@media(min-width:1000px){a.nectar-shop-filter-trigger{display:none !important;}}

/* Bateaux + Destinations + Catalogue + Toys hero: wide banner ratio + transparent-header treatment.
   min-height floor: the very wide ratio makes the banner short as the screen narrows, so without
   a floor the text overflows and gets clipped by overflow:hidden on medium/small screens. */
.mbt-shop-archive .mbt-boat-hero-fw,.mbt-content-hero .mbt-boat-hero-fw{min-height:440px;aspect-ratio:2583 / 809;max-height:760px;}
.mbt-shop-archive .mbt-boat-hero-fw__inner,.mbt-content-hero .mbt-boat-hero-fw__inner{padding-top:90px;}
/* soft top veil so the white nav stays readable over the image */
.mbt-shop-archive .mbt-boat-hero-fw::after,.mbt-content-hero .mbt-boat-hero-fw::after{content:"";position:absolute;top:0;left:0;width:100%;height:45%;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(5,27,50,.7) 0%,rgba(5,27,50,0) 100%);}
@media(max-width:768px){.mbt-shop-archive .mbt-boat-hero-fw,.mbt-content-hero .mbt-boat-hero-fw{aspect-ratio:auto;min-height:340px;}.mbt-shop-archive .mbt-boat-hero-fw__inner,.mbt-content-hero .mbt-boat-hero-fw__inner{padding-top:70px;}}

/* ---------- Product cards (shop archive) ---------- */
.mbt-shop-archive #main-content{background:#f5f4f1;}
.mbt-shop-archive ul.products li.product.minimal{background:#fff;border-radius:5px;overflow:hidden;box-shadow:0 6px 22px rgba(6,28,51,.08);transition:box-shadow .35s ease,transform .35s ease;}
.mbt-shop-archive ul.products li.product.minimal:hover{box-shadow:0 16px 42px rgba(6,28,51,.16);transform:translateY(-5px);}
.mbt-shop-archive li.product.minimal .product-meta{padding:20px 16px 24px;text-align:center;}
.mbt-shop-archive li.product.minimal .woocommerce-loop-product__title{font-family:"Cormorant Garamond",Georgia,serif !important;color:#0f3a5f;font-size:23px;font-weight:600;line-height:1.2;margin:0;padding:0;}
.mbt-shop-archive li.product.minimal .product-meta > a{text-decoration:none;}
.mbt-shop-archive li.product.minimal .woocommerce-loop-product__title::after{content:"";display:block;width:44px;height:2px;background:rgba(15,58,95,.28);margin:14px auto 0;}
.mbt-shop-archive li.product.minimal .price{display:block;text-align:center;color:#0f3a5f;margin-top:10px;}

/* ---------- Home destination cards (grid of .card) ---------- */
.mbt-cards-grid{--transition-smooth:all .4s cubic-bezier(.2,.7,.2,1);--card-hover-scale:1.06;--accent-blue:#061c33;--accent-blue-hover:#12395a;--text-muted:rgba(255,255,255,.72);--text-white:#fff;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto;}
/* neutralize stray <p> that WPBakery/wpautop injects, so real elements stay grid/flex items */
.mbt-cards-grid p{display:contents;margin:0;}
@media(max-width:999px){.mbt-cards-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.mbt-cards-grid{grid-template-columns:1fr;}}
.mbt-cards-grid .card{position:relative;height:520px;border-radius:4px;overflow:hidden;cursor:pointer;display:flex;align-items:flex-end;padding:40px;text-decoration:none;box-shadow:0 10px 30px rgba(6,28,51,.1);border:1px solid rgba(6,28,51,.05);transition:var(--transition-smooth);}
.mbt-cards-grid .card-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;transition:var(--transition-smooth);z-index:1;}
.mbt-cards-grid .card::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(6,28,51,.05) 0%,rgba(6,28,51,.3) 50%,rgba(6,28,51,.8) 100%);z-index:2;transition:var(--transition-smooth);}
.mbt-cards-grid .card:hover{transform:translateY(-8px);border-color:rgba(6,28,51,.2);box-shadow:0 20px 40px rgba(6,28,51,.2);}
.mbt-cards-grid .card:hover .card-bg{transform:scale(var(--card-hover-scale));}
.mbt-cards-grid .card:hover::after{background:linear-gradient(to bottom,rgba(6,28,51,.02) 0%,rgba(6,28,51,.2) 40%,rgba(6,28,51,.85) 100%);}
.mbt-cards-grid .card-content{position:relative;z-index:3;width:100%;display:flex;flex-direction:column;}
.mbt-cards-grid .card-accent-line{width:32px;height:2px;background-color:var(--accent-blue);margin-bottom:16px;transition:var(--transition-smooth);}
.mbt-cards-grid .card:hover .card-accent-line{width:50px;background-color:var(--accent-blue-hover);}
.mbt-cards-grid .card-subtitle{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted);font-weight:500;margin-bottom:8px;transition:var(--transition-smooth);}
.mbt-cards-grid .card:hover .card-subtitle{color:var(--text-white);}
.mbt-cards-grid .card-title{font-family:"Playfair Display",Georgia,serif;font-size:32px;font-weight:400;letter-spacing:.05em;color:var(--text-white);margin:0 0 24px;text-transform:uppercase;line-height:1.2;}
.mbt-cards-grid .card-link{display:flex;align-items:center;gap:8px;color:var(--text-white);text-decoration:none;font-size:14px;font-family:"Playfair Display",Georgia,serif;font-style:italic;transition:var(--transition-smooth);width:fit-content;}
.mbt-cards-grid .link-arrow{transition:var(--transition-smooth);font-style:normal;color:var(--accent-blue);font-weight:bold;}
.mbt-cards-grid .card:hover .link-arrow{transform:translateX(6px);color:var(--text-white);}






/* ---------- Taxi Boat page: intro (text + image) + tarifs image ---------- */
.mbt-taxi-section{max-width:1200px;margin:0 auto;padding:72px 28px;box-sizing:border-box;}
.mbt-taxi-intro{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.mbt-taxi-intro h2{font-size:clamp(30px,3.4vw,42px);color:#0f3a5f;margin:0 0 20px;font-weight:600;line-height:1.1;}
.mbt-taxi-intro p{font-size:17px;line-height:1.75;color:#333;margin:0;max-width:540px;}
.mbt-taxi-media img{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 12px 34px rgba(6,28,51,.14);}
.mbt-taxi-tarifs{margin-top:60px;}
.mbt-taxi-tarifs img{width:100%;height:auto;display:block;border-radius:8px;}
@media(max-width:900px){.mbt-taxi-intro{grid-template-columns:1fr;gap:30px;}.mbt-taxi-section{padding:46px 24px;}.mbt-taxi-tarifs{margin-top:38px;}}