/*
 * Wygląd wspólny dla całej strony: nagłówek (components/site-header.php), menu wysuwane na telefonie,
 * jeden zestaw przycisków (.gh-btn) i kolory stopki. Reguły dotyczą tylko tych elementów,
 * treści podstron, kart pokoi i silnika rezerwacji SOHiS nie zmieniają.
 */

:root {
    --gh-header-h: 80px;
    --gh-site-deep: #2c4a12;
    --gh-site-deep-hover: #203a0b;
    --gh-site-accent: #5c9f00;
    --gh-site-ink: #1d1d1b;
    --gh-site-line: #e3e9da;
    --gh-site-mist: #f1f5ec;
    /* Krój najbliższy napisowi w logo (Frank Ruhl Libre, Google Fonts); ładowany na stronach z nowym wyglądem */
    /* Kolory pomocnicze o sprawdzonym kontraście (AA na bieli i na jasnej zieleni) */
    --gh-site-muted: #5a6450;
    --gh-site-input: #828f72;
    --gh-dur-fast: .15s;
    --gh-dur: .25s;
    color-scheme: light;
    accent-color: #2c4a12;
    --gh-serif: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
    /* Ikony z Ionicons (arrow-forward-outline, chevron-down-outline) jako maski CSS */
    --gh-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M268 112l144 144-144 144M392 256H100'/%3E%3C/svg%3E");
    --gh-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
}

@media (max-width: 1199.98px) {
    :root {
        --gh-header-h: 66px;
    }
}

/* Przy przechodzeniu Tabem i skokach do kotwic przyklejony nagłówek nie zasłania treści */
html {
    scroll-padding-top: calc(var(--gh-header-h) + 1rem);
}

::selection {
    background-color: #dfe9cf;
    color: #1d1d1b;
}

/* Nagłówek, menu i stopka bez rozstrzelenia liter z style.css */
.gh-header,
.gh-offcanvas,
footer {
    letter-spacing: 0;
}

/* ---------- Pasek ---------- */

header.gh-header #header__main,
header.gh-header #header__main.scrolled {
    background-color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1px 0 var(--gh-site-line);
    transition: background-color .3s ease, box-shadow .3s ease;
}

header.gh-header #header__main.scrolled {
    box-shadow: 0 6px 24px rgba(20, 35, 10, .1);
}

/* Nad zdjęciem lub filmem (strona główna, Restauracja, Galeria): lekko przezroczysty, po przewinięciu pełny */
header.gh-header--overlay #header__main:not(.scrolled) {
    background-color: rgba(255, 255, 255, .66);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: none;
}

header.gh-header--static #header__main {
    position: relative;
}

.gh-header__bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 1260px;
    height: var(--gh-header-h);
    margin: 0 auto;
    padding: 0 30px;
    transition: height .25s ease;
}

