/* — Core Variables & Themes — */
@font-face {
font-family: ‘Assistant-Regular’;
src: url(’../fonts/Assistant-Regular.woff2’) format(‘woff2’),
url(’../fonts/Assistant-Regular.woff2’) format(‘truetype’);
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: ‘OHAdirMesika-Regular’;
src: url(’../fonts/OHAdirMesika-Regular.woff2’) format(‘woff2’);
font-weight: normal;
font-style: normal;
font-display: swap;
}

:root {
–font-header: ‘Assistant-Regular’, sans-serif;
–font-body-default: ‘Assistant-Regular’, sans-serif;
–font-chord-default: ‘Assistant-Regular’, sans-serif;
–font-body-oot: ‘Assistant-Regular’, sans-serif;
–font-chord-oot: ‘Assistant-Regular’, sans-serif;
–font-body: var(–font-body-default);
–font-chord: var(–font-chord-default);
–radius-md: 12px;
–radius-lg: 16px;
–transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
–shadow-md: 0 5px 20px rgba(0,0,0,0.12);
}

/* --------------------------------------------------------------------
 * Chord Strip Styles
 * These styles define the appearance of the chord strip bar that appears
 * at the top of the song page when the user toggles it on. Each chord
 * item is given a fixed square container for its SVG diagram, similar
 * to the pop-up diagram. The SVG itself is scaled to fill the box,
 * ensuring that the full guitar diagram is visible within the strip.
 */

