/*----------------------------------------------
*
* Tag2Travel brand overrides for the sApp template
* Loaded after style.css — only redeclares the CSS
* custom properties + a handful of rules the vendor
* file hardcodes, so the vendor file itself is never
* touched. Colors/fonts sourced from
* helpfile/tag2travel-brand-colors.html.
*
----------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --primary-font: "Nunito", sans-serif;
  --secondary-font: "Inter", sans-serif;

  --header-bg-color: #1B3A5B;
  --footer-bg-color: #1B3A5B;
  --nav-item-color: #1B3A5B;
  --top-nav-item-color: #F9F9F9;

  --primary-color: #F27C2E;
  --secondary-color: #2A8B8B;

  --white-color: #FFFFFF;
  --black-color: #0F1B29;
  --grey-color: #F1F3F5;
  --dark-grey-color: #163049;

  --primary-t-color: #1B3A5B;
  --secondary-t-color: #F9F9F9;
  --primary-p-color: #52606D;
  --secondary-p-color: #E4E7EB;
  --primary-b-color: #F1F3F5;

  --primary-bg-color: #FFFFFF;
  --primary-bg-color-2: #F7F8FA;
  --primary-bg-color-3: #E4E7EB;
  --secondary-bg-color: #0F1B29;
  --secondary-bg-color-2: #112538;
  --secondary-bg-color-3: #163049;
  --card-bg-color: #112538;
}

/* The template's default badge fill (#e5e6f6, a leftover purple tint) —
   swap for the brand teal tint so pills/badges read as on-brand. */
a.badge:not(.btn):not(.outlined),
.badge:not(.outlined) {
  background-color: #EAF6F6;
  color: #175454;
}

/* Hero background image is a broken/missing template asset — replace
   with a solid brand navy instead of leaving it blank. The template's own
   ".shapes-container" painted a full-bleed white layer *on top* of this
   (meant to show only through the diagonal cut-out shape), which is what
   was hiding the navy and making the white nav text unreadable — drop it
   to transparent so the navy actually shows. */
.hero-section.layout-2 {
  background-image: none;
  background-color: #1B3A5B;
}

/* A group of travellers on an adventure (same photo the Angular app's own
   splash page uses) as the hero backdrop — tinted with the brand navy
   (not a generic dark/black gradient) so it reads as a background texture
   behind the content, not the main visual. */
.hero-section.layout-1 {
  background-image: url("../img/content/splashpeople.webp");
  background-size: cover;
  background-position: center 70%;
  background-color: #1B3A5B;
}
.hero-section.layout-1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgb(27 58 91 / 19%) 0%, rgb(27 58 91 / 0%) 35%, rgb(20 44 69 / 0%) 65%, rgb(12 27 41) 100%), linear-gradient(90deg, rgb(27 58 91 / 55%) 0%, rgb(27 58 91 / 15%) 55%, rgb(27 58 91 / 42%) 100%);
}
.hero-section.layout-2 .shapes-container {
  background-color: transparent;
}
/* The diagonal accent shape sits in a stacking context that paints over
   the hero image once it's a solid color instead of a translucent
   gradient — simpler and cleaner to drop it and keep the flat navy hero. */
.hero-section.layout-2 .bg-shape {
  display: none;
}

/* Headings/body text on the hero default to the same navy as the new
   solid hero background (invisible navy-on-navy) — the template expected
   a light photo background here, not a solid dark one. */
.hero-content h1,
.hero-content .sub-heading,
.hero-content .free-note {
  color: #FFFFFF;
}
.hero-content .sub-heading {
  color: rgba(255, 255, 255, 0.85);
}

/* Solid colors, not gradients — the template defaults every .btn and the
   ".overlay-gradient" decorative panels to a diagonal two-color gradient;
   swap both for flat brand colors instead. */
.btn {
  background-image: none;
  background-color: var(--primary-color);
}
.btn:not(.btn-bordered):not(.btn-bordered-white):hover,
.btn:not(.btn-bordered):not(.btn-bordered-white):focus {
  background-color: var(--secondary-color);
  color: #FFFFFF;
}
.btn.btn-bordered::before {
  background-image: none;
  background-color: var(--secondary-color);
}
.has-overlay.overlay-gradient::after {
  background: var(--secondary-color);
}

