/* ============================================================
   Places — modern design layer (2026)   [PM-BUILD-2]
   A clean, airy travel-guide refresh over the existing markup.
   Loaded LAST so it wins. No markup changes. Self-hosted only.
   ============================================================ */

:root {
  --accent: #0ea5e9;          /* airy sky blue */
  --accent-dark: #0284c7;
  --accent-light: #38bdf8;
  --ink: #17212e;             /* body text */
  --muted: #5b6b7d;
  --faint: #8a97a6;
  --line: #e6ebf1;
  --line-strong: #d7dee7;
  --panel: #f3f7fb;           /* light section / half-panel */
  --footer-bg: #0f1a27;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16,32,54,.05), 0 8px 24px rgba(16,32,54,.06);
  --shadow-hover: 0 18px 40px rgba(16,32,54,.14);
  --maxw: 1160px;
}

/* ---------- base ---------- */
body {
  font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
}
a { transition: color .18s ease; }
::selection { background: var(--accent); color: #fff; }
::-moz-selection { background: var(--accent); color: #fff; }
.container { max-width: var(--maxw); }

/* tighten the theme's very-tall section rhythm a touch */
.probootstrap_section { padding: 5.5em 0; }
.probootstrap_section.bg-light { background: var(--panel) !important; }

/* ---------- navbar ---------- */
.probootstrap_navbar .navbar-brand {
  letter-spacing: .28em; font-weight: 600; color: #fff;
}
.probootstrap_navbar .nav-item .nav-link {
  color: rgba(255,255,255,.82) !important; font-weight: 500;
  position: relative;
}
.probootstrap_navbar .nav-item .nav-link:hover,
.probootstrap_navbar .nav-item.active .nav-link,
.probootstrap_navbar .nav-item .nav-link.active { color: #fff !important; }
@media (min-width: 992px) {
  .probootstrap_navbar .nav-item .nav-link::after {
    content: ""; position: absolute; left: 1em; right: 1em; bottom: .85em; height: 2px;
    background: var(--accent-light); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
  }
  .probootstrap_navbar .nav-item:hover .nav-link::after,
  .probootstrap_navbar .nav-item.active .nav-link::after,
  .probootstrap_navbar .nav-item .nav-link.active::after { transform: scaleX(1); }
}
.probootstrap_navbar.scrolled {
  background: rgba(15,26,39,.92) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(9,15,25,.28);
}

/* ---------- hero cover ---------- */
.probootstrap-cover { padding: 8em 0 6em; }
.probootstrap-cover .overlay {
  background: linear-gradient(165deg, rgba(11,20,33,.58) 0%, rgba(10,26,46,.46) 45%, rgba(6,14,26,.72) 100%) !important;
}
.probootstrap-cover > .container > .row { padding: 4.5em 0; }
.probootstrap-cover h2.heading { letter-spacing: -.015em; text-shadow: 0 2px 24px rgba(0,0,0,.28); }
.probootstrap-cover .lead { color: rgba(255,255,255,.82) !important; }
.probootstrap-cover .lead a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* hero search form → softer, rounder card */
.probootstrap-form {
  border-radius: var(--radius); box-shadow: var(--shadow-hover);
  padding: 36px !important;
}
.probootstrap-form .form-control,
.probootstrap-form .form-select {
  border-radius: var(--radius-sm) !important; border: 1px solid var(--line-strong) !important;
}
.probootstrap-form .form-control:focus,
.probootstrap-form .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,.15) !important;
}
.probootstrap-form .form-group label { color: var(--muted); letter-spacing: .08em; }

/* ---------- buttons ---------- */
.btn { border-radius: 50px; font-weight: 500; letter-spacing: .12em; }
.btn.btn-primary,
.btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active,
.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-dark) !important; border-color: var(--accent-dark) !important;
  box-shadow: 0 8px 22px rgba(14,165,233,.28) !important;
}
.btn-block { display: block; width: 100%; }   /* BS5 dropped .btn-block */

/* ---------- section headings + accent underline ---------- */
.probootstrap-section-heading {
  font-size: clamp(1.85rem, 2.5vw, 2.35rem); font-weight: 400 !important;
  letter-spacing: -.01em; color: var(--ink);
}
.border-bottom:after {
  background: var(--accent) !important; width: 64px !important; height: 3px !important;
  border-radius: 3px;
}

/* ---------- city-guide thumbnails → gradient-caption photo cards ---------- */
.probootstrap-thumbnail {
  position: relative; display: block; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3;
  opacity: 1 !important;
}
.probootstrap-thumbnail img {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  object-fit: cover; z-index: 0 !important;
  transition: transform .55s ease !important; box-shadow: none !important;
}
.probootstrap-thumbnail:hover img { transform: scale(1.07) !important; }
.probootstrap-thumbnail::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,16,28,.86) 0%, rgba(8,16,28,.22) 46%, rgba(8,16,28,0) 72%);
}
.probootstrap-thumbnail .probootstrap-text,
.probootstrap-thumbnail > h3 {
  position: absolute !important; left: 0; right: 0; bottom: 0 !important; z-index: 2;
  margin: 0 !important; padding: 16px 18px 15px; text-align: left;
  opacity: 1 !important; visibility: visible !important;
}
.probootstrap-thumbnail h3 {
  color: #fff !important; font-size: 1.3rem; font-weight: 500 !important;
  margin: 0 !important; letter-spacing: .005em; text-shadow: 0 1px 10px rgba(0,0,0,.35);
  opacity: 1 !important; visibility: visible !important; bottom: 0 !important;
}

