/*!
 * BYOB.asia Brand Layer
 * Version: 1.0
 * Date: May 11, 2026
 *
 * This stylesheet overrides Geeks UI Bootstrap 5 theme with BYOB brand colours,
 * typography, and custom utilities. Load AFTER theme.min.css in page skeleton.
 *
 * NEVER edit theme.min.css directly — all brand customization goes here.
 */

/* ============================================
   1. CSS Custom Properties (Design Tokens)
   ============================================ */

:root {
  /* Brand Colours — Blue family (warm, professional, layered) */
  --byob-primary: #003A8C;          /* Action / links / brand accent */
  --byob-primary-dark: #0047B3;     /* Hover, deep accents */
  --byob-primary-darker: #003A8C;   /* Pressed, headings on light */
  --byob-primary-light: #4D8FFF;    /* Tertiary accent, illustrations */
  --byob-primary-soft: #E8F1FF;     /* Soft backgrounds, badge fills */
  --byob-primary-softer: #F4F8FF;   /* Section bands, alt rows */
  --byob-primary-rgb: 0, 102, 255;
  --byob-primary-soft-rgb: 232, 241, 255;

  /* Warm professional dark — navy blue (replaces near-black) */
  --byob-navy: #0A2540;             /* Hero overlay, dark sections, footer */
  --byob-navy-deep: #061A2E;        /* Deepest band */
  --byob-navy-rgb: 10, 37, 64;

  /* Override Geeks UI theme tokens — replaces #754ffe (purple) with BYOB blue */
  --gk-primary: #0066FF;
  --gk-primary-rgb: 0, 102, 255;
  --gk-link-color: #0066FF;
  --gk-link-color-rgb: 0, 102, 255;
  --gk-link-hover-color: #0047B3;
  --gk-link-hover-color-rgb: 0, 71, 179;
  --gk-light-primary: #E8F1FF;
  --gk-light-primary-rgb: 232, 241, 255;
  --gk-dark-primary: #0047B3;

  --byob-secondary: #0A2540;        /* Now navy, not pure black — warmer */
  --byob-secondary-light: #3D5A80;
  --byob-secondary-rgb: 10, 37, 64;

  /* Neutrals */
  --byob-background: #FFFFFF;
  --byob-surface: #F4F8FF;          /* Was #F8F9FA — now subtle blue tint */
  --byob-border: #D6E4F5;           /* Was grey — now blue-tinted */
  --byob-text-primary: #0A2540;
  --byob-text-secondary: #5A6B82;

  /* Special Accents */
  --byob-trust-gold: #FFB800;
  --byob-highlight-yellow: #FFF9E6;

  /* Typography */
  --byob-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --byob-font-mono: 'SF Mono', 'Consolas', 'Monaco', 'Courier New', monospace;

  /* Spacing — tightened to reduce dead space between sections.
     Uses clamp() so mobile is compact, desktop generous but not floaty. */
  --byob-spacer-6: clamp(2.5rem, 4vw, 3.5rem);   /* 40–56px (was 64) */
  --byob-spacer-7: clamp(3rem, 6vw, 4.5rem);     /* 48–72px (was 96) */
  --byob-spacer-8: clamp(4rem, 7vw, 5.5rem);     /* 64–88px (was ~128) */

  /* Transitions */
  --byob-transition-fast: 200ms ease-in-out;
  --byob-transition-medium: 300ms ease-in-out;

  /* Shadows */
  --byob-shadow-sm: 0 2px 4px rgba(10, 37, 64, 0.06);
  --byob-shadow: 0 4px 12px rgba(10, 37, 64, 0.10);
  --byob-shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.14);
}

/* ============================================
   2. Typography System
   ============================================ */

body {
  font-family: var(--byob-font-family);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--byob-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--byob-font-family);
  font-weight: 700;
  color: var(--byob-secondary);
  line-height: 1.3;
  margin-bottom: 1rem;
}

h1, .h1 {
  font-size: 3rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-size: 2.25rem;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-size: 1.75rem;
  font-weight: 600;
}

h4, .h4 {
  font-size: 1.5rem;
  font-weight: 600;
}

h5, .h5 {
  font-size: 1.25rem;
  font-weight: 600;
}

