:root{
  --whs-accent:#0ea5a4;
  --whs-filter-active-bg:rgba(14,165,164,.1);
  --whs-border:#e5e7eb;
  --whs-panel:#fff;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0; /* Remove default body margin */
    color: #333;
    background-color: #f4f4f4;
}
.container {
  /*max-width: 900px;*/
  margin: 20px auto; /* Add vertical margin here */
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
header ul {
  list-style-type: none; /* Removes the bullet */
  padding-left: 0;      /* Removes default left padding from the UL */
  margin-left: 0;       /* Removes default left margin from the UL */
  margin-top: 2.5em;
}

.navbar, .logo{ background-color: white }

h1, h2, h3, h4 { /* Added h4 to style rules */
    color: #2c3e50;
}

h1 {
    text-align: center;
    /*margin: 20px;*/
    border-bottom: 2px solid #ccc;
}
h2 {
    padding-bottom: 10px;
    margin-top: 40px;
    /*border-bottom: 2px solid #ccc;*/
}
h3 {
    color: #34495e;
    margin-top: 25px;
}
.section-intro {
    margin-bottom: 30px;
    font-size: 1.1em;
    color: #555;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1.5rem;
}

.daytrip-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fdfdfd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.card-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.card-content {
  padding: 1.2rem;
}

.card-content h3 {
  margin-top: 0;
  font-size: 1.3rem;
  line-height: 1.4;
}

.card-content ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}


.note {
    background-color: #ffeccf;
    border-left: 5px solid #ffc107;
    padding: 15px;
    margin-top: 30px;
    border-radius: 4px;
}

.caption {
  background: #04397B; 
  color: white; 
  margin-top: -9px

}
.highlight-list {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}
.highlight-list li {
    margin-bottom: 5px;
}
.world-heritage-list {
    list-style-type: square;
    margin-left: 20px;
    margin-bottom: 15px;
}
.world-heritage-list li {
    margin-bottom: 5px;
    font-weight: bold;
}
/* Custom styles for header elements */

.site-logo {
    width: 350px; /* Moved from inline style */
}
/* === UNESCO feature: badge + section === */

.whs-color {
  color: var(--whs-accent);
}

/* On-page badge that signals a UNESCO section exists */
.badge-whs{
  display:inline-block;
  margin:.25rem 0 .75rem;
  padding:.2rem .55rem;
  font-size:.8rem;
  font-weight:700;
  border-radius:999px;
  border:1px solid var(--whs-accent);
  background:var(--whs-filter-active-bg);
  color:var(--whs-accent);
  text-decoration:none;
  vertical-align:middle;
}
.badge-whs:hover,.badge-whs:focus{
  outline:0;
  box-shadow:0 0 0 3px rgba(14,165,164,.15);
}
/* If you use a tiny SVG/IMG inside the badge */
.badge-whs img{ vertical-align:-2px; }

/* UNESCO block: subtle accent without extra height */
#whs-site{
  border-left:4px solid var(--whs-accent);
  padding-left:.75rem;
  margin:1rem 0;
}
#whs-site h2{
  margin:0 0 .4rem;
  color:var(--whs-accent);
  font-weight:700;
}
#whs-site p{ margin:.4rem 0; } /* keep copy tight */
#whs-site .whs-note { margin:.4rem 0 0; font-size:.95rem; }
#whs-site .whs-note a { font-weight:700; }
/* Compact chip-style link for the WHS search */
.whs-chip{
  display:inline-block;
  padding:.15rem .55rem;
  border:1px solid var(--whs-accent, #0ea5a4);
  border-radius:999px;
  background:var(--whs-filter-active-bg, rgba(14,165,164,.08));
  color:var(--whs-accent, #0ea5a4);
  text-decoration:none;
  font-weight:700;
  line-height:1.2;
  vertical-align:baseline; /* keeps it aligned within the sentence */
}
.whs-chip:hover{
  box-shadow:0 0 0 3px rgba(14,165,164,.15);
}
.whs-chip:focus{
  outline:0;
  box-shadow:0 0 0 3px rgba(14,165,164,.25);
}
/* Add the icon via CSS so it doesn't interfere with text editing */
.badge-whs{
  position: relative;
  padding-left: 1.3rem; /* room for icon */
}

/* Decorative icon; not in the DOM, so editing is simple */
.badge-whs::before{
  content: "🏛️";
  position: absolute;
  left: .55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .95em;
  line-height: 1;
  pointer-events: none; /* click still hits the link */
}

/* If you ever edit content in a WYSIWYG (contenteditable), hide the icon */
[contenteditable] .badge-whs::before{ content: none; }

/* WHS badge — fixed to header corner */
.badge-whs {
  position: absolute;
  z-index: 10;
  display: inline-block;
  /*font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 999px;
  padding: .45rem .75rem;
  line-height: 1;
  background: #f4f7ff; /* light chip *
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  color: #1a3a6d;      /* readable on light bg */
}

/* === UNESCO WHS badge when placed INSIDE <header> === */

/* Ensure header establishes positioning context */
.container > header {
  position: relative;
}

/* Fixed badge in top-right of the header */
.badge-whs--fixed {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
}

/* On small screens: shrink badge and reserve vertical space so the
   hamburger/nav selector clears below it */
@media (max-width: 768px) {
  .badge-whs--fixed {
    top: 8px;
    right: 8px;
    font-size: .78rem;
    padding: .35rem .6rem;
  }

  .container > header {
    padding-top: 48px;  /* creates a lane for the badge so the hamburger sits below */
  }
}

/* === swap Title based on Screen Size */
.badge-text-full { display: inline; }
.badge-text-short { display: none; }

@media (max-width: 576px) {
  .badge-text-full { display: none; }
  .badge-text-short { display: inline; }
}
/* end */


/* combined froots-images.css -- 8/21/2025 */
/*

================================================================================
FILE: css/basic-images.css
================================================================================
/*
 * Essential Image Utilities
 * Just the image styles you actually need
 */

/* Basic responsive image */
.img-responsive {
    max-width: 100%;
    height: auto;
}

.img-center {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Floating images with text flow */
.img-float-left {
    float: left;
    margin: 0 1.5rem 1rem 0;
    max-width: 50%;
}

.img-float-right {
    float: right;
    margin: 0 0 1rem 1.5rem;
    max-width: 50%;
}

.img-float-left img,
.img-float-right img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius, 4px);
}

/* Clear floats */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Image containers with aspect ratios */
.img-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius, 4px);
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-1-1 { aspect-ratio: 1 / 1; }

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .img-float-left,
    .img-float-right {
        float: none;
        margin: 0 auto 1rem auto;
        max-width: 100%;
        display: block;
    }
}