.gh-header__logo {
    display: block;
    flex: none;
    color: var(--gh-site-deep);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

.gh-header__logo img {
    display: block;
    width: auto;
    height: 56px;
    max-width: 10rem;
    border-radius: 0;
    object-fit: contain;
    transition: height .25s ease;
}

/* ---------- Menu ---------- */

.gh-header__nav {
    display: flex;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.gh-menu {
    display: flex;
    align-items: center;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gh-header .gh-menu .nav-link,
.gh-offcanvas .gh-menu .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .6rem .8rem;
    color: var(--gh-site-ink);
    font-size: .95rem;
    font-weight: 500;
    text-transform: none;
    white-space: nowrap;
    transition: color .2s ease;
}

/* Zielona kreska pod pozycją menu */
.gh-header .gh-menu > .nav-item > .nav-link::before {
    content: '';
    position: absolute;
    right: .8rem;
    bottom: .25rem;
    left: .8rem;
    height: 2px;
    border-radius: 2px;
    background-color: var(--gh-site-accent);
    transform: scaleX(0);
    transition: transform .25s ease;
}

.gh-header .gh-menu .nav-link:hover,
.gh-header .gh-menu .nav-link.active,
.gh-header .gh-menu .nav-link.show {
    color: var(--gh-site-deep);
}

.gh-header .gh-menu > .nav-item > .nav-link:hover::before,
.gh-header .gh-menu > .nav-item > .nav-link.active::before,
.gh-header .gh-menu > .nav-item > .nav-link.show::before {
    transform: scaleX(1);
}

.gh-header .gh-menu .dropdown-toggle::after {
    width: 6px;
    height: 6px;
    margin-left: .5em;
    border: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}

.gh-header .gh-menu .dropdown-toggle.show::after {
    transform: translateY(1px) rotate(-135deg);
}

.gh-header .gh-menu .dropdown-menu {
    min-width: 220px;
    margin-top: .4rem;
    padding: .45rem;
    border: 0;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 18px 40px rgba(20, 35, 10, .14);
}

.gh-header .gh-menu .dropdown-item {
    padding: .55rem .85rem;
    border-radius: 8px;
    color: var(--gh-site-ink);
    font-size: .92rem;
}

.gh-header .gh-menu .dropdown-item:hover,
.gh-header .gh-menu .dropdown-item:focus,
.gh-header .gh-menu .dropdown-item.active {
    background-color: var(--gh-site-mist);
    color: var(--gh-site-deep);
}

/* ---------- Przyciski: jeden kształt i krój na całej stronie ---------- */

.gh-btn,
.gh-header__book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    min-height: 48px;
    padding: .75rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--gh-dur) ease, border-color var(--gh-dur) ease, color var(--gh-dur) ease, scale var(--gh-dur-fast) ease;
}

.gh-btn:active,
.gh-header__book:active {
    scale: .985;
}

.gh-btn ion-icon {
    flex: none;
    width: 1.15em;
    height: 1.15em;
}

/* Główny: ciemna zieleń */
.gh-btn--deep,
.gh-header__book {
    background-color: var(--gh-site-deep);
    color: #fff;
}

.gh-btn--deep:hover,
.gh-header__book:hover,
.gh-header__book:focus {
    background-color: var(--gh-site-deep-hover);
    color: #fff;
}

/* Drugi: obrys */
.gh-btn--outline {
    border-color: var(--gh-site-deep);
    background-color: transparent;
    color: var(--gh-site-deep);
}

.gh-btn--outline:hover {
    background-color: var(--gh-site-deep);
    color: #fff;
}

/* Na ciemnym tle */
.gh-btn--light {
    background-color: #fff;
    color: var(--gh-site-deep);
}

.gh-btn--light:hover {
    background-color: var(--gh-site-mist);
    color: var(--gh-site-deep);
}

.gh-btn--ghost {
    border-color: rgba(255, 255, 255, .75);
    background-color: transparent;
    color: #fff;
}

.gh-btn--ghost:hover {
    border-color: #fff;
    background-color: #fff;
    color: var(--gh-site-deep);
}

/* Strzałka w dół (przewinięcie do sekcji niżej) */

:is(.gh-btn, .gh-header__book):focus-visible {
    outline: 2px solid var(--gh-site-accent);
    outline-offset: 3px;
}

:is(.gh-btn--light, .gh-btn--ghost):focus-visible {
    outline-color: #fff;
}

/* Bardzo wąskie telefony: długi napis na przycisku przechodzi do drugiej linii zamiast wychodzić poza ekran */
@media (max-width: 374.98px) {
    .gh-btn {
        white-space: normal;
    }
}

/* Mniejszy przycisk w kartach */
.gh-btn--sm {
    min-height: 44px;
    padding: .55rem 1.1rem;
    font-size: .86rem;
}

/* ---------- Media społecznościowe: okrągłe ikony (components/social-links.php) ---------- */

.gh-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gh-social__link {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--gh-site-line);
    border-radius: 50%;
    background-color: #fff;
    color: var(--gh-site-deep);
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.gh-social__link ion-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.gh-social__link:hover,
.gh-social__link:focus-visible {
    border-color: var(--gh-site-deep);
    background-color: var(--gh-site-deep);
    color: #fff;
}

