/* HomeLoft Application Styles
 * Brand-specific overrides and additions
 * Generated by h9 brand launcher
 * 
 * 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 Definitions
 * ========================================================= */

@font-face {
  font-family: 'Gilroy';
  src: url("/fonts/Gilroy-Light.ttf") format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url("/fonts/Gilroy-Regular.ttf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url("/fonts/Gilroy-Medium.ttf") format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url("/fonts/Gilroy-SemiBold.ttf") format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url("/fonts/Gilroy-Bold.ttf") format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url("/fonts/Cinzel-Regular.ttf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url("/fonts/Cinzel-Medium.ttf") format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url("/fonts/Cinzel-SemiBold.ttf") format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url("/fonts/Cinzel-Bold.ttf") format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
 * Brand Color Variables
 * ========================================================= */

:root {
  /* Primary Colors */
  --color-brand: #CA9054;
  --color-brand-dark: #a3692d;
  --color-brand-light: #f0b67a;
  
  /* Legacy variable names (for engine compatibility) */
  --color-nava: #CA9054;
  --color-nava-dark: #a3692d;
  --color-nava-light: #f0b67a;
  --color-nava-pressed: #8a5014;
  --color-nava-active: #703600;
  
  /* Button aliases (engine CSS uses these) */
  --brand: #CA9054;
  --brand-hover: #a3692d;
  --brand-light: #f0b67a;
  
  /* Secondary Colors */
  --color-brand-secondary: #212B36;
  --color-brand-secondary-dark: #00040f;
  --color-brand-secondary-light: #47515c;
  
  /* Neutrals */
  --brand-white: #FFFFFF;
  --brand-light-gray: #F5F5F5;
  --brand-gray: #666666;
  --brand-dark-gray: #333333;
  --brand-black: #000000;
  
  /* Typography */
  --font-primary: 'Montserrat', 'Gilroy', sans-serif;
  --font-display: 'Cinzel', serif;
  --font-body: 'Montserrat', 'Gilroy', sans-serif;

  /* Footer */
  --footer-text-color: #212B36;
  --footer-headings-color: #212B36;
}

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

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

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

/* Primary buttons use brand color */
.btn-primary,
button[type="submit"]:not(.btn-secondary):not(.cart-item__remove),
.add-to-cart-btn {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
}

.btn-primary:hover,
button[type="submit"]:not(.btn-secondary):not(.cart-item__remove):hover,
.add-to-cart-btn:hover {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}

/* Links use brand color */
a:not(.btn) {
  color: var(--color-brand);
}

a:not(.btn):hover {
  color: var(--color-brand-dark);
}

/* Footer text should stay dark and readable */
.site-footer {
  color: var(--footer-text-color);
}

.site-footer__heading {
  color: var(--footer-headings-color);
}

.site-footer a.site-footer__link,
.site-footer .site-footer__text,
.site-footer .site-footer__address,
.site-footer .site-footer__newsletter-text {
  color: var(--footer-text-color);
}

.site-footer a.site-footer__link:hover {
  color: var(--footer-headings-color);
}

/* Header text should stay white */
a.top-info-bar__link,
a.top-info-bar__link:hover {
  color: var(--color-white);
}

/* Home hero typography */
.hero__title {
  font-family: var(--font-display);
}

.hero__description {
  font-family: var(--font-body);
}

/* Category pills need readable text */
a.category-page__pill {
  color: var(--color-black);
}

a.category-page__pill.category-page__pill--active {
  color: var(--color-white);
}

/* Cart page link colors */
a.cart-page__step,
.cart-item__name a,
.cart-page__continue-shopping,
.cart-page__return {
  color: var(--color-black);
}

a.cart-page__button {
  color: var(--color-white);
}

/* Ensure cart remove button stays neutral */
.cart-item__remove {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Cart badge should be darker */
.navigation-header__count--cart {
  background-color: var(--color-brand-secondary-dark);
}

/* Cart brand label should use dark palette */
.cart-item__brand {
  color: var(--color-brand-secondary);
}

/* Force secure payments icon to brand color (overrides inline SVG) */
.product-detail__feature--secure .product-detail__feature-icon {
  color: var(--color-nava);
}

.product-detail__feature--secure .product-detail__feature-icon path,
.product-detail__feature--secure .product-detail__feature-icon rect,
.product-detail__feature--secure .product-detail__feature-icon line,
.product-detail__feature--secure .product-detail__feature-icon polyline,
.product-detail__feature--secure .product-detail__feature-icon polygon,
.product-detail__feature--secure .product-detail__feature-icon circle {
  stroke: var(--color-nava) !important;
}

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

/* Bulk order CTA button uses brand colors (overrides inline styles) */
.bulk-order-page input[type="submit"],
.bulk-order-page button[type="submit"] {
  background: var(--color-nava) !important;
  background-color: var(--color-nava) !important;
  border-color: var(--color-nava) !important;
}

.bulk-order-page input[type="submit"]:hover,
.bulk-order-page button[type="submit"]:hover,
.bulk-order-page input[type="submit"]:focus,
.bulk-order-page button[type="submit"]:focus {
  background: var(--color-nava-dark) !important;
  background-color: var(--color-nava-dark) !important;
  border-color: var(--color-nava-dark) !important;
}