/* Typography & palette (fonts now loaded via <link> in HTML) */
/* Optional custom font: Foglihten 068 (placeholder). Add actual font files in /fonts */
@font-face {
  font-family: 'Foglihten068';
  src: url('Fonts/Foglihten-068.otf') format('otf');
  font-weight: 400 700; /* adjust if variable or multiple weights */
  font-display: swap;
}

:root{ --bg:#f4e8e4; --text:#765342; --accent:#b48a78; --header-h:130px; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:'Open Sans', Arial, sans-serif; font-weight:400; font-style:italic; background:var(--bg); color:var(--text); line-height:1.6; font-size:clamp(1rem, 2.5vw, 1.4rem); letter-spacing:.25px; padding-top:0; min-height:100vh; display:flex; flex-direction:column; }
h1,h2,h3,h4,h5,h6{ font-family:'Foglihten068','Playfair Display', Georgia, serif; font-weight:500; font-style:normal; }
h1{ font-size:clamp(1.8rem, 5vw, 1.8rem); line-height:1.2; margin:0 0 1rem; }
h2{ font-size:clamp(1.5rem, 4vw, 1.7rem); line-height:1.3; margin:0 0 0.8rem; }
h3{ font-size:clamp(1.3rem, 3.5vw, 1.5rem); line-height:1.4; margin:0 0 0.6rem; }
h4{ font-size:clamp(1.1rem, 3vw, 1.4rem); line-height:1.4; margin:0 0 0.5rem; }
h5{ font-size:clamp(1rem, 2.5vw, 1.2rem); line-height:1.5; margin:0 0 0.4rem; }
h6{ font-size:clamp(0.9rem, 2vw, 1rem); line-height:1.5; margin:0 0 0.4rem; }

/* Main content area for sticky footer */
main{ flex:1; }

/* Visually hidden: keeps content available to search engines and screen readers without changing the visual layout */
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* Header / nav */
header{ position:fixed; left:0; top:0; width:100%; z-index:1000; background:var(--bg); /* removed border to eliminate residual line */ border:none; backdrop-filter:blur(4px); transition:box-shadow .3s ease, background-color .3s ease; }
header.scrolled{ box-shadow:0 4px 18px -6px rgba(0,0,0,.25); background:rgba(244,232,228,.92); }
.nav{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:40px; padding:26px 72px 20px; }
.nav a{ font-family:'Playfair Display', Georgia, serif; font-style:normal; text-decoration:none; color:var(--text); font-size:clamp(1rem, 2vw, 1.2rem); font-weight:400; position:relative; padding:6px 4px; }
/* Brand needs to be larger; use a more specific selector so it isn't overridden */
.nav a.brand, .brand{ font-family:'Foglihten068','Playfair Display', Georgia, serif; font-style:normal; font-size:clamp(2rem, 6vw, 3.5rem); font-weight:400; letter-spacing:.65px; color:var(--text); margin-right:24px; white-space:nowrap; text-decoration:none; display:inline-block; line-height:1.05; }
.nav a::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent); transition:width .25s ease; }
.nav a:hover{ color:var(--accent); }
.nav a:hover::after{ width:100%; }
.lang-switches{ display:inline-flex; align-items:center; }
.nav .lang-switches{ margin-left:8px; border:1px solid rgba(118,83,66,.35); border-radius:999px; overflow:hidden; background:rgba(255,255,255,.55); }
.nav a.lang-switch{ margin:0; border-right:1px solid rgba(118,83,66,.25); border-radius:0; padding:6px 11px; font-family:'Open Sans', Arial, sans-serif; font-size:0.84rem; letter-spacing:.25px; line-height:1.1; min-width:34px; text-align:center; }
.nav .lang-current{ border-right:1px solid rgba(118,83,66,.25); padding:6px 11px; font-family:'Open Sans', Arial, sans-serif; font-size:0.84rem; letter-spacing:.25px; line-height:1.1; min-width:34px; text-align:center; color:#fff; background:var(--accent); }
.nav a.lang-switch:last-child{ border-right:0; }
.nav a.lang-switch::after{ display:none; }
.nav .lang-switches a.lang-switch:hover{ background:rgba(180,138,120,.15); }
.nav .lang-switches a.lang-switch.is-active{ color:#fff; background:var(--accent); }

/* Burger */
.burger{ display:none; position:absolute; right:12px; top:8px; width:44px; height:44px; border:1px solid rgba(0,0,0,.1); background:transparent; border-radius:10px; }
.burger span{ display:block; height:2px; margin:7px 9px; background:#333; }

/* Mobile drawer */
.drawer{ display:none; position:fixed; left:12px; right:12px; top:60px; background:#ffffffcc; backdrop-filter:blur(6px); border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:10px; }
.drawer a{ display:block; padding:12px; border-radius:10px; color:var(--text); text-decoration:none; }
.drawer a:hover{ background:rgba(0,0,0,.05); }
.drawer .lang-switches{ display:flex; gap:8px; padding:8px 12px 4px; }
.drawer .lang-switches a.lang-switch{ display:inline-block; width:auto; margin:0; padding:8px 10px; border:1px solid rgba(118,83,66,.35); border-radius:999px; font-family:'Open Sans', Arial, sans-serif; font-size:0.85rem; line-height:1; background:rgba(255,255,255,.5); }
.drawer .lang-switches .lang-current{ display:inline-block; width:auto; margin:0; padding:8px 10px; border:1px solid rgba(118,83,66,.35); border-radius:999px; font-family:'Open Sans', Arial, sans-serif; font-size:0.85rem; line-height:1; color:#fff; background:var(--accent); }
.drawer .lang-switches a.lang-switch:hover{ background:rgba(180,138,120,.15); }
.drawer .lang-switches a.lang-switch.is-active{ color:#fff; background:var(--accent); border-color:rgba(118,83,66,.6); }
.drawer.open{ display:block; }

/* Hero Section */
.hero-section{ 
  min-height: 100vh; 
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(244, 232, 228, 0.5)), url('images/background-hero.jpg') center/cover no-repeat; 
  display: flex; 
  align-items: center; 
  justify-content: flex-start; 
  padding: 0 72px; 
  position: relative;
}

.hero-section::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(to right, rgba(244,232,228,0.95) 0%, transparent 20%, transparent 80%, rgba(244,232,228,0.95) 100%),
    linear-gradient(to bottom, rgba(244,232,228,0.85) 0%, transparent 15%, transparent 85%, rgba(244,232,228,0.85) 100%),
    radial-gradient(ellipse at center, transparent 25%, rgba(244,232,228,0.5) 60%, rgba(244,232,228,0.9) 100%);
  pointer-events: none;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

.hero-text-overlay{ 
  background: transparent; 
  padding: 60px 0 55px; 
  border-radius: 0; 
  max-width: 500px; 
  backdrop-filter: none; 
  box-shadow: none;
  margin-top: -50px;
}

.hero-text-overlay p{ 
  margin: 0; 
  font-family: 'Foglihten068', Georgia, serif;
  font-size: clamp(1rem, 3vw, 1.4rem); 
  color: var(--text); 
  line-height: 1.65;
  font-style: italic;
  font-weight: 300;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7);
}

/* KBT Hero Section */
.kbt-hero-section{ 
  min-height: 100vh; 
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(244, 232, 228, 0.5)), url('images/om-kbt.jpg') center/cover no-repeat; 
  display: flex; 
  align-items: center; 
  justify-content: flex-start; 
  padding: var(--header-h) 72px 0; 
  position: relative;
}

.kbt-hero-section::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(to right, rgba(244,232,228,0.99) 0%, transparent 10%, transparent 70%, rgba(244,232,228,0.99) 100%),
    linear-gradient(to bottom, rgba(244,232,228,0.85) 0%, transparent 15%, transparent 90%, rgba(244,232,228,0.85) 100%),
    radial-gradient(ellipse at center, transparent 15%, rgba(244,232,228,0.5) 60%, rgba(244,232,228,0.9) 100%);
  pointer-events: none;
}

.kbt-hero-section .hero-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.kbt-hero-section .hero-text-overlay {
  position: relative;
  z-index: 1;
}

/* Make KBT hero text non-italic */
.kbt-hero-section .hero-text-overlay p {
  font-style: normal;
}

.profile-body{
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(244, 232, 228, 0.5)), url('images/om-mig.jpg') center/cover no-repeat;
  padding: 40px;
  border-radius: 16px;
  position: relative;
}
.profile-body::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  background: 
    linear-gradient(to right, rgba(244,232,228,0.95) 0%, transparent 20%, transparent 80%, rgba(244,232,228,0.95) 100%),
    linear-gradient(to bottom, rgba(244,232,228,0.85) 0%, transparent 15%, transparent 85%, rgba(244,232,228,0.85) 100%),
    radial-gradient(ellipse at center, transparent 25%, rgba(244,232,228,0.5) 60%, rgba(244,232,228,0.9) 100%);
  pointer-events: none;
}
.om-mig-section{scroll-margin-top:100px; padding:150px 72px 96px; max-width: 1200px; margin: 0 auto;}
.kontakt-section{scroll-margin-top:100px; padding:150px 72px 96px; max-width: 1200px; margin: 0 auto;}
/* Sections */
section.anchor{ scroll-margin-top:100px; padding:150px 72px 96px; }
section.anchor h1{ font-family:'Foglihten068', Georgia, serif; font-weight:500; letter-spacing:.6px; color:var(--text); line-height:1.15;}
section.anchor p{ font-family:'Foglihten068', Georgia, serif; font-size:clamp(1rem, 2.8vw, 1.4rem); font-weight:200; max-width:780px; line-height:1.65; }
.profile-top .signature{ font-family:'Allura','Playfair Display',cursive; font-size:clamp(2rem, 5vw, 3rem); line-height:1.05; margin:6px 0 0; letter-spacing:.5px; color:var(--text); font-style:normal; }

