/* ==========================================================================
   TGF Info Shortcodes — shared chrome for the How It Works page
   ==========================================================================
   Theme hooks (override on the wrapper or globally):
     --tgf-info-text, --tgf-info-muted, --tgf-info-accent, --tgf-info-bg,
     --tgf-info-border, --tgf-info-radius
   ========================================================================== */

.tgf-pricing-table,
.tgf-cutoff-schedule,
.tgf-grading-criteria,
.tgf-steps,
.tgf-returns,
.tgf-bulk,
.tgf-packing,
.tgf-tools,
.tgf-cta {
    /* GradeIt brand palette */
    --tgf-info-text:           #f4f5f7;
    --tgf-info-muted:          rgba(244,245,247,0.65);
    --tgf-info-accent:         #F15F51;  /* coral — primary brand */
    --tgf-info-accent-2:       #60C7CB;  /* teal — secondary highlight */
    --tgf-info-accent-warm:    #F8AA4A;  /* orange — timeline / step numbers */
    --tgf-info-accent-yellow:  #FBCC0A;  /* yellow — bulk-discount + CTA tints */
    --tgf-info-bg:             rgba(255,255,255,0.04);
    --tgf-info-border:         rgba(255,255,255,0.08);
    --tgf-info-radius:         16px;
    color: var(--tgf-info-text);
    box-sizing: border-box;
}

/* Headings inside these components must claim the ink colour explicitly:
   themes set `h2/h3 { color: … }` directly, and an explicit rule always beats
   the colour these roots merely pass down by inheritance. Without this the
   section titles render near-black and vanish on the dark surface the whole
   component set is designed for. */
.tgf-cutoff-schedule h1, .tgf-cutoff-schedule h2, .tgf-cutoff-schedule h3,
.tgf-cutoff-schedule h4, .tgf-cutoff-schedule h5, .tgf-cutoff-schedule h6,
.tgf-grading-criteria h1, .tgf-grading-criteria h2, .tgf-grading-criteria h3,
.tgf-grading-criteria h4, .tgf-grading-criteria h5, .tgf-grading-criteria h6,
.tgf-steps h1, .tgf-steps h2, .tgf-steps h3, .tgf-steps h4, .tgf-steps h5, .tgf-steps h6,
.tgf-returns h1, .tgf-returns h2, .tgf-returns h3, .tgf-returns h4, .tgf-returns h5, .tgf-returns h6,
.tgf-bulk h1, .tgf-bulk h2, .tgf-bulk h3, .tgf-bulk h4, .tgf-bulk h5, .tgf-bulk h6,
.tgf-packing h1, .tgf-packing h2, .tgf-packing h3, .tgf-packing h4, .tgf-packing h5, .tgf-packing h6,
.tgf-tools h1, .tgf-tools h2, .tgf-tools h3, .tgf-tools h4, .tgf-tools h5, .tgf-tools h6,
.tgf-cta h1, .tgf-cta h2, .tgf-cta h3, .tgf-cta h4, .tgf-cta h5, .tgf-cta h6 {
    color: var(--tgf-info-text);
}

.tgf-muted { color: var(--tgf-info-muted); }

.tgf-info-empty {
    padding: 20px;
    background: rgba(0,0,0,0.06);
    border-radius: 12px;
    text-align: center;
    color: #666;
}

/* Shared button */
.tgf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 22px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: var(--tgf-info-text);
    text-decoration: none !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid var(--tgf-info-border);
    transition: transform 0.15s, background 0.15s;
}
.tgf-btn:hover { transform: translateY(-1px); }
.tgf-btn--primary {
    background: var(--tgf-info-accent);
    border-color: var(--tgf-info-accent);
    color: #fff;
}
.tgf-btn--primary:hover {
    background: #d94a3d;
    border-color: #d94a3d;
}
.tgf-btn--xl {
    padding: 16px 32px;
    font-size: 18px;
}

