/* =========================================
   GLOBAL DIVISION STYLES (shared by all)
   ========================================= */
/* === Base Heading Style === */
h1 { color: #790014; }

/* === Header / Topbar Customizations === */
body.itemid-138 .header.container-header {
  background-color: #009592 !important;
  border-bottom: 3px solid #007a74;
}
.header.container-header,
.header.container-header a,
.header.container-header .mod-menu a,
.header.container-header .mod-menu span,
.header.container-header .brand,
.header.container-header .site-description,
.header.container-header .navbar-toggler,
.header.container-header .icon {
  color: #fff; fill: #fff; stroke: #fff;
}
.header.container-header .navbar-toggler { border-color: rgba(255,255,255,0.4); }
.header.container-header .navbar-brand img { max-height: 60px; width: auto; }
.navbar-brand .brand-link { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.navbar-brand .brand-logo { height: 50px; width: auto; }
.header.container-header .brand-text { display: inline-block; font-size: 1.2rem; font-weight: bold; color: #fff; margin-left: 10px; }

/* Menu links */
.header.container-header .mod-menu a { font-weight: 500; padding: 0.5rem 1rem; }
.header.container-header .mod-menu a:hover { background-color: rgba(255,255,255,0.15); border-radius: 4px; }

/* === Division Buttons === */
.division-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: bold;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.division-btn:hover { background-color: #b7b7b7; color: #000; transform: translateY(-2px); }

/* Division-specific button colors */
.btn-meetmarco { background-color: #009592; }
.btn-goshopping,
.btn-shop { background-color: #3b3b3b; }   /* alias fix */
.btn-bookings  { background-color: #112855; }
.btn-overview  { background-color: #00e5ce; }

.btn-goshopping:hover,
.btn-shop:hover {
  background-color: #b7b7b7;
  color: #000;
}

/* === MAIN MENU BUTTONS (GLOBAL) === */

/* Default button style for ALL menu links */
.mod-menu a {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: bold;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  background-color: #666; /* lighter grey for non-branded buttons */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover effect for all buttons */
.mod-menu a:hover {
  background-color: #b7b7b7;
  color: #000;
  transform: translateY(-2px);
}

/* === SIDEBAR-RIGHT MENU SPACING === */
.sidebar-right .mod-menu a {
  display: block;              /* stack vertically */
  margin: 4px 0;               /* breathing room between buttons */
  text-align: center;          /* center text inside buttons */
}

/* === BRANDED OVERRIDES (higher specificity than .mod-menu a) === */
.mod-menu a.btn-meetmarco   { background-color: #009592; }
.mod-menu a.btn-goshopping,
.mod-menu a.btn-shop        { background-color: #3b3b3b; }
.mod-menu a.btn-bookings    { background-color: #112855; }
.mod-menu a.btn-overview    { background-color: #00e5ce; }

/* Hover states for branded buttons (keep consistent hover) */
.mod-menu a.btn-meetmarco:hover,
.mod-menu a.btn-goshopping:hover,
.mod-menu a.btn-shop:hover,
.mod-menu a.btn-bookings:hover,
.mod-menu a.btn-overview:hover {
  background-color: #b7b7b7;
  color: #000;
}

/* === Division Topbars (shared) === */
.division-topbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  padding: 0.5rem 0.25rem;
  column-gap: 1rem;
  color: #fff;
}
.division-topbar .topbar-logo { display: flex; flex-direction: row; align-items: center; }
.division-topbar .topbar-logo img { max-height: 120px; width: auto; display: block; }
.spoken-text {
  font-family: 'Dancing Script', cursive;
  font-size: 2.1rem;
  font-weight: 600;
  color: #fff;
  margin-left: -0.3rem;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.division-topbar .topbar-links { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 0.6rem; }
.division-topbar .topbar-btn {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  transition: background-color 0.3s ease, color 0.2s ease;
}
.division-topbar .topbar-btn:hover { background-color: #b7b7b7; color: #000; }

/* Responsive tweaks for topbar */
@media (max-width: 992px) {
  .division-topbar .topbar-logo img { max-height: 100px; }
  .spoken-text { font-size: 1.6rem; }
  .division-topbar .topbar-btn { font-size: 0.75rem; padding: 0.3rem 0.6rem; }
}
@media (max-width: 500px) {
  .division-topbar { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .division-topbar .topbar-links { justify-content: center; }
  .division-topbar .topbar-logo { justify-content: center; }
  .spoken-text { margin-left: 0.2rem; font-size: 1.4rem; }
  .division-topbar .topbar-logo img { max-height: 80px; }
}

/* Topbar link-item stacking + hover */
.division-topbar .topbar-links .topbar-link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.division-topbar .topbar-links .topbar-link-item img {
  display: block;
  max-width: 60px;
  height: auto;
  margin-bottom: -12px;
  z-index: 1;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.division-topbar .topbar-links .topbar-link-item .topbar-btn { position: relative; z-index: 2; }
.division-topbar .topbar-links .topbar-link-item:hover img {
  transform: translateY(-4px) scale(1.05);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.6));
}

/* === Footer Grid & Shared Elements === */
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 0.4rem; }
.footer-block h4 {
  font-size: 1.1rem; margin-bottom: 0.5rem; color: #fff;
  border-bottom: 5px solid #39ff14; display: inline-block; padding-bottom: 0.3rem;
}
.company-address { font-style: normal; color: #ccc; margin-top: 0.5rem; line-height: 1.2; font-size: 0.85rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.footer-bottom {
  text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 0.2rem; font-size: 0.8rem; color: #aaa; margin-top: 0.2rem;
}

/* === Unified Booking Button Styles === */
.btn-booking, .footer-btn, .booking-btn {
  flex: 1 1 30%; text-align: center; padding: 0.5rem 0.9rem;
  border-radius: 4px; font-size: 0.9rem; text-decoration: none;
  color: #fff; background: rgba(255,255,255,0.4);
  border: 1.5px solid rgba(255,255,255,0.6);
  transition: all 0.5s ease; display: inline-block;
}
.btn-booking:hover, .footer-btn:hover, .booking-btn:hover {
  background: #1cb500; color: #000; border-color: #39ff14;
}

/* === Division-Specific Button Colors === */
.meetmarco-btn { background-color: #790014; }
.goshopping-btn { background-color: #535353; }
.bookings-btn  { background-color: #112855; }
.overview-btn  { background-color: #009592; }
.meetmarco-btn:hover, .goshopping-btn:hover, .bookings-btn:hover, .overview-btn:hover {
  background-color: #1cb500; color: #000;
}

/* === Base Banner Styling === */
.banner {
  position: relative;
  width: 100%;
  height: 280px;              /* adjust as needed */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
}

/* Inner content wrapper */
.banner__content {
  position: relative;         /* ensures text sits above overlay */
  z-index: 1;
  padding: 1rem;
}

/* Headings inside banners */
.banner__content h1,
.banner__content h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
}

/* Links inside banners */
.banner__content a {
  color: #fff;
  font-weight: 600;
  margin: 0 0.5rem;
  text-decoration: none;
}
.banner__content a:hover {
  text-decoration: underline;
}

.banner__content { 
  position: relative; 
  z-index: 1; 
  padding: 1rem; 
}
.banner__content h1,
.banner__content h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
}
.banner__content a {
  color: #fff;
  font-weight: 600;
  margin: 0 0.5rem;
  text-decoration: none;
}
.banner__content a:hover { text-decoration: underline; }

/* === Division‑wide chrome (topbar, footer, sidebar) === */
body.bookings-division .bookings-topbar { … }
body.bookings-division .bookings-footer { … }
body.bookings-division .sidebar-right { … }

/* === Pulse animation (generic, unified) === */
@keyframes pulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) scale(1.15);
    opacity: 0.9;
  }
}

/* === Glossy background shift animation (GLOBAL) === */
@keyframes glossyShift {
  0%   { background-position: bottom; }
  100% { background-position: top; }
}

/* Meet Marco glossy footer */
body.meetmarco-division footer.container-footer.footer.full-width {
  background-image: linear-gradient(to top, #490202 0%, #d20003 100%) !important;
  background-size: 100% 200% !important;
  background-repeat: no-repeat !important;
  animation: glossyShift 4s ease-in-out infinite alternate !important;
}

/* GoShopping glossy footer */
body.goshopping-division footer.container-footer.footer.full-width {
  background-image: linear-gradient(to top, #313131 0%, #9d9d9d 100%) !important;
  background-size: 100% 200% !important;
  background-repeat: no-repeat !important;
  animation: glossyShift 4s ease-in-out infinite alternate !important;
}

/* Bookings glossy footer */
body.bookings-division footer.container-footer.footer.full-width {
  background-image: linear-gradient(to top, #112855 0%, #0245c8 100%) !important;
  background-size: 100% 200% !important;
  background-repeat: no-repeat !important;
  animation: glossyShift 4s ease-in-out infinite alternate !important;
}

/* === BOOKINGS DIVISION POLISH === */

/* Topbar shimmer */
body.bookings-division .bookings-topbar {
  background-image: linear-gradient(to top, #112855 0%, #0245c8 100%);
  background-size: 100% 200%;
  background-repeat: no-repeat;
  animation: glossyShift 1.5s ease-in-out infinite alternate;
  color: #fff;
}

/* Banner background overlay */
body.bookings-division .bookings-banner {
  background: linear-gradient(to bottom, rgba(17,40,85,0.9), rgba(2,69,200,0.7)),
              url('/images/bookings-bg.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
}

/* Banner buttons alignment */
body.bookings-division .bookings-banner .banner-buttons {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Pulse effect for primary CTA */
body.bookings-division .bookings-banner .pulse-btn {
  animation: pulse 2.5s infinite;
}

/* =========================================
   MEET MARCO DIVISION
   ========================================= */
body.meetmarco-division .banner-meet-marco {
  background: url('/images/banners/meet-marco.jpg') center/cover no-repeat;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
body.meetmarco-division .banner-meet-marco .welcome-message {
  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
  margin-bottom: 25px;
  background-color: rgba(0,0,0,0.4);
  padding: 0.5em 1em;
  border-radius: 6px;
  display: inline-block;
}
body.meetmarco-division .banner-meet-marco .banner-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
body.meetmarco-division .meetmarco-topbar {
  background: linear-gradient(to bottom, #490202 0%, #d20003 100%);
  background-size: 100% 200%;
  animation: glossyShift 2s ease-in-out infinite alternate;
}
body.meetmarco-division .banner--marco {
  background-image: url('/images/banners/meetmarco.jpg');
}

/* === FIRST QUARTER BREAK === */

/* =========================================
   GOSHOPPING DIVISION
   ========================================= */
body.goshopping-division .banner-goshopping {
  background: url('/images/banners/shop.jpg') center/cover no-repeat;
  width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  position: relative;
  min-height: 400px;
}
body.goshopping-division .banner-goshopping .banner-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.goshopping-division .banner-goshopping .banner-overlay .overlay {
  width: 70%;
  height: 100%;
  margin: 0 auto;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
}
body.goshopping-division .goshopping-message {
  background-color: rgba(123,123,123,0.8);
  color: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  padding: 15px 25px;
  border-radius: 4px;
  margin-bottom: 15px;
}
body.goshopping-division .category-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 15px;
}
body.goshopping-division .category-links a {
  background-color: #009592;
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s;
}
body.goshopping-division .category-links a:hover { background-color: #007a75; }
body.goshopping-division .category-links a.new-category {
  position: relative;
  background-color: #ff6600;
}
body.goshopping-division .category-links a.new-category::before {
  content: "NEW";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff0000;
  color: #fff;
  font-size: 0.65rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  animation: pulseNew 2s infinite ease-in-out;
}
/* @keyframes pulseNew {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.15); opacity: 0.9; }
} */
body.goshopping-division .category-links a.new-category:hover { background-color: #e05500; }
body.goshopping-division .goshopping-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
body.goshopping-division .goshopping-links a {
  background-color: #535353;
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s;
}
body.goshopping-division .goshopping-links a:hover {
  background-color: #1cb500;
  color: #000;
}
@media (max-width: 768px) {
  body.goshopping-division .goshopping-message { font-size: 1.4rem; margin-bottom: 12px; }
  body.goshopping-division .category-links,
  body.goshopping-division .goshopping-links { flex-direction: column; gap: 8px; }
}
body.goshopping-division .goshopping-topbar {
  background: linear-gradient(to bottom, #313131 0%, #9d9d9d 100%);
  background-size: 100% 200%;
  animation: glossyShift 2s ease-in-out infinite alternate;
}
body.goshopping-division .banner--shop {
  background-image: url('/images/banners/goshopping.jpg');
}
/* Neutralize overlay conflicts */
body.goshopping-division .banner-goshopping .banner-overlay {
  height: auto;
  background-attachment: scroll;
}
body.goshopping-division .banner-goshopping .banner-overlay .overlay {
  width: 70%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================
   BOOKINGS DIVISION
   ========================================= */
body.bookings-division .banner-bookings {
  background: url('/images/banners/book.jpg') center/cover no-repeat;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
body.bookings-division .bookings-message {
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  padding: 12px 20px;
  border-radius: 6px;
  margin-bottom: 20px;
}
body.bookings-division .booking-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
body.bookings-division .booking-links a {
  background-color: rgba(179, 136, 34, 0.6); /* 70% visible, 30% transparent */
  color: #fff; /* text stays sharp */
  padding: 10px 10px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover: solid + subtle lift */
body.bookings-division .booking-links a:hover {
  background-color: rgba(20, 169, 0, 1); /* solid green on hover */
  transform: translateY(-2px);
}


/* Responsive tweaks for Bookings banner */
@media (max-width: 768px) {
  body.bookings-division .banner-bookings {
    min-height: 300px;
    padding: 4px;
    background-position: center, top;
  }
  body.bookings-division .bookings-message {
    font-size: 1.4rem;
    margin-bottom: 12px;
  }
  body.bookings-division .booking-links {
    flex-direction: column;
    gap: 8px;
  }
}
/* === Bookings Banner Buttons (softened) === */
body.bookings-division .bookings-banner-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 15px;
}

body.bookings-division .bookings-banner-buttons .booking-btn {
  background-color: rgba(224, 85, 0, 0.6); /* orange at 60% */
  color: #fff; /* text stays crisp */
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover: solid green + subtle lift */
body.bookings-division .bookings-banner-buttons .booking-btn:hover {
  background-color: rgba(20, 169, 0, 1); /* solid green */
  transform: translateY(-2px);
}

/* Responsive tweaks for Bookings buttons */
@media (max-width: 768px) {
  body.bookings-division .bookings-banner-buttons {
    flex-direction: column;
    gap: 8px;
  }
}

/* === HALFWAY BREAK === */

/* === BOOKINGS DIVISION: HUB GRID === */
body.bookings-division .bookings-hub {
  padding: 3rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

body.bookings-division .hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

body.bookings-division .hub-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}

/* Headings inside cards */
body.bookings-division .hub-card h2 {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  line-height: 1.2;
}

/* Descriptions inside cards */
body.bookings-division .hub-card p {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  opacity: 0.9;
}

/* Icons inside cards */
body.bookings-division .hub-card i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #fff;
  transition: color 0.3s ease;
}

body.packages-division .packages-hub {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1rem;
}

body.packages-division .packages-section {
  background: #f9f9f9; /* optional light background */
}

body.packages-division .package-box { background-color: #0245c8; }

/* === HUB GRID GRADIENTS === */
body.bookings-division .hub-card:nth-child(1) {
  background: linear-gradient(135deg, #0077cc, #3399ff); /* Blue - Calendar */
}
body.bookings-division .hub-card:nth-child(2) {
  background: linear-gradient(135deg, #28a745, #5cd65c); /* Green - Packages */
}
body.bookings-division .hub-card:nth-child(3) {
  background: linear-gradient(135deg, #6f42c1, #9b6dd6); /* Purple - Presentation */
}
body.bookings-division .hub-card:nth-child(4) {
  background: linear-gradient(135deg, #fd7e14, #ff9f4d); /* Orange - Booking */
}

/* === HOVER STATES: lighten + scale === */
body.bookings-division .hub-card:nth-child(1):hover {
  background: linear-gradient(135deg, #3399ff, #66b3ff);
}
body.bookings-division .hub-card:nth-child(2):hover {
  background: linear-gradient(135deg, #5cd65c, #85e085);
}
body.bookings-division .hub-card:nth-child(3):hover {
  background: linear-gradient(135deg, #9b6dd6, #b98ae6);
}
body.bookings-division .hub-card:nth-child(4):hover {
  background: linear-gradient(135deg, #ff9f4d, #ffb877);
}

body.bookings-division .hub-card:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
  color: #000;
}

body.bookings-division .hub-card:hover h2,
body.bookings-division .hub-card:hover p,
body.bookings-division .hub-card:hover i {
  color: #000 !important;
}

/* === BOOKINGS HUB: Secondary Links Strip with Icons === */
body.bookings-division .hub-links-strip {
  margin-top: 2.5rem;
  text-align: center;
}

body.bookings-division .hub-links-strip .hub-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0.75rem;
  padding: 0.6rem 1.2rem;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  color: #333;
  background: #f2f2f2;
  transition: all 0.3s ease;
}

body.bookings-division .hub-links-strip .hub-link:hover {
  background: #b7b7b7;
  color: #000;
  transform: translateY(-3px);
}

body.bookings-division .hub-links-strip .hub-link i {
  font-size: 1.1rem;
  color: inherit;
}
/* === END BOOKINGS DIVISION PACK === */

/* === PACKAGES DIVISION PACK === */
/* === PACKAGES DIVISION: GRID === */
body.packages-division .packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 3rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}

body.packages-division .package-card {
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}

body.packages-division .package-card i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}

body.packages-division .package-card h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

body.packages-division .package-card p {
  font-size: 1rem;
  margin: 0.5rem 0 1rem;
  opacity: 0.9;
}

body.packages-division .package-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

body.packages-division .package-card ul li {
  margin: 0.5rem 0;
  font-size: 0.95rem;
}

body.packages-division .package-card .price {
  font-size: 1.25rem;
  font-weight: bold;
  margin: 1rem 0;
}

body.packages-division .package-card .btn-select {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 30px;
  background: rgba(0,0,0,0.2);
  color: #fff;
  text-decoration: none;
  transition: background 0.3s ease;
}

body.packages-division .package-card .btn-select:hover {
  background: rgba(0,0,0,0.4);
}

/* === PACKAGE GRADIENTS === */
body.packages-division .package-card:nth-child(1) {
  background: linear-gradient(135deg, #ffb400, #ffd65c); /* Sunpower */
}
body.packages-division .package-card:nth-child(2) {
  background: linear-gradient(135deg, #e83e8c, #ff6fa9); /* Partypack */
}
body.packages-division .package-card:nth-child(3) {
  background: linear-gradient(135deg, #0077cc, #33a1ff); /* Superpack */
}
body.packages-division .package-card:nth-child(4) {
  background: linear-gradient(135deg, #27ae60, #2ecc71); /* Recyclepack */
}

/* === HOVER STATES: lighten + lift === */
body.packages-division .package-card:nth-child(1):hover {
  background: linear-gradient(135deg, #ffd65c, #ffe699);
}
body.packages-division .package-card:nth-child(2):hover {
  background: linear-gradient(135deg, #ff6fa9, #ff9fc4);
}
body.packages-division .package-card:nth-child(3):hover {
  background: linear-gradient(135deg, #33a1ff, #66bfff);
}
body.packages-division .package-card:nth-child(4):hover {
  background: linear-gradient(135deg, #2ecc71, #6ee7a6);
}

body.packages-division .package-card:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
  color: #000;
}

body.packages-division .package-card:hover h2,
body.packages-division .package-card:hover p,
body.packages-division .package-card:hover i,
body.packages-division .package-card:hover .price {
  color: #000 !important;
}

/* === PACKAGES DIVISION: TOPBAR & FOOTER === */

/* Topbar */
body.packages-division header.container-header.header.full-width {
  background: linear-gradient(135deg, #0077cc, #33a1ff); /* Packages palette */
  color: #fff;
}
body.packages-division header.container-header.header.full-width a {
  color: #fff;
}

body.makebooking-page .hub-box { background-color: #112855; }
body.packages-page .package-box { background: #…; }

/* Footer */
body.packages-division footer.container-footer.footer.full-width {
  background: #222;          /* solid dark background */
  background-image: none;    /* kill Cassiopeia gradient */
  color: #fff;
  padding: 2rem 1rem;
  text-align: center;
}
body.packages-division footer.container-footer.footer.full-width a {
  color: #ddd;
}
body.packages-division footer.container-footer.footer.full-width a:hover {
  color: #fff;
}

/* ================================
   RESPONSIVE RULES
   ================================ */

/* Tablet (≤ 991px) */
@media (max-width: 991px) {

  /* Typography */
  body {
    font-size: 0.95rem; /* slightly smaller */
    line-height: 1.5;
  }
  h1 { font-size: 1.75rem; margin-bottom: 0.75rem; }
  h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
  h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }

  /* Topbar */
  .division-topbar {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
    text-align: center;
    padding: 0.5rem;
  }

  /* Sidebar */
  .has-sidebar-right .sidebar-right {
    order: 2;
    width: 100%;
    margin-top: 1rem;
  }

  /* Hub/Package boxes */
  .hub-boxes,
  .package-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  /* Footer */
  .bookings-footer {
    padding: 1rem;
  }
}

/* ================================
   MOBILE RULES (≤ 767px)
   ================================ */
@media (max-width: 767px) {

  /* --- Typography scaling --- */
  body {
    font-size: 0.9rem;
    line-height: 1.45;
  }
  h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
  h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
  h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }

  /* --- Meetmarco Topbar --- */
  .meetmarco-topbar .spoken-text {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: 0.95rem;
    line-height: 1.3;
    margin-top: 0.5rem;
    text-align: center;
  }
  .meetmarco-topbar .topbar-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  .meetmarco-topbar .topbar-link-item {
    flex: 1 1 45%;
    min-width: 120px;
    text-align: center;
  }
  .meetmarco-topbar .topbar-btn {
    display: block;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    margin-top: 0.25rem;
  }
  .meetmarco-topbar .topbar-link-item img {
    max-width: 50px;
    height: auto;
  }
  .division-topbar nav { display: none; }

  /* --- Sidebar --- */
  .sidebar-right .quick-links,
  .sidebar-right .about-box,
  .sidebar-right .extra-widgets {
    display: none;
  }
  .sidebar-right .login { display: block; }

  /* --- Packages Page --- */
  body.packages-division .packages-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem auto;
    padding: 0 0.5rem;
    max-width: 100%;
  }
  body.packages-division .package-card {
    max-width: 90%;
    margin: 0 auto 1rem;
    padding: 0.75rem;
    font-size: 0.9rem;
    text-align: center;
    box-sizing: border-box;
  }
  body.packages-division .package-card i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
  }
  body.packages-division .package-card h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }
  body.packages-division .package-card p {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
  body.packages-division .package-card ul {
    padding-left: 1rem;
    margin-bottom: 0.5rem;
    text-align: left;
  }
  body.packages-division .package-card li {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
  }
  body.packages-division .package-card .price {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0.5rem 0;
  }
  body.packages-division .package-card .btn-select {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    margin-top: 0.5rem;
  }

  /* --- Make Booking Page --- */
  body.bookings-division .hub-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem auto;
    padding: 0 0.5rem;
    max-width: 100%;
  }
  body.bookings-division .hub-card {
    display: block;
    max-width: 90%;
    margin: 0 auto 1rem;
    padding: 0.75rem;
    font-size: 0.9rem;
    text-align: center;
    border-radius: 6px;
    box-sizing: border-box;
  }
  body.bookings-division .hub-card i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
  }
  body.bookings-division .hub-card h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }
  body.bookings-division .hub-card p {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
  }
  .hub-links-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
  }
  .hub-links-strip .hub-link {
    flex: 1 1 45%;
    min-width: 120px;
    text-align: center;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
  }

  /* --- Meetmarco Banner --- */
  .banner.banner--marco,
  .container-banner .banner-overlay {
    height: auto;        /* let content define height */
    min-height: 200px;   /* keep some presence */
    padding: 1rem;
    text-align: center;
  }
  .banner__content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .banner__content .welcome-message {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .banner__content .banner-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .banner__content .banner-buttons .division-btn.btn-meetmarco {
    flex: 1 1 45%;
    min-width: 120px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    text-align: center;
  }

  /* --- Footer --- */
  .bookings-footer {
    display: block;
    text-align: center;
    padding: 0.75rem;
  }
  .bookings-footer .extra-links { display: none; }
}

/* =========================================
   PACKAGES PAGE — Tailorpack full-width card
   ========================================= */

.packages-grid .package-card.tailorpack-card {
  grid-column: 1 / -1;              /* span full width at any screen size */
  background: linear-gradient(180deg, #f0f2f5 0%, #d9dde3 100%);
  color: #111;
  text-align: center;
  padding: 2rem 1rem;
  border-radius: 12px;
  border: 1px solid #c9ced6;
}

.packages-grid .package-card.tailorpack-card h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  font-weight: 800;
}

.packages-grid .package-card.tailorpack-card p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.packages-grid .package-card.tailorpack-card .btn-select {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  background: transparent;
  border: 2px solid #555;
  color: #222;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.packages-grid .package-card.tailorpack-card .btn-select:hover {
  background: #555;
  color: #fff;
  border-color: #333;
}

.package-card.tailorpack-card .package-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  filter: invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
  /* tweak filter if you want it darker/lighter */
}

/* =========================================
   Bookings Division Banner Buttons
   ========================================= */
.bookings-banner .booking-links .banner-buttons a {
  background-color: rgba(68, 68, 68, 0.7); /* dark grey at 70% */
  color: #fff; /* keep text sharp */
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover: full opacity + subtle lift */
.bookings-banner .booking-links .banner-buttons a:hover {
  background-color: rgba(68, 68, 68, 1); /* solid on hover */
  transform: translateY(-2px);
}

/* =========================================
   Package Squares on /packages page
   ========================================= */

/* Sunpower */
body.view-category.layout-blog .sunpower-card {
  background: linear-gradient(135deg, #ff6a00, #ffb347, #fff176);
  color: #000;
}

/* Partypack */
body.view-category.layout-blog .partypack-card {
  background: linear-gradient(135deg, #ff5f6d, #ffc371);
  color: #fff;
}

/* Superpack */
body.view-category.layout-blog .superpack-card {
  background: linear-gradient(135deg, #36d1dc, #5b86e5);
  color: #fff;
}

/* Recyclepack */
body.view-category.layout-blog .recyclepack-card {
  background: linear-gradient(135deg, #56ab2f, #a8e063);
  color: #fff;
}

/* Tailorpack */
body.view-category.layout-blog .tailorpack-card {
  background: linear-gradient(135deg, #444, #888);
  color: #fff;
}

/* === END OF FILE === */
/* =========================================
   PACKAGES PAGE — Tailorpack full-width card
   ========================================= */
body.view-category.layout-blog .packages-grid .package-card.tailorpack-card {
  grid-column: 1 / -1; /* span full width */
  background: linear-gradient(180deg, #f0f2f5 0%, #d9dde3 100%);
  color: #111;
  text-align: center;
  padding: 2rem 1rem;
  border-radius: 12px;
  border: 1px solid #c9ced6;
}

body.view-category.layout-blog .packages-grid .package-card.tailorpack-card h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  font-weight: 800;
}

body.view-category.layout-blog .packages-grid .package-card.tailorpack-card p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}

body.view-category.layout-blog .packages-grid .package-card.tailorpack-card .btn-select {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  background: transparent;
  border: 2px solid #555;
  color: #222;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

body.view-category.layout-blog .packages-grid .package-card.tailorpack-card .btn-select:hover {
  background: #555;
  color: #fff;
  border-color: #333;
}

body.view-category.layout-blog .package-card.tailorpack-card .package-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  filter: invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.hero-banner .package-icon {
  display: block;
  margin: 0 auto 1rem;
  font-size: 2.8rem;   /* for Font Awesome icons */
  width: 2.8rem;       /* for SVGs */
  height: 2.8rem;
  color: #fff;         /* adjust per gradient if needed */
  text-align: center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.back-link {
  display: inline-block;
  font-size: 3rem;        /* large arrow */
  font-weight: bold;
  text-decoration: none;
  color: var(--brand-color, #FFF);
  background: var(--brand-color, #112855);
  padding: 0.2em 0.2em;
  border-radius: 12px;
  transition: background 0.2s ease, color 0.2s ease;
}

.back-link:hover,
.back-link:focus {
  background: var(--brand-color, #333);
  color: #333;
  outline: none;
}

/* ===== Anchor navigation tweaks ===== */
html {
  scroll-behavior: smooth;
}

#songs-slideshow {
  scroll-margin-top: 72px; /* adjust to your header height */
}

#songs-slideshow {
  scroll-margin-top: 72px; /* adjust to your header height */
}

/* Larger back arrow only on Songs articles */
body.view-article.category-songs .back-link-wrapper {
  text-align: right;
  margin: 0 0 1rem;
}

body.view-article.category-songs .back-link {
  display: inline-block;
  font-size: 3rem;        /* larger arrow */
  font-weight: bold;
  text-decoration: none;
  color: var(--brand-color, #FFF);
  background: var(--brand-color, #112855);
  padding: 0.2em 0.2em;
  border-radius: 12px;
  transition: background 0.2s ease, color 0.2s ease;
}

body.view-article.category-songs .back-link:hover,
body.view-article.category-songs .back-link:focus {
  background: var(--brand-color, #333);
  color: #333;
  outline: none;
}

/* === Roadstrip Global Styles === */
:root {
  --road-height: 76.8px;
  --truck-scale: 1;
}

body.alias-sunpower-order,
body.alias-partypack-order,
body.alias-superpack-order,
body.alias-recyclepack-order,
body.alias-tailorpack-order {
  --road-height: 76.8px;
  --truck-scale: 0.8;
  padding-bottom: var(--road-height);
}

.road-strip {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--road-height);
  z-index: 9999;
  overflow: hidden;
  border-top: 4px solid #222;

  background-image:
    repeating-linear-gradient(to right, transparent 0, transparent 30px, #fff 30px, #fff 42px),
    linear-gradient(to top, #444 65%, transparent 65%),
    linear-gradient(to top, #3a5f2d 0%, #6fa85f 100%),
    linear-gradient(to top, skyblue 0%, #b3e5ff 60%, #ffffff 100%);
  background-repeat: repeat-x, no-repeat, no-repeat, no-repeat;
  background-size: 45px 4px, 100% 100%, 100% 12px, 100% 100%;
  background-position: 0 calc(100% - 10px), center bottom, center calc(100% - var(--road-height) + 65%), center top;

  box-shadow: 0 -4px 12px rgba(0,0,0,0.4);
  animation: roadPulse 6s ease-in-out infinite;
}

@keyframes roadPulse {
  0%, 100% { box-shadow: 0 -4px 12px rgba(0,0,0,0.3); }
  50%      { box-shadow: 0 -6px 18px rgba(0,0,0,0.8); }
}

/* === Mobile Adjustments === */
/* Hide only tree1.png on mobile, except on XYZ-order pages */
@media (max-width: 480px) {
  body:not(.alias-partypack-order):not(.alias-recyclepack-order):not(.alias-tailorpack-order):not(.alias-superpack-order):not(.alias-sunpower-order)
    .road-strip img[src*="tree1.png"] {
      display: none !important;
  }
}

/* 🎨 BlaBlaBlog Intro Image Styling */
.blog .img-intro-none img,
.blog .img-intro-left img,
.blog .img-intro-right img {
  width: 320px;          /* adjust to your preferred size */
  height: 200px;         /* fixed height for uniform look */
  object-fit: cover;     /* crops neatly without distortion */
  border-radius: 8px;    /* rounded corners for polish */
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

/* ✨ Hover Glow in Topbar Blue */
.blog .img-intro-none img:hover,
.blog .img-intro-left img:hover,
.blog .img-intro-right img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0, 64, 128, 0.6); /* glow in topbar blue */
}

/* Container for intro images */
.blog .img-intro-none,
.blog .img-intro-left,
.blog .img-intro-right {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 8px;
}

/* Uniform image styling */
.blog .img-intro-none img,
.blog .img-intro-left img,
.blog .img-intro-right img {
  width: 320px;          /* adjust to taste */
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  display: block;
  border-radius: 8px;
}

/* Hover lift + glow */
.blog .img-intro-none:hover img,
.blog .img-intro-left:hover img,
.blog .img-intro-right:hover img {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 64, 128, 0.5); /* topbar blue glow */
}

/* Caption overlay */
.blog .img-intro-none::after,
.blog .img-intro-left::after,
.blog .img-intro-right::after {
  content: attr(data-title); /* pulls in the article title */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 64, 128, 0.8); /* semi-transparent topbar blue */
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.4s ease;
  border-radius: 0 0 8px 8px;
}

/* Show caption on hover */
.blog .img-intro-none:hover::after,
.blog .img-intro-left:hover::after,
.blog .img-intro-right:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* This puts the Blog + Projects modules on MeetMarco side by side */
/* Target only the blog + projects modules together */
.blog-box,
.projects-box {
  flex: 1 1 50%;
  max-width: 500px;
  box-sizing: border-box;
}

/* Their parent: force horizontal layout */
.blog-box,
.projects-box {
  display: inline-block;
  vertical-align: top;
}

/* Ensure the parent allows them side by side */
.container-component {
  display: block; /* reset any flex-column */
  text-align: center; /* optional: center them */
}

/* Mobile: stack full width */
@media (max-width: 768px) {
  .blog-box,
  .projects-box {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1rem 0;
  }
}

/* Global page background override for cassiopeia_shop */
body.site {
background: linear-gradient(145deg, #e0e0e0 0%, #7a7a7a 50%, #4a4a4a 100%);

}

/* Optional: ensure the grid container inherits
.site-grid {
  background: transparent; /* let body show through */
} */


/* Gradient grey background for Phoca Cart component */
.container-component main#content,
#phocacart {
background: linear-gradient(145deg, #e0e0e0 0%, #7a7a7a 50%, #4a4a4a 100%);

  padding: 2rem;
  border-radius: 6px;
}

/* Style the Phoca Cart component wrapper */
#phocacart {
background: linear-gradient(145deg, #e0e0e0 0%, #7a7a7a 50%, #4a4a4a 100%);
 */
  padding: 2rem;              /* breathing space inside */
  border-radius: 6px;          /* rounded corners */
}

/* Remove Phoca Cart's black header/footer bars */
#phocacart .phc-header,
#phocacart .phc-footer {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Ensure the whole Phoca Cart wrapper uses your gradient */
#phocacart {
background: linear-gradient(145deg, #e0e0e0 0%, #7a7a7a 50%, #4a4a4a 100%);
 !important;
  padding: 2rem;
  border-radius: 6px;
}

/* 🚫 Hide Premier/Phoca Cart injected chrome on shop pages */
body.com_phocacart .container-overheadbar.phTplContainer,
body.com_phocacart .container-header.phTplContainer,
body.com_phocacart .container-banner.phTplContainer,
body.com_phocacart .container-footer.phTplContainer,
body.com_phocacart .container-bottom-c.phTplContainer {
  display: none !important;
}

/* 🌈 Glossy gradient animation (copied from /shop.html) */
@keyframes glossyShift {
  0%   { background-position-y: 0%; }
  100% { background-position-y: 100%; }
}

/* Topbar glossy gradient */
body.com_phocacart .division-topbar.goshopping-topbar {
  background: linear-gradient(to bottom, #313131 0%, #9d9d9d 100%);
  background-size: 100% 200%;
  background-repeat: no-repeat;
  animation: glossyShift 5s ease-in-out infinite alternate;
  color: #fff;
}

/* Footer glossy gradient */
body.com_phocacart .container-footer.footer {
  background-image: linear-gradient(to top, #313131 0%, #9d9d9d 100%);
  background-size: 100% 200%;
  background-repeat: no-repeat;
  animation: glossyShift 6s ease-in-out infinite alternate;
  color: #fff;
  padding: 1rem 1.5rem;
}

/* Footer/roadstrip link styling */
body.com_phocacart .container-footer.footer a,
body.com_phocacart .roadstrip a {
  color: #f0f0f0 !important;
  text-decoration: none;
}
body.com_phocacart .container-footer.footer a:hover,
body.com_phocacart .roadstrip a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* white-text contract in module advanced>class suffix */
.white-text {
  color: #ffffff;
}
.white-text h1,
.white-text h2,
.white-text h3 {
  color: #ffffff;
}