/* --- LoneTrekker: Tight & Consistent Header Overrides --- */

/* Prevent any body/top offset surprises */
html, body { margin: 0; }

/* A targeted reset for the header area only */
.tight-header, 
.tight-header * {
  box-sizing: border-box;
}

/* Remove collapsed margins from the first child inside header */
.tight-header > *:first-child { margin-block-start: 0; }

/* Lock in consistent vertical padding across all breakpoints */
.tight-header {
  /* use logical props so it’s RTL-safe too */
  padding-block: 10px;           /* top/bottom padding: tight but readable */
  padding-inline: 16px;          /* left/right padding */
  background: #fff;              /* or your site header color */
  border-bottom: 1px solid rgba(0,0,0,.06); /* optional hairline for definition */
}

/* Flex layout ensures vertical centering and no “drift” */
.tight-header .logo-block {
  display: flex;
  align-items: center;           /* vertically center logo + menu */
  justify-content: space-between;
  gap: 16px;                     /* breathing room between items */
  min-height: 56px;              /* keeps touch targets comfy without looking bulky */
}

/* Kill default margins that cause jumpiness */
.tight-header h1,
.tight-header h2,
.tight-header p {
  margin: 0;
}

/* Make images not add stray descender space */
.tight-header img {
  display: block;                /* removes inline-image baseline gap */
  height: auto;
}

/* Logo sizing that won’t wobble between breakpoints */
.tight-header .logo-img {
  height: 36px;                  /* pick the tight size you like (32–40px range is common) */
  width: auto;
}

/* Menu: strip list margins & keep spacing deterministic */
.tight-header .main-nav,
.tight-header .main-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tight-header .main-nav ul {
  display: flex;
  align-items: center;
  gap: 18px;                     /* fixed, not responsive—so it doesn’t shift by width */
}

/* Links are vertically solid; line-height 1 prevents extra top/bottom air */
.tight-header .main-nav a {
  display: inline-block;
  line-height: 1;
  text-decoration: none;
  padding-block: 6px;            /* small touch area without changing header height */
}

/* If froots adds breakpoint padding or margins on the header, neutralize them */
@media (max-width: 2000px) {
  .tight-header { padding-block: 10px; } /* reassert the same padding across all MQs */
}

/* Optional: mobile tweak, if your menu stacks */
@media (max-width: 768px) {
  .tight-header .logo-block {
    min-height: 52px;
    gap: 12px;
  }
  .tight-header .main-nav ul { gap: 14px; }
  .tight-header .logo-img { height: 32px; }
}

.left-responsive {
  display: block;
  margin: 0 auto; /* center by default */
  max-width: 100%; /* keeps it responsive */
  float: none; /* don’t float on small screens */
}

@media (min-width: 768px) {
  .left-responsive {
    float: left;       /* only float on larger screens */
    margin: 0 15px 15px 0!important; /* spacing between text and map */
  }
}

.right-responsive {
  display: block;
  margin: 0 auto;   /* center by default */
  max-width: 100%;  /* shrink to fit smaller screens */
  float: none;
}

@media (min-width: 768px) {
  .right-responsive {
    float: right;
    margin: 0 0 15px 15px!important; /* spacing on the left - Right-floating images usually want extra space on their left*/
  }
}