/* Container for each chord item in the strip */
.chord-strip-item {
    text-align: center;
    cursor: pointer;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Box that will house the rendered SVG guitar diagram */
.chord-strip-diagram {
    width: 80px;
    height: 80px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure the SVG fills its container appropriately */
/* Scale the guitar diagram proportionally so it fits within the square
   without distortion. By setting height to auto and constraining the
   maximum dimensions, the SVG keeps its aspect ratio and centers
   itself within the box. */
.chord-strip-diagram svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
}

/* Optional: spacing and fonts for chord name and count */
.chord-strip-name {
    margin-top: 4px;
    font-weight: bold;
    color: var(--text-primary, inherit);
}
.chord-strip-count {
    font-size: 0.8em;
    color: var(--text-secondary, #64748b);
}
/* עדכון המחלקה שמפעילה את הפונט הדינמי */
.achord-song-wrapper.oot-haim-active {
–font-body: var(–font-body-oot);
–font-chord: var(–font-chord-oot);
}

/* הבטחת משקל 600 לאקורדים */
.achord-chord {
font-weight: 600 !important;
}

/* אקורדים חופשיים - מילת רפאים */
.achord-lyrics:has-text('♪') {
    font-size: 0;
    width: 0.5em;
    display: inline-block;
}

/* האקורד שמגיע אחרי מילת הרפאים */
.achord-phantom-word + .achord-chord {
    margin-right: 0.2em;
    position: relative;
}

/* התאמה למצב הדפסה */
@media print {
    .achord-phantom-word {
        display: none;
    }
}
.theme-conductor { --bg-page: #0D1B33; --bg-song: #F1DAC4; --text-primary: #0D1B33; --text-secondary: #5a6475; --text-chord: #00509D; --border-color: #DCD0C1; --accent-primary: #B68C64; --accent-primary-text: #FFFFFF; --bg-control: rgba(228, 212, 193, 0.9); --bg-control-hover: #d1bfae; --piano-white-key: #F1DAC4; --piano-white-key-highlight: #B68C64; --piano-black-key: #0D1B33; --piano-black-key-highlight: #8E6C4D; }
.theme-studio    { --bg-page: #F1F7F9; --bg-song: #FFFFFF; --text-primary: #00171F; --text-secondary: #64748B; --text-chord: #1D4E89; --border-color: #E2E8F0; --accent-primary: #1D4E89; --accent-primary-text: #FFFFFF; --bg-control: rgba(248, 250, 252, 0.9); --bg-control-hover: #e2e8f0; --piano-white-key: #FFFFFF; --piano-white-key-highlight: #1D4E89; --piano-black-key: #00171F; --piano-black-key-highlight: #12345A; }
.dark-mode.theme-conductor { --bg-page: #060e1c; --bg-song: #1f2937; --text-primary: #E5E7EB; --text-secondary: #9CA3AF; --text-chord: #FFC857; --border-color: #374151; --bg-control: rgba(55, 65, 81, 0.9); --bg-control-hover: #4b5563; --piano-white-key: #374151; --piano-white-key-highlight: #B68C64; --piano-black-key: #E5E7EB; --piano-black-key-highlight: #8E6C4D; }
.dark-mode.theme-studio    { --bg-page: #00171F; --bg-song: #0b2531; --text-primary: #F1F7F9; --text-secondary: #94A3B8; --text-chord: #00A8E8; --border-color: #1E293B; --accent-primary: #00A8E8; --accent-primary-text: #00171F; --bg-control: rgba(30, 41, 59, 0.9); --bg-control-hover: #475569; --piano-white-key: #1E293B; --piano-white-key-highlight: #00A8E8; --piano-black-key: #F1F7F9; --piano-black-key-highlight: #007AB3; }

/* --- Base Layout & Song Display --- */
.achord-song-wrapper { background-color: var(--bg-page); }
.achord-song-wrapper.oot-haim-active { --font-body: var(--font-body-oot); }
.achord-song { background: var(--bg-song); color: var(--text-primary); max-width: 900px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem) 180px; min-height: 100vh; }
.achord-header { text-align: center; margin-bottom: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); }
.achord-content { --base-font-size: clamp(24px, 1.8vw + 0.8rem, 30px); font-size: var(--base-font-size); line-height: 1.8; font-family: var(--font-body); }
h1.achord-title { font-family: var(--font-header); font-size: clamp(2rem, 5vw, 2.75rem); color: var(--text-primary); }
h2.achord-performer { font-family: var(--font-header); font-size: clamp(1.25rem, 4vw, 2rem); color: var(--text-secondary); font-weight: 400; margin-top: 0.25rem; }
p.achord-writer { font-family: var(--font-body); font-size: 1rem; color: var(--text-secondary); margin-top: 0.5rem; }
.achord-line { display: flex; flex-wrap: wrap; align-items: flex-end; margin-bottom: calc(var(--base-font-size) * 0.8); gap: 0.25em 0.5em; }
.achord-word-group { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; text-align: center; padding-bottom: 0.2em; }
.achord-chord { font-family: var(--font-chord); font-weight: 700; font-size: 0.85em; color: var(--text-chord); cursor: pointer; min-height: 1.2em; margin-bottom: 0.3em; padding: 0.2em 0.4em; }
.achord-lyrics { font-family: var(--font-body); }
.achord-placeholder-chord { visibility: hidden; }

/* --- Bottom Controls - התיקון הסופי --- */
.achord-bottom-controls-cluster {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
[dir="rtl"] .achord-bottom-controls-cluster {
    left: auto;
    right: 1rem;
    align-items: flex-end;
}

.achord-options-drawer {
    /* הופכים את המגירה ל"מדף צף" שממוקם מעל הסרגל הראשי */
    position: absolute;
    bottom: calc(100% + 0.5rem); /* 100% גובה הסרגל + 0.5rem רווח */
    right: 0; /* יישור לימין עבור RTL */
    
    background: var(--bg-control);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    
    /* ========== התיקון כאן ========== */
    width: 320px; /* קבענו רוחב מפורש כדי להחזיר את המראה המקורי */
    max-width: 320px;
    /* ============================ */

    border: 1px solid var(--border-color);
    
    /* אנימציה והסתרה */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
}

.achord-options-drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.2s, transform 0.2s;
}

.achord-main-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--bg-control);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
} 
/*------------------------------------------------------------- */

.control-row { display: flex; align-items: center; justify-content: flex-start; gap: 0.25rem; }
.control-button { background: transparent; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; padding: 0.5rem; border-radius: 50%; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.control-button:hover { background: var(--bg-control-hover); }
.control-button.active { color: var(--accent-primary); }
.control-info { font-weight: 700; color: var(--text-primary); padding: 0 0.25rem; font-size: 1rem; text-align: center; min-width: 2ch; }
#achord-capo-info { font-size: 0.8rem; }
.drawer-grid { display: flex; flex-direction: column; gap: 1rem; }
.drawer-combined-row { display: flex; gap: 1rem; justify-content: center; align-items: flex-start; }
.drawer-group { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.drawer-label { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); }
.drawer-buttons-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.drawer-button { font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; padding: 0.5rem 1rem; border: 1px solid var(--border-color); background: var(--bg-song); color: var(--text-primary); border-radius: 8px; cursor: pointer; text-decoration: none; }
.drawer-button.icon-button { font-size: 1.2rem; padding: 0.5rem; width: 40px; height: 40px; display:flex; justify-content:center; align-items:center; }
.drawer-button.special-link { background-color: var(--accent-primary); color: var(--accent-primary-text); border-color: var(--accent-primary); }

/* --- Popups & Diagrams --- */
.achord-popup { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10001; }
.achord-popup.hidden { opacity: 0; pointer-events: none; visibility: hidden; }
/* (שאר קוד ה-CSS ממשיך מכאן ללא שינוי...) */
.achord-popup-content { background: var(--bg-song); color: var(--text-primary); padding: 1.5rem; border-radius: var(--radius-md); position: relative; max-width: 90vw; max-height: 90vh; overflow: auto; border: 1px solid var(--border-color); }
.achord-close { position: absolute; top: 0.5rem; left: 1rem; cursor: pointer; font-size: 1.5rem; color: var(--text-secondary); }
#achord-diagram { direction: ltr; }
.achord-piano-diagram-wrapper { position: relative; padding-top: 10px; width: 100%; overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
.piano-key-group { position: relative; display: flex; height: 150px; min-width: fit-content; }
.piano-key { position: absolute; box-sizing: border-box; cursor: default; user-select: none; }
.white-key { width: 40px; height: 100%; background: var(--piano-white-key); border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 4px 4px; margin-right: -1px; z-index: 0; }
.white-key.highlighted { background: var(--piano-white-key-highlight); border-color: var(--accent-primary); }
.black-key { width: 25px; height: 60%; background: var(--piano-black-key); border: 1px solid var(--text-primary); border-top: none; border-radius: 0 0 3px 3px; z-index: 1; }
.black-key.highlighted { background: var(--piano-black-key-highlight); border-color: var(--accent-primary); }
.key-label { position: absolute; bottom: 8px; width: 100%; text-align: center; font-size: 0.85em; font-weight: 600; color: var(--text-secondary); pointer-events: none; }
.black-key .key-label { color: var(--piano-white-key); font-size: 0.75em; top: 5px; }
.white-key.highlighted .key-label, .black-key.highlighted .key-label { color: var(--accent-primary-text); }

/* --- Accordion & Related Posts (מתוסף 2 ו-4) --- */
.achord-accordion-container { max-width: 900px; margin: 40px auto; border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md); background-color: var(--bg-song); color: var(--text-primary);}
.achord-accordion-item { border-bottom: 1px solid var(--border-color); }
.achord-accordion-item:last-child { border-bottom: none; }
.achord-accordion-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; font-size: 1.2em; font-weight: 700; color: var(--text-chord); background-color: rgba(0,0,0,0.03); cursor: pointer; transition: background-color 0.2s; }
.achord-accordion-header:hover { background-color: rgba(0,0,0,0.06); }
.achord-accordion-header.active { background-color: var(--accent-primary); color: var(--accent-primary-text); }
.achord-accordion-header .arrow { transition: transform 0.2s; transform-origin: center; }
.achord-accordion-header.active .arrow { transform: rotate(180deg); }
.achord-accordion-content { display: none; padding: 15px 20px; background-color: transparent; line-height: 1.6; }
.achord-accordion-list { list-style: none; margin: 0; padding: 0; }
.achord-accordion-list li { margin-bottom: 8px; border-bottom: 1px dashed var(--border-color); padding-bottom: 8px; }
.achord-accordion-list li:last-child { margin-bottom: 0; border-bottom: none; }
.achord-accordion-list a { font-size: 1.1em; color: var(--text-primary); text-decoration: none; transition: color 0.2s; }
.achord-accordion-list a:hover { color: var(--text-chord); text-decoration: underline; }
.achord-accordion-no-posts { padding: 10px 20px; color: var(--text-secondary); font-style: italic; }
.achord-accordion-section-title { font-size: 1.6em; font-weight: 700; color: var(--text-primary); margin: 20px 0 10px; text-align: right; padding-right: 20px; }
.achord-letter-title { font-size: 1.2em; font-weight: 700; color: var(--text-chord); margin: 15px 0 5px; padding-bottom: 5px; border-bottom: 1px solid var(--border-color); }
.related-posts-container { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-color); max-width: 840px; margin-left: auto; margin-right: auto; }
.related-posts-section { margin-bottom: 20px; }
.related-posts-section h3 { font-size: 1.5em; color: var(--text-primary); margin-bottom: 15px; text-align: right; }
.related-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; }
.related-post-card { display: block; background: var(--bg-control); padding: 15px; border-radius: var(--radius-md); text-decoration: none; transition: all .2s ease; border: 1px solid var(--border-color); }
.related-post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-primary); }
.related-post-title { display: block; font-weight: 700; color: var(--text-primary); font-size: 1.1em; }
.related-post-performer { display: block; font-size: 0.9em; color: var(--text-secondary); }
/* === Upload Form / Wizard (Achord Upload) === */
#achord-upload-form.upload-wizard {
  max-width: 800px;
  margin: 0 auto;
  font-family: var(--font-body);
}