h6, .h6 {
  font-size: 1rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  h1, .h1 { font-size: 2.25rem; }
  h2, .h2 { font-size: 1.75rem; }
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.6;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.5;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

a {
  color: var(--byob-primary);
  text-decoration: none;
  transition: color var(--byob-transition-fast);
}

a:hover {
  color: var(--byob-primary-dark);
  text-decoration: underline;
}

/* ============================================
   3. Button System
   ============================================ */

.btn-primary {
  background-color: var(--byob-primary);
  border-color: var(--byob-primary);
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  transition: all var(--byob-transition-fast);
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.24);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--byob-primary-dark);
  border-color: var(--byob-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.32);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 102, 255, 0.16);
}

.btn-outline-primary {
  color: var(--byob-primary);
  border-color: var(--byob-primary);
  border-width: 2px;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  transition: all var(--byob-transition-fast);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--byob-primary);
  border-color: var(--byob-primary);
  color: #fff;
  transform: translateY(-2px);
}

/* Override remaining #754ffe purple references from theme.min.css */

/* Focus ring — form inputs, buttons */
.btn-primary:focus-visible,
.btn-outline-primary:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(0, 102, 255, 0.35);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--byob-primary);
  box-shadow: 0 0 0 0.25rem rgba(0, 102, 255, 0.25);
}

/* Checkbox / radio checked state */
.form-check-input:checked {
  background-color: var(--byob-primary);
  border-color: var(--byob-primary);
}

.form-check-input:focus {
  border-color: var(--byob-primary);
  box-shadow: 0 0 0 0.25rem rgba(0, 102, 255, 0.25);
}

/* Nav pills active tab */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--byob-primary);
}

/* Bootstrap Icons / text-primary utility — ensure blue not purple */
.text-primary {
  color: var(--byob-primary) !important;
}

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

.border-primary {
  border-color: var(--byob-primary) !important;
}

.btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
}

.whatsapp-float {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 1080;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: #25D366;
  color: #fff !important;
  font-weight: 600;
  box-shadow: var(--byob-shadow-lg);
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(37, 211, 102, 0.32);
}

.whatsapp-float__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 1.125rem;
}

.whatsapp-float__label {
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .whatsapp-float {
    padding: 0.75rem;
  }

  .whatsapp-float__label {
    display: none;
  }
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
}

.btn .fe,
.btn .bi {
  margin-left: 0.5rem;
  transition: transform var(--byob-transition-fast);
}

.btn:hover .fe,
.btn:hover .bi {
  transform: translateX(4px);
}

/* ============================================
   4. Custom Spacing Utilities (tightened to reduce dead space)
   ============================================ */

.py-6 { padding-top: var(--byob-spacer-6) !important; padding-bottom: var(--byob-spacer-6) !important; }
.pt-6 { padding-top: var(--byob-spacer-6) !important; }
.pb-6 { padding-bottom: var(--byob-spacer-6) !important; }
.my-6 { margin-top: var(--byob-spacer-6) !important; margin-bottom: var(--byob-spacer-6) !important; }
.mt-6 { margin-top: var(--byob-spacer-6) !important; }
.mb-6 { margin-bottom: var(--byob-spacer-6) !important; }

.py-7 { padding-top: var(--byob-spacer-7) !important; padding-bottom: var(--byob-spacer-7) !important; }
.pt-7 { padding-top: var(--byob-spacer-7) !important; }
.pb-7 { padding-bottom: var(--byob-spacer-7) !important; }
.my-7 { margin-top: var(--byob-spacer-7) !important; margin-bottom: var(--byob-spacer-7) !important; }
.mt-7 { margin-top: var(--byob-spacer-7) !important; }
.mb-7 { margin-bottom: var(--byob-spacer-7) !important; }

.py-8 { padding-top: var(--byob-spacer-8) !important; padding-bottom: var(--byob-spacer-8) !important; }
.pt-8 { padding-top: var(--byob-spacer-8) !important; }
.pb-8 { padding-bottom: var(--byob-spacer-8) !important; }

