/*
Theme Name:   Al Mada Child
Theme URI:    https://almada.ae
Description:  Child theme for Al Mada – Traditional Syrian & Lebanese Food Store. Built on Kadence Theme with WooCommerce.
Author:       Al Mada
Template:     kadence
Version:      1.0.0
Text Domain:  almada-child
Tags:         rtl-language, arabic, woocommerce, food, organic
*/

/* ============================================================
   IMPORT PARENT THEME
   ============================================================ */
@import url("../kadence/style.css");

/* ============================================================
   KADENCE GLOBAL PALETTE OVERRIDE
   Maps Al Mada's brand colors into Kadence's palette system.
   palette1 = darkest accent, palette9 = lightest background.
   ============================================================ */
:root {
  /* ─ Al Mada Brand Colors (from Preview) ─ */
  --almada-bg-main: #F9F6F0; 
  --almada-bg-alt: #EBE3D5; 
  --almada-olive: #5A6B47; 
  --almada-olive-dark: #3E4B31;
  --almada-text-dark: #2C3325;
  --almada-text-light: #F9F6F0;
  --almada-accent: #8B7355; 

  /* ─ Kadence Palette Mapping ─ */
  --global-palette1:  #3E4B31;   /* olive-dark – darkest */
  --global-palette2:  #5A6B47;   /* olive – primary */
  --global-palette3:  #8B7355;   /* accent */
  --global-palette4:  #2C3325;   /* text dark */
  --global-palette5:  #4A5541;   /* text mid (used in preview) */
  --global-palette6:  #8B7355;   /* text muted */
  --global-palette7:  #EBE3D5;   /* bg-alt – borders/surfaces */
  --global-palette8:  #F9F6F0;   /* bg-main */
  --global-palette9:  #F9F6F0;   /* page bg */

  /* ─ Typography ─ */
  --global-heading-font-family: 'Amiri', serif;
  --global-body-font-family:    'Tajawal', sans-serif;
  --global-body-font-size:      16px;
  --global-body-line-height:    1.6;

  /* ─ Border Radius ─ */
  --global-radius:    8px;
  --almada-radius-lg: 18px;
  --almada-radius-xl: 24px;

  /* ─ Transitions ─ */
  --almada-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
body {
  font-family: var(--global-body-font-family);
  background-color: var(--almada-bg-main);
  color: var(--almada-text-dark);
  direction: rtl;
  text-align: right;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--global-heading-font-family);
  color: var(--almada-text-dark);
  font-weight: 700;
}

a {
  color: var(--almada-olive);
  transition: var(--almada-transition);
}
a:hover {
  color: var(--almada-olive-dark);
}

/* ============================================================
   KADENCE HEADER OVERRIDE
   ============================================================ */
.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.admin-bar .site-header {
  top: 32px; /* Prevent overlapping with WordPress admin bar */
}

.site-header.almada-scrolled-state,
.kadence-sticky-header.item-is-fixed,
.kadence-sticky-header.is-stuck {
  background-color: rgba(249, 246, 240, 0.85) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(90, 107, 71, 0.1) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.03) !important;
}

.site-header .header-navigation a,
.main-navigation a {
  font-family: var(--global-body-font-family);
  font-size: 17px;
  font-weight: 500;
  color: var(--almada-text-dark) !important;
}
.site-header .header-navigation a:hover,
.main-navigation a:hover {
  color: var(--almada-olive) !important;
}

/* Logo text */
.site-branding .site-title,
.site-branding .site-title a {
  font-family: var(--global-heading-font-family);
  color: var(--almada-text-dark) !important;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ============================================================
   KADENCE BUTTONS OVERRIDE
   ============================================================ */
.kb-button,
.wp-block-button .wp-block-button__link,
.button,
button[type="submit"] {
  background-color: var(--almada-olive) !important;
  color: var(--almada-text-light) !important;
  font-family: var(--global-body-font-family) !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  border: 1px solid var(--almada-olive) !important;
  padding: 18px 44px !important;
  font-size: 16px !important;
  transition: var(--almada-transition) !important;
  overflow: hidden;
  position: relative;
}
.kb-button:hover,
.wp-block-button .wp-block-button__link:hover,
.button:not(.add_to_cart_button):not(.single_add_to_cart_button):hover,
button[type="submit"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(90, 107, 71, 0.25) !important;
}

/* Outline button variant */
.kb-button.kb-button-outline,
.btn-outline {
  background-color: transparent !important;
  color: var(--almada-text-dark) !important;
  border: 1px solid rgba(44, 51, 37, 0.2) !important;
}
.kb-button.kb-button-outline:hover {
  background-color: var(--almada-bg-main) !important;
  color: var(--almada-olive) !important;
  border-color: var(--almada-bg-main) !important;
}

/* ============================================================
   KADENCE PAGE BACKGROUND & CONTENT
   ============================================================ */
.content-area,
.site-main,
.kadence-inner-column-inner,
.wp-site-blocks {
  background-color: var(--almada-bg-main);
}

/* Content section backgrounds */
.kb-row-layout-inner {
  background-color: transparent;
}

/* ============================================================
   FORMS (Search, Newsletter, etc.)
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select {
  font-family: var(--global-body-font-family) !important;
  border: 2px solid transparent !important;
  border-radius: 50px !important;
  background: white !important;
  color: var(--almada-text-dark) !important;
  padding: 20px 24px !important;
  font-size: 16px !important;
  direction: rtl;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--almada-olive) !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(90, 107, 71, 0.1) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
.footer-html {
  background-color: var(--almada-text-dark) !important;
  color: var(--almada-bg-main) !important;
}
.site-footer a,
.footer-html a {
  color: rgba(249, 246, 240, 0.7) !important;
}
.site-footer a:hover,
.footer-html a:hover {
  color: var(--almada-olive) !important;
}
.site-footer .widget-title,
.footer-html h4 {
  color: var(--almada-bg-main) !important;
  font-family: var(--global-heading-font-family);
  font-size: 22px;
}

/* ============================================================
   KADENCE MOBILE MENU OVERRIDE
   ============================================================ */
#mobile-drawer .drawer-inner,
.popup-drawer .drawer-inner,
.kadence-mobile-menu {
  background-color: var(--almada-bg-main) !important;
}

#mobile-drawer .mobile-navigation a,
.popup-drawer .mobile-navigation a {
  color: var(--almada-text-dark) !important;
  font-family: var(--global-body-font-family);
  font-weight: 500;
}

#mobile-drawer .mobile-navigation a:hover,
.popup-drawer .mobile-navigation a:hover {
  color: var(--almada-olive) !important;
}

#mobile-drawer .drawer-header .drawer-toggle,
.popup-drawer .drawer-header .drawer-toggle {
  color: var(--almada-text-dark) !important;
}