/*
Theme Name:     NIGHTOUT — Hello Child (Elementor Pro)
Theme URI:      https://nightout.lt/
Description:    Brand child theme for Hello Elementor, built for Elementor Pro +
                WooCommerce. Holds the NIGHTOUT brand tokens and the CSS that
                Elementor's Global Settings + widget controls can't reach
                (dark order-summary panel, option-card shipping/payment rows,
                free-shipping meter, the off-canvas Menu Cart skin).
Author:         Visual Identity Studio
Author URI:     https://visualidentity.studio/
Template:       hello-elementor
Version:        1.0.1
Text Domain:    hello-elementor-child
*/

/* ============================================================
   1) BRAND TOKENS
   These mirror the Elementor Global Colors/Fonts (see
   GLOBAL-SETTINGS.md). Set them in Elementor first; these vars
   back the custom CSS layer below.
   ============================================================ */
:root {
  --no-orange:      #f5a017;
  --no-orange-deep: #e0731a;
  --no-coral:       #fa3b2d;
  --no-ink:         #141210;
  --no-ink-2:       #0c0a08;
  --no-paper:       #f7efe1;
  --no-paper-2:     #efe3cf;
  --no-line:        #e3d4ba;
  --no-white:       #fdfaf4;
  --no-mute:        #6f6451;

  --no-font-display: 'Archivo Expanded','Archivo',system-ui,sans-serif;
  --no-font-body:    'Hanken Grotesk',system-ui,sans-serif;

  --no-radius:    18px;
  --no-radius-lg: 28px;
  --no-btn-radius: 100px;
}

/* ============================================================
   2) BASELINE TYPE
   Elementor Global Fonts handle most headings/body. These catch
   WooCommerce + native form markup the widgets render directly.
   ============================================================ */
body { font-family: var(--no-font-body); color: var(--no-ink); }

.woocommerce h1, .woocommerce h2, .woocommerce h3,
.product_title, .woocommerce-loop-product__title,
.cart_totals h2, .cross-sells > h2, .related > h2 {
  font-family: var(--no-font-display);
  font-weight: 800; font-stretch: 115%;
  text-transform: uppercase; letter-spacing: -0.005em;
  color: var(--no-ink);
}

::selection { background: var(--no-coral); color: #fff; }

/* reusable brand helpers (add as CSS classes on Elementor sections/widgets) */
.no-eyebrow { font-family: var(--no-font-display); font-weight: 700; font-stretch: 110%;
  text-transform: uppercase; letter-spacing: .16em; font-size: .82rem; color: var(--no-coral); }
.no-on-ink   { background: var(--no-ink);  color: var(--no-white); }
.no-on-paper { background: var(--no-paper); color: var(--no-ink); }
.no-on-ink h1, .no-on-ink h2, .no-on-ink h3, .no-on-ink h4 { color: var(--no-white); }
.text-no-orange { color: var(--no-orange) !important; }
.text-no-coral  { color: var(--no-coral) !important; }

/* ============================================================
   3) BUTTONS
   Elementor buttons are best styled via a Global Button style or
   per-widget controls. These rules cover the WooCommerce buttons
   that Elementor renders from Woo markup (add-to-cart, place order,
   the cart/checkout widget buttons).
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #place_order,
.single_add_to_cart_button,
.add_to_cart_button,
.e-cart__apply-coupon,
.e-checkout__order-summary .button {
  font-family: var(--no-font-display) !important;
  font-weight: 800 !important;
  font-stretch: 110%;
  text-transform: uppercase !important;
  letter-spacing: 0.02em;
  border-radius: var(--no-btn-radius) !important;
  background-color: var(--no-orange) !important;
  color: var(--no-ink) !important;
  border: none !important;
  box-shadow: 0 8px 0 -2px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover,
.single_add_to_cart_button:hover {
  background-color: var(--no-orange-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -10px rgba(245,160,23,.6);
}
.no-ghost,
.woocommerce a.button.wc-backward {
  background-color: transparent !important;
  color: var(--no-ink) !important;
  border: 2px solid rgba(20,18,16,.2) !important;
  box-shadow: none !important;
}
.no-ghost:hover { border-color: var(--no-orange) !important; color: var(--no-orange) !important; }
.no-coral { background-color: var(--no-coral) !important; color: #fff !important; }

/* ============================================================
   4) WOOCOMMERCE — shop & product (archive + single)
   ============================================================ */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--no-orange);
  font-family: var(--no-font-display);
  font-weight: 800;
}
.woocommerce span.onsale {
  background: var(--no-coral) !important; color: #fff !important;
  font-family: var(--no-font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; border-radius: 100px;
}
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--no-orange); }
.woocommerce-message, .woocommerce-info { border-top-color: var(--no-orange) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--no-orange) !important; }

/* ============================================================
   5) GLOBAL FORM FIELDS
   ============================================================ */
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=search], textarea, select {
  border-radius: 13px;
  border: 1.5px solid var(--no-line);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--no-orange) !important;
  box-shadow: 0 0 0 4px rgba(245,160,23,.16) !important;
}

/* ============================================================
   NOTE
   Cart, Checkout and Menu-Cart skins live in woocommerce.css
   (loaded by functions.php). Header/Footer/Shop layouts are built
   in Elementor Pro Theme Builder — see THEME-BUILDER.md. Global
   colours + fonts go in Elementor Site Settings — see
   GLOBAL-SETTINGS.md.
   ============================================================ */