#achord-upload-form .upload-step { margin-bottom: 2rem; }
#achord-upload-form .upload-step h3 {
  font-size: 1.2rem;
  margin-bottom: .75rem;
}
/* =========================
   Achord Upload – Topfold (Sticky) + Recommended Chords + PDF
   ========================= */

/* משתני פריסה לטופס ההעלאה (נחוצים ל-sticky) */
:root{
  --upload-top-offset: calc(env(safe-area-inset-top, 0px) + 0px);
  --rec-label-h: 26px;   /* גובה כותרת "אקורדים מומלצים" אם קיימת */
  --rec-h: 110px;        /* גובה פס המומלצים */
  --pdf-h: 130px;        /* גובה אזור ה-PDF */
}

/* כותרת חיצונית מחוץ לסטיקי (אם יש) */
.recommended-label{
  position: sticky;
  top: var(--upload-top-offset);
  z-index: 101;
  background:#fff;
  padding: 6px 12px 0;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* === Topfold – המכלול הדביק (חוזרים למבנה המקורי) === */
/* תופסים גם class וגם id כדי לכסות וריאציות DOM */
#achord-upload-form .achord-topfold,
#achord-topfold {
  position: sticky;
  top: calc(var(--upload-top-offset) + var(--rec-label-h));
  z-index: 100;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  display: grid;
  grid-template-rows: var(--rec-h) var(--pdf-h);
  gap: 1px;
  padding: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* פינוי מקום לתוכן שמתחת ל-Topfold */
#achord-upload-form {
  padding-top: calc(var(--upload-top-offset) + var(--rec-label-h) + var(--rec-h) + var(--pdf-h) + 20px);
}