/* The template's own logo.png had no CSS size rule anywhere — it just
   happened to already be nav-sized. Our real logo is a 500x500 master, so
   it needs an explicit cap or it renders at native size and swamps the
   header. */
.navbar-brand img {
  height: 64px;
  width: auto;
}
.footer-items .navbar-brand img {
  height: 68px;
  width: auto;
}

/* Real device screenshots dropped into the template's thumb/slide
   placeholders — these are full-height phone screenshots (~2:1, up to
   1500px tall), not the small pre-sized mockup images the template
   shipped with, so they need an explicit cap or they blow out the row
   height of whatever flex/grid column they sit in. */
.hero-thumb img {
  max-width: 760px;
  width: 100%;
  height: auto;
}
.content-thumb img {
  max-height: 440px;
  width: auto;
  max-width: 100%;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(15, 27, 41, 0.28);
}


.content-thumbs img {
  max-height: 440px;
  width: auto;
  max-width: 100%;
  border-radius: 22px;
}

.app-screenshots-slides .swiper-slide img {
  max-height: 440px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 22px;
  /* box-shadow: 0 24px 60px rgba(15, 27, 41, 0.28); */
}

/* "Get the app" store buttons (icon + label, not template badge images). */
.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.store-buttons.align-start {
  justify-content: flex-start;
}
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 14px;
  background: #FFFFFF;
  color: #1B3A5B;
  font-family: var(--primary-font);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid #E4E7EB;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.store-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 27, 41, 0.18);
  color: #1B3A5B;
}
.store-btn i {
  font-size: 1.5rem;
}
.store-btn .store-btn-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}
.store-btn .store-btn-copy small {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.75;
}
.store-btn.on-dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}
.store-btn.on-dark:hover {
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.free-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.9;
}

/* About / Safety / Contact anchor blocks */
.info-block + .info-block {
  margin-top: 56px;
}
.info-block h3 {
  color: var(--primary-t-color);
}
.contact-channels {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}
.contact-channels li a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-t-color);
  font-weight: 700;
  text-decoration: none;
}
.contact-channels li a:hover {
  color: var(--secondary-color);
}
.contact-channels li i {
  font-size: 1.2rem;
  color: var(--secondary-color);
}

/* Swiper core layout rules — the template's own vendor/slider.min.css
   never actually downloaded (an empty 0-byte file misnamed .html, one of
   several broken assets from an incomplete site mirror); without this the
   carousel's slides stack as plain block <div>s instead of a horizontal
   track, blowing the screenshots section out to several thousand pixels
   tall. This is the minimal structural subset Swiper's JS depends on —
   it applies per-slide width/transform inline itself. */
.swiper-container {
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

/* Prev/next arrows — Swiper's JS wires the click handlers itself once it
   finds these classes; only the visual button is ours to style. */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--primary-t-color);
  box-shadow: 0 8px 20px rgba(15, 27, 41, 0.18);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.swiper-button-prev {
  left: -6px;
}
.swiper-button-next {
  right: -6px;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: var(--primary-color);
  color: #FFFFFF;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 575px) {
  /* Give the arrows their own strip on each side instead of overlapping the
     screenshot, so the slide image stays centered between them. */
  .app-screenshots-slides .swiper-container {
    padding: 0 40px;
  }
  .swiper-button-prev,
  .swiper-button-next {
    width: 34px;
    height: 34px;
    margin-top: -17px;
  }
  .swiper-button-prev {
    left: 0;
  }
  .swiper-button-next {
    right: 0;
  }
}
.swiper-pagination {
  position: relative;
  margin-top: 24px;
  text-align: center;
  z-index: 2;
}
.swiper-pagination-bullet {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 4px;
  border-radius: 50%;
  background: var(--primary-bg-color-3);
  opacity: 1;
  cursor: pointer;
}
.swiper-pagination-bullet-active {
  background: var(--primary-color);
}