/* ==========================================================================
   The Boat Shed — boatshedbremerton.com
   Hand-written static rebuild (replaces WordPress/Elementor). One shared
   stylesheet for every page. Breakpoints mirror the original theme:
   mobile ≤767px, tablet 768–1024px, laptop 1025–1400px, desktop >1400px.
   ========================================================================== */

:root {
  --c-primary: #A30000;   /* red  – headings, accents, links   */
  --c-secondary: #003B95; /* blue – nav, buttons, footer rule  */
  --c-text: #000000;
  --c-accent: #A30000;
  --c-gold: #FFB700;
  --c-slate: #2B4560;     /* borders, button hover             */
  --c-white: #FFFFFF;
  --f-display: "Bebas Neue", Sans-serif;   /* primary typography   */
  --f-ui: "Raleway", Sans-serif;           /* secondary typography */
  --f-text: "Taviraj", Sans-serif;         /* body text            */
  --content-width: 1300px;
  --gap: 20px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--c-text);
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; border: 0; display: inline-block; vertical-align: middle; }
a { color: var(--c-accent); text-decoration: none; transition: color .3s; }
a:hover { color: var(--c-secondary); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1; font-weight: 400; }
h1, h2 {
  color: var(--c-primary);
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
h3, h4, h5 { color: var(--c-secondary); font-family: var(--f-ui); font-weight: 500; }
h6 { font-family: var(--f-ui); font-weight: 500; }
ul { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: 700; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Desktop browsers: keep tap-to-call on phones/tablets, but stop desktops
   from launching Skype/FaceTime (carried over from the original site). */
@media (min-width: 1025px) {
  a[href^="tel:"] { pointer-events: none; cursor: default; }
}

/* ---------- Layout helpers (Elementor "container" equivalents) ---------- */
.con { position: relative; width: 100%; padding: 10px; display: flex; flex-direction: column; gap: var(--gap); }
.con-boxed { padding-left: 10px; padding-right: 10px; }
.con-boxed > .inner {
  width: 100%; max-width: var(--content-width); margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--gap);
}
.row { flex-direction: row; }
.wrap { flex-wrap: wrap; }
.col { flex-direction: column; }
.grow > * { flex: 1 1 0; min-width: 0; }
.center { align-items: center; }
.middle { justify-content: center; }
.between { justify-content: space-between; }
.tac { text-align: center; }
@media (max-width: 1024px) { :root { --content-width: 1024px; } }
@media (max-width: 767px)  { :root { --content-width: 767px; } }

/* ---------- Buttons ---------- */
.btn, button, input[type="submit"], input[type="button"] {
  display: inline-block;
  background-color: var(--c-secondary);
  color: var(--c-white);
  font-family: var(--f-display);
  font-size: 35px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  padding: 20px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  min-height: 40px;
  transition: background-color .3s, color .3s;
}
.btn:hover, .btn:focus, button:hover, input[type="submit"]:hover { background-color: var(--c-slate); color: var(--c-white); }
.btn-block { display: block; width: 100%; }

/* ---------- Site header ---------- */
.site-header { position: relative; z-index: 50; }

/* Blue reservation strip – tablet & mobile only */
.top-line {
  display: none;
  background: var(--c-secondary);
  padding: 10px;
  justify-content: center; align-items: center;
}
.top-line .reserve { text-align: center; }
.top-line .reserve a { color: #fff; }

/* Reservation blurb (used in header, mobile strip, and menu drawer) */
.reserve {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.7em;               /* 27.2px */
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--c-secondary);
  text-align: end;
}
.reserve a { color: var(--c-secondary); }
.reserve a:hover, .reserve a:focus { color: var(--c-accent); }
.reserve .parties {
  font-family: var(--f-ui);
  text-transform: none;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: normal;
}

/* Desktop header bar */
.header-bar {
  background: #fff;
  border-bottom: 3px solid var(--c-slate);
  position: sticky; top: 0; z-index: 60;
}
.header-bar > .inner { flex-direction: row; gap: 0; }
.header-nav { flex: 1 1 0; min-width: 0; display: flex; align-items: center; padding: 10px; }
.header-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; }
.header-nav a {
  display: block;
  font-family: var(--f-display);
  font-size: 1.7em;              /* 27.2px */
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--c-secondary);
  padding: 5px 10px;
  position: relative;
}
.header-nav a::after {           /* underline "slide" pointer */
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px;
  background: var(--c-secondary); transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.header-nav a:hover::after, .header-nav a.active::after { transform: scaleX(1); }
.header-logo {
  flex: 0 0 12%; display: flex; justify-content: center; align-items: flex-start;
}
.header-logo a { display: block; margin-bottom: -30px; z-index: 20; position: relative; }
.header-logo img { width: 8em; height: auto; }
.header-reserve {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-end; padding: 10px; gap: 10px;
}

/* Tablet / mobile header (logo + hamburger) */
.header-mobile {
  display: none;
  background: #fff;
  border-bottom: 3px solid var(--c-slate);
  padding: 10px 20px;
  position: sticky; top: 0; z-index: 60;
}
.header-mobile > .inner { flex-direction: row; gap: 0; align-items: center; }
.header-mobile .m-logo { flex: 0 0 20%; display: flex; align-items: center; }
.header-mobile .m-logo img { width: 200px; }
.header-mobile .m-toggle { flex: 1 1 0; display: flex; justify-content: flex-end; align-items: center; }
.menu-toggle {
  background: #fff; border: 0; padding: 0; margin: 5px 0 0 10px; cursor: pointer; line-height: 0;
  color: var(--c-secondary);
}
.menu-toggle svg { width: 30px; height: 30px; fill: var(--c-secondary); }
.menu-toggle:hover svg { fill: var(--c-accent); }

@media (max-width: 1024px) {
  .header-bar { display: none; }
  .top-line, .header-mobile { display: flex; }
}
@media (max-width: 767px) {
  .header-mobile { padding: 10px; }
  .header-mobile .m-logo { flex-basis: 25%; padding-right: 20px; }
  .header-mobile .m-logo img { width: 80px; }
  .header-mobile .m-toggle { flex-basis: 75%; }
  .menu-toggle svg { width: 25px; height: 25px; }
}

/* ---------- Mobile menu drawer (Elementor popup #208) ---------- */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.8); z-index: 9998;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 640px;
  background: #fff; z-index: 9999; overflow-y: auto;
  transform: translateX(100%); transition: transform .35s ease;
  padding: 30px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