/* === Recommended Chords (110px) === */
#achord-upload-form .recommended-top{
  width: 100%;
  height: var(--rec-h);
  box-sizing: border-box;
  padding: 4px 12px 4px;
  background: inherit;
  display: flex;
  flex-direction: column;
}
#achord-upload-form .recommended-top > label{ display:none; }

/* סרגל האקורדים – גלילה תמידית ואנכית */
#achord-upload-form .recommended-chords-bar{
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px 6px;
  height: calc(var(--rec-h) - 8px);
  overflow-y: scroll;   /* גלילה גלויה תמיד */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  position: relative;   /* לבקרת תגים בפנים */
}

/* פריט בסרגל – עובד ל-div/a/button */
#achord-upload-form .recommended-chords-bar > *{
  position: relative;           /* מאפשר הצמדה בפינות */
  flex: 0 0 70px;
  height: 50px;
  display:flex; align-items:center; justify-content:center;
  background: #f1f3f4;
  border: 1px solid #dfe1e5;
  border-radius: 12px;
  box-shadow: 0 1px 1px rgba(0,0,0,.06), inset 0 -2px 0 rgba(0,0,0,.05);
  font-weight: 500;
  letter-spacing: .2px;
  padding: 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform .04s ease, box-shadow .12s ease;
  /* מקום לכוכב ולמספר */
  padding-left: 22px;   /* כוכב – שמאל */
  padding-right: 22px;  /* מספר – ימין */
}
#achord-upload-form .recommended-chords-bar > *:active{
  transform: translateY(1px);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}
