/* ============================================
 * DirectNine Application Styles
 * Generated by setup_brand.sh
 * ============================================ */

/* Custom Font Faces - Sharp Sans */
@font-face {
  font-family: 'Sharp Sans';
  src: url("/fonts/SharpSansTRIAL-Book.woff2") format('woff2'),
       url("/fonts/SharpSansTRIAL-Book.woff") format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sharp Sans';
  src: url("/fonts/SharpSansTRIAL-Medium.woff2") format('woff2'),
       url("/fonts/SharpSansTRIAL-Medium.woff") format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sharp Sans';
  src: url("/fonts/SharpSansTRIAL-Semibold.woff2") format('woff2'),
       url("/fonts/SharpSansTRIAL-Semibold.woff") format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sharp Sans';
  src: url("/fonts/SharpSansTRIAL-Bold.woff2") format('woff2'),
       url("/fonts/SharpSansTRIAL-Bold.woff") format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================
 * CSS Variables - Brand Colors
 * ============================================ */

:root {
  /* Primary Brand Color - Deep Blue */
  --color-brand: #0E3163;
  --color-brand-dark: #123E7D;
  --color-brand-light: #1A4A8A;
  
  /* Legacy aliases (used by engine CSS) */
  --color-nava: #0E3163;
  --color-nava-dark: #7DA4DB;  /* Secondary color for hover states */
  --color-nava-light: #1A4A8A;
  --color-nava-pressed: #7DA4DB;  /* Secondary color for pressed states */
  --color-nava-active: #5B8AC7;  /* Slightly darker secondary for active */
  
  /* Button aliases (engine components use these) */
  --brand: #0E3163;
  --brand-hover: #7DA4DB;  /* Secondary color for hover */
  --brand-light: #1A4A8A;
  
  /* Brand-specific aliases */
  --brand-primary: #0E3163;
  --brand-primary-light: #1A4A8A;
  --brand-primary-dark: #123E7D;
  
  /* Secondary Brand Color - Light Blue */
  --color-brand-secondary: #7DA4DB;
  --color-brand-secondary-light: #A5C4E8;
  --color-brand-secondary-dark: #0066CC;
  --brand-secondary: #7DA4DB;
  --brand-secondary-light: #A5C4E8;
  
  /* Neutral Colors */
  --brand-white: #FFFFFF;
  --brand-light-gray: #F5F5F5;
  --brand-gray: #666666;
  --brand-dark-gray: #333333;
  --brand-black: #000000;
  
  /* Typography */
  --font-primary: 'Sharp Sans', sans-serif;
  --font-display: 'Sharp Sans', sans-serif;
  --font-body: 'Sharp Sans', sans-serif;
}

/* ============================================
 * Brand-Specific Overrides
 * ============================================ */

/* Logo styling */
.directnine-logo {
  max-height: 40px;
  width: auto;
}

/* Ensure buttons use brand colors */
.btn-primary,
.button-primary,
[data-action="add-to-cart"] {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: white !important;
}

.btn-primary:hover,
.button-primary:hover,
[data-action="add-to-cart"]:hover {
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}

/* Links */
a {
  color: var(--color-brand);
}

a:hover {
  color: var(--color-brand-secondary);
}

/* ============================================
 * DirectNine Brand: Secondary Color for Hover States
 * Engine uses --color-nava-dark for hover, we override to secondary
 * ============================================ */

/* Add to Cart button hover - use secondary color */
.product-detail__add-to-cart:hover {
  background-color: var(--color-brand-secondary) !important;
  border-color: var(--color-brand-secondary) !important;
}

/* Sticky Add to Cart button hover */
.sticky-add-to-cart__button:hover {
  background-color: var(--color-brand-secondary) !important;
  border-color: var(--color-brand-secondary) !important;
}

/* Modal submit buttons hover */
.notify-me-modal__submit:hover {
  background-color: var(--color-brand-secondary) !important;
}

/* ============================================
 * Cart Page Button Fixes
 * Engine has hardcoded NavaFresh colors (#4a6d14)
 * ============================================ */

/* Checkout button - default should be primary blue */
.cart-page__checkout-btn {
  background-color: var(--color-brand) !important;  /* Primary: #0E3163 */
  border-color: var(--color-brand) !important;
}

/* Checkout button hover - secondary light blue */
.cart-page__checkout-btn:hover {
  background-color: var(--color-brand-secondary) !important;  /* Secondary: #7DA4DB */
  border-color: var(--color-brand-secondary) !important;
}

/* Cart page buttons (Continue Shopping, etc.) */
.cart-page__button {
  background-color: var(--color-brand) !important;
}

.cart-page__button:hover {
  background-color: var(--color-brand-secondary) !important;
}

/* Out of stock modal remove button */
.out-of-stock-modal__remove-btn {
  background-color: var(--color-brand) !important;
}

.out-of-stock-modal__remove-btn:hover {
  background-color: var(--color-brand-secondary) !important;
}

/* ============================================
 * Cart Page Price Colors - Use Primary Blue
 * ============================================ */

/* Cart item current price */
.cart-item__current-price {
  color: var(--color-brand) !important;  /* Primary: #0E3163 */
}

/* Sticky cart price */
.sticky-add-to-cart__price {
  color: var(--color-brand) !important;
}

/* Product detail price */
.product-detail__price {
  color: var(--color-brand) !important;
}

/* Order summary savings text */
.cart-page__summary-savings {
  color: var(--color-brand) !important;
}

/* ============================================
 * Header Icon Colors
 * ============================================ */

.navigation-header__icon-link {
  color: var(--color-brand);
}

/* Cart badge should use the primary brand blue */
.navigation-header__count,
.navigation-header__count--cart {
  background-color: var(--color-brand) !important;
}

/* ============================================
 * Cart Page Feature Icons - Brand Color
 * Tracking and Returns use <img> SVGs so need CSS filter
 * ============================================ */

.cart-page__feature-icon {
  opacity: 1 !important;
  filter: brightness(0) saturate(100%) invert(13%) sepia(92%) saturate(753%) hue-rotate(205deg) brightness(93%) contrast(101%);
}

/* ============================================
 * Product Page Trust Badge Icons - Brand Color
 * All trust badge icons use <img> SVGs so need CSS filter to apply brand color
 * ============================================ */

.product-detail__feature--shipping .product-detail__feature-icon,
.product-detail__feature--returns .product-detail__feature-icon,
.product-detail__feature--support .product-detail__feature-icon,
.product-detail__feature--secure .product-detail__feature-icon {
  filter: brightness(0) saturate(100%) invert(13%) sepia(92%) saturate(753%) hue-rotate(205deg) brightness(93%) contrast(101%);
}

/* ============================================
 * Header (Top Info Bar) Contact - Brand Color
 * ============================================ */

/* Phone & email <img> SVG icons - tint to secondary light blue #7DA4DB */
.top-info-bar__link--phone .top-info-bar__icon,
.top-info-bar__link--email .top-info-bar__icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(30%) saturate(600%) hue-rotate(185deg) brightness(105%);
}

/* ============================================
 * Footer & Mobile Sidebar Contact - Brand Color
 * ============================================ */

/* Footer: phone/email icon links text */
.site-footer__link--icon {
  color: var(--color-brand) !important;
}

/* Footer: phone/email <img> SVG icons - tint to brand blue #0E3163 */
.site-footer__link--icon .site-footer__icon {
  filter: brightness(0) saturate(100%) invert(13%) sepia(92%) saturate(753%) hue-rotate(205deg) brightness(93%) contrast(101%);
}

/* Mobile sidebar: phone/email contact links (inline SVG uses currentColor) */
.mobile-sidebar__contact-link {
  color: var(--color-brand) !important;
}