/* -------- Pricing table -------- */
.tgf-pricing-table {
    margin: 40px auto;
    max-width: 1000px;
}
.tgf-pricing-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--tgf-info-bg);
    border-radius: var(--tgf-info-radius);
    overflow: hidden;
    border: 1px solid var(--tgf-info-border);
}
.tgf-pricing-table th,
.tgf-pricing-table td {
    padding: 14px 18px;
    text-align: left;
}
.tgf-pricing-table thead th {
    background: rgba(255,255,255,0.06);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--tgf-info-muted);
}
.tgf-pricing-table tbody tr + tr td {
    border-top: 1px solid var(--tgf-info-border);
}
.tgf-pricing-table__name strong { display: block; }
.tgf-pricing-table__blurb {
    display: block;
    color: var(--tgf-info-muted);
    font-size: 13px;
    margin-top: 4px;
}
.tgf-pricing-table__price {
    font-weight: 700;
    color: var(--tgf-info-accent);
    /* Use flex with an explicit gap so the "From R825.00" gap is always visible,
       regardless of how WooCommerce formats wc_price() output. */
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
.tgf-pricing-table__from {
    color: var(--tgf-info-muted);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tgf-pricing-table__price-amt {
    font-weight: 800;
}
.tgf-pricing-table__footnote {
    margin: 12px 4px 0;
    color: var(--tgf-info-muted);
    font-size: 13px;
}

/* -------- Cutoff schedule -------- */
.tgf-cutoff-schedule {
    margin: 40px auto;
    max-width: 1200px;
}
.tgf-cutoff-schedule__title {
    margin: 0 0 4px;
    font-size: 22px;
}
.tgf-cutoff-schedule__intro {
    color: var(--tgf-info-muted);
    margin: 0 0 16px;
}
.tgf-cutoff-schedule__strip {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 8px 4px 16px;
    scroll-snap-type: x mandatory;
}
.tgf-cutoff-schedule__month {
    flex: 0 0 180px;
    background: var(--tgf-info-bg);
    border: 1px solid var(--tgf-info-border);
    border-radius: var(--tgf-info-radius);
    padding: 14px 16px;
    scroll-snap-align: start;
    position: relative;
    transition: transform 0.15s;
}
.tgf-cutoff-schedule__month.is-current {
    border-color: var(--tgf-info-accent);
    background: rgba(255,112,67,0.10);
    transform: translateY(-2px);
}
.tgf-cutoff-schedule__month.is-past { opacity: 0.55; }
.tgf-cutoff-schedule__month-name {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tgf-info-muted);
}
.tgf-cutoff-schedule__companies {
    margin-top: 6px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.tgf-cutoff-schedule__co {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    font-weight: 700;
    font-size: 13px;
}
.tgf-cutoff-schedule__badge {
    margin-top: 10px;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--tgf-info-accent), var(--tgf-info-accent-warm));
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tgf-cutoff-schedule__now {
    margin-top: 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tgf-info-accent);
    font-weight: 700;
}
.tgf-cutoff-schedule__footnote {
    color: var(--tgf-info-muted);
    font-size: 13px;
    margin: 12px 4px 0;
}