.gh-social__link:focus-visible {
    outline: 2px solid var(--gh-site-accent);
    outline-offset: 3px;
}

/* Z napisem obok ikony */
.gh-social--labels .gh-social__link {
    display: inline-flex;
    gap: .5rem;
    width: auto;
    padding: 0 1.15rem 0 .95rem;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
}

.gh-social--center {
    justify-content: center;
}

/* Na zielonym albo ciemnym tle */
.gh-social--light .gh-social__link {
    border-color: rgba(255, 255, 255, .6);
    background-color: transparent;
    color: #fff;
}

.gh-social--light .gh-social__link:hover,
.gh-social--light .gh-social__link:focus-visible {
    border-color: #fff;
    background-color: #fff;
    color: var(--gh-site-deep);
}

.gh-social--light .gh-social__link:focus-visible {
    outline-color: #fff;
}

.gh-header__toggle {
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--gh-site-line);
    border-radius: 50%;
    background-color: #fff;
    color: var(--gh-site-ink);
    font-size: 1.5rem;
    cursor: pointer;
}

.gh-header :is(a, button):focus-visible,
.gh-offcanvas :is(a, button):focus-visible {
    outline: 2px solid var(--gh-site-accent);
    outline-offset: 3px;
}

/* Po przewinięciu pasek jest niższy */
@media (min-width: 1200px) {
    #header__main.scrolled .gh-header__bar {
        height: 66px;
    }

    #header__main.scrolled .gh-header__logo img {
        height: 46px;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .gh-header__bar {
        gap: 1rem;
    }

    .gh-header .gh-menu .nav-link {
        padding-inline: .6rem;
        font-size: .9rem;
    }

    .gh-header .gh-menu > .nav-item > .nav-link::before {
        right: .6rem;
        left: .6rem;
    }
}

@media (max-width: 1199.98px) {
    .gh-header__nav {
        display: none;
    }

    .gh-header__actions {
        margin-left: auto;
    }

    .gh-header__logo img {
        height: 46px;
    }

    .gh-header__toggle {
        display: grid;
    }
}

.gh-header__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: .5rem;
}

/* Składany telefon (ok. 280 px): logo, przycisk i menu nie mieszczą się w jednym rzędzie.
   Przycisk rezerwacji zostaje w menu i w hero, w pasku zostaje logo i menu. */
@media (max-width: 329.98px) {
    .gh-header .gh-header__book {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .gh-header__bar {
        padding-inline: 24px;
    }
}

/* Telefony do 400 px (np. iPhone SE): ciaśniejszy pasek, żeby przycisk menu nie wychodził poza ekran */
@media (max-width: 399.98px) {
    .gh-header__bar {
        gap: .75rem;
    }

    .gh-header .gh-header__book {
        padding-inline: 1rem;
    }

}

@media (max-width: 374.98px) {
    .gh-header__bar {
        gap: .75rem;
    }

    .gh-header__logo img {
        height: 40px;
    }

    .gh-header__book {
        min-height: 40px;
        padding: .6rem .9rem;
        font-size: .8rem;
    }

}

/* ---------- Menu wysuwane (telefon, tablet) ---------- */

.gh-offcanvas {
    --bs-offcanvas-width: min(360px, 88vw);
    --bs-offcanvas-zindex: 6001;
}

/* Zalogowany w WordPressie: menu zaczyna się pod paskiem administracyjnym, żeby nie zasłaniał przycisku zamykania */
.gh-offcanvas.offcanvas-end {
    top: var(--wp-admin--admin-bar--height, 0px);
}

.offcanvas-backdrop {
    z-index: 6000;
}

.gh-offcanvas .offcanvas-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gh-site-line);
}

.gh-offcanvas .gh-header__logo img {
    height: 44px;
}