#achord-upload-form .recommended-chords-bar .is-selected{
  box-shadow: 0 1px 1px rgba(0,0,0,.06), inset 0 0 0 2px #222, inset 0 -2px 0 rgba(0,0,0,.05);
}

/* כוכב – נעוץ בשמאל למעלה (נתמוך בכמה מחלקות/דגלים) */
#achord-upload-form .recommended-chords-bar > * .fav-star,
#achord-upload-form .recommended-chords-bar > * .star,
#achord-upload-form .recommended-chords-bar > * .star-icon,
#achord-upload-form .recommended-chords-bar > * .icon-star,
#achord-upload-form .recommended-chords-bar > * .is-fav,
#achord-upload-form .recommended-chords-bar > * [data-fav="1"]{
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 12px;
  color: #f39c12;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

/* מספר קטן – בימין למעלה */
#achord-upload-form .recommended-chords-bar > * .chord-num{
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #666;
  opacity: .9;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

/* חיווי הבהוב בעת בחירה דרך מספר במקלדת */
#achord-upload-form .recommended-chords-bar > *.blink{
  animation: achord-blink-highlight .28s ease;
}
@keyframes achord-blink-highlight{
  0%   { background: #d9ecff; }
  100% { background: inherit; }
}

/* פס גלילה דקורטיבי (שמאל) – אופציונלי */
#achord-upload-form .recommended-chords-bar::after{
  content:"";
  position:absolute;
  top:0; bottom:0; left:3px;
  width:3px; border-radius:3px;
  background: rgba(0,0,0,.08);
  pointer-events:none;
}
#achord-upload-form .recommended-chords-bar.no-scroll::after{ opacity:0; }

/* === PDF (130px) === */
#achord-upload-form .achord-sticky-pdf-viewer{
  height: var(--pdf-h);
  width: 100%;
  box-sizing: border-box;
  padding: 0 12px 0;
  background: #fff;
}
#achord-upload-form .pdf-viewer-shell{
  height: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background:#fff;
  display:flex; flex-direction:column;
}
#achord-upload-form .pdf-viewer-header{
  height: 28px;
  display:flex; align-items:center; gap:10px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-color);
  background: #fafafa;
}
#achord-upload-form .pdf-viewer-iframe{
  width: 100%;
  height: calc(100% - 28px);
  border: 0; display: block; background: #fff;
}