body.drawer-open .drawer { transform: none; }
body.drawer-open .drawer-overlay { opacity: 1; visibility: visible; }
body.drawer-open { overflow: hidden; }
.drawer-close {
  position: absolute; top: 12px; right: 12px; background: none; border: 0; padding: 8px;
  cursor: pointer; line-height: 0; min-height: 0;
}
.drawer-close svg { width: 22px; height: 22px; fill: var(--c-secondary); }
.drawer-close:hover { background: none; }
.drawer .d-logo img { width: 123px; }
.drawer nav ul { display: flex; flex-direction: column; align-items: center; width: 100%; }
.drawer nav a {
  display: block; text-align: center;
  font-family: var(--f-display); font-size: 1.7em; line-height: 14px;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-secondary);
  padding: 10px;
}
.drawer nav a:hover, .drawer nav a:focus { color: var(--c-slate); }
.drawer nav a.active { color: var(--c-gold); }
.drawer .divider { width: 100%; padding: 15px 0; text-align: center; }
.drawer .divider span { display: inline-block; width: 30%; border-top: 1px solid var(--c-slate); }
.drawer .reserve { text-align: center; }
@media (max-width: 767px) {
  .drawer nav a { padding: 15px 10px; }
}

/* ---------- Page hero (title band with photo) ---------- */
.page-hero {
  position: relative; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  min-height: 300px;
}