.gh-offcanvas__close {
    display: grid;
    margin-left: auto;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--gh-site-line);
    border-radius: 50%;
    background-color: #fff;
    color: var(--gh-site-ink);
    font-size: 1.5rem;
    cursor: pointer;
}

.gh-offcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: .5rem 1.25rem 1.5rem;
}

.gh-offcanvas .gh-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.gh-offcanvas .gh-menu > .nav-item {
    border-bottom: 1px solid var(--gh-site-line);
}

.gh-offcanvas .gh-menu .nav-link {
    display: flex;
    padding: .95rem 0;
    font-size: 1.08rem;
}

.gh-offcanvas .gh-menu .nav-link.active {
    color: var(--gh-site-deep);
}

/* Podmenu w wysuwanym menu jest zawsze rozwinięte */
.gh-offcanvas .gh-menu .dropdown-toggle {
    pointer-events: none;
}

.gh-offcanvas .gh-menu .dropdown-toggle::after {
    display: none;
}

.gh-offcanvas .gh-menu .dropdown-menu {
    position: static !important;
    display: block;
    margin: -.4rem 0 .6rem;
    padding: 0 0 0 1rem;
    border: 0;
    background: none;
    box-shadow: none;
    transform: none !important;
}

.gh-offcanvas .gh-menu .dropdown-item {
    padding: .45rem 0;
    color: #4a5244;
    font-size: .96rem;
}

.gh-offcanvas .gh-menu .dropdown-item:hover,
.gh-offcanvas .gh-menu .dropdown-item:focus {
    background: none;
    color: var(--gh-site-deep);
}

.gh-offcanvas__book {
    margin-top: 1.5rem;
}

.gh-offcanvas__contact {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.5rem;
    font-size: .92rem;
}

.gh-offcanvas__contact a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--gh-site-ink);
    text-decoration: none;
}

.gh-offcanvas__contact ion-icon {
    color: var(--gh-site-accent);
    font-size: 1.15rem;
}

.gh-offcanvas__social {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gh-site-line);
}

/* ---------- Strona Rezerwacja: zdjęcie hotelu w pasku tytułu (wysokość paska bez zmian) ---------- */

.gh-header--static ~ .container-fluid > .bg-dark.py-5:first-child {
    background-image: linear-gradient(rgba(12, 18, 8, .5), rgba(12, 18, 8, .5)), var(--gh-band-photo, none);
    background-position: center 45%;
    background-size: cover;
}

/* ---------- Stopka (kolory) ---------- */

#footer__main {
    background-color: #2c4a12;
    color: rgba(255, 255, 255, .82);
}

#footer__main .container-fluid,
#footer__copyright .container-fluid {
    padding-inline: 0;
}

#footer__main .container,
#footer__copyright .container {
    max-width: 1260px;
    padding-inline: 30px;
}

@media (max-width: 575.98px) {
    #footer__main .container,
    #footer__copyright .container {
        padding-inline: 24px;
    }
}

#footer__main a.d-flex {
    align-items: center;
    min-height: 44px;
}

/* Link w stopce ma 44 px wysokości do kliknięcia palcem, a ujemny margines nie zmienia wysokości paska */
footer #footer__copyright a {
    display: inline-block;
    margin: -.8rem -.25rem;
    padding: .8rem .25rem;
}

/* Opis w stopce: globalne p z style.css jest ciemnoszare, a tło stopki jest ciemnozielone */
#footer__main p {
    color: inherit;
}

#footer__main a {
    overflow-wrap: anywhere;
}

#footer__main .text-main {
    color: rgba(255, 255, 255, .65);
}

footer #footer__copyright {
    border-top: 1px solid rgba(255, 255, 255, .14);
    background-color: #2c4a12;
    color: rgba(255, 255, 255, .7);
}

@media (prefers-reduced-motion: reduce) {
    .gh-header__bar,
    .gh-header__logo img,
    .gh-header .gh-menu > .nav-item > .nav-link::before {
        transition: none;
    }
}
