/*
  agency-overrides.css
  Site-specific overrides for The Agency Anguilla
  Loaded AFTER style.css to ensure correct cascade
*/

/* ── SECTION MENU PANEL BACKGROUND IMAGES (BUG-05) ─────────────────
   The CSS .section-menu.secmenu-type-1 .main-section-menu li:nth-child()
   rules are in style.css but reference ../images/X.jpg which are now patched
   to use /images/X.jpg. These overrides ensure they use our actual images.
*/
.section-menu.secmenu-type-1 .main-section-menu li:nth-child(1) {
  background-image: url('/images/water-sports.jpg');
}
.section-menu.secmenu-type-1 .main-section-menu li:nth-child(2) {
  background-image: url('/images/lobster-feast.jpg');
}
.section-menu.secmenu-type-1 .main-section-menu li:nth-child(3) {
  background-image: url('/images/beach-couple.jpg');
}
.section-menu.secmenu-type-1 .main-section-menu li:nth-child(4) {
  background-image: url('/images/luxury-resort.jpg');
}

/* ── SERVICEBOX-FIRST BACKGROUND (BUG-11) ───────────────────────────
   .servicebox-first already patched in style.css to captain-champagne.jpg
   These properties ensure the overlay renders correctly.
*/
.servicebox-first {
  background-color: rgba(7, 28, 78, 0.5);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center center;
}

/* ── FOOTER NEWSLETTER BACKGROUND (BUG-12) ─────────────────────────
   style.css patched to use beach-resort.jpg.
   Ensure text colors work over the photo.
*/
.h-newslatter {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.h-newslatter .footer-box h2,
.h-newslatter .thm-h h2 {
  color: #fff;
}

/* ── TESTIMONIAL BG (BUG-13) ───────────────────────────────────────
   Removes broken testimonial_bg.png reference.
   Already patched in style.css to "none".
*/

/* ── BUG-16 FIX: Navbar brand text sizing ──────────────────────────
   "THE AGENCY" is longer than "YAWL". Set font-size down slightly so
   the brand element doesn't overflow or push the nav items.
*/
.navbar-brand span {
  font-size: 0.75em;
  letter-spacing: 0.08em;
}

/* ── BUG-08 FIX: Service box <i> icon hover animation ──────────────
   Matches the .servicebox img hover animation from the original template.
   Original: .servicebox img { top:0; transition: all .4s }
             .servicebox:hover img { top: -45px; transition: all .3s }
*/
.servicebox i {
  display: block;
  position: relative;
  top: 0;
  transition: all .4s;
  color: #3aa6f5;
  font-size: 2.5rem;
  height: 45px;
  line-height: 45px;
}
.servicebox:hover i {
  top: -45px;
  transition: all .3s;
}

/* ── COMPASS DOWN ARROW (BUG-14) ───────────────────────────────────
   Provides a visible downward arrow for the compass navigation anchor.
   Original used ../images/down.png (a 24x30px downward arrow image).
*/
.compass .navigation_a a::after {
  background-image: url('/images/down.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  content: "";
  display: block;
  width: 24px;
  height: 30px;
  position: absolute;
  bottom: -13px;
  z-index: 99999;
  left: 0;
  right: 0;
  margin: auto;
}

/* ── PRELOADER (BUG-10) ─────────────────────────────────────────────
   Original: background: transparent (the outer .y-loading div)
   The .y-loading CSS in style.css sets background: rgba(255,255,255,0.9)
   which is correct. No additional override needed.
*/

/* ── HISTORY SECTION circle backdrop fix ────────────────────────────
   The .h-our-history-2 .half-left CSS sets min-height automatically
   via the ::before pseudo and absolute img positioning.
   Ensure the column has relative positioning for this to work.
*/
#h-our-history-2 .half-left,
.half-section.main-section.h-our-history-2 .half-left {
  position: relative;
  min-height: 350px;
}

/* ── HERO — no inline overlay div means ::after handles everything ───
   Ensure z-index layering is correct: img behind ::after behind content.
   The .header-home-1::after already sets z-index correctly in style.css.
   This just makes the bg image itself sit below the pseudo overlay.
*/
.header-home-1 {
  background-position: center center;
  background-size: cover;
}

/* ── LOGO IMAGE SIZING IN NAV ───────────────────────────────────────
   nb-light (default): max-width 80px per design bible
   nb-dark (scrolled): max-width 30px per design bible
   Logo is a PNG with transparent bg — let it display at natural ratio.
*/
.menu-1 .nb-light {
  max-width: 80px;
  max-height: 55px;
  object-fit: contain;
}
.menu-1.menu-1-scrolled .nb-dark {
  max-width: 50px;
  max-height: 40px;
  object-fit: contain;
}

/* ── INSTAGRAM SECTION — ensure MagicScroll wrapper heights are correct ──
   MagicScroll sets its own height via JS, but the outer col needs
   to allow overflow for the 3D cover-flow effect.
*/
.instagram-wrap {
  position: relative;
}