/*
 ===================================================
  GAUMENFREUNDIN-STYLE CSS — Elementor + WP Recipe Maker
  Paste into: Elementor → Site Settings → Custom CSS
  (or Appearance → Customize → Additional CSS as fallback)
 ===================================================
*/

/* ── 0. FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;600;700&display=swap');

/* ── 1. VARIABLES ── */
:root {
  --gf-green:      #4a7c59;
  --gf-green-dk:   #3a6347;
  --gf-green-lt:   #eef4f0;
  --gf-orange:     #e8843a;
  --gf-bg:         #ffffff;
  --gf-bg-soft:    #faf9f7;
  --gf-text:       #2d2d2d;
  --gf-muted:      #717171;
  --gf-border:     #ebebeb;
  --gf-gold:       #f5b732;
  --gf-r:          6px;
  --gf-shadow:     0 2px 12px rgba(0,0,0,.07);
  --gf-shadow-h:   0 6px 24px rgba(0,0,0,.12);
  --gf-display:    'Playfair Display', Georgia, serif;
  --gf-body:       'Lato', system-ui, sans-serif;
}

body { font-family: var(--gf-body) !important; color: var(--gf-text); }
h1,h2,h3,h4 { font-family: var(--gf-display) !important; color: var(--gf-text); }

/* ── 2. TOP BAR ── */
.gf-top-bar {
  background: var(--gf-green) !important;
  color: #fff !important;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  letter-spacing: .3px;
}
.gf-top-bar a { color: #fff !important; text-decoration: underline; }

/* ── 3. HEADER / NAV ── */
.elementor-location-header {
  background: #fff !important;
  border-bottom: 1px solid var(--gf-border) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
}
.elementor-nav-menu a {
  font-family: var(--gf-body) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--gf-text) !important;
  transition: color .15s;
}
.elementor-nav-menu a:hover,
.elementor-nav-menu .elementor-item-active {
  color: var(--gf-green) !important;
}
.gf-social-icons a {
  color: var(--gf-muted) !important;
  transition: color .15s;
}
.gf-social-icons a:hover { color: var(--gf-green) !important; }

/* ── 4. BREADCRUMB ── */
.gf-breadcrumb, .gf-breadcrumb a {
  font-size: 12.5px;
  color: var(--gf-muted) !important;
}

/* ── 5. SINGLE POST: TITLE + META ── */
.gf-post-title,
h1.entry-title {
  font-family: var(--gf-display) !important;
  font-size: clamp(26px, 4.5vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}
.gf-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--gf-muted);
  margin-bottom: 18px;
}
.gf-post-meta .gf-author { color: var(--gf-green) !important; font-weight: 700; }
.gf-post-meta .gf-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--gf-border);
}
.gf-time-badge {
  background: var(--gf-green-lt);
  color: var(--gf-green);
  font-weight: 700;
  font-size: 12.5px;
  padding: 3px 10px;
  border-radius: 20px;
}
.gf-stars { color: var(--gf-gold); }

/* ── 6. JUMP TO RECIPE BUTTON ── */
.wprm-jump-to-recipe-shortcode a,
.gf-jump-btn {
  display: inline-block !important;
  background: var(--gf-green) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 22px !important;
  border-radius: 25px !important;
  text-decoration: none !important;
  transition: background .2s, transform .15s !important;
}
.wprm-jump-to-recipe-shortcode a:hover { background: var(--gf-green-dk) !important; transform: translateY(-1px); }

/* ── 7. FEATURED IMAGE ── */
.gf-featured-image img,
.elementor-widget-theme-post-featured-image img {
  border-radius: 10px !important;
}

/* ── 8. CONTENT WIDTH ── */
.gf-content-column {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}
.elementor-widget-theme-post-content {
  font-size: 16.5px;
  line-height: 1.8;
}