/* Profile body - remove italic styling and ensure content is above fade overlay */
.profile-body p{ font-family:'Foglihten068', Georgia, serif; font-style: normal; max-width:100% !important; position: relative; z-index: 1; }
.profile-body h1,
.profile-body h2,
.profile-body h3,
.profile-body h4,
.profile-body h5,
.profile-body h6{ position: relative; z-index: 1; color: var(--text); }
.profile-body .compact-paragraphs p{ margin:0 0 .45rem; line-height:1.4; }
.profile-body .compact-paragraphs p:last-child{ margin-bottom:0.8rem; }
/* Simple centered pricing (no card styling) */
.pricing{ 
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(244, 232, 228, 0.5)), url('images/priser.jpg') center/cover no-repeat;
  padding: 60px 40px;
  position: relative;
  font-style: normal;
}
.pricing::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(to right, rgba(244,232,228,0.95) 0%, transparent 20%, transparent 80%, rgba(244,232,228,0.95) 100%),
    linear-gradient(to bottom, rgba(244,232,228,0.85) 0%, transparent 15%, transparent 85%, rgba(244,232,228,0.85) 100%),
    radial-gradient(ellipse at center, transparent 25%, rgba(244,232,228,0.5) 60%, rgba(244,232,228,0.9) 100%);
  pointer-events: none;
}
.pricing h1, .pricing h2, .pricing h3, .pricing p{ text-align:center; position: relative; z-index: 1; margin-left:auto; margin-right:auto; }

