/*
Theme Name:   EPEEK Child Theme
Theme URI:    https://epeek-dz.com
Description:  Child theme for EPEEK — applies brand fonts, colors, and global styles.
Author:       EPEEK
Template:     botiga
Version:      1.0.0
Text Domain:  epeek-child
*/

/* ═══════════════════════════════════════════════
   EPEEK BRAND FONTS
   ─ Bebas Neue      → display / headlines
   ─ Barlow Condensed → labels / nav / buttons
   ─ Instrument Sans  → body text
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;1,400&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ═══════════════════════════════════════════════
   CSS VARIABLES — EPEEK BRAND SYSTEM
═══════════════════════════════════════════════ */
:root {
  --epeek-blue:        #336699;
  --epeek-blue-dark:   #1E4D7A;
  --epeek-blue-deep:   #112640;
  --epeek-blue-light:  #5588BB;
  --epeek-blue-pale:   #E8F0F8;
  --epeek-gold:        #C8973A;
  --epeek-gold-light:  #E8B85A;
  --epeek-white:       #FFFFFF;
  --epeek-off-white:   #F6F9FC;
  --epeek-ink:         #0C1B2A;
  --epeek-ink-soft:    #2D4560;
  --epeek-gray-mid:    #728FA8;
  --epeek-gray-light:  #C0D2E0;

  --f-display: 'Bebas Neue', sans-serif;
  --f-sub:     'Barlow Condensed', sans-serif;
  --f-body:    'Instrument Sans', sans-serif;
}

/* ═══════════════════════════════════════════════
   GLOBAL TYPOGRAPHY
═══════════════════════════════════════════════ */

body,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
p, li, td, th, label, input, textarea, select {
  font-family: var(--f-body) !important;
  color: var(--epeek-ink);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--f-display) !important;
  letter-spacing: 0.04em;
  line-height: 0.92;
  color: var(--epeek-ink);
}

/* Elementor specific heading sizes */
.elementor-heading-title.elementor-size-xxl { font-size: clamp(4rem, 8vw, 8rem); }
.elementor-heading-title.elementor-size-xl  { font-size: clamp(3rem, 5vw, 5.5rem); }
.elementor-heading-title.elementor-size-large { font-size: clamp(2.5rem, 4vw, 4rem); }

/* ═══════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════ */

.elementor-nav-menu a,
.elementor-nav-menu li a,
nav a, .site-nav a,
.main-navigation a {
  font-family: var(--f-sub) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--epeek-ink-soft) !important;
  transition: color 0.2s ease !important;
}

.elementor-nav-menu a:hover,
nav a:hover {
  color: var(--epeek-blue) !important;
}

/* Site logo text */
.site-title a,
.elementor-widget-site-logo a {
  font-family: var(--f-display) !important;
  font-size: 2rem !important;
  letter-spacing: 0.12em !important;
  color: var(--epeek-ink) !important;
}

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */

.elementor-button,
.elementor-button-wrapper .elementor-button,
button, .btn,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--f-sub) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background-color: var(--epeek-blue) !important;
  color: #fff !important;
  border-radius: 100px !important;
  border: 2px solid var(--epeek-blue) !important;
  padding: 0.85rem 2rem !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background-color: var(--epeek-blue-dark) !important;
  border-color: var(--epeek-blue-dark) !important;
}

/* ═══════════════════════════════════════════════
   WOOCOMMERCE — PRODUCT CARDS
═══════════════════════════════════════════════ */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--f-sub) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.04em !important;
  color: var(--epeek-ink) !important;
  text-transform: none !important;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
  font-family: var(--f-display) !important;
  font-size: 1.25rem !important;
  color: var(--epeek-blue) !important;
  letter-spacing: 0.04em !important;
}

.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount {
  font-family: var(--f-body) !important;
  font-size: 0.82rem !important;
  color: var(--epeek-gray-light) !important;
}

.woocommerce ul.products li.product {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--epeek-blue-pale) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 36px rgba(51,102,153,0.12) !important;
}

/* Product category label */
.woocommerce ul.products li.product .product-category-label {
  font-family: var(--f-sub) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--epeek-blue-light) !important;
}

/* Sale badge */
.woocommerce span.onsale {
  font-family: var(--f-sub) !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  background-color: var(--epeek-gold) !important;
  border-radius: 100px !important;
  min-height: unset !important;
  min-width: unset !important;
  padding: 0.3rem 0.75rem !important;
  line-height: 1.4 !important;
}

/* Add to cart button in product loop */
.woocommerce ul.products li.product .button {
  font-family: var(--f-sub) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background: var(--epeek-blue) !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 0.65rem 1rem !important;
  border: none !important;
}

.woocommerce ul.products li.product .button:hover {
  background: var(--epeek-blue-dark) !important;
}

/* Product single page */
.woocommerce div.product .product_title {
  font-family: var(--f-display) !important;
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  letter-spacing: 0.04em !important;
  line-height: 0.92 !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--f-display) !important;
  font-size: 2rem !important;
  color: var(--epeek-blue) !important;
}

/* ═══════════════════════════════════════════════
   HEADER / SITE HEADER
═══════════════════════════════════════════════ */

.site-header,
header.elementor-section,
.e-con.e-parent:first-child {
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid var(--epeek-blue-pale) !important;
}

/* ═══════════════════════════════════════════════
   SECTION TAGS / LABELS (Elementor text widgets)
═══════════════════════════════════════════════ */

.epeek-label,
.elementor-widget-text-editor .label-text {
  font-family: var(--f-sub) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--epeek-blue) !important;
}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */

footer,
.site-footer,
.elementor-location-footer {
  background: var(--epeek-blue-deep) !important;
  color: rgba(255,255,255,0.6) !important;
}

footer a,
.site-footer a {
  font-family: var(--f-body) !important;
  color: rgba(255,255,255,0.55) !important;
  transition: color 0.2s !important;
}

footer a:hover,
.site-footer a:hover {
  color: var(--epeek-blue-light) !important;
}

footer h4, footer h3, footer h2,
.site-footer h4 {
  font-family: var(--f-sub) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.28) !important;
}

/* ═══════════════════════════════════════════════
   FORMS & INPUTS
═══════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="search"],
textarea,
.elementor-field-type-text input,
.elementor-field-type-email input {
  font-family: var(--f-body) !important;
  border: 1.5px solid var(--epeek-blue-pale) !important;
  border-radius: 10px !important;
  padding: 0.75rem 1rem !important;
  transition: border-color 0.2s !important;
}

input:focus, textarea:focus {
  border-color: var(--epeek-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(51,102,153,0.1) !important;
}

/* ═══════════════════════════════════════════════
   UTILITY CLASSES (use in Elementor custom CSS)
═══════════════════════════════════════════════ */

/* Add class "epeek-section-dark" to any section for dark blue bg */
.epeek-section-dark {
  background-color: var(--epeek-blue-deep) !important;
  color: white !important;
}

/* Add class "epeek-section-blue" for brand blue bg */
.epeek-section-blue {
  background-color: var(--epeek-blue) !important;
  color: white !important;
}

/* Add class "epeek-section-pale" for light tint sections */
.epeek-section-pale {
  background-color: var(--epeek-blue-pale) !important;
}

/* Bebas Neue forced on any element */
.font-display { font-family: var(--f-display) !important; letter-spacing: 0.04em; }
/* Barlow Condensed forced */
.font-sub { font-family: var(--f-sub) !important; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
/* Instrument Sans forced */
.font-body { font-family: var(--f-body) !important; }

/* Gold accent text */
.text-gold { color: var(--epeek-gold) !important; }
.text-blue { color: var(--epeek-blue) !important; }