/* ToysCentral Application Styles
 * Brand-specific overrides and additions
 * 
 * Note: All component CSS files are loaded individually via stylesheet_link_tag 
 * in application.html.erb to ensure proper digest hash handling by Propshaft.
 * Do NOT use @import statements here as they cause 404 errors.
 */

/* ==========================================================================
   FONT DECLARATIONS
   ========================================================================== */

@font-face {
  font-family: 'Galano Grotesque';
  src: url("/fonts/GalanoGrotesqueRegular.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Galano Grotesque';
  src: url("/fonts/GalanoGrotesqueMedium.otf") format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Galano Grotesque';
  src: url("/fonts/GalanoGrotesqueSemiBold.otf") format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Galano Grotesque';
  src: url("/fonts/GalanoGrotesqueBold.otf") format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Brand Variables)
   ========================================================================== */

:root {
  /* ToysCentral brand colors - Orange & Dark Charcoal */
  --brand-primary: #FF6600;
  --brand-primary-dark: #E65C00;
  --brand-primary-light: #FF8533;
  
  --brand-secondary: #332E2E;
  --brand-secondary-light: #4A4545;
  --brand-secondary-dark: #1A1717;
  
  /* Accent color (Yellow - for highlights) */
  --brand-accent: #F1C40F;
  --brand-accent-light: #F4D03F;
  --brand-accent-dark: #D4AC0D;
  
  /* Typography */
  --font-primary: 'Galano Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Galano Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Keep shared engine brand tokens aligned to ToysCentral palette.
     Must be a literal hex value, NOT var(--brand-primary): H9Commerce::Engine's
     brand_color auto-detect (lib/h9_commerce/engine.rb) greps this file for
     `--color-brand: #RRGGBB` with a regex that only matches a literal hex
     value immediately after the colon. A var() reference doesn't match, so
     the lookup silently falls through to the engine's own default
     (brand-variables.css's --color-brand: #7d9a4c — NavaFresh's green) for
     anything that reads H9Commerce.brand_color, e.g. the transactional order
     confirmation email's brand color. */
  --color-brand: #FF6600;
  --color-brand-dark: #E65C00;
  --color-brand-light: #FF8533;
  --color-brand-rgb: 255, 102, 0;
  --color-brand-dark-rgb: 230, 92, 0;
  --color-brand-light-rgb: 255, 133, 51;
  
  /* Override h9commerce gem color variables (used by components) */
  --color-nava: #FF6600;
  --color-nava-dark: #E65C00;
  --color-nava-pressed: #CC5200;
  --color-nava-light: #FF8533;
  --color-nava-active: #CC5200;
  
  /* Brand variables used by product cards */
  --brand: #FF6600;
  --brand-hover: #E65C00;
  
  /* Override h9commerce defaults to use brand colors */
  --color-primary: var(--brand-primary);
  --color-primary-dark: var(--brand-primary-dark);
  --color-primary-light: var(--brand-primary-light);
  --color-secondary: var(--brand-secondary);
  
  /* Text colors */
  --color-text-primary: var(--brand-secondary);
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  
  /* Button colors */
  --btn-primary-bg: var(--brand-primary);
  --btn-primary-hover: var(--brand-primary-dark);
  --btn-primary-text: #FFFFFF;
}

/* ==========================================================================
   GLOBAL OVERRIDES
   ========================================================================== */

body {
  font-family: var(--font-primary);
  color: var(--brand-secondary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* Primary buttons */
.btn-primary,
.bg-primary,
[class*="bg-brand"] {
  background-color: var(--brand-primary) !important;
}

.btn-primary:hover {
  background-color: var(--brand-primary-dark) !important;
}

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

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

/* Keep order confirmation CTA text readable on hover */
a.order-details__continue-btn,
a.order-details__continue-btn:hover {
  color: var(--btn-primary-text) !important;
}

/* ==========================================================================
   TOYSCENTRAL-SPECIFIC STYLES
   ========================================================================== */

.toyscentral-logo {
  /* Custom logo styles */
}

.toyscentral-banner {
  /* Custom banner styles */
}

/* Sale/Special offer badges - use accent color */
.badge-sale,
.badge-special {
  background-color: var(--brand-accent);
  color: var(--brand-secondary);
}

/* ==========================================================================
   CART PAGE - Override engine hardcoded colors
   ========================================================================== */

/* Checkout button - default uses brand primary */
.cart-page__checkout-btn {
  background-color: var(--brand-primary) !important;  /* #FF6600 */
  border-color: var(--brand-primary) !important;
}

/* Checkout button hover - use secondary for hover */
.cart-page__checkout-btn:hover {
  background-color: var(--brand-secondary) !important;  /* #332E2E */
  border-color: var(--brand-secondary) !important;
}

/* Cart page item prices */
.cart-item__current-price {
  color: var(--brand-primary) !important;
}

/* ==========================================================================
   PRODUCT DETAIL PAGE - Button hover states
   ========================================================================== */

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

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

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

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

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

/* ==========================================================================
   BULK ORDER PAGE - Override inline styles
   ========================================================================== */

/* Submit enquiry button - override hardcoded NavaFresh green */
.bulk-order-page input[type="submit"] {
  background: var(--brand-primary) !important;  /* #FF6600 */
}

.bulk-order-page input[type="submit"]:hover {
  background: var(--brand-secondary) !important;  /* #332E2E */
}

/* ==========================================================================
   PRODUCT DETAIL - Trust Markers / Feature Icons
   ========================================================================== */

/* Override feature icon colors - they use var(--color-nava) which we've set */
.product-detail__feature-icon {
  color: var(--brand-primary) !important;
}

.product-detail__feature-icon svg,
.product-detail__feature-icon path,
.product-detail__feature-icon rect,
.product-detail__feature-icon circle {
  stroke: var(--brand-primary) !important;
}

/* Specific override for the secure payments icon (inline SVG with hardcoded #7D9A4C) */
.product-detail__feature--secure .product-detail__feature-icon path,
.product-detail__feature--secure .product-detail__feature-icon rect {
  stroke: var(--brand-primary) !important;
}

.product-detail__feature--secure .product-detail__feature-icon circle {
  fill: var(--brand-primary) !important;
}

/* ==========================================================================
   CART PAGE - Additional color overrides
   ========================================================================== */

/* Cart item name hover link */
.cart-item__name a:hover {
  color: var(--brand-primary) !important;
}

/* Savings text */
.cart-page__summary-savings,
.cart-page__savings-text {
  color: var(--brand-primary) !important;
}

/* Price colors */
.cart-item__original-price {
  color: var(--brand-secondary) !important;
}

/* Continue shopping link */
.cart-page__continue-link,
.cart-page__continue-link:hover {
  color: var(--brand-primary) !important;
}

/* Cart page link colors */
a.cart-page__step:not(.cart-page__step--active),
.cart-item__name a {
  color: var(--brand-secondary);
}

a.cart-page__button {
  color: var(--btn-primary-text);
}

a.cart-page__return {
  color: #a0a0a0;
}

.cart-page__return-text {
  color: inherit;
}

/* Header logo alignment — desktop only. The logo's <img> box is much wider
   than the actual visible logo (it's sized to fit the tallest/widest brand
   logo), so left-aligning avoids an ugly gap next to the hamburger there.
   On mobile the whole logo container is deliberately centered on the
   viewport instead, so the image content inside it must stay centered too,
   not pinned left. */
@media (min-width: 768px) {
  .navigation-header__logo-image {
    object-position: left center;
  }
}

/* Center the mobile header logo on the viewport — ToysCentral-only override,
   doesn't touch the shared h9-commerce engine.
   The engine centers .navigation-header__left within a flex: 1 slot between
   the hamburger (~44px) and the right-side icon group (~80px, two icons).
   Since those two siblings differ in width, that leftover middle space
   isn't actually centered on the screen, so the logo drifts left. Taking it
   out of the flex flow and centering it against the container directly
   fixes that regardless of sibling widths.
   top is a fixed 36px, not 50%: the container spans BOTH the icon row and
   the search bar row below it (they wrap via flex-wrap), so 50% of the
   container's total height would land in the search bar row instead of
   the icon row. 36px = container's padding-top (16px, --spacing-md) + half
   the tallest row-1 element's height (the 40px icon links, so 20px). */
@media (max-width: 767px) {
  .navigation-header__left {
    position: absolute;
    left: 50%;
    top: 36px;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .navigation-header__left .navigation-header__logo {
    pointer-events: auto;
  }
}