/* -------- Grading criteria -------- */
.tgf-grading-criteria {
    margin: 40px auto;
    max-width: 1200px;
}
.tgf-grading-criteria__title {
    margin: 0 0 4px;
    font-size: 22px;
    text-align: center;
}
.tgf-grading-criteria__intro {
    color: var(--tgf-info-muted);
    text-align: center;
    margin: 0 auto 24px;
    max-width: 640px;
}
.tgf-grading-criteria__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.tgf-grading-criteria__card {
    background: var(--tgf-info-bg);
    border: 1px solid var(--tgf-info-border);
    border-radius: var(--tgf-info-radius);
    padding: 24px;
    text-align: center;
    position: relative;
}
.tgf-grading-criteria__icon {
    font-size: 36px;
    margin-bottom: 8px;
}
.tgf-grading-criteria__num {
    position: absolute;
    top: 12px;
    right: 14px;
    color: var(--tgf-info-muted);
    font-weight: 700;
    font-size: 14px;
    opacity: 0.6;
}
.tgf-grading-criteria__label {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.tgf-grading-criteria__desc {
    margin: 0;
    color: var(--tgf-info-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* -------- Process steps -------- */
.tgf-steps {
    margin: 40px auto;
    max-width: 880px;
}
.tgf-steps__title {
    margin: 0 0 24px;
    font-size: 22px;
    text-align: center;
}
.tgf-steps__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tgf-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: flex-start;
    background: var(--tgf-info-bg);
    border: 1px solid var(--tgf-info-border);
    border-radius: var(--tgf-info-radius);
    padding: 16px 20px;
}
.tgf-step__num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* Walks through the brand palette across the 5 steps via nth-child below.
       Default keeps coral so step 1 always renders even if the explicit colour
       overrides somehow lose specificity. */
    background: var(--tgf-info-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
}
/* Walk the GradeIt logo palette across the 5 steps so the timeline visually
   matches the multicoloured star. */
.tgf-steps__list .tgf-step:nth-child(1) .tgf-step__num { background: var(--tgf-info-accent); }        /* coral */
.tgf-steps__list .tgf-step:nth-child(2) .tgf-step__num { background: var(--tgf-info-accent-warm); color: #1f1410; } /* orange — dark ink, white only reaches 1.9:1 here */
.tgf-steps__list .tgf-step:nth-child(3) .tgf-step__num { background: var(--tgf-info-accent-yellow); color: #1f1410; } /* yellow */
.tgf-steps__list .tgf-step:nth-child(4) .tgf-step__num { background: var(--tgf-info-accent-2); color: #0d0908; }      /* teal */
.tgf-steps__list .tgf-step:nth-child(5) .tgf-step__num { background: #fff; color: #0d0908; }         /* white */
.tgf-step__title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 4px;
}
.tgf-step__desc {
    margin: 0;
    color: var(--tgf-info-muted);
    line-height: 1.55;
}
.tgf-steps__cta {
    margin-top: 28px;
    text-align: center;
}

/* -------- Returns info -------- */
.tgf-returns {
    margin: 40px auto;
    max-width: 720px;
    background: var(--tgf-info-bg);
    border: 1px solid var(--tgf-info-border);
    border-radius: var(--tgf-info-radius);
    padding: 24px 28px;
    text-align: center;
}
.tgf-returns__icon { font-size: 32px; }
.tgf-returns__title { margin: 6px 0; font-size: 22px; }
.tgf-returns__desc { margin: 0 0 12px; color: var(--tgf-info-muted); }
.tgf-returns__list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.tgf-returns__list li {
    background: rgba(0,0,0,0.18);
    padding: 8px 16px;
    border-radius: 999px;
}
.tgf-returns__list strong { color: var(--tgf-info-accent); }

/* -------- Bulk discount -------- */
.tgf-bulk {
    margin: 40px auto;
    max-width: 720px;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 24px;
    align-items: center;
    background: var(--tgf-info-bg);
    border: 1px solid var(--tgf-info-border);
    border-radius: var(--tgf-info-radius);
    padding: 20px 26px;
}
.tgf-bulk__badge {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    /* Brand sweep: yellow → orange → coral, matching the bottom arm of the logo star. */
    background: linear-gradient(135deg, var(--tgf-info-accent-yellow), var(--tgf-info-accent-warm), var(--tgf-info-accent));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 22px;
    transform: rotate(-8deg);
    box-shadow: 0 14px 30px -10px rgba(241, 95, 81, 0.55);
}
.tgf-bulk__title { margin: 0 0 6px; font-size: 22px; }
.tgf-bulk__desc { margin: 0; color: var(--tgf-info-muted); line-height: 1.55; }

@media (max-width: 540px) {
    .tgf-bulk {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .tgf-bulk__badge { margin: 0 auto; }
}

/* -------- Packing guide -------- */
.tgf-packing {
    margin: 40px auto;
    max-width: 720px;
    background: var(--tgf-info-bg);
    border: 1px solid var(--tgf-info-border);
    border-radius: var(--tgf-info-radius);
    padding: 24px 28px;
}
.tgf-packing__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tgf-packing__icon { font-size: 26px; }
.tgf-packing__title { margin: 0; font-size: 20px; }
.tgf-packing__desc { color: var(--tgf-info-muted); line-height: 1.55; margin: 8px 0 16px; }
.tgf-packing__alt { color: var(--tgf-info-muted); font-size: 13px; margin: 14px 0 0; }

/* -------- Tools grid -------- */
.tgf-tools {
    margin: 40px auto;
    max-width: 1200px;
}
.tgf-tools__title { margin: 0 0 4px; font-size: 22px; }
.tgf-tools__intro { color: var(--tgf-info-muted); margin: 0 0 24px; max-width: 720px; }

/* ---- #1 Pick banner — the single overall recommendation ---- */
.tgf-tools__pick {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    margin: 0 0 26px;
    padding: 18px 22px;
    border-radius: var(--tgf-info-radius);
    border: 2px solid transparent;
    background:
        linear-gradient(var(--tgf-info-bg), var(--tgf-info-bg)) padding-box,
        linear-gradient(90deg, #F15F51, #F8AA4A 45%, #60C7CB) border-box;
    text-decoration: none;
    color: var(--tgf-info-text);
    transition: transform 0.15s ease;
}
.tgf-tools__pick:hover {
    transform: translateY(-2px);
}
.tgf-tools__pick-badge {
    position: absolute;
    top: -12px;
    left: 18px;
    background: linear-gradient(90deg, #F15F51, #F8AA4A);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 3px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.tgf-tools__pick-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 12px;
    flex: 0 0 auto;
    background: rgba(0,0,0,0.20);
}
.tgf-tools__pick-body { flex: 1; min-width: 0; display: block; }
.tgf-tools__pick-body .tgf-tool__head { display: flex; align-items: center; justify-content: space-between; }
.tgf-tools__pick-body .tgf-tool__desc { display: block; margin: 6px 0 10px; }
.tgf-tools__pick-body .tgf-tool__tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* Optional per-tool logo in the card header */
.tgf-tool__ident { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tgf-tool__logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    flex: 0 0 auto;
    background: rgba(0,0,0,0.20);
}

@media (max-width: 480px) {
    .tgf-tools__pick { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 22px; }
}

.tgf-tools__group { margin-bottom: 28px; }
.tgf-tools__group-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tgf-info-muted);
    margin: 0 0 12px;
    font-weight: 700;
}
.tgf-tools__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.tgf-tool {
    display: block;
    background: var(--tgf-info-bg);
    border: 1px solid var(--tgf-info-border);
    border-radius: var(--tgf-info-radius);
    padding: 18px 20px;
    color: var(--tgf-info-text) !important;
    text-decoration: none !important;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.tgf-tool:hover {
    transform: translateY(-2px);
    border-color: var(--tgf-info-accent);
    background: rgba(241, 95, 81, 0.08);   /* brand coral tint */
}
.tgf-tool__head { display: flex; align-items: center; justify-content: space-between; }
.tgf-tool__name { font-size: 16px; font-weight: 800; }
.tgf-tool__ext { color: var(--tgf-info-muted); }
.tgf-tool__desc { color: var(--tgf-info-muted); font-size: 14px; line-height: 1.5; margin: 8px 0 12px; }
.tgf-tool__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tgf-tool__tag {
    background: rgba(0,0,0,0.20);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* -------- Final CTA -------- */
.tgf-cta {
    margin: 60px auto;
    max-width: 720px;
    text-align: center;
}
.tgf-cta__sub {
    color: var(--tgf-info-muted);
    font-size: 18px;
    margin: 0 0 16px;
}

/* Paused row in pricing table */
.tgf-pricing-table__row--paused td { opacity: 0.55; filter: grayscale(0.6); }
.tgf-pricing-table__row--paused .tgf-pricing-table__name strong { text-decoration: line-through; }
.tgf-pricing-table__pill {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    background: #1f2937;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    vertical-align: middle;
    filter: none;
    opacity: 1;
}

/* ---- [tgf_section_nav] — sticky jump nav with scroll-spy ---- */
.tgf-secnav {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(13, 9, 8, 0.08);
    box-shadow: 0 6px 18px rgba(13, 9, 8, 0.06);
    margin: 0 0 8px;
}
/* JS toggles this when the bar's natural position scrolls past the top —
   position:sticky can't escape the bar's own page-builder row. */
.tgf-secnav.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    margin: 0;
}
body.admin-bar .tgf-secnav.is-stuck { top: 32px; }
.tgf-secnav__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    max-width: 1100px;
    margin: 0 auto;
}
.tgf-secnav__link {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: #0d0908;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tgf-secnav__link:hover {
    border-color: #F15F51;
    color: #F15F51;
    text-decoration: none;
}
.tgf-secnav__link.is-active {
    background: #F15F51;
    color: #fff;
}
@media (max-width: 560px) {
    .tgf-secnav__link { padding: 7px 12px; font-size: 13px; }
}