/*
Theme Name: Amalfi
Theme URI: https://example.com/amalfi
Author: Your Studio
Author URI: https://example.com
Description: ثيم ووردبريس فاخر لمتاجر مستحضرات التجميل، متوافق بالكامل مع WooCommerce، يمزج بين الهوية الأفريقية السودانية (ألوان الأرض والذهب) وبين البساطة الفاخرة لدور التجميل العالمية. متوافق مع RTL وجاهز للترجمة.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amalfi
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, rtl-language-support, translation-ready, one-column, two-columns
*/

/* =========================================================
   1. DESIGN TOKENS (Design System)
   ========================================================= */
:root{
  --color-primary:      #C9A24B; /* ذهبي دافئ */
  --color-secondary:    #8B4A2B; /* طيني / تراكوتا */
  --color-bg:           #FAF6F0; /* عاجي دافئ */
  --color-surface:      #F1E9DD; /* بيج فاتح */
  --color-text:         #241B15; /* أسود دافئ */
  --color-text-muted:   #6E6259;
  --color-border:       #E3D3B3;
  --color-hover:        #A9822F;
  --color-cta:          #1E1410; /* زر الشراء */
  --color-cta-hover:    #3A2A20;
  --color-accent-dark:  #5C1A1A; /* نبيتي غامق اختياري */

  --font-heading: 'Playfair Display', 'Aref Ruqaa', Georgia, serif;
  --font-body: 'Jost', 'Tajawal', Arial, sans-serif;

  --container-max: 1320px;
  --radius-sm: 2px;
  --radius-md: 6px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 112px;
  --shadow-soft: 0 8px 30px rgba(36,27,21,0.06);
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button, input, textarea, select{ font-family:inherit; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--color-text);
  margin:0 0 var(--space-sm);
}
h1{ font-size:clamp(2.2rem, 4vw, 3.6rem); letter-spacing:0.04em; }
h2{ font-size:clamp(1.8rem, 3vw, 2.6rem); }
h3{ font-size:1.4rem; }

.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--space-sm);
}

.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-size:0.75rem;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--color-secondary);
  margin-bottom:var(--space-xs);
}

/* Skip link (accessibility) */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--color-cta); color:#fff; padding:10px 18px;
}
.skip-link:focus{ left:10px; top:10px; }

:focus-visible{
  outline:2px solid var(--color-secondary);
  outline-offset:2px;
}

/* =========================================================
   3. ANNOUNCEMENT BAR
   ========================================================= */
.announcement-bar{
  background:var(--color-accent-dark);
  color:#f4e9d8;
  text-align:center;
  font-size:0.8rem;
  letter-spacing:0.08em;
  padding:10px var(--space-sm);
}

/* =========================================================
   4. HEADER
   ========================================================= */
.site-header{
  border-bottom:1px solid var(--color-border);
  background:var(--color-bg);
  position:relative;
  z-index:50;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:var(--space-sm);
  padding-bottom:var(--space-sm);
  gap:var(--space-sm);
}
.site-branding{ text-align:center; }
.site-branding .custom-logo{ max-height:56px; width:auto; }
.site-title{
  font-family:var(--font-heading);
  font-size:1.6rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin:0;
}
.site-title a{ color:var(--color-text); }

.main-navigation ul{
  display:flex;
  gap:var(--space-md);
}
.main-navigation a{
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, color .25s ease;
}
.main-navigation a:hover,
.main-navigation a:focus{
  border-color:var(--color-primary);
  color:var(--color-secondary);
}

.header-icons{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
}
.header-icons a{ font-size:0.95rem; }
.header-icons .cart-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; border-radius:50%;
  background:var(--color-cta); color:#fff; font-size:0.65rem;
  margin-inline-start:4px;
}

.menu-toggle{
  display:none;
  background:none;
  border:1px solid var(--color-border);
  padding:8px 12px;
  cursor:pointer;
}

@media (max-width: 880px){
  .main-navigation{
    display:none;
    position:absolute;
    inset-inline-start:0;
    top:100%;
    width:100%;
    background:var(--color-bg);
    border-top:1px solid var(--color-border);
    border-bottom:1px solid var(--color-border);
  }
  .main-navigation.is-open{ display:block; }
  .main-navigation ul{ flex-direction:column; padding:var(--space-sm); gap:var(--space-xs); }
  .menu-toggle{ display:inline-block; }
}

/* =========================================================
   5. HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:70vh;
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
  color:#fff;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,20,16,0.25), rgba(30,20,16,0.55));
}
.hero .container{ position:relative; z-index:2; max-width:640px; }
.hero .eyebrow{ color:var(--color-primary); }
.hero h1{ color:#fff; }
.hero p{ font-size:1.05rem; color:#f2e9dc; max-width:480px; }

/* =========================================================
   6. BUTTONS
   ========================================================= */
