* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #222;
  background: #fff;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main content area */
main {
  flex: 1;  /* This will make the main content take up available space */
}

/* Wrapper and Main Layout */
#main.home {
  background: #f9f9f9;
  font-family: 'Helvetica Neue', sans-serif;
  color: #333;
  padding: 40px 0;
}

#wrapper {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* A centered page width wrapper (optional for your sections) */
.wrapper, .header-inner {
  width: min(1100px, 92%);
  margin-inline: auto;
}

/* =========================
   Simple Header (RED style)
========================= */
.simple-header {
  background: #fff;
  border: 1px solid #d4af37;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 6px 18px rgba(255,0,0,.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

/* Red logo (link) */
.logo {
  font-size: 24px;
  font-weight: 700;
  color:#e00000;
  text-decoration: none;
}

  /* --- Base (desktop-first) --- */
.simple-header .header-inner { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  position: relative;          /* so absolute .mobile-menu positions inside */
}

.header-buttons { display: flex; gap: 10px; }

 .header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  color:#e00000;
  background: #fff; /* Brand red */
  border: 1px solid #e00000;
  border-radius: 999px; /* Pill shape */
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.header-btn:hover {
  background:#e00000; /* Gold hover */
  border-color: #ffcc00;
  color: #fff;
  transform: translateY(-1px);
}

/* Outline red version for "Advertise" */
.header-btn.advertise { background: #fff; color: #ff0000; }
.header-btn.advertise:hover { background: #ff0000; color: #fff; }

/* Hide hamburger + mobile menu on desktop */
.menu-toggle { display: none; }
.mobile-menu { display: none; }

/* Hamburger button styles */
.menu-toggle {
  cursor: pointer;
  width: 30px;
  height: 22px;
  display: none;               /* shown on mobile */
  flex-direction: column;
  justify-content: space-between;
}
.menu-toggle div {
  background-color:#ff0000;
  height: 4px;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.menu-toggle.active .bar1 { transform: rotate(-45deg) translate(-5px, 6px); }
.menu-toggle.active .bar2 { opacity: 0; }
.menu-toggle.active .bar3 { transform: rotate(45deg) translate(-5px, -6px); }

/* --- Mobile --- */
@media (max-width: 768px) {
  /* Hide desktop buttons, show hamburger */
  .header-buttons { display: none; }
  .menu-toggle { display: flex; }

  /* Mobile dropdown menu (hidden by default) */
  .mobile-menu {
    position: absolute;
    top: 60px;                 /* match your header height */
    right: 16px;
    left: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    padding: 10px;
    z-index: 1000;
    /* hidden state */
    display: block;            /* keep block so we can animate opacity */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease;
  }

  /* visible state when JS adds .show */
  .mobile-menu.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .mobile-menu .header-btn {
    display: block;
    text-align: center;
    padding: 10px 14px;
    margin: 4px 0;
  }
}

/* Filter buttons bar */
.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content:left;
  gap: 8px;
  margin: 20px 0;
}

.filter-buttons .btn {
  background: #fff;
  border: 1px solid goldenrod;
  padding: 8px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.filter-buttons .btn:hover {
  background:#e00000;
  border-color: goldenrod;
}

.filter-buttons .btn.active {
  background: #e00000;
  color: #fff;
  border-color: #e00000;
}



 /* Horizontal category scroller */
.scroll-wrapper {
  position: relative;
  margin: 12px 0;
  border-top:1px solid #d4af37 ;
  border-bottom: 2px solid #d4af37;
}

.scroll-row {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 8px 44px; /* room for arrows */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory; /* nice snap */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge legacy */
}

.scroll-row::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;              /* Chrome/Safari */
}
.scroll-row::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
}

.scroll-item {
  flex: 0 0 auto;            /* prevents wrapping to new line */
  width: 120px;
  text-align: center;
  scroll-snap-align: start;
}

.scroll-item.is-hidden { display: none; }

.scroll-item img {
  width: 90px;
  height: 90px;
  border-radius: 9999px;     /* circle */
  object-fit: cover;
  display: block;
  margin: 0 auto 6px;
}

.scroll-item a {
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
}

/* Arrow buttons */
.scroll-buttons {
  position:absolute; 
  inset:0; 
  pointer-events:none; z-index:2;   
}

.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;      /* the buttons ARE clickable */
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  font-size: 18px;
  line-height: 36px;
}

.scroll-btn.prev { 
  left: 6px; 
  background: #e00000;        /* red */
  color: #fff;
}
.scroll-btn.next {
  right: 6px; 
  background: #e00000;        /* red */
  color: #fff;
}

.scroll-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Hide arrows on small screens if you want pure swipe */
@media (max-width: 768px) {
  .scroll-row { padding: 8px 10px; }
  .scroll-btn { display: none; }
}

.header-container {
  position: relative;
  width: 100%;
  height: 100%;       /* default fallback */
  display: inline-block;
}

.header-container img {
  width: 100%;
  height: auto;
  display: block;
  margin-top: -40px;
  margin-bottom: -1px;
}

/* Centered wrapper */
.centered {
  text-align: center;
  width: 100%;
}

/* Button text */
.centered button {
  background-color:linen;
  border: 1px solid #d4af37;
  cursor: pointer;
  padding: 0;
  text-align: center;
  font-size: 22px;
  color:#e00000;
  font-weight: bold;
  line-height: 1.6;
  width:100%;
}

/* --- Responsive fix --- */
@media (max-width: 1024px) {
  .header-container {
    height: auto; /* Let image decide height */
  }

}

#myDIV {
width: 100%;
padding: 7px 0;
text-align:left;
margin-top: 5px;
margin-left: 5px;
display: none; 
}

