:root{
  --hero-height: 60vh;
  --accent: #0d6efd;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;line-height:1.6;color:#222;background:#fff;scroll-behavior:smooth}

.hero{
  height:var(--hero-height);
  /* Use terrace2.jpg from the local assets folder as hero background */
  background-image: url('../assets/ad_photos/terrace2.jpg');
  background-size:cover;
  background-position:center;
  position:relative;
}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.22));}
.hero{filter:brightness(1.08);}
.hero-content{position:relative;z-index:2;padding-top:4rem}

.navbar-brand{font-weight:600}

/* Brand icon used in the navbar */
.brand-icon{width:36px;height:36px;object-fit:cover;border-radius:6px;display:inline-block}

/* Fixed header left-corner icon */
.header-left-icon{position:fixed;left:8px;top:8px;z-index:1035;display:inline-block}
.header-left-icon-img{width:44px;height:44px;object-fit:cover;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.12)}

@media (max-width:576px){
  /* slightly smaller on very small screens to avoid overlap */
  .header-left-icon-img{width:36px;height:36px}
  main{margin-top:76px}
}

/* Ensure navbar content is shifted right so the fixed left icon won't overlap */
.navbar .container{
  padding-left: calc(44px + 16px); /* icon width + gap */
}

@media (max-width:576px){
  .navbar .container{padding-left: calc(36px + 12px)}
}

/* Responsive section header: keeps title and caption on one line when possible,
   and stacks caption under title on small screens for better readability */
.section-head{flex-wrap:wrap;align-items:baseline;gap:1rem}
.section-head h2{margin:0}
.section-head small{margin-left:auto;flex:0 0 auto}

@media (max-width:768px){
  .section-head{align-items:flex-start}
  .section-head small{margin-left:0;flex:1 1 100%;margin-top:0.25rem}
}

#gallery-grid img{cursor:pointer;border-radius:8px;object-fit:cover;width:100%;height:100%}
.thumb-card{height:180px;overflow:hidden;border-radius:8px}

.modal-content{background:rgba(0,0,0,0.9)}
.carousel-inner img{
  display:block;
  max-width:100vw;
  max-height:80vh;
  width:auto;
  height:auto;
  margin-left:auto;
  margin-right:auto;
  object-fit:contain;
}

@media (max-width:768px){
  :root{--hero-height:40vh}
  .carousel-inner img{height:50vh}
  .thumb-card{height:120px}
}

/* Minimalistic spacing for features */
#short-features li{background:#fff;padding:0.5rem 0.75rem;border-radius:6px;border:1px solid #e9ecef}

footer{position:relative}

/* Accessibility focus */
.lang-btn:focus{outline:3px solid rgba(13,110,253,0.25);outline-offset:2px}
/* Make header/navbar sticky */
header {
  position: relative;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1020;
}

main {
  margin-top: 70px; /* Height of navbar, adjust as needed */
}

/* Remove visible border from the hamburger/menu toggle and remove focus ring */
.navbar-toggler{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.navbar-toggler:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* Language dropdown toggle: make the globe icon compact and circular */
.lang-dropdown-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:36px;padding:6px;border-radius:6px}
.lang-dropdown-toggle svg{display:block}

@media (max-width:576px){
  .lang-dropdown-toggle{width:40px;height:34px;padding:4px}
}

/* Style for the short language code shown next to the globe */
.lang-code{font-weight:600;font-size:0.9rem}
.lang-dropdown-toggle .lang-code{display:inline-block}

@media (max-width:480px){
  /* hide the code on extra small screens to save space */
  .lang-dropdown-toggle .lang-code{display:none}
}