/* shared.css — common chrome for heiwahouse.com (linked by index, camps, spot).
   Page-specific styles remain in each page's inline <style>.
   Note: camp_rooms.html intentionally does NOT use this file (it diverges). */

/* --- BRAND FONTS --- */
@font-face { font-family: 'Griaste'; src: url('fonts/Griaste-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/GeneralSans-Regular.woff2') format('woff2'), url('fonts/GeneralSans-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/GeneralSans-Semibold.woff2') format('woff2'), url('fonts/GeneralSans-Semibold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/GeneralSans-Bold.woff2') format('woff2'), url('fonts/GeneralSans-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }

/* --- DESIGN SYSTEM --- */
:root {
    --orange: #EC681C;
    --ocean-blue: #312783;
    --sand: #F9DCB9;
    --white: #FFFFFF;
    --black: #000000;
    --font-headline: 'Griaste', sans-serif;
    --font-body: 'General Sans', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
body { font-family: var(--font-body); background-color: var(--sand); color: var(--ocean-blue); line-height: 1.6; overflow-x: hidden; }

h1 { font-family: var(--font-headline); text-transform: uppercase; line-height: 1.1; font-weight: normal; letter-spacing: 4px; }
h2, h3, h4 { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; line-height: 1.2; }
a { text-decoration: none; color: inherit; transition: color 0.3s ease; }

.btn { display: inline-block; background-color: var(--orange); color: var(--white); padding: 12px 32px; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; border-radius: 50px; transition: background-color 0.3s ease, transform 0.2s ease; cursor: pointer; border: none; text-align: center; }
.btn:hover { background-color: var(--ocean-blue); transform: translateY(-2px); color: var(--white); }
.btn-small { padding: 8px 24px; font-size: 1rem; }

/* --- NAVIGATION --- */
nav { position: absolute; top: 0; width: 100%; padding: 30px 5%; z-index: 1000; display: flex; justify-content: center; align-items: flex-start; }
.logo { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1001; }
.logo img { height: 200px; width: auto; filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4)); transition: height 0.3s ease; }
.menu-overlay { width: 100%; display: flex; justify-content: space-between; align-items: center; z-index: 1000; }
.nav-left, .nav-right { display: flex; gap: 30px; align-items: center; }
.nav-left a, .nav-right a { color: var(--white); font-weight: 600; font-size: 1.1rem; text-shadow: 1px 1px 4px rgba(0,0,0,0.4); }
.nav-left a:hover, .nav-right a:hover { color: var(--orange); }
.nav-btn { padding: 10px 24px; font-size: 1rem; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.hamburger { display: none; }

/* --- SECTION UTILITIES --- */
.section-padding { padding: 100px 5%; text-align: center; }
.section-title { font-size: 3rem; color: var(--orange); margin-bottom: 20px; }
.section-text { font-size: 1.25rem; max-width: 800px; margin: 0 auto; }
.bg-white { background-color: var(--white); }
.bg-sand { background-color: var(--sand); }
.bg-blue { background-color: var(--ocean-blue); color: var(--sand); }

/* --- FOOTER --- */
footer { background-color: var(--ocean-blue); color: var(--sand); text-align: center; padding: 80px 5%; }
footer h2 { font-size: 2.5rem; color: var(--orange); margin-bottom: 20px; }
.footer-intro { font-size: 1.25rem; max-width: 600px; margin: 0 auto 50px auto; line-height: 1.6; }
.footer-content { display: flex; justify-content: space-between; align-items: center; max-width: 1000px; margin: 0 auto; text-align: left; gap: 50px; flex-wrap: wrap; }
.footer-contact { flex: 1; min-width: 300px; }
.footer-contact h3 { color: var(--orange); font-size: 1.5rem; margin-bottom: 20px; }
.footer-contact p { font-size: 1.1rem; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.footer-contact a { color: var(--sand); text-decoration: none; transition: color 0.3s ease; }
.footer-contact a:hover { color: var(--orange); }
.footer-contact svg { width: 22px; height: 22px; }
.footer-map { flex: 1; min-width: 300px; width: 100%; height: 250px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.footer-map iframe { width: 100%; height: 100%; border: none; }
.footer-copyright { margin-top: 60px; font-weight: 600; color: var(--orange); border-top: 1px solid rgba(249, 220, 185, 0.1); padding-top: 20px; }

/* --- BOOKING MODAL --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(49, 39, 131, 0.9); display: flex; justify-content: center; align-items: center; z-index: 3000; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content { background-color: var(--sand); padding: 50px 40px; border-radius: 12px; text-align: center; position: relative; max-width: 500px; width: 90%; transform: translateY(20px); transition: transform 0.3s ease; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.modal-overlay.active .modal-content { transform: translateY(0); }
.close-modal { position: absolute; top: 15px; right: 20px; font-size: 2.5rem; background: none; border: none; cursor: pointer; color: var(--ocean-blue); transition: color 0.3s ease; }
.close-modal:hover { color: var(--orange); }
.modal-options { display: flex; flex-direction: column; gap: 15px; }
.modal-btn { width: 100%; font-size: 1.2rem; padding: 18px; }

/* --- MOBILE (shared chrome only) --- */
@media (max-width: 1024px) {
    .logo { position: relative; left: 0; transform: none; }
    .logo img { height: 180px; }
    nav { justify-content: space-between; align-items: center; padding: 15px 5%; background: linear-gradient(rgba(0,0,0,0.6), transparent); }
    .hamburger { display: block; font-size: 2.5rem; color: var(--white); background: none; border: none; cursor: pointer; z-index: 2001; }
    .menu-overlay { position: fixed; top: -100vh; left: 0; width: 100%; height: 100vh; background-color: var(--ocean-blue); flex-direction: column; justify-content: center; align-items: center; gap: 40px; transition: top 0.4s ease; z-index: 2000; }
    .menu-overlay.active { top: 0; }
    .nav-left, .nav-right { flex-direction: column; gap: 25px; text-align: center; }
    .nav-left a, .nav-right a { font-size: 1.5rem; text-shadow: none; }
    .footer-content { flex-direction: column; text-align: center; }
    .footer-contact p { justify-content: center; }
}