#myDIV p {
font-size: 18px;
line-height: 1.6;
color:#666;
margin-left: 10px;
margin-right: 10px;
}
 
/* =========================
   Rotating Text Section (simple)
========================= */
.text-rotator {
  text-align: center;
  padding: .5rem 1rem 2rem;
  background: #fff; /* keep clean; no gold/pink */
}
.text-rotator h1 {
  font-size: clamp(22px, 5vw, 40px);
  color: #ff0000; /* RED headline */
  margin: .1rem 0 .25rem;
  transition: opacity .4s ease-in-out;
}
.text-rotator p {
  font-size: clamp(14px, 3.4vw, 18px);
  color: #444;
  margin: 0 auto;
  max-width: 760px;
  transition: opacity .4s ease-in-out;
}

.so-link {
  display: inline-block;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  color: #333;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.so-link:hover {
  color: #e00000;
  border-color: #e00000;
  box-shadow: 0 6px 14px rgba(224,0,0,0.12);
  transform: translateY(-1px);
}
.so-link .so-country { color: #e00000; }
.so-link .so-sep { color: #ffcc00; } /* gold dot */

/* Section title */
.so-title {
  text-align: center;
  margin: 10px 0 20px;
  font-size: 28px;
  font-weight: 800;
  color: #e00000; /* red */
}

/* ===== GRID (2 rows) ===== */
 .so-grid-2rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  grid-auto-rows: auto;
  gap: 10px 20px;
  align-items: center;
  justify-items: center;
  padding: 10px 6vw 0;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ===== PAGINATION ===== */
.so-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: 22px 0 6px;
}
.so-page {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #e00000;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  border: 2px solid #e00000;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.so-page:hover { transform: translateY(-1px); background: #ffcc00; border-color: #ffcc00; color: #fff; }
.so-page-indicator { font-weight: 700; color: #333; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .so-grid-2rows {
    grid-auto-columns: minmax(160px, 1fr);
    gap: 8px 12px;
  }
}
@media (max-width: 560px) {
  .so-grid-2rows {
    grid-template-rows: auto auto auto; /* allow 3 rows if needed on tiny screens */
    grid-auto-columns: minmax(140px, 1fr);
  }
  .so-link { font-size: 14px; padding: 8px 12px; }
}

@media (max-width: 480px) {
  .so-grid-2rows {
    grid-auto-flow: row;             /* switch to row flow */
    grid-template-rows: none;        /* let rows auto-fit */
    grid-template-columns: 1fr 1fr;  /* two columns side by side */
    gap: 8px;
    justify-items: center;           /* center items in each cell */
  }

  .so-link {
    font-size: 14px;                 /* slightly smaller font */
    padding: 8px 10px;               /* tighter padding */
    white-space: normal;             /* allow multi-line city names */
    text-align: center;
  }
}

/* Pagination Styles */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  font-size: 16px;
}

.pagination a {
  padding: 8px 12px;
  margin: 0 5px;
  background-color: #ffffff;
  color: #e60000;
  border-radius: 50%;
  border: 2px solid #e60000;
  text-decoration: none;
}

.pagination a:hover {
  background-color: #e60000;
  color: #ffffff;
}

.pagination .previous,
.pagination .next {
  border-radius: 50%;
}

.pagination .previous::before, .pagination .next::before {
  content: "< >";
  color: #ffffff;
}

.pagination .previous {
  background-color: #e60000;
}

.pagination .next {
  background-color: #e60000;
}

.pagination .previous:hover, .pagination .next:hover {
  background-color: #ffcc00;
}

