/* ==========================================================================
   Finca Café – huisstijl voor YOOtheme Pro
   Pas de kleuren hier aan; alle elementen gebruiken deze variabelen.
   ========================================================================== */

:root {
    --fc-espresso:  #2b1a12;   /* donkerbruin – tekst, donkere stijl     */
    --fc-tostado:   #6f4a2f;   /* geroosterd bruin – accenten            */
    --fc-cereza:    #b3261e;   /* rode koffiekers – hoofdoogst           */
    --fc-cereza-2:  #e0876a;   /* lichtere kers – mitaca                 */
    --fc-cafetal:   #2f5d3a;   /* bladgroen – groene stijl               */
    --fc-flor:      #f3ead8;   /* koffiebloesem – bloei                  */
    --fc-crema:     #faf6ef;   /* crème – lichte achtergrond             */
    --fc-borde:     rgba(43, 26, 18, .14);
    --fc-radius:    14px;
}

/* ---------- Gemeenschappelijk ---------- */

.fc-profile,
.fc-stats,
.fc-harvest {
    border-radius: var(--fc-radius);
    padding: clamp(20px, 3vw, 36px);
}

.fc-profile--light,
.fc-stats--light,
.fc-harvest { background: var(--fc-crema); color: var(--fc-espresso); }

.fc-profile--dark,
.fc-stats--dark { background: var(--fc-espresso); color: var(--fc-crema); }

.fc-stats--green { background: var(--fc-cafetal); color: var(--fc-crema); }

.fc-profile--dark h3, .fc-stats--dark h2, .fc-stats--green h2 { color: inherit; }

/* ---------- Koffieprofiel ---------- */

.fc-profile__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.fc-profile__title { margin: 0; color: inherit; }

.fc-profile__score {
    flex: none;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--fc-cereza);
    color: #fff;
    text-align: center;
    line-height: 1;
}
.fc-profile__score-value { font-size: 1.6rem; font-weight: 700; }
.fc-profile__score-label { font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; margin-top: -14px; }

.fc-profile__list { margin: 0; }
.fc-profile__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--fc-borde);
}
.fc-profile--dark .fc-profile__row { border-color: rgba(250, 246, 239, .16); }
.fc-profile__row dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; font-weight: 400; }
.fc-profile__row dd { margin: 0; font-weight: 600; text-align: right; display: flex; align-items: center; gap: 8px; }

.fc-roast { display: inline-flex; gap: 4px; }
.fc-roast__bean {
    width: 10px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: .35;
}
.fc-roast__bean.is-active { background: var(--fc-tostado); border-color: var(--fc-tostado); opacity: 1; }
.fc-profile--dark .fc-roast__bean.is-active { background: var(--fc-cereza-2); border-color: var(--fc-cereza-2); }

.fc-profile__notes { margin-top: 20px; }
.fc-profile__notes-label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin-bottom: 8px; }

.fc-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fc-tags li {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: .85rem;
}

/* ---------- Finca-kerncijfers ---------- */

.fc-stats__intro { max-width: 640px; margin-bottom: 28px; }
.fc-stats__heading { margin: 0 0 8px; }
.fc-stats__text { margin: 0; opacity: .85; }

.fc-stat {
    border-top: 3px solid var(--fc-cereza);
    padding-top: 14px;
}
.fc-stats--green .fc-stat,
.fc-stats--dark .fc-stat { border-color: var(--fc-cereza-2); }
.fc-stat__value { display: block; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.1; }
.fc-stat__label { display: block; margin-top: 6px; font-size: .9rem; opacity: .8; }

/* ---------- Oogstkalender ---------- */

.fc-harvest__heading { margin: 0 0 20px; color: inherit; }

