/* ============================================================================
   "Select your Goal" component — ported from Home3 mockup, cleaned up.
   Ink + amber language, self-contained (own --goal-* vars so it doesn't depend
   on page CSS). Full-width band; scrollable tab row + sub-item row.
   ============================================================================ */
.goal-section-wrapper {
    --goal-ink: #14161C;
    --goal-amber: #C8862D;
    --goal-amber-deep: #f58220;
    --goal-surface: #FFFFFF;
    --goal-border: #E6E1D3;
    --goal-text: #1B1B18;
    --goal-text-soft: #6B6A63;
    --goal-on-ink: #F5F3EE;
    --goal-font-display: 'Newsreader', Georgia, serif;
    --goal-font-body: 'Archivo', system-ui, sans-serif;

    background: #F4F5FD;
    background-image:
    radial-gradient(circle at 8% 12%, rgba(217,236,255,.45) 0 140px, transparent 141px),
    radial-gradient(circle at 78% 14%, rgba(217,236,255,.38) 0 90px, transparent 91px),
    radial-gradient(circle at 28% 78%, rgba(217,236,255,.30) 0 64px, transparent 65px),
    radial-gradient(circle at 86% 72%, rgba(244,123,32,.10) 0 34px, transparent 35px);
    border-bottom: 1px solid var(--goal-border);
    padding: 16px 0;
    font-family: var(--goal-font-body);
}

.goal-container { max-width: 1580px; margin: 0 auto; padding: 0 40px; overflow: hidden; }

.goal-header { margin-bottom: 16px; }
.goal-title-block { display: flex; flex-direction: column; gap: 3px; }
.goal-title {
    font-family: var(--goal-font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--goal-text);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.goal-title i { color: var(--goal-amber); font-size: 13px; }
.goal-title-accent { color: #770808; font-size: 1.15em; }
.goal-subtitle { font-size: 13px; color: var(--goal-text-soft); font-weight: 400; }

/* ── Tab row ──────────────────────────────────────────────────────────── */
.goal-tabs-row {
    display: flex; gap: 10px; margin-bottom: 16px;
    overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; white-space: nowrap;
    scrollbar-width: none;
}
.goal-tabs-row::-webkit-scrollbar { display: none; }

.goal-tab {
    height: 58px; cursor: pointer; border-radius: 14px; padding: 0 24px;
    background: #fff; border: 1px solid #E8E2D8;
    display: flex; justify-content: center; align-items: center; gap: 12px;
    font-family: var(--goal-font-body); font-size: 14px; font-weight: 600; color: var(--goal-text);
    flex: 0 0 auto; transition: 0.3s;
}
.goal-tab i { font-size: 17px; color: var(--goal-amber-deep); transition: color 0.2s ease; }
.goal-tab:hover {
    border-color: var(--goal-amber);
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}
.goal-tab:hover i { color: var(--goal-amber); }
.goal-tab.active { border-color: var(--goal-ink); background: var(--goal-ink); color: var(--goal-on-ink); }
.goal-tab.active i { color: var(--goal-amber); }
.goal-tab:focus, .goal-tab:focus-visible { outline: none; box-shadow: none; }

/* ── Expanded content area (sub-items) — collapsible with transition ────
   Collapsed by default (max-height/opacity/padding 0). Expands smoothly on tab
   click. Uses max-height (not display) so it can animate. */
.goal-content-area {
    display: flex;
    align-items: center;
    width:100%;
    gap: 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid transparent;
    box-shadow: none;
     box-sizing: border-box;
    /* collapsed state */
    max-height: 0;
    opacity: 0;
    padding: 0 20px;
    overflow: hidden;
    transform: translateY(-6px);
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease,
                transform 0.25s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.goal-content-area.active {
    max-height: 260px;                 /* enough for the single sub-item row */
    opacity: 1;
    padding: 18px 20px;
    transform: translateY(0);
    border-color: var(--goal-border);
    box-shadow: 0 10px 25px rgba(20, 18, 10, 0.06);
}

.goal-scroll {
    display: flex; align-items: center; gap: 10px;
    flex: 1 1 auto; min-width: 0; width:100%;
    overflow-x: auto; overflow-y: hidden; padding-bottom: 6px;
    flex-wrap: nowrap; white-space: nowrap; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.goal-scroll::-webkit-scrollbar { height: 6px; }
.goal-scroll::-webkit-scrollbar-track { background: transparent; }
.goal-scroll::-webkit-scrollbar-thumb { background: var(--goal-amber); border-radius: 10px; }

.goal-subitem-label {
    color: var(--goal-text); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px;
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.goal-subitem-label i { color: var(--goal-amber); }

.goal-subitem {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; background: #F8F8F8; border: 1px solid #ECE6DB;
    border-radius: 999px; font-size: 13px; font-weight: 600;
    flex: 0 0 auto; color: var(--goal-text); white-space: nowrap;
    /* Pin a sans stack so the ampersand (&) can't fall back to a serif glyph
       (Archivo's & was substituting to an ornate serif on some browsers). */
    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    transition: 0.2s;
}
.goal-subitem i { font-size: 10px; opacity: 0.6; }
.goal-subitem:hover { background: var(--goal-amber); border-color: var(--goal-amber); color: #fff; }
.goal-subitem:hover i { opacity: 1; }

.goal-subitem.view-all {
    background: var(--goal-amber); border-color: var(--goal-amber); color: var(--goal-ink);
    margin-left: auto; flex-shrink: 0;
    text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px;
}
.goal-subitem.view-all:hover { background: #DDA043; border-color: #DDA043; }

.goal-loading { color: var(--goal-text-soft); font-size: 13px; padding: 4px 0; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .goal-container { padding: 0 24px; }
}
@media (max-width: 768px) {
    .goal-tabs-row {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 4px;
    }
    .goal-tab { min-width: 128px; padding: 0 16px; font-size: 13px; height: 52px; scroll-snap-align: start;}
    .goal-tab i { font-size: 16px; }
    .goal-content-area { padding: 16px; }
    .goal-subitem.view-all { margin-left: 2px; flex:0 0 auto; width:40%; font-size:6px; text-align:center;}
     .goal-container {
        padding: 0 16px;
    }
    .goal-content-area.active {
        padding: 14px 12px;
    }
    .goal-scroll {
        min-width: 0;
        width: 100%;
        flex: 1 1 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
     .goal-subitem {
        flex: 0 0 auto;
        white-space: nowrap;
        width:100%;
        font-size:6px;
        font-weight:900;
    }
    .goal-subitem-label{ display:none;}
}