/* Style for the entire filter bar (sticky on top of the page) */
.filters-bar {
  position: sticky;
  top: 0;
  background-color: #fff;
  padding: 10px 16px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-bottom: 1px solid #eee;
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.filters-bar .segment {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.filters-bar .segment input {
  display: none;
}

.filters-bar .segment label {
  display: inline-block;
  padding: 8px 12px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 30px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.filters-bar .segment input:checked + label {
  background-color: #ff0000;
  color: #fff;
  border-color: #ff0000;
}

/* Style for the 'Type' checkboxes (chips) */
.filters-bar .segment .chip input:checked + label {
  background-color: #ff0000;
  color: #fff;
  border-color: #ff0000;
}

.filters-bar button {
  background-color: #ff0000;
  color: white;
  padding: 8px 12px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.filters-bar button:hover {
  background-color: #e00000;
}

/* For mobile responsiveness (smaller screens) */
@media (max-width: 768px) {
  .filters-bar {
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
  }
  .filters-bar .segment {
    flex-direction: column;
    gap: 4px;
  }
}

/* Daily note (city pages only) */
.daily-note{
  width: 100%;
  margin: 16px auto;
  background:#fff;
  border: 1px solid #d4af37;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(255,0,0,.06);
}
.daily-note h2{
  color: #ff0000;
  font-size: 18px;
  margin: 0 0 6px;
}
.daily-note-sub{
  margin: 0 0 8px;
  color: #444;
  font-size: 16px;
  font-weight: 700;
}
.daily-note p, .daily-note li{ 
color: #333;
margin-left: 5px; }

/* Floating Chat Bubble (red theme) */
.chat-bubble{
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 9999px;
  background: #ff0000;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid #ff0000;
  box-shadow: 0 10px 24px rgba(255,0,0,.25);
  z-index: 1100; /* above footer & content */
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}

.chat-bubble:hover{ 
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(255,0,0,.30);
}
.chat-bubble:active{ transform: translateY(0); }

.chat-bubble:focus-visible{
  outline: 3px solid rgba(255,0,0,.3);
  outline-offset: 2px;
}

.chat-bubble__icon{ line-height: 1; }
.chat-bubble__text{ white-space: nowrap; }

/* Tiny unread badge (optional): set data-badge="3" in HTML to show */
.chat-bubble[data-badge]:not([data-badge=""])::after{
  content: attr(data-badge);
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  background: #fff; color: #ff0000;
  border: 2px solid #ff0000;
  border-radius: 9999px;
  font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
}

/* Respect users that prefer no motion */
@media (prefers-reduced-motion: reduce){
  .chat-bubble{ transition: none; }
}

/* Phone tweaks */
@media (max-width: 540px){
  .chat-bubble{
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* Super narrow (344px) — keep it comfortable */
@media (max-width: 344px){
  .chat-bubble{ padding: 8px 10px; font-size: 13px; gap: 6px; }
  .chat-bubble__text{ max-width: 150px; }
}

/* Don’t show in print */
@media print { .chat-bubble{ display: none !important; } }

 /* ===== Footer base ===== */
.site-footer{
  background:#fff;
  border-bottom:1px solid #d4af37;
  padding:20px 0 72px; /* extra bottom so chat bubble doesn't cover links */
  margin-top: 20px;  /* Ensure it doesn't overlap content */
  position: relative; /* Make sure it doesn't stick or overlap */
  box-shadow: 0 6px 18px rgba(255,0,0,.06);
}
.site-footer .wrapper{ width:min(1100px,92%); margin-inline:auto; }

/* ===== Links grid (centered) ===== */
.footer-nav{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px 18px;
  justify-items:center;      /* center each link */
  margin:8px 0 16px;
}
.footer-link{
  color:#ff0000;
  text-decoration:none;
  font-weight:600;
  padding:6px 8px;
  border-radius:6px;
}
.footer-link:hover{ text-decoration:underline; }
.footer-link:focus{
  outline:2px solid rgba(255,0,0,.25);
  outline-offset:2px;
}

/* 2 columns on small/medium, 4 on desktop */
@media (min-width: 520px){
  .footer-nav{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px){
  .footer-nav{ grid-template-columns: repeat(4, 1fr); }
}

/* ===== Optional CTA buttons ===== */
.footer-cta{
  display:flex;
  gap:10px;
  justify-content:center;
  margin:6px 0 16px;
}
.footer-btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:9999px;
  font-weight:700;
  text-decoration:none;
  border:1px solid #ff0000;
}
.footer-btn.fill{ background:#ff0000; color:#fff; }
.footer-btn.fill:hover{ background:#e00000; }
.footer-btn.outline{ background:#fff; color:#ff0000; }
.footer-btn.outline:hover{ background:#ff0000; color:#fff; }

/* ===== Bottom line ===== */
.footer-bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#666;
  font-size:14px;
  text-align:center;
}