/**
 * Omni Packaging — Master Brand Design System & CSS Variables
 * Exact Palette: #333D79 (Royal Navy), Light Sky Blue (#F0F6FC), Pure White (#FFFFFF), Solid Black (#000000/#111827)
 * 
 * Signature 3-Color Theme:
 * 1. Tez / Primary Color:  Royal Navy (#333D79) -> Footer, Top Bar, Action Buttons, Highlights
 * 2. Hero Background:       Light Sky Blue (#F0F6FC) -> Hero sections, soft feature backgrounds
 * 3. Main Header & Canvas:  Pure White (#FFFFFF) -> Header navbar, clean cards, content surfaces
 * 
 * Strict Typography Rule:
 * All website headings, body text, nav links, and content are SOLID BLACK (#000000 / #111827).
 * NO white text on light backgrounds anywhere on the website.
 */

:root {
  /* 3 Main Brand Theme Colors (Exact User Reference Image #333D79) */
  --brand-primary: #333D79;          /* Royal Navy (Primary Buttons, Footer, Badges) */
  --brand-primary-hover: #272F5E;    /* Darker Navy for interactive hover states */
  --brand-secondary: #333D79;
  --brand-secondary-hover: #272F5E;
  --brand-sky: #F0F6FC;              /* Light Sky Blue (Hero & Soft Sections) */
  --brand-cream: #F0F6FC;            /* Unified with Sky Blue */
  --brand-silver: #D5DFEB;           /* Sky Silver Accent / Borders */
  --brand-hf: #333D79;               /* Footer & Top Bar Background */
  --brand-dark: #333D79;

  /* Typography & Canvas Neutrals - STRICT NO WHITE TEXT ON LIGHT SURFACES */
  --brand-heading: #000000;          /* Pure Black Headings */
  --brand-text: #111827;             /* Solid Dark Charcoal / Black Body */
  --brand-muted: #4B5563;            /* Subtle Charcoal for metadata */
  --brand-light: #F0F6FC;            /* Sky Blue Section Tint */
  --brand-surface: #FFFFFF;          /* Pure White Card Canvas */
  --brand-border: #E2E8F0;           /* Clean Border */
  --brand-border-subtle: #EDF2F7;
  --brand-white: #FFFFFF;

  /* Aliases */
  --omni-navy: #333D79;
  --omni-navy-dark: #272F5E;
  --omni-sky: #F0F6FC;
  --omni-charcoal: #111827;
  --omni-black: #000000;
  --omni-white: #FFFFFF;

  /* Legacy aliases mapped to new palette */
  --omni-burgundy: #333D79;
  --omni-blackberry: #333D79;
  --omni-cream: #F0F6FC;
  --omni-silver: #D5DFEB;
  --omni-mint: #333D79;
  --omni-mint-dark: #272F5E;
  --omni-lavender: #F0F6FC;
  --omni-lavender-dark: #D5DFEB;

  /* Typography: Lato for Headings, Open Sans for Body */
  --font-heading: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Standard Geometry */
  --radius-pill: 9999px;
  --radius-card: 16px;
  --radius-input: 10px;
  --shadow-sm: 0 2px 8px -2px rgba(51, 61, 121, 0.08);
  --shadow-md: 0 8px 24px -4px rgba(51, 61, 121, 0.12);
  --shadow-lg: 0 16px 36px -6px rgba(51, 61, 121, 0.16);
}

/* ==========================================================================
   Base & Global Typography
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body) !important;
  color: var(--brand-text) !important;
  background-color: var(--brand-white) !important;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.font-heading {
  font-family: var(--font-heading) !important;
  color: var(--brand-heading) !important;
  letter-spacing: -0.01em;
  font-weight: 700;
}

::selection {
  background-color: var(--brand-primary) !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   Standardized Brand Buttons & Actions (#333D79 Tez Color Pill)
   ========================================================================== */

/* Primary Action: #333D79 Royal Navy Pill with Pure White Text */
.btn-brand-primary,
.btn-omni-mint,
.btn-brand-red,
.btn-primary {
  background-color: #333D79 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid #272F5E !important;
  padding: 12px 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 14px rgba(51, 61, 121, 0.25) !important;
}

.btn-brand-primary:hover,
.btn-omni-mint:hover,
.btn-brand-red:hover,
.btn-primary:hover {
  background-color: #272F5E !important;
  color: #FFFFFF !important;
  border-color: #1F254B !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(51, 61, 121, 0.35) !important;
}

/* Secondary Action: #333D79 Navy Pill */
.btn-brand-secondary,
.btn-omni-lavender,
.btn-secondary {
  background-color: #333D79 !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid #272F5E !important;
  padding: 12px 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 14px rgba(51, 61, 121, 0.20) !important;
}

.btn-brand-secondary:hover,
.btn-omni-lavender:hover,
.btn-secondary:hover {
  background-color: #272F5E !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(51, 61, 121, 0.30) !important;
}