/* ---------- Footer ---------- */
.site-footer { background: rgba(43,69,96,.04); border-top: 3px solid var(--c-secondary); }
.footer-main { padding: 50px 0 0; --content-width: 1400px; }
.footer-main > .inner { flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.footer-cols { display: flex; flex-wrap: wrap; width: 100%; }
.footer-col { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.footer-col.visit { flex: 0 0 25%; padding-right: 50px; }
.footer-col.hours { flex: 0 0 25%; padding: 0; }
.footer-col.map  { flex: 0 0 50%; justify-content: flex-end; padding: 0 0 0 50px; }
.footer-col h4 {
  font-family: var(--f-display); font-size: 2em; line-height: 1;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-accent);
}
.icon-list li { display: flex; align-items: flex-start; font-size: 20px; line-height: 1.5; }
.icon-list li + li { margin-top: 5px; padding-top: 5px; }
.icon-list li a { display: flex; align-items: flex-start; color: inherit; }
.icon-list .ico { flex: 0 0 20px; width: 20px; margin-top: 5px; margin-right: 5px; display: inline-flex; justify-content: center; }
.icon-list .ico svg { width: 20px; height: 20px; fill: var(--c-primary); }
.icon-list .txt { color: var(--c-text); transition: color .3s; }
.icon-list li:hover .txt { color: var(--c-accent); }
.social { display: flex; gap: 10px; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: transparent;
}
.social svg { width: 20px; height: 20px; fill: var(--c-secondary); transition: fill .3s; }
.social a:hover svg { fill: var(--c-accent); }
.footer-map iframe { width: 100%; height: 350px; border: 0; display: block; }
.footer-bottom { padding: 25px 0 20px; background: rgba(43,69,96,.04); text-align: center; font-size: 16px; }
@media (max-width: 1400px) { .footer-col.hours { flex-basis: 24%; } }
@media (max-width: 1024px) {
  .footer-main { padding: 50px 20px 0; }
  .footer-col.visit, .footer-col.hours { flex-basis: 50%; }
  .footer-col.map { flex-basis: 100%; padding: 10% 0 5%; }
  .footer-map iframe { height: 50vh; }
}
@media (max-width: 767px) {
  .footer-col.visit, .footer-col.hours { flex-basis: 100%; padding: 5%; }
  .footer-col.hours { margin-top: 20px; }
  .footer-col h4, .icon-list li { justify-content: center; text-align: center; }
  .footer-col h4 { text-align: center; }
  .social { justify-content: center; }
  .footer-map iframe { height: 51vh; }
  .footer-bottom { padding: 20px; font-size: 14px; }
}

/* ---------- Back-to-top button ---------- */
#to-top {
  position: fixed; right: 20px; bottom: 20px; width: 40px; height: 40px; z-index: 9990;
  background: rgba(0,0,0,.5); color: #fff; border: 0; border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s; min-height: 0; padding: 0;
}
#to-top.show { opacity: 1; visibility: visible; }
#to-top:hover { background: rgba(0,0,0,.7); }
#to-top svg { width: 18px; height: 18px; fill: #fff; }

/* ==========================================================================
   HOME
   ========================================================================== */
.hero {
  position: relative; overflow: hidden; min-height: 85vh;
  padding: 0 10px;
}
.hero .slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1s ease; transform: scale(1);
}
.hero .slide.active { opacity: 1; animation: kenburns 4.5s linear forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.15); } }
@media (max-width: 1024px) { .hero { min-height: 60vh; } }
@media (max-width: 767px)  { .hero { min-height: 50vh; } }

