/**
 * Components — buttons, header, nav, mobile menu, beacon/lighthouse, footer.
 * Flat, graphic, editorial. Minimal rounding; bold color; hairline structure.
 */

/* ============================================================
   Buttons — flat & graphic with an animated underline-arrow
   ============================================================ */
.btn {
	--btn-bg: var(--c-orange);
	--btn-fg: #fff;
	--btn-line: rgba(255,255,255,0.4);
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	padding: 1em 1.5em;
	border-radius: var(--radius-xs);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.98rem;
	letter-spacing: 0;
	line-height: 1;
	transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); background: var(--c-orange-deep); }
.btn__arrow { width: 1.1em; height: 0.72em; position: relative; }
.btn__arrow::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: currentColor; transform: translateY(-50%); }
.btn__arrow::after { content: ""; position: absolute; top: 50%; right: 0; width: 0.5em; height: 0.5em; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow::after { transform: translateY(-50%) translateX(2px) rotate(45deg); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.btn--outline:hover { --btn-fg: #fff; background: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-ink); }

.btn--light { --btn-bg: var(--c-paper); --btn-fg: var(--c-dark); }
.btn--light:hover { --btn-fg: var(--c-dark); background: #fff; }

.btn--glass { --btn-bg: rgba(255,255,255,0.12); --btn-fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn--glass:hover { --btn-fg: var(--c-dark); background: #fff; box-shadow: inset 0 0 0 1.5px #fff; }

/* Plain text link with arrow, for secondary actions */
.btn--link {
	background: none; padding: 0.4em 0; border-radius: 0;
	color: var(--c-ink); position: relative;
}
.btn--link:hover { background: none; transform: none; color: var(--brand-strong); }
.btn--link .btn__label { box-shadow: inset 0 -1.5px 0 currentColor; padding-bottom: 2px; }

/* ============================================================
   Beacon mark + lighthouse scene
   ============================================================ */
.beacon-mark { width: 2.4rem; height: 2.4rem; flex: none; }
.beacon-mark__sun { fill: var(--c-gold); }
.beacon-mark__tower { fill: var(--c-dark); }
.beacon-mark__lantern { fill: var(--c-dark); }
.beacon-mark__beam { fill: var(--c-orange); }
.brand--invert .beacon-mark__tower,
.brand--invert .beacon-mark__lantern { fill: var(--c-paper); }

.scene { width: 100%; height: 100%; display: block; }
/* Slow, always-on signature motion: the beam sweeps and the lantern glows. */
.scene__beams { transform-box: fill-box; transform-origin: 24% 22%; animation: lhg-beam 8s var(--ease-in-out) infinite alternate; }
.scene__lantern { animation: lhg-lantern 2.6s var(--ease-in-out) infinite alternate; }
@keyframes lhg-beam { from { transform: rotate(-5deg); opacity: 0.4; } to { transform: rotate(7deg); opacity: 0.68; } }
@keyframes lhg-lantern { from { opacity: 0.8; } to { opacity: 1; } }

/* ============================================================
   Duotone photo treatment — makes real photos match the palette
   (navy shadows -> warm highlights). Add class="duotone" to <img>.
   ============================================================ */
.duotone { filter: url(#lhg-duotone) contrast(1.02); }
@supports not (filter: url(#x)) { .duotone { filter: grayscale(1) sepia(0.3); } }

/* ============================================================
   Image slots — uploaded image, or a branded labeled placeholder
   ============================================================ */
.imgslot { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: var(--slot-ratio, 4 / 3); background: var(--c-warm-2); }
.imgslot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Empty state: a calm, neutral panel — not a loud "add image" placeholder.
   Reads as intentional warm space until a photo is uploaded. */
.imgslot__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; background: var(--c-warm); color: var(--text-muted); text-align: center; padding: var(--space-md); }
.imgslot__ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 0%, rgba(251,139,35,0.06), transparent 60%); pointer-events: none; }
.imgslot__ph .icon { width: 1.7rem; height: 1.7rem; opacity: 0.45; }
.imgslot__label { font-family: var(--font-label); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; opacity: 0.7; }

/* Inline icons */
.icon { width: 1.5rem; height: 1.5rem; display: block; }

/* ============================================================
   Brand wordmark
   ============================================================ */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand__img { height: 52px; width: auto; display: block; }
.site-header.is-scrolled .brand__img { height: 44px; }
.site-footer .brand__img { height: 64px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; letter-spacing: 0.01em; text-transform: uppercase; }
.brand__sub { font-family: var(--font-label); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.3rem; }
.brand--invert .brand__name { color: var(--c-paper); }
.brand--invert .brand__sub { color: rgba(238,240,244,0.6); }

/* ============================================================
   Header
   ============================================================ */
/* Solid header — white, with a hairline that lifts into a soft shadow on scroll. */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); height: var(--header-h); display: flex; align-items: center; background: var(--c-paper); border-bottom: 1px solid var(--rule); transition: height var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); width: 100%; }
.site-header.is-scrolled { height: 68px; border-bottom-color: transparent; box-shadow: 0 10px 30px -18px rgba(80, 50, 15, 0.3); }
.site-header.is-hidden { transform: translateY(-100%); transition: transform var(--dur) var(--ease-out); }
.site-header .custom-logo { max-height: 52px; width: auto; }

/* Header logo: the hero uses a light scrim, so the black logo reads at the top
   and once the header gains its white background on scroll. */
.brand--header { position: relative; display: inline-block; line-height: 0; }
.brand--header .brand__img { height: 52px; width: auto; transition: height var(--dur) var(--ease-out); }
.brand--header .brand__img--light { display: none; }
.site-header.is-scrolled .brand--header .brand__img { height: 44px; }

.site-nav { display: none; }
.site-nav__list { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.2rem); }
.site-nav__list a { position: relative; font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; letter-spacing: 0; padding-block: 0.4rem; color: var(--c-ink); }
.site-header__phone { color: var(--c-ink); }
.site-nav__list a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--c-orange); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); }
.site-nav__list a:hover::after, .site-nav__list .current-menu-item > a::after { transform: scaleX(1); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-md); }
.site-header__phone { display: none; font-family: var(--font-label); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.02em; }
.site-header__actions .btn { display: none; }