/* Bootstrap responsive variants used in Geeks UI templates */
.py-lg-7 { padding-top: var(--byob-spacer-7) !important; padding-bottom: var(--byob-spacer-7) !important; }
.py-lg-8 { padding-top: var(--byob-spacer-8) !important; padding-bottom: var(--byob-spacer-8) !important; }
.pt-lg-7 { padding-top: var(--byob-spacer-7) !important; }
.pb-lg-7 { padding-bottom: var(--byob-spacer-7) !important; }
.pt-lg-8 { padding-top: var(--byob-spacer-8) !important; }
.pb-lg-8 { padding-bottom: var(--byob-spacer-8) !important; }

/* When two consecutive sections share the same background colour,
   collapse the bottom padding of the first into the top padding of the second.
   This eliminates double-padding visual gaps. */
section + section.bg-white,
section.bg-white + section.bg-white,
section.bg-light + section.bg-light,
section.bg-surface + section.bg-surface {
  padding-top: calc(var(--byob-spacer-7) * 0.6) !important;
}

/* ============================================
   5. Card Components
   ============================================ */

.card {
  border: 1px solid var(--byob-border);
  border-radius: 0.5rem;
  background-color: var(--byob-background);
  transition: all var(--byob-transition-fast);
  box-shadow: var(--byob-shadow-sm);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--byob-shadow);
}

.card-body {
  padding: 2rem;
}

.card-service {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-service .card-body {
  flex-grow: 1;
}

/* ============================================
   6. Navbar
   ============================================ */

.navbar {
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: all var(--byob-transition-fast);
  min-height: 80px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.navbar.scrolled {
  border-bottom: 2px solid var(--byob-primary);
  box-shadow: var(--byob-shadow-sm);
}

.navbar-brand img {
  height: 80px;
  width: auto;
}

.navbar-nav .nav-link {
  font-weight: 500;
  color: var(--byob-secondary);
  padding: 0.5rem 1rem;
  transition: color var(--byob-transition-fast);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--byob-primary);
}

.navbar-nav .nav-link.active {
  color: var(--byob-primary);
  font-weight: 600;
}

@media (max-width: 991.98px) {
  .navbar { min-height: 64px; }

  /* Ensure the navbar container allows the collapse row to wrap below brand+toggler */
  .navbar > .container,
  .navbar > .container-fluid {
    flex-wrap: wrap;
  }

  /* Guarantee the collapse is never visually clipped by theme overrides */
  .navbar-collapse {
    width: 100%;
    overflow: visible;
  }

  /* Style the expanded mobile menu */
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    background-color: rgba(255, 255, 255, 0.98);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.5rem 0 1rem;
  }
}

/* ============================================
   7. Footer
   ============================================ */

.footer {
  background-color: var(--byob-secondary);
  color: rgba(255, 255, 255, 0.8);
  padding: 3rem 0 1.5rem;
}

.footer h5,
.footer h6 {
  color: #fff;
  font-weight: 600;
  margin-bottom: 1rem;
}

.footer a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--byob-transition-fast);
}

.footer a:hover {
  color: var(--byob-primary);
  text-decoration: none;
}

.footer .social-icon {
  width: 48px;
  height: 48px;
  font-size: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  background-color: rgba(255, 255, 255, 0.04);
  transition: all var(--byob-transition-fast);
}

.footer .social-icon + .social-icon {
  margin-left: 0.5rem;
}

.footer .social-icon:hover,
.footer .social-icon:focus-visible {
  background-color: var(--byob-primary);
  border-color: var(--byob-primary);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 102, 255, 0.45);
}

.footer .social-icon i {
  font-size: inherit;
  line-height: 1;
}

/* ============================================
   8. Form Elements
   ============================================ */

.form-control,
.form-select {
  min-height: 48px;
  border: 1px solid var(--byob-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: var(--byob-font-family);
  transition: border-color var(--byob-transition-fast), box-shadow var(--byob-transition-fast);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--byob-primary);
  border-width: 2px;
  box-shadow: 0 0 0 0.2rem rgba(0, 102, 255, 0.1);
  outline: none;
}

.form-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--byob-secondary);
  margin-bottom: 0.5rem;
}

/* ============================================
   9. Badge Components
   ============================================ */

