/*
Theme Name: LEM-Theme
Theme URI: (local)
Author: El Mehdi
Author URI: No Link
Description: A clean, bilingual-ready recipe/home & garden theme with built-in language switcher, featured author hero, and refined single-post layouts.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lem-theme
Domain Path: /languages
Screenshot: screenshot.png
Tags: blog, two-columns, custom-menu, featured-images
*/

/* Basic reset & layout */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); font-size: var(--size-body); line-height: var(--lh-body); color:#2E2E2E; background:#F7F3EC; }
a { color: #2B5A3A; text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.site-header { border-bottom: 1px solid #eee; padding: 16px 0; }
.site-title { font-size: 24px; font-weight: 800; margin: 0; }
.site-footer { border-top: 1px solid #eee; margin-top: 40px; padding: 40px 0; font-size:14px; color:#2E2E2E; }
.main { padding: 24px 0; }
.nav { display:flex; gap:16px; }
.nav a { color:#2B5A3A; }
.nav a:hover { color:#234a30; }

/* Archive cards */
.posts { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:24px; }
.post-card { border:1px solid #eee; border-radius:12px; overflow:hidden; }
.post-card .thumb { display:block; width:100%; aspect-ratio: 16 / 9; object-fit: cover; background:#f4f4f4; }
.post-card .card-body { padding:16px; }
.post-card h2 { margin:0 0 8px; font-size:20px; }
.post-card p { margin:0; color:rgba(46,46,46,.86); }
.read-more { display:inline-block; margin-top:10px; }

/* =========================================================
   PRIMARY MENU — Category Icons via CSS masks
   Usage (WP Admin → Appearance → Menus → Screen Options → enable "CSS Classes"):
   Add classes on a menu item: has-cat-icon icon-chicken  (example)
   Optional size helpers: icon-sm / icon-lg
   Put your SVGs at: /wp-content/themes/yourtheme/assets/icons/
   ========================================================= */

/* Base sizing variable for menus that use .nav or .menu */
.nav, .menu, .primary-menu, .main-nav { --menu-icon-size: 18px; }

/* Ensure we target common WP menu structures */
.nav li.has-cat-icon > a,
.menu .menu-item.has-cat-icon > a,
.primary-menu .menu-item.has-cat-icon > a,
.main-nav .menu-item.has-cat-icon > a{
  position: relative;
  padding-left: calc(var(--menu-icon-size) + 12px);
}

/* Draw the icon using mask so it inherits currentColor */
.nav li.has-cat-icon > a::before,
.menu .menu-item.has-cat-icon > a::before,
.primary-menu .menu-item.has-cat-icon > a::before,
.main-nav .menu-item.has-cat-icon > a::before{
  content: "";
  position: absolute;
  left: 6px; top: 50%;
  width: var(--menu-icon-size);
  height: var(--menu-icon-size);
  transform: translateY(-50%);
  background-color: currentColor;
  mask: var(--icon) no-repeat center / contain;
  -webkit-mask: var(--icon) no-repeat center / contain;
  opacity: .95;
}

/* Size helpers */
.nav li.icon-sm > a::before,
.menu .menu-item.icon-sm > a::before,
.primary-menu .menu-item.icon-sm > a::before,
.main-nav .menu-item.icon-sm > a::before{ width:16px; height:16px; left:6px; }

.nav li.icon-lg > a::before,
.menu .menu-item.icon-lg > a::before,
.primary-menu .menu-item.icon-lg > a::before,
.main-nav .menu-item.icon-lg > a::before{ width:22px; height:22px; left:4px; }

/* Optional hover tint — uses your link color already, so we just bump opacity */
.nav li.has-cat-icon > a:hover::before,
.menu .menu-item.has-cat-icon > a:hover::before,
.primary-menu .menu-item.has-cat-icon > a:hover::before,
.main-nav .menu-item.has-cat-icon > a:hover::before{
  opacity: 1;
}

/* ===== Map icon classes to SVGs (edit paths to your theme folder) ===== */
.menu .menu-item.icon-breakfast,   .nav li.icon-breakfast   { --icon: url("/wp-content/themes/yourtheme/assets/icons/breakfast.svg"); }
.menu .menu-item.icon-lunch,       .nav li.icon-lunch       { --icon: url("/wp-content/themes/yourtheme/assets/icons/lunch.svg"); }
.menu .menu-item.icon-dinner,      .nav li.icon-dinner      { --icon: url("/wp-content/themes/yourtheme/assets/icons/dinner.svg"); }
.menu .menu-item.icon-desserts,    .nav li.icon-desserts    { --icon: url("/wp-content/themes/yourtheme/assets/icons/dessert.svg"); }
.menu .menu-item.icon-snacks,      .nav li.icon-snacks      { --icon: url("/wp-content/themes/yourtheme/assets/icons/snack.svg"); }
.menu .menu-item.icon-drinks,      .nav li.icon-drinks      { --icon: url("/wp-content/themes/yourtheme/assets/icons/drink.svg"); }
.menu .menu-item.icon-soups,       .nav li.icon-soups       { --icon: url("/wp-content/themes/yourtheme/assets/icons/soup.svg"); }
.menu .menu-item.icon-salads,      .nav li.icon-salads      { --icon: url("/wp-content/themes/yourtheme/assets/icons/salad.svg"); }
.menu .menu-item.icon-seafood,     .nav li.icon-seafood     { --icon: url("/wp-content/themes/yourtheme/assets/icons/seafood.svg"); }
.menu .menu-item.icon-chicken,     .nav li.icon-chicken     { --icon: url("/wp-content/themes/yourtheme/assets/icons/chicken.svg"); }
.menu .menu-item.icon-beef,        .nav li.icon-beef        { --icon: url("/wp-content/themes/yourtheme/assets/icons/beef.svg"); }
.menu .menu-item.icon-pasta,       .nav li.icon-pasta       { --icon: url("/wp-content/themes/yourtheme/assets/icons/pasta.svg"); }
.menu .menu-item.icon-vegan,       .nav li.icon-vegan       { --icon: url("/wp-content/themes/yourtheme/assets/icons/vegan.svg"); }
.menu .menu-item.icon-vegetarian,  .nav li.icon-vegetarian  { --icon: url("/wp-content/themes/yourtheme/assets/icons/vegetarian.svg"); }
.menu .menu-item.icon-glutenfree,  .nav li.icon-glutenfree  { --icon: url("/wp-content/themes/yourtheme/assets/icons/glutenfree.svg"); }
.menu .menu-item.icon-keto,        .nav li.icon-keto        { --icon: url("/wp-content/themes/yourtheme/assets/icons/keto.svg"); }
.menu .menu-item.icon-bbq,         .nav li.icon-bbq         { --icon: url("/wp-content/themes/yourtheme/assets/icons/bbq.svg"); }
.menu .menu-item.icon-breads,      .nav li.icon-breads      { --icon: url("/wp-content/themes/yourtheme/assets/icons/bread.svg"); }
.menu .menu-item.icon-sauces,      .nav li.icon-sauces      { --icon: url("/wp-content/themes/yourtheme/assets/icons/sauce.svg"); }
.menu .menu-item.icon-instantpot,  .nav li.icon-instantpot  { --icon: url("/wp-content/themes/yourtheme/assets/icons/instantpot.svg"); }
.menu .menu-item.icon-airfryer,    .nav li.icon-airfryer    { --icon: url("/wp-content/themes/yourtheme/assets/icons/airfryer.svg"); }
.menu .menu-item.icon-slowcooker,  .nav li.icon-slowcooker  { --icon: url("/wp-content/themes/yourtheme/assets/icons/slowcooker.svg"); }
.menu .menu-item.icon-holiday,     .nav li.icon-holiday     { --icon: url("/wp-content/themes/yourtheme/assets/icons/holiday.svg"); }
.menu .menu-item.icon-ramadan,     .nav li.icon-ramadan     { --icon: url("/wp-content/themes/yourtheme/assets/icons/ramadan.svg"); }

/* ===== Optional: Emoji fallback (if you don't have SVGs) =====
   Add class 'emoji-icon' instead of 'has-cat-icon icon-...' and set per-item class with content.
   Example: add class 'icon-emoji-chicken' to the item.
*/
.nav li.emoji-icon > a,
.menu .menu-item.emoji-icon > a{ position:relative; padding-left: 28px; }

.nav li.icon-emoji-chicken > a::before,
.menu .menu-item.icon-emoji-chicken > a::before{
  content: "🍗"; position:absolute; left:6px; top:50%; transform:translateY(-50%); font-size:18px; line-height:1;
}
/* =========================================================
   Table styling (theme-wide, matches home palette)
   ========================================================= */
.entry-content table,
.wp-block-table table,
table.theme-table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  border:2px solid rgba(122,141,71,.35);
  border-radius:14px;
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.entry-content table th, .entry-content table td,
.wp-block-table table th, .wp-block-table table td,
table.theme-table th, table.theme-table td{
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid rgba(0,0,0,.05);
  font-size:15px;
  line-height:1.6;
}
.entry-content table thead th,
.wp-block-table table thead th,
table.theme-table thead th{
  background:rgba(122,141,71,.12);
  font-weight:800;
  color:#2B5A3A;
}
.entry-content table tr:nth-child(even) td,
.wp-block-table table tr:nth-child(even) td,
table.theme-table tr:nth-child(even) td{
  background:rgba(122,141,71,.05);
}
.entry-content table tr:last-child td,
.wp-block-table table tr:last-child td,
table.theme-table tr:last-child td{
  border-bottom:0;
}
.entry-content table caption,
.wp-block-table table caption,
table.theme-table caption{
  caption-side:top;
  text-align:left;
  font-weight:800;
  padding:10px 14px 6px;
}

/* Typography: fixed Open Sans body + Caveat headings */
:root{
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Caveat", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --size-title: 48px;
  --size-subtitle: 36px;
  --size-body: 18px;
  --lh-body: 1.7;
  --lh-head: 1.15;
}
h1, h2, h3, h4, h5, h6,
.site-title, .entry-title, .page-title{
  font-family: var(--font-head);
  font-weight:700;
  margin-top:0;
  line-height:var(--lh-head);
  color:#111;
}
h1,
.post-title,
.entry-title{ font-size:var(--size-title); font-weight:700; }
h2{ font-size:var(--size-subtitle); font-weight:700; }
h3{ font-size:28px; font-weight:700; }
h4{ font-size:22px; font-weight:700; }
h5{ font-size:20px; }
h6{ font-size:18px; }
p, .post-body, .entry-content{ font-family:var(--font-body); font-size:var(--size-body); }
.navbar, .menu, .header-menu, .primary-nav a, .foot-menu a{ font-family:var(--font-body); }
.sidebar-title, .widget-title{ font-family:var(--font-head); font-size:28px; font-weight:700; }
p{ margin:0 0 1.1em; }