/* ============================================================
   Norwegian Coastal Cruises - Site Stylesheet
   css/site-2026.css
   ------------------------------------------------------------
   Shared styles for the 2026 site design.
   Load on every page: <link href="css/site-2026.css" rel="stylesheet">
   Theme colour and all shared values are set as variables in :root.
   ============================================================ */

:root{
  --red:#990000;
  --red-deep:#6E0000;
  --ink:#1B1D22;
  --slate:#3C4A54;
  --mist:#8A959C;
  --ice:#F4F6F7;
  --frost:#E4E9EB;
  --paper:#FFFFFF;
  --gold:#B99A5B;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:90px;}
body{font-family:'Source Serif 4',Georgia,serif;color:var(--ink);background:var(--paper);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:var(--red);text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--red);outline-offset:2px;}

.eyebrow{font-family:'Archivo',sans-serif;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--red);}

/* ===== Utility bar ===== */
.utilitybar{background:var(--red-deep);color:#fff;font-family:'Archivo',sans-serif;font-size:12.5px;letter-spacing:.04em;}
.utilitybar .wrap{max-width:1180px;margin:0 auto;padding:8px 24px;display:flex;justify-content:flex-end;gap:26px;}
.utilitybar a{color:#fff;}
.utilitybar a:hover{color:var(--frost);text-decoration:none;}

/* ===== Header ===== */
.siteheader{background:var(--paper);border-bottom:1px solid var(--frost);}
.siteheader .wrap{max-width:1180px;margin:0 auto;padding:20px 24px 14px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.logo img{height:62px;width:auto;}
.headphone{text-align:right;}
.headphone a{font-family:'Newsreader',serif;font-size:27px;font-weight:600;color:var(--ink);letter-spacing:.01em;}
.headphone a:hover{color:var(--red);text-decoration:none;}
.headphone span{display:block;font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin-top:2px;}

/* ===== Nav ===== */
.mainnav{background:var(--paper);border-bottom:3px solid var(--red);position:relative;z-index:60;}
.mainnav .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.navtoggle{display:none;}
.navtoggle-label{display:none;font-family:'Archivo',sans-serif;font-size:13px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:14px 0;cursor:pointer;color:var(--ink);}
nav.menu > ul{list-style:none;display:flex;gap:2px;}
nav.menu > ul > li{position:relative;}
nav.menu > ul > li > a{display:block;font-family:'Archivo',sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:16px 18px;}
nav.menu > ul > li > a:hover,nav.menu > ul > li:hover > a{background:var(--red);color:#fff;text-decoration:none;}
/* Current page highlighting, driven by the body id on each page */
#page-home #nav-home > a,
#page-hurtigruten #nav-hurtigruten > a,
#page-voyages #nav-voyages > a,
#page-brochures #nav-brochures > a,
#page-ships #nav-ships > a,
#page-offers #nav-offers > a{color:var(--red);}
#page-home #nav-home:hover > a,
#page-hurtigruten #nav-hurtigruten:hover > a,
#page-voyages #nav-voyages:hover > a,
#page-brochures #nav-brochures:hover > a,
#page-ships #nav-ships:hover > a,
#page-offers #nav-offers:hover > a{color:#fff;}
nav.menu ul ul{list-style:none;position:absolute;top:100%;left:0;min-width:280px;background:#fff;border:1px solid var(--frost);border-top:3px solid var(--red);box-shadow:0 14px 34px rgba(27,29,34,.14);opacity:0;visibility:hidden;transform:translateY(6px);transition:all .18s ease;z-index:70;}
nav.menu li:hover > ul,nav.menu ul ul li:hover > ul{opacity:1;visibility:visible;transform:translateY(0);}
nav.menu ul ul li{position:relative;}
nav.menu ul ul a{display:block;padding:11px 18px;font-family:'Archivo',sans-serif;font-size:13px;color:var(--ink);border-bottom:1px solid var(--ice);}
nav.menu ul ul a:hover{background:var(--ice);color:var(--red);text-decoration:none;}
nav.menu ul ul ul{top:-3px;left:100%;}
nav.menu .has-sub > a::after{content:"\203A";margin-left:8px;color:var(--mist);}
nav.menu ul ul .has-sub > a::after{float:right;}

/* ===== Hero ===== */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:430px;}
.hero-panel{background:var(--red);color:#fff;display:flex;align-items:center;}
.hero-panel .inner{padding:56px 56px 56px max(24px,calc((100vw - 1180px)/2 + 24px));max-width:640px;}
.hero-panel .eyebrow{color:#F3D9A4;margin-bottom:16px;}
.hero-panel h1{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(34px,4vw,52px);line-height:1.08;letter-spacing:-.01em;margin-bottom:18px;}
.hero-panel p{font-size:17px;line-height:1.6;color:#F6E9E9;max-width:46ch;}
.hero-image{background-position:center;background-size:cover;background-repeat:no-repeat;min-height:300px;}
/* Set the image itself per page, e.g. <div class="hero-image" style="background-image:url('/images/your-image.jpg')"> */

/* ===== Jump strip ===== */
.jumpstrip{background:var(--ice);border-bottom:1px solid var(--frost);}
.jumpstrip .wrap{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;font-family:'Archivo',sans-serif;font-size:13px;letter-spacing:.06em;}
.jumpstrip strong{font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:11.5px;color:var(--slate);}
.jumpstrip a{color:var(--ink);border-bottom:2px solid var(--red);padding-bottom:2px;}
.jumpstrip a:hover{color:var(--red);text-decoration:none;}

/* ===== Offers ===== */
.offers{max-width:1180px;margin:0 auto;padding:64px 24px 24px;}
.offers-intro{max-width:70ch;margin-bottom:56px;}
.offers-intro h2{font-family:'Newsreader',serif;font-weight:500;font-size:30px;margin:10px 0 14px;}
.offer{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;border:1px solid var(--frost);margin-bottom:52px;background:#fff;}
.offer.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
.offer-body{padding:44px 48px;border-top:4px solid var(--red);}
.offer-body h2{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(25px,2.6vw,33px);line-height:1.15;margin:12px 0 8px;}
.offer-route{font-family:'Archivo',sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:18px;}
.offer-body p{margin-bottom:14px;max-width:60ch;}
.price{display:flex;align-items:baseline;gap:12px;margin:22px 0 6px;padding-top:20px;border-top:1px dotted var(--frost);}
.price .amount{font-family:'Newsreader',serif;font-size:40px;font-weight:600;color:var(--red);line-height:1;}
.price .per{font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);}
.validity{font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);background:var(--ice);display:inline-block;padding:6px 12px;margin-bottom:22px;}
.offer-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.btn{display:inline-block;background:var(--red);color:#fff;font-family:'Archivo',sans-serif;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:14px 26px;transition:background .15s ease;}
.btn:hover{background:var(--red-deep);color:#fff;text-decoration:none;}
.callnote{font-family:'Archivo',sans-serif;font-size:13.5px;color:var(--slate);}
.callnote a{font-weight:600;color:var(--ink);}
.offer-media{min-height:320px;}
.offer-media img{width:100%;height:100%;object-fit:cover;}
.smallterms{font-size:14px;color:var(--slate);border-left:3px solid var(--frost);padding-left:16px;margin-top:20px;}
.smallterms em{font-style:normal;}
ul.offerlist{list-style:none;margin:0 0 16px;}
ul.offerlist li{padding:9px 0 9px 26px;border-bottom:1px solid var(--ice);position:relative;}
ul.offerlist li::before{content:"";position:absolute;left:0;top:17px;width:12px;height:2px;background:var(--red);}

/* ===== Promise panel ===== */
.promise{background:var(--ink);color:#fff;margin:64px 0 0;}
.promise .wrap{max-width:1180px;margin:0 auto;padding:64px 24px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;}
.promise .eyebrow{color:#7FC7A8;}
.promise h2{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(26px,2.8vw,36px);margin:12px 0 16px;}
.promise p{color:#C9CED4;margin-bottom:14px;max-width:62ch;}
.promise strong{color:#fff;}
.promise ul{list-style:none;margin:18px 0;}
.promise ul li{padding:8px 0 8px 24px;border-bottom:1px solid rgba(255,255,255,.1);position:relative;font-size:15.5px;color:#C9CED4;}
.promise ul li::before{content:"";position:absolute;left:0;top:17px;width:12px;height:2px;background:#7FC7A8;}
.promise img{border:1px solid rgba(255,255,255,.15);}
.retro-note{max-width:1180px;margin:0 auto;padding:34px 24px 10px;font-size:14.5px;color:var(--slate);}

/* ===== Social ===== */
.social{max-width:1180px;margin:0 auto;padding:10px 24px 56px;display:flex;align-items:center;gap:14px;}
.social img{height:30px;width:auto;}
.social a img{height:33px;width:33px;}

/* ===== Prefooter ===== */
.prefooter{background:var(--ice);border-top:1px solid var(--frost);}
.prefooter .wrap{max-width:1180px;margin:0 auto;padding:56px 24px;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);gap:56px;}
.prefooter h2{font-family:'Newsreader',serif;font-weight:500;font-size:26px;margin-bottom:10px;}
.prefooter p{color:var(--slate);font-size:15.5px;margin-bottom:16px;max-width:48ch;}
#mailform-subscribe input[type=text]{font-family:'Archivo',sans-serif;font-size:15px;padding:12px 14px;border:1px solid var(--frost);background:#fff;width:100%;max-width:340px;margin-bottom:10px;display:block;color:var(--ink);}
#mailform-subscribe input[type=submit]{font-family:'Archivo',sans-serif;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:var(--red);color:#fff;border:none;padding:13px 26px;cursor:pointer;}
#mailform-subscribe input[type=submit]:hover{background:var(--red-deep);}
.privline{font-size:13px;color:var(--mist);margin-top:10px;}
.fcolnav ul{list-style:none;}
.fcolnav li{border-bottom:1px solid var(--frost);}
.fcolnav a{display:block;padding:11px 0;font-family:'Archivo',sans-serif;font-size:14px;color:var(--ink);}
.fcolnav a:hover{color:var(--red);text-decoration:none;}

/* ===== Footer ===== */
.sitefooter{background:var(--red-deep);}
.sitefooter .wrap{max-width:1180px;margin:0 auto;padding:30px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.sitefooter img{height:52px;width:auto;}
.sitefooter p{color:#E8C9C9;font-family:'Archivo',sans-serif;font-size:12.5px;letter-spacing:.04em;}

/* ===== Responsive ===== */
@media (max-width:920px){
  .hero{grid-template-columns:1fr;}
  .hero-panel .inner{padding:44px 24px;max-width:none;}
  .offer,.offer.flip{grid-template-columns:1fr;}
  .offer-media{order:-1;min-height:230px;}
  .promise .wrap{grid-template-columns:1fr;gap:34px;}
  .prefooter .wrap{grid-template-columns:1fr;gap:38px;}
  .navtoggle-label{display:block;}
  nav.menu{display:none;}
  .navtoggle:checked ~ nav.menu{display:block;padding-bottom:14px;}
  nav.menu > ul{flex-direction:column;gap:0;}
  nav.menu > ul > li > a{padding:13px 4px;border-bottom:1px solid var(--ice);}
  nav.menu ul ul{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;border-left:3px solid var(--frost);margin-left:10px;min-width:0;}
  nav.menu ul ul ul{border-left-color:var(--red);}
  .headphone{text-align:left;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  nav.menu ul ul{transition:none;}
}
@media print{
  .utilitybar,.mainnav,.jumpstrip,.prefooter,.social{display:none;}
}