/* RockJaw Tours — faithful reproduction of the original X Theme "Ethos" stack.
   Palette & type read from the captured site:
     accent blue  hsl(219,51%,59%) / #1e73be   nav/footer black #000
     body text    hsl(0,3%,35%)                 light section bg hsl(0,0%,93%)
     headings/nav Oswald   body Open Sans / Lato */

:root{
  --accent:      hsl(219,51%,59%);
  --accent-dark: hsl(219,63%,42%);
  --btn:         #1e73be;
  --btn-dark:    #155a94;
  --ink:         hsl(0,3%,35%);
  --head:        #222;
  --black:       #000;
  --light:       hsl(0,0%,93%);
  --line:        #e4e4e4;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:"Open Sans","Lato",Helvetica,Arial,sans-serif;
  font-weight:400; font-size:15px; line-height:1.7;
}
img{max-width:100%; height:auto; border:0; display:block}
a{color:var(--accent); text-decoration:none; transition:color .2s}
a:hover{color:var(--accent-dark)}
h1,h2,h3,h4,h5{
  font-family:"Oswald","Open Sans",sans-serif; font-weight:300;
  color:var(--head); line-height:1.25; margin:0 0 .5em; letter-spacing:.02em;
}
h1{font-size:34px} h2{font-size:27px} h3{font-size:20px} h4{font-size:16px}
p{margin:0 0 1.3em}
hr{border:0; border-top:3px solid var(--line); width:100%; margin:14px 0}
.wrap{max-width:1150px; margin:0 auto; padding:0 24px}

/* ---------- top bar ---------- */
#topbar{background:#111; color:#b9b9b9; font-size:12.5px; border-bottom:1px solid #222}
#topbar .wrap{display:flex; justify-content:space-between; align-items:center; height:38px}
#topbar a{color:#d7d7d7}
#topbar a:hover{color:#fff}
#topbar .tb-right a{margin-left:18px}