/* ── 9. WP RECIPE MAKER CARD ── */
.wprm-recipe-container {
  background: var(--gf-bg-soft) !important;
  border: 1px solid var(--gf-border) !important;
  border-radius: 14px !important;
  padding: 32px !important;
  margin: 36px 0 !important;
  font-family: var(--gf-body) !important;
}
.wprm-recipe-name {
  font-family: var(--gf-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}
.wprm-recipe-block-container-columns {
  display: flex !important;
  border-top: 1px solid var(--gf-border) !important;
  border-bottom: 1px solid var(--gf-border) !important;
  padding: 14px 0 !important;
  margin: 16px 0 !important;
}
.wprm-recipe-block-container-column {
  flex: 1;
  text-align: center;
  border-right: 1px solid var(--gf-border);
}
.wprm-recipe-block-container-column:last-child { border-right: none; }
.wprm-recipe-time-minutes,
.wprm-recipe-servings {
  font-family: var(--gf-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--gf-green) !important;
}
.wprm-recipe-block-container-column-label {
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--gf-muted) !important;
}

.wprm-recipe-ingredients-container h3,
.wprm-recipe-instructions-container h3,
.wprm-recipe-header-container h3 {
  font-family: var(--gf-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--gf-green) !important;
  display: inline-block !important;
  padding-bottom: 5px !important;
  margin: 22px 0 10px !important;
}

.wprm-recipe-ingredient {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--gf-border) !important;
  font-size: 15px !important;
  list-style: none !important;
}
.wprm-recipe-ingredient:last-child { border-bottom: none !important; }
.wprm-recipe-ingredient-amount { font-weight: 700 !important; color: var(--gf-green) !important; }
.wprm-recipe-ingredient input[type=checkbox] {
  width: 16px !important; height: 16px !important;
  accent-color: var(--gf-green) !important;
}

.wprm-recipe-instruction {
  display: flex !important;
  gap: 14px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--gf-border) !important;
}
.wprm-recipe-instruction:last-child { border-bottom: none !important; }
.wprm-recipe-instruction img {
  width: 80px !important; height: 80px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}
.wprm-recipe-instruction-text { font-size: 15.5px !important; line-height: 1.7 !important; }

.wprm-recipe-notes-container {
  background: var(--gf-green-lt) !important;
  border-left: 4px solid var(--gf-green) !important;
  border-radius: var(--gf-r) !important;
  padding: 14px 18px !important;
  margin-top: 16px !important;
}
.wprm-recipe-nutrition-container {
  background: var(--gf-green-lt) !important;
  border-radius: var(--gf-r) !important;
  padding: 14px 18px !important;
  margin-top: 14px !important;
  font-size: 13.5px !important;
}
.wprm-recipe-keyword a {
  display: inline-block !important;
  background: #fff !important;
  border: 1px solid var(--gf-border) !important;
  color: var(--gf-muted) !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
  border-radius: 14px !important;
  margin: 3px !important;
}
.wprm-recipe-keyword a:hover { border-color: var(--gf-green) !important; color: var(--gf-green) !important; }
.wprm-recipe-print-link a {
  border: 1.5px solid var(--gf-green) !important;
  color: var(--gf-green) !important;
  background: transparent !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
}
.wprm-recipe-print-link a:hover { background: var(--gf-green) !important; color: #fff !important; }
.wprm-recipe-cook-mode {
  background: var(--gf-orange) !important;
  color: #fff !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
}
.wprm-rating-star-full { color: var(--gf-gold) !important; }

/* ── 10. BODY CONTENT (H2/H3, lists, links) ── */
.elementor-widget-theme-post-content h2 {
  font-size: 23px !important;
  margin-top: 36px !important;
  margin-bottom: 12px !important;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gf-border);
}
.elementor-widget-theme-post-content h3 {
  font-size: 18px !important;
  margin-top: 28px !important;
}
.elementor-widget-theme-post-content ul li::marker { color: var(--gf-green); }
.elementor-widget-theme-post-content a { color: var(--gf-green) !important; font-weight: 600; }

