/*
Theme Name:   HealthMe Child
Theme URI:    https://health-me.co.il
Description:  Child theme for HealthMe — built on Hello Elementor
Author:       Papagay Digital
Author URI:   https://papagay.co.il
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  healthme-child
Tags:         health, RTL, Hebrew
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — GLOBAL DESIGN TOKENS
   These mirror the Global Colors set in Elementor Kit.
   Use these in any custom CSS snippet to stay on-brand.
   ============================================================ */

:root {
  /* Brand colors */
  --hm-primary:        #006B6B;   /* Deep Teal — header, H1/H2, active states    */
  --hm-primary-light:  #E6F4F4;   /* Light Teal — section backgrounds, hovers    */
  --hm-primary-mid:    #CCE9E9;   /* Mid Teal — borders, dividers                */
  --hm-accent:         #2D7A2D;   /* Warm Green — CTA buttons, Read More links   */
  --hm-accent-hover:   #236023;   /* Darker green — button hover state           */

  /* Text */
  --hm-text-main:      #1A1A1A;   /* Body copy                                   */
  --hm-text-meta:      #666666;   /* Dates, authors, tags, captions              */
  --hm-text-inverse:   #FFFFFF;   /* Text on dark backgrounds                    */

  /* Backgrounds */
  --hm-bg-page:        #FAFAFA;   /* Page background (off-white)                 */
  --hm-bg-card:        #FFFFFF;   /* Article card background                     */
  --hm-bg-dark:        #111111;   /* Footer background                           */

  /* Borders */
  --hm-border:         #DDDDDD;   /* Standard card/divider border                */
  --hm-border-focus:   #006B6B;   /* Form focus ring                             */

  /* Typography */
  --hm-font-body:      'Heebo', 'Arial', sans-serif;
  --hm-size-body:      17px;
  --hm-line-height:    1.8;
  --hm-size-h1:        38px;
  --hm-size-h2:        26px;
  --hm-size-h3:        20px;
  --hm-size-meta:      13px;

  /* Spacing */
  --hm-radius:         6px;       /* Card border radius                          */
  --hm-radius-btn:     4px;       /* Button border radius                        */
  --hm-shadow:         0 2px 8px rgba(0,0,0,0.08);
  --hm-shadow-hover:   0 4px 16px rgba(0,107,107,0.15);
}

/* ============================================================
   BASE OVERRIDES
   ============================================================ */