/* ---------- navbar (Ethos: solid black) ---------- */
.x-navbar{background:var(--black); box-shadow:0 1px 3px rgba(0,0,0,.35); position:relative; z-index:50}
.x-navbar .wrap{display:flex; align-items:center; justify-content:space-between; min-height:76px}
.brand img{height:52px; width:auto}
.brand{display:inline-flex; align-items:center}
nav.primary ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap}
nav.primary li{margin:0}
nav.primary a{
  display:block; color:#fff; font-family:"Oswald",sans-serif; font-weight:300;
  text-transform:uppercase; font-size:13px; letter-spacing:.07em;
  padding:28px 14px; line-height:1; border-bottom:2px solid transparent;
}
nav.primary a:hover{color:#fff; box-shadow:inset 0 -2px 0 0 var(--accent)}
nav.primary li.active > a{color:#fff; box-shadow:inset 0 -2px 0 0 var(--accent)}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:12px}
.nav-toggle span{display:block; width:26px; height:3px; background:#fff; margin:4px 0}

/* ---------- hero (LayerSlider reproduction) ---------- */
.hero{
  position:relative; background-size:cover; background-position:center;
  color:#fff; text-align:center; padding:130px 20px;
}
.hero::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.42)}
.hero .inner{position:relative; z-index:2; max-width:900px; margin:0 auto}
.hero .kicker{font-family:"Oswald",sans-serif; font-weight:300; text-transform:uppercase;
  letter-spacing:.35em; font-size:15px; margin:0 0 6px; color:#fff}
.hero h1{color:#fff; font-size:58px; font-weight:300; text-transform:uppercase;
  letter-spacing:.04em; text-shadow:0 2px 14px rgba(0,0,0,.5); margin:.1em 0 .35em}
.hero .sub{font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.18em;
  font-size:19px; color:#fff; margin:0 0 26px}
.btn{
  display:inline-block; background:var(--btn); color:#fff !important;
  font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.08em;
  font-size:14px; padding:14px 30px; border-radius:2px; border:0; cursor:pointer;
  transition:background .2s;
}
.btn:hover{background:var(--btn-dark); color:#fff !important}
.btn-ghost{background:transparent; border:2px solid #fff; padding:12px 28px}
.btn-ghost:hover{background:#fff; color:var(--black) !important}

/* ---------- sections ---------- */
.section{padding:66px 0}
.section.alt{background:var(--light)}
.section.dark{background:#1a1a1a; color:#cfcfcf}
.section-head{text-align:center; max-width:760px; margin:0 auto 42px}
.section-head h2{font-size:30px}
.section-head .lead{font-size:16px}
.center{text-align:center}

/* ---------- tour cards grid ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.card{background:#fff; text-align:center}
.card .thumb{overflow:hidden}
.card .thumb img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .4s}
.card:hover .thumb img{transform:scale(1.06)}
.card h3{margin:16px 0 8px; text-transform:uppercase; font-size:20px}
.card p{font-size:14px; margin:0 14px 16px}
.card .hr-sm{border-top:3px solid var(--line); width:46px; margin:10px auto}

/* ---------- content pages ---------- */
.page-head{background:var(--black); color:#fff; padding:46px 0}
.page-head h1{color:#fff; text-transform:uppercase; margin:0 0 6px; font-size:34px}
.crumbs{font-size:12px; color:#9a9a9a; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.08em}
.crumbs a{color:#cfcfcf} .crumbs .sep{margin:0 8px; color:#555}
.entry{font-size:15.5px}
.entry h2{margin-top:1.4em} .entry h3{margin-top:1.2em}
.entry img{margin:10px 0 18px; border-radius:2px}
.entry ul,.entry ol{margin:0 0 1.3em; padding-left:22px}
.entry li{margin:.3em 0}
.content-narrow{max-width:820px; margin:0 auto}
.with-side{display:grid; grid-template-columns:1fr 300px; gap:46px; align-items:start}

/* ---------- FAQ ---------- */
.entry h2 + p, .faq p{margin-bottom:1.1em}

/* ---------- gallery ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.gallery-grid a{display:block; overflow:hidden}
.gallery-grid img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .4s}
.gallery-grid a:hover img{transform:scale(1.08)}

/* ---------- tours listing ---------- */
.tour-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.tour-item{background:#fff; border:1px solid var(--line)}
.tour-item .thumb{overflow:hidden; aspect-ratio:3/2}
.tour-item .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.tour-item:hover .thumb img{transform:scale(1.06)}
.tour-item .body{padding:18px 20px 22px}
.tour-item h3{text-transform:uppercase; font-size:19px; margin:0 0 8px}
.tour-item .cat{font-family:"Oswald",sans-serif; text-transform:uppercase; font-size:11px;
  letter-spacing:.1em; color:var(--accent)}
.tour-item p{font-size:14px; margin:8px 0 14px}
.filter-bar{text-align:center; margin:0 0 36px}
.filter-bar a{display:inline-block; font-family:"Oswald",sans-serif; text-transform:uppercase;
  font-size:13px; letter-spacing:.07em; padding:8px 18px; margin:4px; border:1px solid var(--line); color:var(--ink)}
.filter-bar a.active,.filter-bar a:hover{background:var(--black); color:#fff; border-color:var(--black)}

/* ---------- blog ---------- */
.post-list{list-style:none; margin:0; padding:0}
.post-item{display:grid; grid-template-columns:260px 1fr; gap:24px; padding:0 0 34px; margin:0 0 34px; border-bottom:1px solid var(--line)}
.post-item .thumb img{width:100%; aspect-ratio:3/2; object-fit:cover}
.post-item h2{font-size:23px; text-transform:uppercase; margin:0 0 6px}
.post-meta{font-family:"Oswald",sans-serif; text-transform:uppercase; font-size:11.5px; letter-spacing:.08em; color:#999; margin:0 0 10px}
.post-meta .cat{color:var(--accent)}
.readmore{font-family:"Oswald",sans-serif; text-transform:uppercase; font-size:12px; letter-spacing:.07em}
.post-nav{display:flex; justify-content:space-between; margin:30px 0 0; font-family:"Oswald",sans-serif; text-transform:uppercase; font-size:12px}
.single .featured{margin:0 0 22px}
.sidebar .widget{margin:0 0 34px}
.sidebar h3{text-transform:uppercase; font-size:16px; border-bottom:2px solid var(--line); padding-bottom:8px}
.sidebar ul{list-style:none; margin:0; padding:0}
.sidebar li{padding:7px 0; border-bottom:1px solid #f0f0f0; font-size:14px}
.sidebar .callout{font-family:"Oswald",sans-serif; font-size:19px; color:var(--black)}
.author-box{background:var(--light); padding:18px 22px; margin:26px 0; display:flex; gap:16px; align-items:flex-start}
.author-box .ini{flex:0 0 52px; width:52px; height:52px; border-radius:50%; background:var(--black); color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Oswald",sans-serif; font-size:18px}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start}
.contact-info .big{font-family:"Oswald",sans-serif; font-size:22px; color:var(--black)}
.contact-info ul{list-style:none; margin:0; padding:0}
.contact-info li{padding:8px 0; border-bottom:1px solid var(--line)}
form.rjt input,form.rjt textarea{
  width:100%; padding:12px 14px; margin:0 0 16px; border:1px solid #ccc; border-radius:2px;
  font-family:inherit; font-size:15px; background:#fafafa;
}
form.rjt textarea{min-height:150px; resize:vertical}
.notice{padding:14px 18px; border-radius:2px; margin:0 0 20px}
.notice.ok{background:#e8f3e8; border:1px solid #badbb6; color:#2f6b2f}
.notice.err{background:#fbeaea; border:1px solid #e3b4b4; color:#9a3131}

/* ---------- get in touch band ---------- */
.cta-band{background:var(--black); color:#fff; text-align:center; padding:60px 20px}
.cta-band h2{color:#fff; text-transform:uppercase}
.cta-band .phone{font-family:"Oswald",sans-serif; font-size:30px; color:#fff; letter-spacing:.03em}

/* ---------- footer (colophon) ---------- */
#footer{background:#000; color:#8f8f8f; padding:56px 0 0; font-size:14px}
#footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px}
#footer h3{color:#fff; text-transform:uppercase; font-size:15px; margin:0 0 16px}
#footer .fbrand img{height:60px; margin:0 0 16px}
#footer a{color:#bdbdbd} #footer a:hover{color:#fff}
#footer ul{list-style:none; margin:0; padding:0}
#footer li{padding:5px 0}
#bottom-bar{border-top:1px solid #1e1e1e; margin-top:46px; padding:20px 0}
#bottom-bar .wrap{display:flex; justify-content:space-between; font-size:12.5px; color:#777}
#bottom-bar a{color:#9a9a9a}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cards,.tour-grid{grid-template-columns:repeat(2,1fr)}
  .with-side,.contact-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .post-item{grid-template-columns:1fr}
  #footer .cols{grid-template-columns:1fr 1fr}
  .hero h1{font-size:40px}
}
@media (max-width:640px){
  .nav-toggle{display:block}
  nav.primary{display:none; width:100%; order:3}
  nav.primary.open{display:block}
  nav.primary ul{flex-direction:column}
  nav.primary a{padding:14px 4px; border-bottom:1px solid #1c1c1c}
  .x-navbar .wrap{flex-wrap:wrap; min-height:64px}
  .cards,.tour-grid,.gallery-grid{grid-template-columns:1fr}
  .hero{padding:90px 18px} .hero h1{font-size:32px}
  #footer .cols{grid-template-columns:1fr}
}