.btn{
  display:inline-block;
  padding:14px 34px;
  font-size:0.8rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border:1px solid var(--color-cta);
  background:var(--color-cta);
  color:#fff;
  border-radius:var(--radius-sm);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
  cursor:pointer;
}
.btn:hover, .btn:focus{
  background:var(--color-cta-hover);
  border-color:var(--color-cta-hover);
  color:#fff;
}
.btn-outline{
  background:transparent;
  color:#fff;
  border-color:#fff;
}
.btn-outline:hover{ background:#fff; color:var(--color-text); }

/* =========================================================
   7. SECTIONS / CARDS
   ========================================================= */
.section{ padding:var(--space-xl) 0; }
.section-tight{ padding:var(--space-lg) 0; }
.section-title{ text-align:center; margin-bottom:var(--space-md); }
.section-title p{ color:var(--color-text-muted); max-width:560px; margin:0 auto; }

.section-dark{
  background:var(--color-accent-dark);
  color:#f4e9d8;
}
.section-dark h2, .section-dark .eyebrow{ color:#f4e9d8; }
.section-dark .eyebrow{ color:var(--color-primary); }

.grid{
  display:grid;
  gap:var(--space-md);
  grid-template-columns:repeat(4, 1fr);
}
@media (max-width: 992px){ .grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 700px){ .grid{ grid-template-columns:repeat(2,1fr); gap:var(--space-sm); } }

.category-card{
  display:block;
  text-align:center;
  cursor:pointer;
}
.category-card .media{
  aspect-ratio:1/1;
  overflow:hidden;
  border:1px solid var(--color-border);
  margin-bottom:var(--space-xs);
  transition:border-color .25s ease;
}
.category-card:hover .media{ border-color:var(--color-primary); }
.category-card .media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.category-card:hover .media img{ transform:scale(1.06); }
.category-card h3{ font-size:0.95rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:2px; }
.category-card .category-count{
  display:block;
  font-size:0.75rem;
  color:var(--color-text-muted);
}

/* WooCommerce product cards */
ul.products{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--space-md);
  list-style:none;
}
@media (max-width: 992px){ ul.products{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width: 700px){ ul.products{ grid-template-columns:repeat(2,1fr) !important; gap:var(--space-sm); } }

ul.products li.product{
  position:relative;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  padding:var(--space-sm);
  transition:box-shadow .25s ease;
}
ul.products li.product:hover{ box-shadow:var(--shadow-soft); }
ul.products li.product img{ aspect-ratio:3/4; object-fit:cover; margin-bottom:var(--space-xs); }
ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-heading);
  font-size:1rem;
  margin:var(--space-xs) 0 4px;
}
ul.products li.product .price{
  color:var(--color-secondary);
  font-size:0.95rem;
}
ul.products li.product .button{
  display:block;
  margin-top:var(--space-xs);
  text-align:center;
  padding:10px;
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  background:var(--color-cta);
  color:#fff;
  border-radius:var(--radius-sm);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}
ul.products li.product:hover .button{ opacity:1; transform:translateY(0); }

/* =========================================================
   8. TESTIMONIALS
   ========================================================= */
.testimonial{
  text-align:center;
  max-width:640px;
  margin:0 auto;
}
.testimonial p{
  font-family:var(--font-heading);
  font-style:italic;
  font-size:1.3rem;
  line-height:1.6;
}
.testimonial cite{
  display:block;
  margin-top:var(--space-sm);
  font-style:normal;
  font-size:0.8rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--color-text-muted);
}

/* =========================================================
   9. NEWSLETTER
   ========================================================= */
.newsletter{
  background:var(--color-accent-dark);
  color:var(--color-primary);
  text-align:center;
  padding:var(--space-lg) 0;
}
.newsletter h2{ color:#fff; }
.newsletter-form{
  display:flex;
  max-width:420px;
  margin:var(--space-sm) auto 0;
  border:1px solid var(--color-primary);
}
.newsletter-form input[type="email"]{
  flex:1;
  border:none;
  background:transparent;
  padding:14px;
  color:#fff;
}
.newsletter-form input::placeholder{ color:#d8c39a; }
.newsletter-form button{
  background:var(--color-primary);
  color:var(--color-accent-dark);
  border:none;
  padding:0 22px;
  text-transform:uppercase;
  font-size:0.75rem;
  letter-spacing:0.1em;
  cursor:pointer;
}

/* =========================================================
   10. FOOTER
   ========================================================= */
.site-footer{
  background:var(--color-text);
  color:#cfc3b4;
  padding:var(--space-lg) 0 var(--space-sm);
  font-size:0.85rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--space-md);
  margin-bottom:var(--space-md);
}
@media (max-width: 780px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.site-footer h4{
  color:#fff;
  font-family:var(--font-body);
  font-size:0.8rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin-bottom:var(--space-xs);
}
.site-footer ul li{ margin-bottom:6px; }
.site-footer a:hover{ color:var(--color-primary); }
.footer-social{ display:flex; gap:var(--space-xs); margin-top:var(--space-xs); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:var(--space-sm);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-xs);
  font-size:0.75rem;
  color:#8a7d6f;
}

/* =========================================================
   11. SINGLE PRODUCT
   ========================================================= */
.product-ingredients, .product-howto{
  border-top:1px solid var(--color-border);
  padding-top:var(--space-sm);
  margin-top:var(--space-sm);
}
.product-ingredients h3, .product-howto h3{ font-size:1rem; }

/* =========================================================
   12. BLOG / ARCHIVE
   ========================================================= */
.post-card{
  border-bottom:1px solid var(--color-border);
  padding-bottom:var(--space-md);
  margin-bottom:var(--space-md);
}
.post-card .entry-meta{
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-text-muted);
}

/* =========================================================
   13. UTILITIES
   ========================================================= */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}