/* ELH Nauticraft — brand tokens, see DESIGN.md */

@font-face {
    font-family: "Cinzel";
    src: url("../fonts/cinzel/cinzel-semibold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat/Montserrat-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat/Montserrat-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat/Montserrat-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat/Montserrat-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --elh-harbor-navy: #0A1D34;
    --elh-harbor-navy-hover: #0f2a4a;
    --elh-anchor-gold: #D4AF37;
    --elh-anchor-gold-hover: #c29d2e;
    --elh-sea-mist: #F2F2F2;
    --elh-slate-charcoal: #333333;
    --elh-white: #FFFFFF;

    --elh-font-display: "Cinzel", Georgia, serif;
    --elh-font-body: "Montserrat", -apple-system, sans-serif;
}

body {
    font-family: var(--elh-font-body);
    color: var(--elh-slate-charcoal);
    background-color: var(--elh-white);
}

h1, h2, .display-title {
    font-family: var(--elh-font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-wrap: balance;
    color: var(--elh-harbor-navy);
}

h3, h4, h5, h6 {
    font-family: var(--elh-font-body);
    font-weight: 600;
    color: var(--elh-harbor-navy);
}

p {
    max-width: 75ch;
    text-wrap: pretty;
}

a {
    color: var(--elh-harbor-navy);
}

/* Header / navbar — The Flat-Navy Rule: no shadow on navy surfaces */
.elh-navbar {
    background-color: var(--elh-harbor-navy);
}

/* Logo visually bleeds past .navbar-brand's own padding (negative margin
   cancels it, plus a bit more) so it reads bigger without changing the
   navbar's own height/layout — the bar stays the same size as before. */
.elh-navbar .navbar-brand img {
    height: 60px;
    margin: -10px 0;
}

/* logo-secondary.png is a true transparent PNG with its art flush to the
   edges (unlike logo-horizontal.png, whose navy background fill blends
   into the bar and reads as if it had breathing room) — give it back a
   small top/bottom margin so it doesn't look cramped/oversized next to
   the main logo. Overrides the shared bleed-margin rule above. */
.elh-navbar .navbar-brand img.elh-logo-secondary {
    margin: 5px 0;
}

/* Mobile: logo-secondary sits next to logo-icon at 75% of the shared
   60px navbar logo height. */
.elh-navbar .navbar-brand img.elh-logo-secondary-mobile {
    height: 45px;
}

.elh-navbar .nav-link {
    font-family: var(--elh-font-body);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--elh-white) !important;
    position: relative;
    padding-bottom: 4px;
}

.elh-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 2px;
    background: var(--elh-anchor-gold);
    transition: right 250ms cubic-bezier(0.25, 1, 0.5, 1);
}

.elh-navbar .nav-link:hover::after,
.elh-navbar .nav-link.active::after {
    right: 0;
}

@media (prefers-reduced-motion: reduce) {
    .elh-navbar .nav-link::after {
        transition: none;
    }
}

/* Lang switcher */
.lang-switcher {
    display: flex;
    gap: 4px;
}

.lang-switcher-link {
    font-family: var(--elh-font-body);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.65) !important;
    text-decoration: none;
    padding: 2px 6px;
}

.lang-switcher-link.active {
    color: var(--elh-anchor-gold) !important;
}

/* Buttons */
.btn-elh-primary {
    background-color: var(--elh-harbor-navy);
    color: var(--elh-white);
    border: none;
    border-radius: 4px;
    padding: 12px 28px;
    font-family: var(--elh-font-body);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color 150ms cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-elh-primary:hover,
.btn-elh-primary:focus {
    background-color: var(--elh-harbor-navy-hover);
    color: var(--elh-white);
}

.btn-elh-cta {
    background-color: var(--elh-anchor-gold);
    color: var(--elh-harbor-navy);
    border: none;
    border-radius: 4px;
    padding: 14px 32px;
    font-family: var(--elh-font-body);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color 150ms cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-elh-cta:hover,
.btn-elh-cta:focus {
    background-color: var(--elh-anchor-gold-hover);
    color: var(--elh-harbor-navy);
}

.btn-elh-primary:focus-visible,
.btn-elh-cta:focus-visible {
    outline: 2px solid var(--elh-anchor-gold);
    outline-offset: 2px;
}

/* Footer */
.elh-footer {
    background-color: var(--elh-harbor-navy);
    color: var(--elh-sea-mist);
}

.elh-footer a {
    color: var(--elh-white);
}

/* Floating call button — WhatsApp isn't a common channel for US callers,
   so this is a plain tel: link instead, styled with the brand accent
   rather than a messaging-app brand color. */
.call-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1030;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--elh-harbor-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 150ms cubic-bezier(0.25, 1, 0.5, 1);
}

.call-float:hover {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .call-float,
    .btn-elh-primary,
    .btn-elh-cta {
        transition: none;
    }
}

/* Ghost button — used in the hero on top of photography (DESIGN.md
   "Buttons"), where a solid button would compete with the image. */
.btn-elh-ghost {
    background-color: transparent;
    color: var(--elh-white);
    border: 1px solid var(--elh-white);
    border-radius: 4px;
    padding: 12px 28px;
    font-family: var(--elh-font-body);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.btn-elh-ghost:hover,
.btn-elh-ghost:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--elh-white);
}

/* Inputs / Fields (DESIGN.md "Inputs / Fields") */
.form-control,
.form-select {
    border: 1px solid rgba(51, 51, 51, 0.3);
    border-radius: 4px;
    background-color: var(--elh-white);
    font-family: var(--elh-font-body);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--elh-harbor-navy);
    box-shadow: 0 0 0 2px var(--elh-anchor-gold);
    outline: none;
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
    border-color: #B3261E;
}

.invalid-feedback {
    color: #B3261E;
}