:root {
    --primary-bg: #F9F7F2;
    --text-main: #1A1A1A;
    --text-secondary: #4B5563;
    --accent-dark: #2D5A27;
    --accent-dark-text: #FFFFFF;
    --accent-warm: #D4A373;
    --font-heading: 'Lora', serif;
    --font-body: 'Inter', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--primary-bg);
    color: var(--text-main);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

a {
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease;
    color: inherit;
}

a:hover,
a:focus {
    text-decoration: none;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
.btn {
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

button:focus {
    outline: 2px solid var(--accent-warm);
    outline-offset: 2px;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (max-width: 767px) {
    h1 {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }

    h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    h3 {
        font-size: clamp(1.2rem, 5vw, 1.5rem);
    }

    body {
        font-size: 0.95rem;
    }

    .mobile-text-sm {
        font-size: 0.85rem;
        word-break: break-all;
    }
}

@media (min-width: 768px) {
    h1 {
        font-size: 3.5rem;
    }

    h2 {
        font-size: 2.75rem;
    }

    h3 {
        font-size: 2rem;
    }
}

input,
textarea,
select {
    font-family: var(--font-body);
    font-size: 1rem;
}

/* ===== header ===== */
#header {
    font-family: system-ui, -apple-system, sans-serif;
}

.js-mobile-menu {
    max-height: 0;
    transition: max-height 0.35s ease-in-out, visibility 0.35s;
    visibility: hidden;
}

.js-mobile-menu.open {
    max-height: 400px;
    visibility: visible;
}

.ri-menu-3-line::before {
    content: "\ef3e";
    font-family: 'remixicon';
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

#header a,
#header button {
    hyphens: auto;
}

/* ===== hero_section ===== */
#hero {
    overflow: hidden
}

.logo-img {
    max-width: 70px;
    height: auto;
    transition: transform 0.3s ease
}

.logo-img:hover {
    transform: scale(1.05)
}

.hyphens-auto {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto
}

blockquote::before {
    content: "\201C";
    font-size: 3rem;
    line-height: 0;
    vertical-align: -0.4em;
    margin-right: 0.1em;
    color: rgba(212, 163, 115, 0.3)
}

/* ===== france_routes ===== */
#routes {
    overflow: hidden;
}

.js-scroll-reveal {
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

#routes p,
#routes h2,
#routes h3 {
    hyphens: auto;
}

#routes .shadow-sm {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

#routes .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ===== italy_traditions ===== */
#italy {
    hyphens: auto;
    -webkit-hyphens: auto
}

.hyphens-auto {
    hyphens: auto
}

#italy h2 {
    line-height: 1.2
}

#italy p {
    line-height: 1.6
}

#italy .container {
    max-width: 1280px
}

@media(max-width:767px) {
    #italy h2 {
        font-size: 16px
    }

    #italy h3 {
        font-size: 14px
    }

    #italy p {
        font-size: 14px
    }
}

/* ===== spain_regions ===== */
#spain {
    hyphens: auto;
}

#spain .js-region-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#spain .js-region-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* ===== central_europe_heritage ===== */
#germany-austria {
    overflow-x: hidden;
}

#germany-austria h2,
#germany-austria h3 {
    hyphens: auto;
}

#germany-austria .container {
    position: relative;
    z-index: 1;
}

#germany-austria .ri-restaurant-line:before {
    content: "\f077";
}

#germany-austria .ri-landscape-line:before {
    content: "\ee79";
}

#germany-austria .ri-drop-line:before {
    content: "\ec9c";
}

#germany-austria .ri-fire-line:before {
    content: "\ed23";
}

/* ===== benelux_farms ===== */
#benelux {
    hyphens: auto;
}

.js-benelux-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.js-benelux-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

/* ===== east_europe_traditions ===== */
.section-overflow-protection {
    overflow: hidden;
}

.js-east-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.js-east-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* ===== balkan_flavors ===== */
#balkans .js-balkan-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#balkans .js-balkan-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.hyphens-auto {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* ===== scandinavian_eco ===== */
#scandinavia {
    overflow-x: hidden;
}

#scandinavia .hyphens-auto {
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word;
}

#scandinavia h2,
#scandinavia h3 {
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#scandinavia .js-scandi-item:hover {
    border-color: var(--accent-warm);
    transform: translateY(-4px);
}

#scandinavia .ri-anchor-line::before {
    content: "\ea2e";
}

#scandinavia .ri-evergreen-line::before {
    content: "\ecc4";
}

#scandinavia .ri-cup-line::before {
    content: "\ec21";
}

#scandinavia .ri-restaurant-line::before {
    content: "\f088";
}

/* ===== traveler_advice ===== */
#tips {
    hyphens: auto;
}

.ri-map-pin-2-line::before {
    content: "\f11f";
}

.ri-shield-user-line::before {
    content: "\f10b";
}

.ri-restaurant-line::before {
    content: "\ef8d";
}

.container {
    max-width: 1200px;
}

/* ===== about_info ===== */
.js-about-section {
    overflow: hidden;
}

.js-about-section h2,
.js-about-section h3 {
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.js-about-section p {
    hyphens: auto;
}

@media (max-width: 767px) {
    .js-about-section h2 {
        font-size: 16px;
    }

    .js-about-section h3 {
        font-size: 14px;
    }

    .js-about-section p {
        font-size: 14px;
    }
}

/* ===== faq_section ===== */
#faq .js-faq-item {
    transition: all 0.3s ease
}

#faq .js-faq-item[open] {
    border-color: var(--accent-dark);
    box-shadow: 0 4px 20px rgba(45, 90, 39, 0.1)
}

#faq .js-faq-item[open] summary {
    color: var(--accent-dark)
}

#faq .js-faq-item[open] .ri-add-line {
    transform: rotate(45deg)
}

#faq summary {
    list-style: none
}

#faq summary::-webkit-details-marker {
    display: none
}

/* ===== user_reviews ===== */
.js-review-card {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.js-review-card:hover {
    transform: translateY(-8px);
}

#reviews {
    hyphens: auto;
}

/* ===== feedback_form ===== */
#contact input::placeholder,
#contact textarea::placeholder {
    color: #9CA3AF
}

#contact input:focus,
#contact textarea:focus {
    background-color: #FFFFFF
}

#contact {
    overflow: hidden
}

/* ===== footer ===== */
.ri-shield-check-line {
    display: inline-block;
    vertical-align: middle;
}

.hyphens-auto {
    hyphens: auto;
    -webkit-hyphens: auto;
}

#footer-gdpr {
    animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}