.menu-toggle { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.05rem; border-radius: var(--radius-xs); background: var(--c-dark); color: #fff; font-family: var(--font-label); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.menu-toggle__bars { position: relative; width: 18px; height: 12px; }
.menu-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); }
.menu-toggle__bars span:nth-child(1) { top: 2px; }
.menu-toggle__bars span:nth-child(2) { bottom: 2px; }
.menu-open .menu-toggle__bars span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.menu-open .menu-toggle__bars span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* ============================================================
   Mobile menu — full-screen navy
   ============================================================ */
.mobile-menu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--c-dark); color: var(--c-paper); display: flex; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out); }
.mobile-menu[hidden] { display: flex; }
.menu-open .mobile-menu, .mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__inner { margin: auto; width: 100%; max-width: var(--container); padding: calc(var(--header-h) + var(--space-lg)) var(--gutter) var(--space-xl); display: flex; flex-direction: column; gap: var(--space-xl); }
.mobile-menu__list { display: flex; flex-direction: column; }
.mobile-menu__list .menu-item { border-top: 1px solid var(--rule-invert); }
.mobile-menu__list .menu-item:last-child { border-bottom: 1px solid var(--rule-invert); }
.mobile-menu__list a { display: block; padding: 0.5em 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 9vw, 3.5rem); letter-spacing: -0.02em; color: var(--c-paper); }
.mobile-menu__list a:hover { color: var(--c-gold); }
.mobile-menu__footer { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }
.mobile-menu__phone { font-family: var(--font-label); font-weight: 500; font-size: 1.1rem; color: var(--c-gold); }

/* ============================================================
   Footer — navy
   ============================================================ */
.site-footer { position: relative; background: var(--c-dark); color: var(--text-invert); overflow: hidden; }
.site-footer__wordmark { position: relative; padding-block: var(--space-2xl) var(--space-lg); }
.site-footer__big { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 12vw, 10rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--c-paper); margin: 0; }
.site-footer__big em { color: var(--c-orange); font-style: normal; }
.site-footer__top { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--space-xl); padding-block: var(--space-xl); border-top: 1px solid var(--rule-invert); }
.site-footer__top--first { border-top: 0; padding-top: var(--space-2xl); }
.site-footer__heading { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-gold); margin-bottom: var(--space-sm); }
.site-footer__heading--mt { margin-top: var(--space-lg); }
.site-footer__address { font-style: normal; color: rgba(243,234,217,0.85); }
.site-footer__contact { display: flex; flex-direction: column; gap: 0.35rem; color: rgba(243,234,217,0.85); }
.site-footer__hours { color: rgba(243,234,217,0.85); }
.site-footer__link, .site-footer__menu a { color: rgba(243,234,217,0.85); display: inline-block; margin-top: 0.4rem; }
.site-footer__link:hover, .site-footer__menu a:hover { color: var(--c-gold); }
.site-footer__menu { display: flex; flex-direction: column; gap: 0.4rem; }
.site-footer__tagline { color: rgba(243,234,217,0.7); margin-top: var(--space-md); max-width: 30ch; }
.site-footer__bottom { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); padding-block: var(--space-lg); border-top: 1px solid var(--rule-invert); color: rgba(243,234,217,0.55); font-family: var(--font-label); font-size: 0.76rem; letter-spacing: 0.02em; }

/* ============================================================
   Generic page hero + posts
   ============================================================ */
.page-hero { padding-top: calc(var(--header-h) + var(--space-2xl)); padding-bottom: var(--space-lg); background: var(--c-dark); color: var(--c-paper); }
.page-hero__title { font-size: var(--fs-display); color: var(--c-paper); }
.entry-content > * + * { margin-top: var(--space-md); }
.entry-content h2 { margin-top: var(--space-lg); }
.post-list { display: grid; gap: var(--space-lg); }
.post-card { padding: var(--space-lg); background: var(--bg-alt); border: 1px solid var(--rule); border-radius: var(--radius); }
.post-card__title { font-size: var(--fs-h3); }
.page-header { margin-bottom: var(--space-xl); }
.page-header__title { font-size: var(--fs-display); }

/* ============================================================
   Desktop
   ============================================================ */
@media (min-width: 920px) {
	.site-nav { display: block; }
	.site-header__phone { display: inline-flex; }
	.site-header__actions .btn { display: inline-flex; }
	.menu-toggle { display: none; }
	.mobile-menu { display: none; }
	.site-footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}