/*
 * "Harbor Classic" look (2.0, option A on the "Subhouse 2.0 Look Options" canvas; chosen by Dan 2026-10-24).
 * The original subhousehudson.com colors and fonts (navy, red, lime green, teal, Old Standard TT / Poppins / Roboto),
 * cleaner and roomier: a solid white header (phone left, logo center, Order Online right), a darker harbor photo with
 * Order Online + Call buttons and today's hours, a flat green Fresh / Fast / Fun band, the harbor-delivery line as a navy
 * strip, rounded cards, and a 3-column dark footer. No slants.
 * Loaded after site.css only when Settings > Look = Harbor Classic (or a staff preview), on <body class="theme-harbor">.
 * The extra markup it uses (header Order Online button, hero buttons and today's hours) is printed only for this look,
 * so the classic look stays byte-identical.
 */
body.theme-harbor {
  --ink: #24262b;
  --line-soft: #e6e4ef;
  --icon-teal: #01797a;
  --foot: #2b2d33;
  --hdr-h: 192px;
  color: var(--ink);
  font-weight: 400;
}

/* ---------- Header: solid white, phone + address left, logo center, Order Online right, nav row below ---------- */
.theme-harbor .site-header { background: #fff; padding: 0; box-shadow: 0 2px 10px rgba(15, 4, 95, .08); }
.theme-harbor .hdr-top { height: 148px; }
.theme-harbor .hdr-wrap { max-width: 1140px; padding: 0 24px; grid-template-columns: 1fr 190px 1fr; align-items: center; }
.theme-harbor .hdr-contact { padding-top: 0; gap: 2px; font: 400 14px/1.3 var(--roboto); color: var(--navy); }
.theme-harbor .hdr-phone { margin-left: 0; color: var(--navy); font: 700 17px/1.3 var(--roboto); }
.theme-harbor .hdr-logo { padding-top: 0; display: flex; justify-content: center; }
.theme-harbor .hdr-logo img { width: 190px; height: 128px; }
.theme-harbor .hdr-social { padding-top: 0; margin-right: 0; align-items: center; gap: 10px; }
.theme-harbor .hdr-social a:not(.hdr-order) { color: var(--navy); }
.theme-harbor .hdr-social a.hdr-order { width: auto; height: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px;
  box-shadow: none; font: 700 15px/1 var(--poppins); margin-left: 8px; }
.theme-harbor .hdr-social a.hdr-order:hover { background: #8f1d01; color: #fff; }
.theme-harbor .main-nav { height: 44px; border-top: 1px solid var(--line-soft); }
.theme-harbor .main-nav li + li::before { content: ""; margin: 0 14px; }
.theme-harbor .main-nav a { font: 700 15px/1 var(--poppins); }
.theme-harbor [id] { scroll-margin-top: calc(var(--hdr-h) + 10px); }
.theme-harbor .menu-tools { top: var(--hdr-h); }

/* ---------- Buttons: same pills, a little calmer ---------- */
.theme-harbor .pill-btn { box-shadow: 0 2px 6px rgba(0, 0, 0, .14); }
.theme-harbor .pill-btn.red:hover { background: #8f1d01; color: #fff; }

/* ---------- Hero: darker harbor photo, Order Online + Call buttons, today's hours, the harbor line as a navy strip ---------- */
.theme-harbor .hero { min-height: 0; }
.theme-harbor .hero-media::after { background: rgba(10, 8, 40, .55); }
.theme-harbor .hero-inner { display: flex; flex-direction: column; align-items: center; padding: 84px 24px 0; }
.theme-harbor .hero h1 { order: 1; font-size: 64px; line-height: 1.1; margin: 0 0 14px; }
.theme-harbor .order-bar { display: none; }
.theme-harbor .hero-lines { display: contents; }
.theme-harbor .hero-lines .hero-line { font: italic 400 30px/1.2 var(--serif); margin: 2px 0 26px; }   /* was an h3 (2.1 polish: heading order) */
.theme-harbor .hero-lines .hero-line em { font-style: italic; }
.theme-harbor .hero-lines > :first-child { order: 2; max-width: 680px; margin: 0 auto 30px; font-size: 24px; line-height: 1.4; }
.theme-harbor .hero-actions { order: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.theme-harbor .hero-actions .pill-btn { min-height: 52px; padding: 0 30px; font-size: 18px; box-shadow: none; }
.theme-harbor .hero-actions .pill-btn:not(.red) { color: var(--navy); }
.theme-harbor .hero-today { order: 4; margin: 22px 0 70px; font: 400 16px/1.4 var(--roboto); }
/* every line after the first (the harbor-delivery line) becomes a full-width navy strip at the bottom of the photo */
.theme-harbor .hero-lines > :not(:first-child) { order: 5; align-self: stretch; margin: 0 -24px; padding: 26px 24px; background: var(--navy);
  font: 700 22px/1.35 var(--serif); }
.theme-harbor .hero-lines > :not(:first-child) em { font-style: normal; }
.theme-harbor .slant { display: none; }

/* ---------- Fresh / Fast / Fun: flat lime-green band ---------- */
.theme-harbor .icon-band { clip-path: none; margin: 0; padding: 30px 16px; }
.theme-harbor .icon-band-inner { max-width: 900px; display: flex; justify-content: center; flex-wrap: wrap; gap: 22px 70px; }
.theme-harbor .icon-item { flex-direction: row; gap: 12px; }
.theme-harbor .icon-item .icon { width: 44px; height: 44px; color: var(--icon-teal); }
.theme-harbor .icon-item span { font: 700 22px/1.2 var(--poppins); color: var(--ink); letter-spacing: 1px; text-transform: uppercase; }

/* ---------- Sections: roomier, bigger serif titles, rounded photos ---------- */
.theme-harbor .sec-title { font-size: 40px; line-height: 1.15; margin-bottom: 28px; }
.theme-harbor .sec-title.teal { color: var(--navy); letter-spacing: 1px; }
.theme-harbor .sec-photo { padding-top: 64px; padding-bottom: 20px; }
.theme-harbor .sec-photo img.rounded { border-radius: 22px; width: 560px; }
.theme-harbor .photo-row img.rounded, .theme-harbor img.rounded { border-radius: 22px; }
.theme-harbor .sec-cards { padding-top: 64px; padding-bottom: 48px; }
.theme-harbor .cards-flavor h3 { font-size: 28px; }
.theme-harbor .cards-flavor p { color: var(--icon-teal); }
.theme-harbor .cards-tabs .text-only .card-text { border-color: var(--line-soft); border-radius: 22px; box-shadow: 0 2px 10px rgba(15, 4, 95, .06); }
.theme-harbor .menu-links { padding-top: 48px; padding-bottom: 56px; }
.theme-harbor .page-hero { padding: 52px 0 48px; }

/* ---------- Contact: flat edges, navy-tinted photo ---------- */
.theme-harbor .contact-sec { min-height: 0; padding: 72px 16px 80px; margin-top: 40px; }
.theme-harbor .contact-media::after { content: ""; position: absolute; inset: 0; background: rgba(10, 8, 40, .45); }
.theme-harbor .contact-sec h2 { font: 700 42px/1.2 var(--serif); background: none; }
.theme-harbor .board-tabs { border-radius: 22px; box-shadow: 0 2px 12px rgba(15, 4, 95, .1); }

/* ---------- Footer: dark, 3 columns, no slant ---------- */
.theme-harbor .site-footer { background: var(--foot); margin-top: 0; }
.theme-harbor .foot-slant { display: none; }
.theme-harbor .foot-inner { max-width: 1140px; padding: 56px 24px 36px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.theme-harbor .foot-info { text-align: left; font-size: 17px; line-height: 1.5; }
.theme-harbor .foot-social { justify-content: flex-start; margin-top: 18px; }
.theme-harbor .foot-hours h2 { font-size: 24px; text-align: left; margin-bottom: 12px; }
.theme-harbor .foot-hours dl div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); padding-bottom: 8px; }
.theme-harbor .foot-btns { align-items: flex-start; gap: 12px; }
.theme-harbor .icon-btn { font-family: var(--poppins); color: var(--navy); }
.theme-harbor .foot-bottom { max-width: 1140px; padding-left: 24px; padding-right: 24px; }
.theme-harbor .to-top { background: rgba(15, 4, 95, .9); border-radius: 50%; }

/* ---------- 2.1 polish (Dan 2026-10-28): readable colors and easier taps ---------- */
/* teal text on white was 2.5:1; this darker teal is 5.2:1 (WCAG AA) */
.theme-harbor .menu-sec-title { color: var(--icon-teal); }
/* the contact form's "We do not take orders through this form" on navy: was 2.8:1, now 7.7:1 */
.theme-harbor .contact-lines p:last-child { color: #ff8a65; }
/* social icons: brighter on the dark footer, bigger buttons */
.theme-harbor .foot-social { gap: 12px; }
.theme-harbor .foot-social a { width: 40px; height: 40px; border-radius: 50%; color: #ff8a65; background: rgba(255, 255, 255, .08); }
.theme-harbor .foot-social a:hover, .theme-harbor .foot-social a:focus-visible { background: rgba(255, 255, 255, .18); }
.theme-harbor .foot-social .icon { width: 20px; height: 20px; }
/* "Website by": the two logos on light chips so they show on the dark footer */
.theme-harbor .credits { flex-wrap: wrap; justify-content: center; gap: 8px; }
.theme-harbor .credits a { display: inline-flex; align-items: center; background: #fff; border-radius: 8px; padding: 4px 8px; }
.theme-harbor .credits img { height: 28px; }
/* footer links: a taller tap area */
.theme-harbor .foot-bottom .legal a { display: inline-block; padding: 6px 0; }
/* keyboard focus is always visible */
.theme-harbor a:focus-visible, .theme-harbor button:focus-visible, .theme-harbor input:focus-visible, .theme-harbor select:focus-visible,
.theme-harbor textarea:focus-visible { outline: 3px solid #f07f13; outline-offset: 2px; }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1024px) {
  body.theme-harbor { --hdr-h: 104px; }
  .theme-harbor .hdr-mobile { height: 104px; }
  .theme-harbor .hdr-logo-m img { width: 130px; height: 88px; }
  .theme-harbor .main-nav { height: auto; }
  .theme-harbor .main-nav li + li::before { display: none; }
  .theme-harbor .main-nav a { font: 700 18px/1.2 var(--poppins); }
  .theme-harbor .hero-inner { padding: 52px 16px 0; }
  .theme-harbor .hero-lines .hero-line { font-size: 25px; }
  .theme-harbor .hero h1 { font-size: 40px; }
  .theme-harbor .hero-lines > :first-child { font-size: 20px; margin-bottom: 24px; }
  .theme-harbor .hero-lines > :not(:first-child) { margin: 0 -16px; padding: 20px 16px; font-size: 19px; }
  .theme-harbor .hero-today { margin-bottom: 44px; }
  .theme-harbor .sec-title, .theme-harbor .contact-sec h2 { font-size: 32px; }
  .theme-harbor .contact-sec { padding: 52px 16px 60px; }
  .theme-harbor .icon-band-inner { gap: 16px 34px; }
  .theme-harbor .foot-inner { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 28px; padding-top: 44px; }
  .theme-harbor .foot-info, .theme-harbor .foot-hours h2 { text-align: center; }
  .theme-harbor .foot-social { justify-content: center; }
  .theme-harbor .foot-btns { align-items: center; }
  .theme-harbor .mi-name, .theme-harbor .mi-price { color: var(--icon-teal); }   /* teal on white: 5.2:1 */
}
@media (max-width: 600px) {
  .theme-harbor .hero h1 { font-size: 36px; }
  .theme-harbor .hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
  .theme-harbor .hero-actions .pill-btn { justify-content: center; }
  .theme-harbor .icon-item span { font-size: 18px; }
  .theme-harbor .icon-item .icon { width: 36px; height: 36px; }
}
@media print {
  .theme-harbor .hero-actions, .theme-harbor .hero-today { display: none; }
}
.theme-harbor .hero-credit { top: 8px; bottom: auto; }

/* Changing hero lines (2.1, Dan 2026-10-28): the lines stack in one spot and take turns with a soft slide-and-fade */
.theme-harbor .hero-rotate em { display: grid; }
.theme-harbor .hero-rotate .rot { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease; }
.theme-harbor .hero-rotate .rot.on { opacity: 1; transform: none; }
.theme-harbor .hero-rotate .rot.out { opacity: 0; transform: translateY(-10px); }
@media (prefers-reduced-motion: reduce) { .theme-harbor .hero-rotate .rot { transition: none; } }
@media print { .theme-harbor .hero-rotate .rot:not(.on) { display: none; } }