/* Elbar Tour - shared styles for individual port pages.
   Reused by rome.html, naples.html, palma.html, genoa.html, messina.html, spezia.html.
   Keep in sync with the color tokens in index.html's inline <style>. */

:root{
  --ink:#171412; --ink-soft:#5c534c; --ink-mute:#6b625a; --ink-faint:#8a7f75;
  --bg:#f7f4ef; --card:#fff; --border:rgba(23,20,18,.1);
  --accent:#9e3b2a; --accent-dark:#7c2c1e;
  --teal:#1c5c66; --teal-dark:#164a52; --teal-bg:#e6eef0;
  --green:#1f7a4d; --green-dark:#186b42;
  --dark:#16211f; --cream:#f2ede5; --gold:#e8c9a0;
}
html{scroll-behavior:smooth}
body{direction:rtl;margin:0;background:var(--bg);color:var(--ink);font-family:'Rubik',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
*{box-sizing:border-box}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark);text-decoration:underline}
h1,h2,h3{margin:0}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

[data-skip]{position:absolute;inset-inline-start:-9999px;top:0}
[data-skip]:focus{inset-inline-start:auto;position:static;display:inline-block}

.wrap{max-width:920px;margin:0 auto;padding-inline:clamp(16px,5vw,24px)}

/* breadcrumb header */
.port-header{background:var(--dark);color:var(--cream)}
.port-header .wrap{padding-block:clamp(14px,4vw,28px) clamp(16px,4vw,26px)}
.crumbs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13.5px;font-weight:600}
.crumbs li{display:flex;align-items:center;gap:4px}
.crumbs a{color:var(--gold);display:inline-flex;align-items:center;min-height:36px;padding:4px 0}
.crumbs .sep{color:rgba(242,237,229,.45);display:flex}
.crumbs .current{color:rgba(242,237,229,.7)}
.port-header h1{font-family:'Rubik',sans-serif;font-weight:900;font-size:clamp(22px,5.6vw,40px);letter-spacing:-.02em;margin-top:8px;line-height:1.14}
.port-header .kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--gold);background:rgba(242,237,229,.1);border:1px solid rgba(232,201,160,.4);padding:5px 12px;border-radius:999px;margin-bottom:8px}
.port-header .sub{margin:8px 0 0;color:rgba(242,237,229,.78);font-size:15px;line-height:1.5;max-width:56ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:620px){.port-header .sub{-webkit-line-clamp:initial;font-size:16px}}

/* facts strip: the "is this what I need" block, always right under the fold */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:-14px;position:relative;z-index:1}
@media (min-width:620px){.facts{grid-template-columns:repeat(4,1fr)}}
.facts .stat{background:var(--card);padding:10px 12px 11px}
.facts .stat .label{display:block;font-size:12px;font-weight:700;color:var(--ink-mute);letter-spacing:.02em;margin-bottom:3px}
.facts .stat .value{display:block;font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.28}
.facts .stat .value.price{color:var(--accent);font-family:'Rubik',sans-serif;font-size:19px}