/* Bokning layout */
.bokning{ 
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(244, 232, 228, 0.5)), url('images/bokning.jpg') center/cover no-repeat;
  padding: 60px 40px;
  position: relative;
  font-style: normal;
}
.bokning::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(to right, rgba(244,232,228,0.95) 0%, transparent 20%, transparent 80%, rgba(244,232,228,0.95) 100%),
    linear-gradient(to bottom, rgba(244,232,228,0.85) 0%, transparent 15%, transparent 85%, rgba(244,232,228,0.85) 100%),
    radial-gradient(ellipse at center, transparent 25%, rgba(244,232,228,0.5) 60%, rgba(244,232,228,0.9) 100%);
  pointer-events: none;
}
.bokning h1{ position: relative; z-index: 1; margin-left:auto; margin-right:auto; max-width:780px; }
.bokning p{ position: relative; z-index: 1; margin-left:auto; margin-right:auto; }

/* Profile image (simplified) */
.profile-top{ display:flex; align-items:center; gap:60px; margin:40px 0 64px; }
.signature-wrap{ flex:1; }
.profile-photo{ flex:0 0 420px; position:relative; }
.profile-photo::after{ 
  content:''; 
  position:absolute; 
  top:0; 
  left:0; 
  right:0; 
  bottom:0; 
  background: 
    linear-gradient(to right, rgba(244,232,228,0.95) 0%, transparent 20%, transparent 80%, rgba(244,232,228,0.95) 100%),
    linear-gradient(to bottom, rgba(244,232,228,0.85) 0%, transparent 15%, transparent 85%, rgba(244,232,228,0.85) 100%),
    radial-gradient(ellipse at center, transparent 25%, rgba(244,232,228,0.5) 60%, rgba(244,232,228,0.9) 100%);
  pointer-events:none; 
}
.profile-photo img{ width:100%; height:auto; display:block; }
.profile-body p{ max-width:100% !important; position: relative; z-index: 1; }