.badge {
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge-trust {
  background-color: var(--byob-trust-gold);
  color: var(--byob-secondary);
}

.badge-category {
  background-color: var(--byob-surface);
  color: var(--byob-secondary-light);
}

/* ============================================
   10. Accessibility
   ============================================ */

a:focus,
button:focus,
.btn:focus,
.form-control:focus,
.form-select:focus,
.nav-link:focus {
  outline: 2px solid var(--byob-primary);
  outline-offset: 2px;
}

.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--byob-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  z-index: 10000;
  transition: top var(--byob-transition-fast);
}

.skip-to-content:focus {
  top: 0;
  outline: 2px solid var(--byob-secondary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   11. Utility Classes
   ============================================ */

.bg-surface { background-color: var(--byob-surface); }
.bg-highlight { background-color: var(--byob-highlight-yellow); }

.text-primary-dark { color: var(--byob-primary-dark); }
.text-secondary-light { color: var(--byob-secondary-light); }

.shadow-sm { box-shadow: var(--byob-shadow-sm) !important; }
.shadow { box-shadow: var(--byob-shadow) !important; }
.shadow-lg { box-shadow: var(--byob-shadow-lg) !important; }

.border-primary-2 { border: 2px solid var(--byob-primary) !important; }

.icon-sm { width: 1rem; height: 1rem; }
.icon-md { width: 1.5rem; height: 1.5rem; }
.icon-lg { width: 2rem; height: 2rem; }
.icon-xl { width: 3rem; height: 3rem; }

.hover-lift {
  transition: transform var(--byob-transition-fast), box-shadow var(--byob-transition-fast);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--byob-shadow);
}

/* ============================================
   12. Animations
   ============================================ */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* ============================================
   13. Print Styles
   ============================================ */

@media print {
  .navbar,
  .footer,
  .btn,
  .badge {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  a {
    text-decoration: underline;
    color: #000;
  }

  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 0.875rem;
    color: #666;
  }
}

/* ============================================
   14. Color Cohesion Layer (design-feedback 2026-05-13)
   Goal: every blue token in Geeks UI maps to a single warm-blue family.
   ============================================ */

/* Soft / tinted backgrounds used across pages */
.bg-primary-soft,
.bg-light-primary {
  background-color: var(--byob-primary-soft) !important;
  color: var(--byob-primary-darker) !important;
}

.text-primary-soft { color: var(--byob-primary-soft) !important; }
.text-primary-dark { color: var(--byob-primary-dark) !important; }
.text-primary-darker { color: var(--byob-primary-darker) !important; }

.bg-light {
  background-color: var(--byob-primary-softer) !important;
}

/* Warm dark — replaces pure black on dark sections (hero overlays, CTA bands, footer) */
.bg-dark,
.bg-secondary {
  background-color: var(--byob-navy) !important;
  color: rgba(255, 255, 255, 0.92);
}

.bg-dark .text-muted,
.bg-secondary .text-muted {
  color: rgba(255, 255, 255, 0.65) !important;
}

.footer { background-color: var(--byob-navy); }

/* Subtle blue gradient accent — for hero panels & CTA strips */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--byob-primary) 0%, var(--byob-primary-darker) 100%) !important;
  color: #fff;
}

.bg-gradient-soft {
  background: linear-gradient(180deg, var(--byob-primary-softer) 0%, #FFFFFF 100%) !important;
}

/* Borders that previously read as cold grey */
hr,
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--byob-border) !important;
}

/* Badge — soft variants pick up the new soft blue */
.badge.bg-primary-soft,
.badge.bg-light-primary {
  background-color: var(--byob-primary-soft) !important;
  color: var(--byob-primary-dark) !important;
}

/* Headings on light backgrounds use navy, not pure black */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--byob-navy);
}

/* On dark sections, headings stay white */
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-secondary h1, .bg-secondary h2, .bg-secondary h3, .bg-secondary h4, .bg-secondary h5, .bg-secondary h6,
.bg-gradient-primary h1, .bg-gradient-primary h2, .bg-gradient-primary h3,
.footer h5, .footer h6 {
  color: #fff;
}

/* Body text warms slightly via the navy-tinted text color set in :root */
body { color: var(--byob-text-primary); }

/* ============================================
   END OF BYOB BRAND LAYER
   ============================================ */