.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 22px;border-radius:10px;font-weight:700;font-size:15.5px;border:none;cursor:pointer}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-dark);color:#fff;text-decoration:none}
.btn-wa{background:var(--green);color:#fff}
.btn-wa:hover{background:var(--green-dark);color:#fff;text-decoration:none}
.btn-ghost{background:#fff;border:1.5px solid var(--teal);color:var(--teal)}
.btn-ghost:hover{background:var(--teal-bg);color:var(--teal-dark);text-decoration:none}

main section{padding-block:clamp(34px,7vw,52px)}
main section h2{font-family:'Rubik',sans-serif;font-weight:800;font-size:clamp(22px,3.4vw,28px);letter-spacing:-.01em;margin-bottom:16px}
main p{color:var(--ink-soft);font-size:16.5px;line-height:1.65;margin:0}

/* itinerary via native <details>, no JS needed */
.itinerary-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:clamp(20px,4vw,32px) clamp(18px,4vw,30px);box-shadow:0 14px 40px rgba(23,20,18,.06)}
.itinerary{display:flex;flex-direction:column}
.tl-step{display:flex;gap:18px;align-items:stretch}
.tl-marker{flex:none;display:flex;flex-direction:column;align-items:center}
.tl-line{width:2px;flex:1;min-height:14px;margin-top:6px;background:repeating-linear-gradient(to bottom,var(--border) 0 6px,transparent 6px 12px)}
.itinerary .dot{flex:none;width:46px;height:46px;border-radius:50%;background:var(--cream);border:1px solid var(--border);color:var(--accent);display:flex;align-items:center;justify-content:center}
.itinerary .dot svg{width:23px;height:23px;flex:none}
.itinerary .dot.final{background:var(--dark);border-color:var(--dark);color:var(--gold)}
.tl-content{flex:1;padding-bottom:26px}
.tl-step:last-child .tl-content{padding-bottom:0}
.tl-title{font-family:'Rubik',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.005em;margin:2px 0 6px}
.tl-step p{color:var(--ink-soft);font-size:16.5px;line-height:1.55;margin:0}
@supports (animation-timeline:view()){
  .tl-step{opacity:0;transform:translateY(16px);animation:tlReveal .6s cubic-bezier(.23,1,.32,1) both;animation-timeline:view();animation-range:entry 8% cover 30%}
}
@keyframes tlReveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* photo gallery: flexible for 1-4 images */
.gallery{display:flex;flex-direction:column;gap:16px}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px;max-height:520px}
.gallery figure{margin:0}

/* testimonial */
.testimonial{background:var(--cream);border-radius:14px;padding:24px 26px;border-inline-start:4px solid var(--accent)}
.testimonial p.quote{font-size:18px;line-height:1.6;color:var(--ink);font-style:normal;font-weight:500}
.testimonial .cite{display:block;margin-top:12px;font-size:14.5px;font-weight:700;color:var(--ink-mute)}
.testimonial.is-placeholder{border-inline-start-color:var(--ink-faint);background:repeating-linear-gradient(135deg,var(--cream),var(--cream) 12px,#eee7da 12px,#eee7da 24px)}
.testimonial.is-placeholder p.quote{color:var(--ink-mute);font-style:italic}

/* booking widget frame */
.booking-frame-wrap{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:6px;box-shadow:0 10px 30px rgba(23,20,18,.06)}
.booking-frame-wrap iframe{width:100%;height:560px;border:0;border-radius:14px;display:block}
@media (min-width:620px){.booking-frame-wrap iframe{height:780px}}
.booking-fallback{margin-top:14px;text-align:center;font-size:15px;color:var(--ink-mute)}
.booking-fallback a,main section[aria-labelledby="other-h"] a{display:inline-flex;align-items:center;min-height:36px;padding:2px 4px}

footer.port-footer{background:var(--dark);color:rgba(242,237,229,.75)}
footer.port-footer .wrap{padding-block:40px}
footer.port-footer a{color:var(--gold)}
footer.port-footer a:hover{color:var(--gold)}
footer.port-footer .links{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:15.5px;margin-bottom:12px}
footer.port-footer .links a{display:inline-flex;align-items:center;min-height:40px;padding:6px 0}
footer.port-footer .fine{margin:0;font-size:14px;line-height:1.7;color:rgba(242,237,229,.6);border-top:1px solid rgba(242,237,229,.15);padding-top:18px}

.sticky-cta{position:fixed;bottom:0;inset-inline:0;z-index:60;background:rgba(22,33,31,.96);backdrop-filter:blur(8px);padding:10px clamp(12px,4vw,16px);display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;border-top:1px solid rgba(232,201,160,.25)}
.sticky-cta .txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.sticky-cta .txt strong{color:var(--cream);font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-cta .txt span{color:rgba(242,237,229,.6);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
main{padding-bottom:76px}