.welcome { padding: 100px 20px; }
.welcome-box { border: 1px solid var(--c-primary); padding: 50px; display: flex; flex-direction: column; gap: 20px; }
.welcome-row { display: flex; gap: 40px; margin-bottom: 40px; }
.welcome-row > * { flex: 1 1 0; min-width: 0; }
.welcome-intro { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px 0; }
.welcome-intro h2 { font-size: 4em; text-align: center; }
.welcome-intro .lead { text-align: center; font-family: Arial, Sans-serif; font-size: 22px; line-height: 1.5; }
.welcome-intro .lead h3 { font: inherit; color: inherit; margin: 0 0 1em; }
.welcome-intro .lead h3:last-child { margin-bottom: 0; }
.welcome-info {
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  border-left: 1px solid var(--c-primary); border-right: 1px solid var(--c-primary);
  padding: 20px;
}
.info-box { text-align: center; }
.info-box h3 {
  font-family: var(--f-display); font-size: 40px; line-height: 1.2; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--c-primary); margin: 0; padding-top: 8px;
}
.info-box h3 a { color: var(--c-primary); }
.info-box h3 a:hover { color: var(--c-secondary); }
.info-box p { font-size: 30px; line-height: 1.5; margin: 0; }
.info-box p a { color: var(--c-accent); }
.welcome-btns { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 20px 0; }
.welcome-btns .btn { font-size: 40px; display: block; width: 100%; }
.welcome-btns .btn.bar { letter-spacing: 3.4px; }
.welcome-btns .btn.rewards { text-shadow: 0 0 10px rgba(0,0,0,.3); }
.welcome-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.welcome-grid img { width: 100%; height: 500px; object-fit: cover; display: block; }

@media (max-width: 1400px) {
  .welcome-info { justify-content: center; }
  .welcome-btns { justify-content: center; padding: 0; }
  .welcome-btns .btn { font-size: 35px; }
}
@media (max-width: 1024px) {
  .welcome { padding: 50px 20px; }
  .welcome-box { padding: 50px 25px; }
  .welcome-row { flex-direction: column; }
  .welcome-info { border-left: 0; border-right: 0; border-top: 1px solid var(--c-primary); border-bottom: 1px solid var(--c-primary); }
  .welcome-info .info-box:not(:first-child) { max-width: 394px; margin: 10px auto; }
  .welcome-btns { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .welcome-btns .btn { flex: 0 0 48%; width: 48%; }
  .welcome-grid img { height: 350px; }
}
@media (max-width: 767px) {
  .welcome-box { padding: 25px 20px; gap: 20px; }
  .welcome-row { gap: 20px; margin-bottom: 20px; }
  .welcome-intro { padding: 0; }
  .welcome-intro .lead { font-size: 20px; line-height: 1.2em; }
  .welcome-info { padding: 20px 10px; }
  .info-box h3 { font-size: 30px; }
  .welcome-btns { padding: 20px 0; }
  .welcome-btns .btn { flex-basis: 100%; width: 100%; }
  .welcome-grid { grid-template-columns: 1fr; }
}

.reviews {
  position: relative; padding: 75px 20px;
  background: url("../images/boatshedbremerton-background.jpg") center/cover no-repeat;
}
.reviews::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: .85; }
.reviews > .inner { position: relative; }
.reviews h2 { font-size: 4em; text-align: center; margin-bottom: 20px; }
.review-grid { display: flex; flex-wrap: wrap; gap: 10px; align-content: center; }
.review { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.review.w48 { flex: 0 0 48%; }
.review.w33 { flex: 0 0 33%; }
.review.w32 { flex: 0 0 32%; }
.stars { display: flex; gap: 7px; }
.stars svg { width: 26px; height: 26px; fill: #F0AD4E; }
.review blockquote { margin: 0; }
.review .quote { font-size: 16px; line-height: 22px; margin-bottom: 20px; }
.review .who { font-family: var(--f-ui); font-weight: 500; color: var(--c-text); }
@media (max-width: 1400px) { .reviews { padding: 50px 25px; } }
@media (max-width: 1024px) { .reviews { padding: 50px 20px; } }
@media (max-width: 767px) {
  .reviews h2 { font-size: 3.5em; text-align: start; }
  .review.w48, .review.w33, .review.w32 { flex-basis: 100%; }
}

/* Footer legal links (Rewards / Privacy / Message Terms) */
.footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom a:hover, .footer-bottom a:focus { color: var(--c-secondary); }