/* ---------- split half sections ---------- */
.probootstrap-section-half .probootstrap-text { background: var(--panel); }
.probootstrap-section-half .probootstrap-text .probootstrap-inner { padding: 5.5em; }
.probootstrap-section-half .probootstrap-text h2.heading { color: var(--ink); letter-spacing: -.01em; }
.probootstrap-section-half .probootstrap-text p { color: var(--muted); }
@media (max-width: 991px) {
  .probootstrap-section-half .probootstrap-text .probootstrap-inner { padding: 3em; }
}

/* ---------- media / service / news cards ---------- */
.probootstrap-media {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  background: #fff; transition: box-shadow .25s ease, transform .25s ease;
}
.probootstrap-media:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.probootstrap-media .probootstrap-media-image { transition: transform .55s ease; }
.probootstrap-media:hover .probootstrap-media-image { transform: scale(1.06); }
.probootstrap-media.d-block img { transition: transform .55s ease; }
.probootstrap-media.d-block { display: block; }
.probootstrap-media.d-block:hover img { transform: scale(1.05); }
.probootstrap-media .media-body { padding: 1.8em !important; }
.probootstrap-media .media-body h5 { font-weight: 500 !important; color: var(--ink); letter-spacing: -.005em; }
.probootstrap-media .media-body p { color: var(--muted); }
.probootstrap-media .media-body > span.text-uppercase {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  color: var(--accent-dark); margin-bottom: 6px;
}
.probootstrap-media .media-body a { color: var(--accent-dark); font-weight: 500; }
.probootstrap-media .media-body a:hover { color: var(--accent); }

/* ---------- landmark icon slides (owl → scroll-snap) ---------- */
.owl-carousel .probootstrap-slide {
  border: 1px solid var(--line) !important; border-radius: var(--radius);
  background: #fff; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.owl-carousel .probootstrap-slide:hover,
.owl-carousel .probootstrap-slide:focus {
  border-color: transparent !important; box-shadow: var(--shadow-hover) !important;
}
.owl-carousel .probootstrap-slide span { color: var(--ink); }
.owl-carousel .probootstrap-slide:hover span,
.owl-carousel .probootstrap-slide:focus span { color: var(--accent) !important; }
.owl-carousel .probootstrap-slide em { color: var(--muted); }
.owl-carousel .owl-dots .owl-dot.active { background: var(--accent); }

/* ---------- testimonial ---------- */
#section-feature-testimonial blockquote { position: relative; }
#section-feature-testimonial blockquote p.lead {
  font-size: 1.28rem; line-height: 1.7; color: #2b3846;
}
#section-feature-testimonial .probootstrap-author img {
  border: 3px solid #fff; box-shadow: 0 6px 18px rgba(16,32,54,.16);
}
#section-feature-testimonial .probootstrap-author .probootstrap-name { color: var(--ink) !important; }
#section-feature-testimonial .probootstrap-author .probootstrap-title { color: var(--accent-dark) !important; }

/* ---------- contact ---------- */
.probootstrap-contact-details li > span { color: var(--accent-dark) !important; font-weight: 600 !important; }
.probootstrap-contact-details li { color: var(--muted); }
.probootstrap-form .form-control:hover { border-color: var(--accent-light) !important; }

/* ---------- footer → polished dark ---------- */
footer.probootstrap_section {
  background: var(--footer-bg) !important; color: #b7c4d2;
  padding: 4.5em 0 2.2em !important;
}
.probootstrap-border-top { border-top: 0 !important; }
footer.probootstrap_section h3 {
  color: #fff !important; font-weight: 600 !important; font-size: 1rem !important;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1.1em !important;
}
footer.probootstrap_section a { color: #9db0c2; }
footer.probootstrap_section a:hover { color: var(--accent-light); }
footer.probootstrap_section ul li { margin-bottom: .45em; }
footer.probootstrap_section .row.pt-5 {
  border-top: 1px solid rgba(255,255,255,.09); margin-top: 1.2em; padding-top: 2em !important;
}
footer.probootstrap_section .row.pt-5 p,
footer.probootstrap_section small { color: #7f8ea0; }
footer.probootstrap_section .row.pt-5 a { color: #9db0c2; text-decoration: underline; text-underline-offset: 2px; }
footer.probootstrap_section .row.pt-5 a:hover { color: var(--accent-light); }

/* ---------- reveal guard (probootstrap-animate) ---------- */
.probootstrap-animated { opacity: 1 !important; visibility: visible !important; }

/* ---------- responsive ---------- */
@media (max-width: 767.98px) {
  .probootstrap_section { padding: 3.5em 0; }
  .probootstrap-cover > .container > .row { padding: 2.5em 0; }
  .probootstrap-thumbnail { aspect-ratio: 16 / 10; }
}