/* Booking Widget Styles */
.booking-widget-section {
  position: relative;
  z-index: 5;
}

#sb-container {
  width: 100% !important;
  min-height: 700px !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  position: relative !important;
  z-index: 10 !important;
  max-width: 900px;
  margin: auto;
}

#sb-container iframe {
  width: 100% !important;
  min-height: 700px !important;
  border: none !important;
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 760px){
  :root{ --header-h:78px; }
  header{ box-shadow:0 2px 8px -4px rgba(0,0,0,.15); background:rgba(244,232,228,.95); }
  body{ font-size:clamp(0.9rem, 2.2vw, 1.1rem); letter-spacing:.1px; font-style:normal; }
  .nav{ padding:12px 16px 10px; gap:12px; position:relative; }
  /* Override BOTH global selectors (.nav a.brand, .brand) so desktop size (56px) doesn't persist */
  .nav a.brand, .brand{ font-family:'Foglihten068','Playfair Display', Georgia, serif; font-style:normal; font-size:clamp(1.5rem, 4vw, 1.8rem); font-weight:400; margin-right:auto; line-height:1.15; }
  /* Hide regular nav links on mobile but keep brand visible */
  .nav a{ display:none; }
  .nav a.brand{ display:inline-block; }
  .nav .lang-switches{ display:none; }
  .drawer .lang-switches a.lang-switch{ font-weight:600; }
  .burger{ display:block; position:absolute; right:12px; top:8px; width:40px; height:40px; margin-left:0; }
  
  /* Hero section mobile */
  .hero-section{ min-height:70vh; padding:var(--header-h) 20px 0; }
  .kbt-hero-section{ min-height:70vh; padding:var(--header-h) 20px 0; }
  .kbt-hero-section .hero-content{ position: relative; z-index: 2; }
  .kbt-hero-section .hero-text-overlay{ position: relative; z-index: 2; }
  .hero-text-overlay{  max-width:100%; }
  .hero-text-overlay p{ font-size:clamp(0.9rem, 2.5vw, 1.1rem); line-height:1.6; }
  
  
  section.anchor{ padding:84px 20px 56px; }
  section.anchor p{ font-size:clamp(0.9rem, 2.3vw, 1rem); }
  .profile-top{ flex-direction:column; gap:32px; margin:20px 0 40px; }
  .profile-photo{ flex:auto; }
  .om-mig-section{padding:84px 20px 56px;}
    
  #sb-container,
  #sb-container iframe {
    min-height: 600px !important;
  }
}

/* ===== Footer Styles ===== */
footer {
  background-color: #b48a78;
  text-align: center;
  padding: 25px 10px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(0.8rem, 2vw, 0.9rem);
  color: #444;
  border-top: 1px solid #ddd;
}

footer p {
  margin: 0;
}

footer a {
  color: rgba(244, 232, 228, .92);
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

footer a:hover {
  text-decoration: underline;
  color: #9d7f6f;
}

/* Optional: dark mode support */
@media (prefers-color-scheme: dark) {
  footer {
    background-color: rgba(244, 232, 228, .92);
    color: #ccc;
  }

  footer a {
    color: #9d7f6f;
  }

  footer a:hover {
    color: #a2d0c3;
  }
}