.fc-harvest__months {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
}
.fc-month { text-align: center; }
.fc-month__bar {
    display: block;
    height: 40px;
    border-radius: 6px;
    background: var(--fc-borde);
}
.fc-month--main   .fc-month__bar { background: var(--fc-cereza); }
.fc-month--mitaca .fc-month__bar { background: var(--fc-cereza-2); }
.fc-month--flower .fc-month__bar { background: var(--fc-flor); box-shadow: inset 0 0 0 1px var(--fc-borde); }
.fc-month__name { display: block; margin-top: 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.fc-month.is-current .fc-month__bar { outline: 2px solid var(--fc-espresso); outline-offset: 2px; }
.fc-month.is-current .fc-month__name { font-weight: 700; }

.fc-harvest__legend {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: .9rem;
}
.fc-harvest__legend li { display: flex; align-items: center; gap: 8px; }
.fc-dot { width: 12px; height: 12px; border-radius: 3px; }
.fc-dot--main   { background: var(--fc-cereza); }
.fc-dot--mitaca { background: var(--fc-cereza-2); }
.fc-dot--flower { background: var(--fc-flor); box-shadow: inset 0 0 0 1px var(--fc-borde); }

/* Op smalle schermen: 6 maanden per rij */
@media (max-width: 640px) {
    .fc-harvest__months { grid-template-columns: repeat(6, 1fr); row-gap: 14px; }
    .fc-profile__head { flex-direction: column-reverse; }
}

/* ---------- Tijdlijn: van kers tot kop ---------- */

.fc-timeline {
    border-radius: var(--fc-radius);
    padding: clamp(20px, 3vw, 36px);
}
.fc-timeline--light { background: var(--fc-crema); color: var(--fc-espresso); }
.fc-timeline--dark  { background: var(--fc-espresso); color: var(--fc-crema); }
.fc-timeline--green { background: var(--fc-cafetal); color: var(--fc-crema); }
.fc-timeline--dark h2, .fc-timeline--dark h3,
.fc-timeline--green h2, .fc-timeline--green h3 { color: inherit; }

.fc-timeline__intro { max-width: 640px; margin-bottom: 32px; }
.fc-timeline__heading { margin: 0 0 8px; }
.fc-timeline__text { margin: 0; opacity: .85; }

.fc-timeline__steps { list-style: none; margin: 0; padding: 0; position: relative; }

.fc-step__marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; /* licht ovaal, als een koffiekers */
    background: var(--fc-cereza);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 0 5px var(--fc-crema);
}
.fc-timeline--dark  .fc-step__marker { box-shadow: 0 0 0 5px var(--fc-espresso); }
.fc-timeline--green .fc-step__marker { box-shadow: 0 0 0 5px var(--fc-cafetal); background: var(--fc-cereza-2); }

/* Laatste stap = de kop: geroosterd bruin */
.fc-step:last-child .fc-step__marker { background: var(--fc-tostado); }

.fc-step__title { margin: 0 0 6px; font-size: 1.1rem; }
.fc-step__text  { margin: 0; font-size: .95rem; opacity: .85; }

/* Verticaal (en altijd op mobiel) */
.fc-timeline--vertical .fc-timeline__steps::before,
.fc-timeline--horizontal .fc-timeline__steps::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: var(--fc-borde);
}
.fc-timeline--dark .fc-timeline__steps::before,
.fc-timeline--green .fc-timeline__steps::before { background: rgba(250, 246, 239, .25); }

.fc-step { display: flex; gap: 20px; }
.fc-step + .fc-step { margin-top: 28px; }
.fc-step__marker { flex: none; }
.fc-step__body { padding-top: 8px; }

/* Horizontaal vanaf tablet */
@media (min-width: 960px) {
    .fc-timeline--horizontal .fc-timeline__steps {
        display: grid;
        grid-template-columns: repeat(var(--fc-steps, 6), 1fr);
        gap: 24px;
    }
    .fc-timeline--horizontal .fc-timeline__steps::before {
        left: 20px;
        right: 20px;
        top: 19px;
        bottom: auto;
        width: auto;
        height: 2px;
    }
    .fc-timeline--horizontal .fc-step { flex-direction: column; gap: 16px; }
    .fc-timeline--horizontal .fc-step + .fc-step { margin-top: 0; }
    .fc-timeline--horizontal .fc-step__body { padding-top: 0; }
}