/* ==========================================================================
   TOURISMUS redesign — sitewide chrome override
   Loaded after star.css. Palette + typography tokens sampled from the
   approved mockup (New Tourismus.jpg). Component styling for individual
   homepage widgets lives in each widget's own blade <style> block.
   ========================================================================== */

:root {
  --tm-navy: #1c232c;
  --tm-navy-light: #262f3b;
  --tm-gold: #b9833b;
  --tm-gold-dark: #9c6e30;
  --tm-cream: #f4f0ec;
  --tm-cream-dark: #ece5db;
  --tm-ink: #1c232c;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Montserrat', Roboto-Regular, Arial, sans-serif;
}

html {
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  background-color: var(--tm-cream);
  /* the homepage's bootstrap grid rows (with_container.blade.php) use
     .container-fluid with 0 padding, which leaves Bootstrap's default
     .row{margin:0 -15px} uncounteracted - every row bleeds 15px past the
     viewport on both sides, creating an unwanted horizontal scrollbar
     sitewide. Hiding x-overflow here is the safe fix (rows still bleed
     internally, it's just clipped) rather than touching the shared
     row/col markup that every page depends on. */
  overflow-x: hidden;
}

h1, h2, h3,
.section-title h2,
.section-title2 h2 {
  font-family: var(--font-serif);
}

/* -------------------- Buttons / brand color -------------------- */

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: var(--tm-gold);
  border-color: var(--tm-gold);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: var(--tm-gold-dark);
  border-color: var(--tm-gold-dark);
  box-shadow: 0 0 0 0.2rem rgba(185, 131, 59, 0.35);
}

.bg-primary {
  background-color: var(--tm-gold) !important;
}

.text-primary,
a.text-primary:hover,
a.text-primary:focus {
  color: var(--tm-gold) !important;
}

.btn-outline-dark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  background-color: transparent;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
  color: var(--tm-navy);
  background-color: #fff;
  border-color: #fff;
}

/* Header/nav styling now lives entirely in header_section.blade.php's own
   <style> block (.site-header/.site-nav/...) - it's a standalone redesign
   that intentionally doesn't reuse star.css's .nav-menuzord/.menuzord-menu
   classes, so there's nothing for a sitewide override to target here. */

/* -------------------- Footer -------------------- */

.bg-theme-dark,
.footer .footer-bg-color,
.footer-2 .footer-bg-color,
.copyright.footer-bg-color {
  background-color: var(--tm-navy) !important;
}

/* The footer description/nav/contact widgets each paint their own navy
   background, but only inside their own content box - the Bootstrap
   column gutters between them, and the Bootstrap spacing utility classes
   (mb-7, mt-lg-4, py-9, etc.) the CMS attaches to each widget div, all sit
   outside that box and show the cream page background through as seams.
   Painting navy on the containing row instead closes every gap in one
   place, regardless of whichever gutter/margin classes CMS data attaches
   to the widgets nested inside. */
.container-fluid:has(> .row > .col-md-4 > .tourismus-footer-desctiption),
.container-fluid:has(> .row > .col-md-4 > .tourismus-footer-contact) {
  background-color: var(--tm-navy);
}

/* -------------------- Full width (desktop) --------------------
   Several homepage sections and the sitewide footer wrap their content in
   Bootstrap's standard .container (capped ~1170px, centered), which reads
   inconsistently next to the sections already running edge-to-edge. This
   widens just those known sections rather than every .container sitewide
   (article body text, the contact form, etc. still want a readable
   measure, not full bleed), and only at desktop widths per the brief. */
@media (min-width: 992px) {
  .tourismus-discover-namibia > .container,
  .tourismus-latest-posts > .container,
  .tourismus-latest-videos > .container,
  .tourismus-promo-cards > .container,
  .site-footer-newsletter > .container,
  .site-footer-main > .container,
  .site-footer-contact > .container,
  .copyright.footer-bg-color > .container {
    max-width: 100%;
    padding-left: 40px;
    padding-right: 40px;
  }

  /* The "page title" banner (contact page, and anywhere else that reuses
     tourismus-mini-hero) is just a centered heading over a background
     image - widening it is purely cosmetic and matches the rest of the
     site. Deliberately NOT widening .container generally: the contact
     page's actual form sits in this same widget file lower down, and a
     multi-field form spread across 1800px+ would hurt usability rather
     than help consistency, so that section keeps its normal measure. */
  .page-title > .container {
    max-width: 100%;
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* ==========================================================================
   Design pass (responsive + polish)
   ========================================================================== */

@media (max-width: 767px) {
  /* Five empty "ADVERTISING SPACE" boxes stacked in a phone-width column
     read as a broken page, not as advertising. Live creative (the
     -live variant) is unaffected. */
  .tourismus-ad-placeholder {
    display: none;
  }
}

/* Headlines: balanced wrapping, no orphan word on the last line. */
h1, h2, h3,
.section-title h2,
.section-title2 h2 {
  text-wrap: balance;
}

/* Visible keyboard focus, brand-coloured, on every interactive element. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--tm-gold);
  outline-offset: 3px;
}

/* Respect OS-level motion reduction (carousel auto-advance is also stopped
   in tourismus-featured-story.blade.php). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}