/* Scrollbar style (דקורטיבי) */
#achord-upload-form .recommended-chords-bar::-webkit-scrollbar,
#achord-upload-form .pdf-viewer-shell::-webkit-scrollbar { width: 6px; }
#achord-upload-form .recommended-chords-bar::-webkit-scrollbar-thumb,
#achord-upload-form .pdf-viewer-shell::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.25);
  border-radius: 6px;
}

/* --- Display Engine & Page Templates (מתוסף 4) --- */
body.single-lesson .post-navigation,
body.single-achord_song_cpt .post-navigation,
body.single-lesson .wp-block-post-navigation,
body.single-achord_song_cpt .wp-block-post-navigation,
body.single-lesson footer.wp-block-template-part,
body.single-achord_song_cpt footer.wp-block-template-part,
body.single-lesson .wp-block-group > h2.wp-block-heading,
body.single-achord_song_cpt .wp-block-group > h2.wp-block-heading { display: none !important; }
.lesson-article { background: transparent; box-shadow: none; padding: 0; }
.lesson-header .achord-title-row { background: linear-gradient(90deg, #e0f2fe 50%, #f0faff 100%); border-radius: 15px; font-size: 1.6em; font-weight: 700; color: #0d47a1; margin: 0 auto 10px auto; padding: 14px 4vw 10px 3vw; box-shadow: 0 4px 15px rgba(25, 118, 210, 0.05); text-align: right; line-height: 1.3; }
.lesson-header .achord-performer { font-size: 0.95em; color: #1565c0; }
.lesson-difficulty { text-align: right; font-size: 1.1em; color: #555; font-weight: 600; margin-bottom: 30px; padding-right: 10px; }
.lesson-author-box { display: flex; text-align: right; align-items: center; gap: 20px; margin-bottom: 30px; padding: 15px; background-color: #f7f9fc; border-radius: 8px; }
.lesson-author-box .avatar { border-radius: 50%; }
.author-more-link { display: inline-block; margin-top: 8px; font-size: 0.9em; font-weight: 700; color: #3d5afe; text-decoration: none; padding: 5px 12px; background: #e8eaf6; border-radius: 5px; }
.author-more-link:hover { background: #c5cae9; }
.lesson-video-wrapper { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; border-radius: 12px; margin-bottom: 30px; }
.lesson-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.lesson-article .achord-song, .lesson-article .tavim-wrapper { box-shadow: none; padding: 0; margin: 0; max-width: 100%; border: none; }
.lesson-article .achord-song .achord-header { display: none; }
.lesson-link-banner { max-width: 840px; margin: 20px auto; padding: 1rem; background-color: var(--bg-control); border: 1px solid var(--border-color); border-radius: 12px; text-align: center; }
.lesson-link-banner a { font-weight: 700; color: var(--accent-primary); text-decoration: none; font-size: 1.1em; }

/* --- Tavim Player (מתוסף 6) --- */
.tavim-wrapper { max-width: 900px; margin: auto; padding: 20px; background: var(--bg-song); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: var(--shadow-md); color: var(--text-primary); }
.abcjs-cursor { stroke: #ff2121 !important; stroke-width: 2px !important; }
.abcjs-note_playing { fill: #ffe46b !important; stroke: #e74c3c !important; stroke-width: 2px; }
.tavim-controls { display: flex; gap: 15px; justify-content: center; align-items: center; margin: 20px 0; padding: 15px; background: var(--bg-page); border-radius: 8px; flex-wrap: wrap; }
.tavim-controls button { padding: 10px 20px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; transition: all 0.2s; font-weight: bold; min-width: 80px; }
.tavim-controls button:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.tavim-controls button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
#tavim-play { background: #28a745; color: white; }
#tavim-pause { background: #ffc107; color: #212529; }
#tavim-stop { background: #dc3545; color: white; }
#tavim-tempo { background: #17a2b8; color: white; }
.metronome-icon { display: inline-block; vertical-align: middle; width: 32px; height: 32px; border-radius: 50%; background: #c0c0c0; border: 3px solid #7fe98c; position: relative; cursor: pointer; transition: all 0.15s ease; }
.metronome-icon:before { content: "♪"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #666; }
.metronome-on { background: #21e25a !important; box-shadow: 0 0 20px 4px #49ff90, 0 0 5px #21e25a !important; border-color: #0d8f46 !important; transform: scale(1.1); }
.metronome-on:before { color: #fff !important; }
.tempo-display { font-size: 14px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.tempo-controls { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.tempo-slider { width: 120px; }
.tempo-input { width: 60px; padding: 4px 8px; border: 1px solid var(--border-color); border-radius: 3px; text-align: center; background-color: var(--bg-song); color: var(--text-primary); }
.hidden { display: none !important; }
/* --- תיקון עיצוב לכפתור "הוסף אקורד" --- */
#achord-upload-form .add-chord-btn {
    background-color: var(--accent-primary) !important;
    color: var(--accent-primary-text) !important;
}
/* =============================================== */
/*תיקון התנגשות בין תצוגת האקורדים לנגן התווים 
/* =============================================== */
.lesson-section .achord-song, 
.lesson-section .tavim-wrapper {
    isolation: isolate;
}

/* --- *** תוספת: שיפורי CSS למגירת הפונטים *** --- */
.new-drawer-font-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
    opacity: 0.8;
}

.new-drawer-font-list li .font-name {
    font-size: 1.1rem;
    transition: font-family 0.3s;
}

.new-drawer-font-list li:hover {
    background-color: var(--bg-control-hover);
}

.new-drawer-font-list li.active {
    background-color: var(--accent-primary);
    color: var(--accent-primary-text);
    opacity: 1;
}

.new-drawer-font-list li.loading {
    cursor: not-allowed;
    opacity: 0.5;
}

.new-drawer-font-list li.error {
    opacity: 0.6;
    text-decoration: line-through;
    color: #e53935;
    cursor: not-allowed;
}
.new-drawer-font-list li.error:hover {
    background-color: transparent;
}

.new-drawer-font-list li.loaded {
    opacity: 1;
}

.font-info-link {
    font-size: 1.2rem;
    color: var(--text-secondary);
    text-decoration: none;
}
.new-drawer-font-list li.active .font-info-link {
    color: var(--accent-primary-text);
/
/* פתרון: הסתרת פוטר התבנית */
#main-footer,
.oceanwp-footer-bar {
    display: none !important;
}

/* === פוטר מעודכן - מותאם למשתני CSS === */
.achord-main-footer {
    margin-top: 3rem;
    padding-top: 1rem;
 /
    border-top: 2px solid var(--border-color);
    background: var(--bg-page);
}

.related-posts-section {
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.related-posts-section h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.related-post-card {
    display: block;
    padding: 1rem;
    background: var(--bg-song);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: var(--transition-fast);
}

.related-post-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-primary);
}

.related-post-title {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.related-post-performer {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* קישורי פוטר חדשים */
.achord-footer-links {
    background: var(--bg-control);
    padding: 2rem 1.5rem 1rem;
}

.footer-section {
    margin-bottom: 1.5rem;
}

.footer-section h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-links-row a {
    color: #00008b; /* צבע כחול כהה קבוע */
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.5rem 0; /* הגדלת הגובה של הקישורים */
    border-bottom: 1px solid transparent;
    transition: var(--transition-fast);
}

.footer-links-row a:hover {
    color: #00008b; /* צבע כחול כהה קבוע במעבר עכבר */
    border-bottom-color: #00008b; /* צבע כחול כהה קבוע גם לקו התחתון */
}

/* זכויות יוצרים */
.footer-copyright {
    text-align: center;
    padding: 1.5rem 0 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 2rem;
}

.footer-copyright p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

/* מובייל */
@media (max-width: 768px) {
    .related-posts-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-links-row {
        flex-direction: column;
        gap: 5rem;
    }
    
    .footer-links-row a {
        padding: 5rem 0;
    }
}