/* ── 11. INTERNAL LINK BOX (custom Elementor container) ── */
.gf-link-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--gf-bg-soft);
  border: 1px solid var(--gf-border);
  border-left: 4px solid var(--gf-green);
  border-radius: var(--gf-r);
  padding: 14px 18px;
}
.gf-link-box img { width: 68px; height: 68px; border-radius: 6px; object-fit: cover; }
.gf-link-box .label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--gf-green); font-weight: 700;
}

/* ── 12. RECIPE / ARTICLE CARDS (homepage grids, related posts) ── */
.gf-card {
  border-radius: var(--gf-r);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.gf-card:hover { box-shadow: var(--gf-shadow-h); transform: translateY(-3px); }
.gf-card img { border-radius: var(--gf-r); }
.gf-card-title {
  font-family: var(--gf-body) !important;
  font-size: 14px;
  font-weight: 700;
  color: var(--gf-text);
}

/* ── 13. NEWSLETTER BOX ── */
.gf-newsletter {
  background: linear-gradient(135deg, var(--gf-green) 0%, var(--gf-green-dk) 100%);
  border-radius: 14px;
  padding: 36px 32px;
  text-align: center;
  color: #fff;
}
.gf-newsletter h3 { font-family: var(--gf-display) !important; color: #fff; }
.gf-newsletter input[type=email] {
  border: none; border-radius: 25px; padding: 10px 18px; font-size: 14px;
}
.gf-newsletter button,
.gf-newsletter input[type=submit] {
  background: var(--gf-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
}

/* ── 14. COMMENTS ── */
.comment-list { border-top: 2px solid var(--gf-border); padding-top: 20px; }
.comment-author .avatar { border-radius: 50%; border: 2px solid var(--gf-border); }
.comment.bypostauthor .comment-content {
  background: var(--gf-green-lt) !important;
  border-radius: 8px;
  padding: 12px 14px;
}
.comment.bypostauthor .comment-author .fn { color: var(--gf-green) !important; }
#commentform input, #commentform textarea {
  border: 1.5px solid var(--gf-border) !important;
  border-radius: var(--gf-r) !important;
  font-family: var(--gf-body) !important;
}
#commentform input:focus, #commentform textarea:focus { border-color: var(--gf-green) !important; }
#commentform .submit, #commentform input[type=submit] {
  background: var(--gf-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
  padding: 11px 28px !important;
}

/* ── 15. FOOTER ── */
.elementor-location-footer {
  background: #1e1e1e !important;
  color: #aaa !important;
  font-family: var(--gf-body) !important;
}
.elementor-location-footer a { color: #ccc !important; transition: color .15s; }
.elementor-location-footer a:hover { color: #fff !important; }

/* ── 16. BUTTONS (global Elementor button widget) ── */
.elementor-button {
  background: var(--gf-green) !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
  font-family: var(--gf-body) !important;
  transition: background .2s, transform .15s !important;
}
.elementor-button:hover { background: var(--gf-green-dk) !important; transform: translateY(-1px); }

/* ── 17. MOBILE ── */
@media (max-width: 768px) {
  .gf-post-title, h1.entry-title { font-size: 24px !important; }
  .wprm-recipe-container { padding: 18px !important; }
  .wprm-recipe-block-container-columns { flex-wrap: wrap !important; }
  .wprm-recipe-block-container-column { min-width: 45%; border-bottom: 1px solid var(--gf-border); }
}


/* ── STOPGAP: Kadence/Gutenberg Latest Posts block (until homepage is rebuilt in Elementor) ── */
.wp-block-latest-posts__list.is-grid li {
  border-radius: var(--gf-r) !important;
  overflow: hidden !important;
  transition: box-shadow .2s, transform .2s !important;
}
.wp-block-latest-posts__list.is-grid li:hover {
  box-shadow: var(--gf-shadow-h) !important;
  transform: translateY(-3px) !important;
}
.wp-block-latest-posts__featured-image img {
  border-radius: var(--gf-r) !important;
}
.wp-block-latest-posts__post-title {
  font-family: var(--gf-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--gf-text) !important;
  text-decoration: none !important;
}