/* Outline Action: Pure White Pill with #333D79 Navy Border */
.btn-brand-outline,
.btn-outline {
  background-color: #FFFFFF !important;
  color: #333D79 !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  border-radius: var(--radius-pill) !important;
  border: 1.5px solid #333D79 !important;
  padding: 11px 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-brand-outline:hover,
.btn-outline:hover {
  border-color: #333D79 !important;
  background-color: #333D79 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(51, 61, 121, 0.20) !important;
}

/* Editorial Text Link */
.link-omni,
.brand-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #333D79 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.link-omni:hover,
.brand-link:hover {
  color: #272F5E !important;
  gap: 10px !important;
}

/* ==========================================================================
   Badges, Chips & Labels
   ========================================================================== */
.badge-omni-lavender,
.badge-lavender {
  background-color: #F0F6FC !important;
  color: #333D79 !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid #D5DFEB !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.badge-omni-mint,
.badge-mint,
.badge-format {
  background-color: #333D79 !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid #272F5E !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Category Filter Chips */
.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  background-color: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.category-chip:hover {
  background-color: #F0F6FC;
  border-color: #333D79;
  color: #333D79;
}

.category-chip.active {
  background-color: #333D79 !important;
  border-color: #272F5E !important;
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(51, 61, 121, 0.25) !important;
}

/* ==========================================================================
   Product & Portfolio Cards (Pure White Canvas with Solid Black Text)
   ========================================================================== */
.box-card,
.prop-card,
.pillar-card,
.portfolio-card,
.card-omni {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: var(--radius-card) !important;
  overflow: hidden !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.box-card:hover,
.prop-card:hover,
.pillar-card:hover,
.portfolio-card:hover,
.card-omni:hover {
  transform: translateY(-4px) !important;
  border-color: #333D79 !important;
  box-shadow: 0 14px 32px rgba(51, 61, 121, 0.10) !important;
}

/* ==========================================================================
   Forms & Input Fields
   ========================================================================== */
.form-input,
.form-textarea,
.form-select,
.qpc-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width: 100%;
  background-color: #FFFFFF !important;
  border: 1.5px solid #D5DFEB !important;
  border-radius: 8px !important;
  padding: 12px 16px;
  font-size: 14px;
  color: #111827 !important;
  font-family: var(--font-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.qpc-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none !important;
  background-color: #FFFFFF !important;
  border-color: #333D79 !important;
  box-shadow: 0 0 0 3px rgba(51, 61, 121, 0.18) !important;
}

/* ==========================================================================
   Section Backgrounds & Hero Aesthetic (Light Sky Blue #F0F6FC)
   ========================================================================== */
.hero-section-cream,
.hero-section-sky {
  background-color: #F0F6FC !important;
  color: #111827 !important;
}

.bg-brand-white {
  background-color: #FFFFFF !important;
}

.bg-brand-light {
  background-color: #F0F6FC !important;
}

.bg-brand-primary {
  background-color: #333D79 !important;
  color: #FFFFFF !important;
}

.bg-brand-secondary {
  background-color: #272F5E !important;
  color: #FFFFFF !important;
}

.bg-brand-cream,
.bg-brand-sky {
  background-color: #F0F6FC !important;
  color: #111827 !important;
}

.bg-brand-silver {
  background-color: #D5DFEB !important;
  color: #111827 !important;
}

.text-brand-primary {
  color: #333D79 !important;
}

.text-brand-secondary {
  color: #272F5E !important;
}

.text-brand-dark {
  color: #000000 !important;
}

/* ==========================================================================
   Trust Bar & Ambient Elements
   ========================================================================== */
.trust-metric-ribbon {
  background-color: #F0F6FC;
  border-top: 1px solid #D5DFEB;
  border-bottom: 1px solid #D5DFEB;
  color: #111827;
}

.hero-glow-circle {
  background: radial-gradient(circle, rgba(51, 61, 121, 0.08) 0%, rgba(240, 246, 252, 0) 70%);
  pointer-events-none;
  filter: blur(40px);
  z-index: 0;
}

/* ==========================================================================
   Global Header & Topbar (Pure White Header + #333D79 Top Bar)
   ========================================================================== */
.top-usp-bar {
  background-color: #333D79 !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.top-usp-bar a {
  color: #FFFFFF !important;
}

.top-usp-bar a:hover {
  color: #D5DFEB !important;
}

.top-usp-bar .bg-brand-red,
.top-usp-bar .badge-usp {
  background-color: #272F5E !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Main Header: PURE WHITE with SOLID BLACK TEXT */
#main-header {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

#main-header nav a {
  color: #111827 !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

#main-header nav a:hover {
  color: #333D79 !important;
}

#main-header nav a.text-brand-red,
#main-header nav a.active,
#main-header nav a.nav-active {
  color: #333D79 !important;
  font-weight: 700 !important;
  position: relative !important;
}

#main-header nav a.text-brand-red::after,
#main-header nav a.active::after,
#main-header nav a.nav-active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -6px !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background-color: #333D79 !important;
  border-radius: 9999px !important;
}

/* ==========================================================================
   Global Footer (Tez Color #333D79 Background)
   ========================================================================== */
footer {
  background-color: #333D79 !important;
  color: #FFFFFF !important;
  border-top: 4px solid #272F5E !important;
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #272F5E;
  z-index: 1;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
  color: #FFFFFF !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

footer a {
  color: #D5DFEB !important;
  transition: color 0.2s ease !important;
}

footer a:hover {
  color: #FFFFFF !important;
}

footer p, footer li, footer span:not(.badge-footer) {
  color: #E2E8F0 !important;
}

.footer-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #272F5E;
  color: #FFFFFF !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-social-icon:hover {
  background-color: #FFFFFF;
  color: #333D79 !important;
  transform: translateY(-2px);
}