body {
  font-family: var(--hm-font-body);
  font-size:   var(--hm-size-body);
  line-height: var(--hm-line-height);
  color:       var(--hm-text-main);
  background:  var(--hm-bg-page);
  direction:   rtl;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Remove Hello Elementor's default page padding on body */
.elementor-page .page-content-area {
  padding: 0;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, .h1 { font-size: var(--hm-size-h1); font-weight: 700; color: var(--hm-text-main); line-height: 1.25; }
h2, .h2 { font-size: var(--hm-size-h2); font-weight: 700; color: var(--hm-text-main); line-height: 1.35; }
h3, .h3 { font-size: var(--hm-size-h3); font-weight: 600; color: var(--hm-text-main); line-height: 1.45; }
h4, h5, h6 { font-weight: 600; }

/* Links */
a {
  color: var(--hm-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--hm-accent);
}

/* ============================================================
   ARTICLE / SINGLE POST CONTENT AREA
   ============================================================ */

.entry-content,
.elementor-widget-post-content .elementor-widget-container {
  font-size:   var(--hm-size-body);
  line-height: var(--hm-line-height);
  color:       var(--hm-text-main);
}

/* Headings inside article body */
.entry-content h2 {
  font-size:     var(--hm-size-h2);
  font-weight:   700;
  color:         var(--hm-primary);
  margin-top:    2em;
  margin-bottom: 0.6em;
  padding-bottom: 0.3em;
  border-bottom: 2px solid var(--hm-primary-mid);
}

.entry-content h3 {
  font-size:     var(--hm-size-h3);
  font-weight:   600;
  color:         var(--hm-text-main);
  margin-top:    1.6em;
  margin-bottom: 0.4em;
}

/* Key Takeaways box — added by AI rewrite pipeline */
.key-takeaways,
.entry-content .key-takeaways {
  background:    var(--hm-primary-light);
  border-right:  4px solid var(--hm-primary); /* RTL: border on right */
  border-radius: var(--hm-radius);
  padding:       1.2em 1.5em;
  margin:        1.5em 0;
}

.key-takeaways h4,
.key-takeaways strong {
  color:         var(--hm-primary);
  font-size:     1em;
  margin-bottom: 0.5em;
  display:       block;
}

/* Sources section at bottom of article */
.article-sources {
  background:    var(--hm-bg-page);
  border-top:    2px solid var(--hm-border);
  margin-top:    2.5em;
  padding-top:   1.2em;
}

.article-sources h4 {
  color:         var(--hm-text-meta);
  font-size:     var(--hm-size-meta);
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.6em;
}

.article-sources a {
  color:      var(--hm-text-meta);
  font-size:  var(--hm-size-meta);
  word-break: break-all;
}

/* Inline images within article content */
.entry-content img {
  border-radius: var(--hm-radius);
  max-width:     100%;
  height:        auto;
}

/* ============================================================
   ARTICLE CARDS
   ============================================================ */

/* Common card wrapper */
.hm-card {
  background:    var(--hm-bg-card);
  border:        1px solid var(--hm-border);
  border-radius: var(--hm-radius);
  overflow:      hidden;
  transition:    box-shadow 0.2s ease, transform 0.2s ease;
}

.hm-card:hover {
  box-shadow: var(--hm-shadow-hover);
  transform:  translateY(-2px);
}

/* Card image aspect ratio — 16:9 */
.hm-card .card-image {
  aspect-ratio: 16 / 9;
  overflow:     hidden;
}

.hm-card .card-image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.hm-card:hover .card-image img {
  transform: scale(1.03);
}

/* Category badge on cards */
.hm-category-badge {
  display:          inline-block;
  background:       var(--hm-primary);
  color:            var(--hm-text-inverse);
  font-size:        11px;
  font-weight:      700;
  padding:          3px 8px;
  border-radius:    3px;
  text-transform:   uppercase;
  letter-spacing:   0.04em;
}

/* Card meta (date, author) */
.hm-card-meta {
  font-size:  var(--hm-size-meta);
  color:      var(--hm-text-meta);
  margin-top: 0.3em;
}

/* ============================================================
   CATEGORY SECTION HEADER (homepage)
   [Category Name] ─────────────── [<< לכל ה...]
   ============================================================ */

.hm-section-header {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  margin-bottom:  1.2em;
  padding-bottom: 0.5em;
  border-bottom:  2px solid var(--hm-primary);
}

.hm-section-header .section-title {
  font-size:   var(--hm-size-h2);
  font-weight: 700;
  color:       var(--hm-text-main);
  margin:      0;
}

.hm-section-header .section-link {
  display:          flex;
  align-items:      center;
  gap:              6px;
  background:       var(--hm-text-main);
  color:            var(--hm-text-inverse);
  font-size:        13px;
  font-weight:      700;
  padding:          6px 12px;
  border-radius:    3px;
  white-space:      nowrap;
  transition:       background 0.2s;
}

.hm-section-header .section-link:hover {
  background: var(--hm-primary);
  color:      var(--hm-text-inverse);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.hm-btn,
.elementor-button.hm-btn {
  background:    var(--hm-accent);
  color:         var(--hm-text-inverse);
  border-radius: var(--hm-radius-btn);
  font-weight:   700;
  transition:    background 0.2s ease, transform 0.15s ease;
}

.hm-btn:hover,
.elementor-button.hm-btn:hover {
  background: var(--hm-accent-hover);
  color:      var(--hm-text-inverse);
  transform:  translateY(-1px);
}

/* ============================================================
   READING TIME META
   ============================================================ */

.hm-reading-time {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   var(--hm-size-meta);
  color:       var(--hm-text-meta);
}

.hm-reading-time::before {
  content: "⏱";
  font-size: 12px;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.rank-math-breadcrumb,
.rank-math-breadcrumb p {
  font-size:  var(--hm-size-meta);
  color:      var(--hm-text-meta);
  margin:     0;
  padding:    0.6em 0;
}

.rank-math-breadcrumb a {
  color: var(--hm-text-meta);
}

.rank-math-breadcrumb a:hover {
  color: var(--hm-primary);
}

/* ============================================================
   RESPONSIVE HELPERS
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --hm-size-h1: 30px;
    --hm-size-h2: 22px;
    --hm-size-body: 16px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --hm-size-h1: 26px;
    --hm-size-h2: 20px;
    --hm-size-body: 16px;
  }

  .hm-section-header {
    flex-wrap: wrap;
    gap: 0.5em;
  }
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
  .elementor-location-header,
  .elementor-location-footer,
  .hm-section-header .section-link,
  .elementor-widget-social-icons {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }
}