/* SecureHills theme override — blends the client palette (blue/green/amber,
   Poppins/Inter) onto the design-system component tokens. Loaded AFTER the
   design-system stylesheets so these values win. Every DS component + custom
   section reads these vars, so the whole site re-themes from here. */

:root {
  /* Type: Poppins display, Inter body (weights baked into the DS type scale) */
  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, 'Helvetica Neue', sans-serif;

  /* Blue family → client primary #0B5ED7 + premium navies for dark surfaces */
  --blue-900: #071b33;
  --blue-800: #0c2f5e;   /* dark surfaces: hero, footer, dark sections */
  --blue-700: #0d3f7a;
  --blue-600: #0B5ED7;   /* PRIMARY action blue */
  --blue-500: #2f7ce4;
  --blue-100: #dbe8fb;
  --blue-50:  #f1f6fe;

  /* Amber/accent (was saffron) → client accent #F59E0B */
  --saffron-700: #b45309;
  --saffron-600: #d97706;
  --saffron-500: #f59e0b;
  --saffron-400: #fbbf24;
  --saffron-100: #fef1d6;
  --saffron-50:  #fffaf0;

  --marigold-600: #d97706;
  --marigold-500: #f59e0b;
  --marigold-100: #fef1d6;

  /* Green → client secondary/success #198754 */
  --green-700: #146c43;
  --green-600: #198754;
  --green-100: #d6f0e4;

  /* Neutrals → cool slate on client background #F8FAFC */
  --ink-900: #1F2937;
  --ink-800: #273244;
  --ink-700: #374151;
  --ink-500: #64748b;
  --ink-300: #94a3b8;
  --ink-100: #e2e8f0;
  --ink-50:  #f1f5f9;
  --canvas:  #F8FAFC;
  --canvas-alt: #eef4fb;
  --white:   #ffffff;

  /* Semantic brand */
  --brand-primary: #0B5ED7;
  --brand-primary-hover: #0a52be;
  --brand-primary-active: #0846a3;
  --brand-primary-soft: #dbe8fb;
  --brand-secondary: #0c2f5e;
  --brand-secondary-hover: #0d3f7a;
  --brand-secondary-soft: #dbe8fb;

  --status-success: #198754;
  --status-success-soft: #d6f0e4;
  --status-verified: #146c43;

  --text-link: #0B5ED7;

  /* Slightly larger radii for a soft premium feel is already in the DS. */
}

/* Buttons in Poppins SemiBold per brand spec (DS Button uses inline font-family,
   so force it here). Nav/link buttons opt out via .keep-body-font. */
.sh-poppins-btn { font-family: var(--font-display) !important; font-weight: 600 !important; }

/* Animations */
@keyframes sh-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes sh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sh-spin { to { transform: rotate(360deg); } }
@keyframes sh-fadein { from { opacity: 0; } to { opacity: 1; } }

.sh-marquee { overflow: hidden; white-space: nowrap; }
.sh-marquee-track { display: inline-flex; will-change: transform; animation: sh-marquee var(--sh-marquee-dur, 26s) linear infinite; }
.sh-marquee:hover .sh-marquee-track { animation-play-state: paused; }

/* Card hover lift + image zoom */
.sh-lift { transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
.sh-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.sh-zoom { overflow: hidden; }
.sh-zoom > .sh-zoom-img { transition: transform 500ms ease-out; }
.sh-zoom:hover > .sh-zoom-img { transform: scale(1.07); }

/* Gallery grid tiles must fill their row on all screen sizes (desktop too) */
[style*="grid-auto-rows: 200px"] .sh-zoom-img,
[style*="grid-auto-rows: 200px"] .sh-zoom-img > div { height: 100% !important; }

/* Responsive card grids — shared across Packages/Destinations/Hotels/Helicopter.
   Fixed repeat(4,1fr) clips content below ~1000px, so collapse to 2 then 1. */
.sh-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sh-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1000px) {
  .sh-grid-4, .sh-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sh-grid-4, .sh-grid-3 { grid-template-columns: 1fr; }
}

/* ---- Hero search: stack fields vertically on phones, full width ---- */
@media (max-width: 640px) {
  .sh-search-widget { max-width: 100% !important; }
  .sh-search-row { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .sh-search-row > div[style*="width: 1px"] { display: none !important; }
  .sh-search-row > div { width: 100% !important; padding: 10px 12px !important; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); }
  .sh-search-row .sh-poppins-btn { width: 100% !important; justify-content: center !important; padding: 14px !important; }
}

/* ---- Phone-only fixes (desktop unchanged) ---- */
@media (max-width: 640px) {
  /* Show top bar contact/social row on phones, wrap neatly */
  .sh-topbar-inner { flex-direction: column !important; height: auto !important; gap: 4px !important; padding: 8px 14px !important; }
  .sh-topbar-left, .sh-topbar-right { gap: 12px !important; flex-wrap: wrap; justify-content: center; }
  /* Give the hero search side margin so it isn't edge-to-edge */
  .sh-search-widget { margin-left: 6px !important; margin-right: 6px !important; }
  /* Shrink the auto-counting numbers so they fit two-per-row */
  .sh-stats-grid { grid-template-columns: repeat(2, 1fr) !important; padding: 24px 18px !important; gap: 18px !important; }
  .sh-counter { font-size: 30px !important; }
  /* Newsletter box padding + input stack */
  .sh-newsletter-box { padding: 22px 18px !important; }
}

/* ---- Mobile nav: hamburger below 900px, full menu above ---- */
.sh-nav-toggle { display: none; }
@media (max-width: 900px) {
  .sh-nav-desktop { display: none !important; }
  .sh-nav-toggle { display: inline-flex !important; align-items: center; }
}

/* ---- Global responsive guards ---- */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
@media (max-width: 900px) {
  /* Two-column content blocks collapse to one on tablet/phone */
  .sh-two-col { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  /* Ease large section padding + display type on phones */
  section { padding-left: 18px !important; padding-right: 18px !important; }
  h1 { font-size: clamp(30px, 8.5vw, 44px) !important; line-height: 1.12 !important; }
  /* Touch-friendly min height on interactive controls */
  button, a[role="button"], .sh-poppins-btn { min-height: 44px; }
}