/* =========================================================
   HG Content Widget — Frontend Styles
   Hack and Grow
   ========================================================= */

/* ── Wrapper ── */
.hg-content-editor {
    width: 100%;
}

/* ── Alignment helpers ── */
.hg-align-left    { text-align: left; }
.hg-align-center  { text-align: center; }
.hg-align-right   { text-align: right; }
.hg-align-justify { text-align: justify; }

/* ── Heading blocks ── */
.hg-block--h1,
.hg-block--h2,
.hg-block--h3,
.hg-block--h4,
.hg-block--h5,
.hg-block--h6 {
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.5em;
    padding: 0;
}
.hg-block--h1 { font-size: 2.25em;  color: #111827; }
.hg-block--h2 { font-size: 1.75em;  color: #1f2937; }
.hg-block--h3 { font-size: 1.375em; color: #374151; }
.hg-block--h4 { font-size: 1.125em; color: #374151; }
.hg-block--h5 { font-size: 1em;     color: #4b5563; }
.hg-block--h6 { font-size: 0.875em; color: #6b7280; letter-spacing: .04em; text-transform: uppercase; }

.hg-block--h1 a,
.hg-block--h2 a,
.hg-block--h3 a,
.hg-block--h4 a,
.hg-block--h5 a,
.hg-block--h6 a {
    text-decoration: none;
    color: inherit;
    transition: color .2s;
}

/* ── Body text block ── */
.hg-block--text {
    font-size: 1em;
    line-height: 1.7;
    color: #374151;
    margin: 0 0 1em;
}
.hg-block--text p   { margin: 0 0 1em; }
.hg-block--text p:last-child { margin-bottom: 0; }
.hg-block--text a   { color: #F97316; text-decoration: underline; transition: color .2s; }
.hg-block--text a:hover { color: #ea6a00; }
.hg-block--text ul,
.hg-block--text ol  { padding-left: 1.5em; margin: 0 0 1em; }
.hg-block--text li  { margin-bottom: .4em; }
.hg-block--text strong { font-weight: 700; }
.hg-block--text em  { font-style: italic; }
.hg-block--text blockquote {
    border-left: 4px solid #F97316;
    padding: 10px 16px;
    margin: 16px 0;
    background: #fff8f3;
    color: #6b7280;
    font-style: italic;
    border-radius: 0 6px 6px 0;
}

/* ── Separator ── */
.hg-block__sep {
    display: block;
    width: 48px;
    height: 3px;
    background: #F97316;
    border-radius: 3px;
    margin: 8px 0 16px;
}
.hg-block__sep.hg-sep--center { margin-left: auto; margin-right: auto; }
.hg-block__sep.hg-sep--right  { margin-left: auto; }

/* ── Pagination ── */
.hg-pagination-wrap--top  { margin-bottom: 24px; }
.hg-pagination-wrap--bottom { margin-top: 28px; }

.hg-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.hg-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    background: #F3F4F6;
    color: #374151;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s, color .18s, transform .12s;
    line-height: 1;
    font-family: inherit;
}
.hg-pagination__item:hover:not(.is-active):not(:disabled) {
    background: #e5e7eb;
    transform: translateY(-1px);
}
.hg-pagination__item.is-active {
    background: #F97316;
    color: #fff;
    font-weight: 700;
    cursor: default;
}
.hg-pagination__item:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Dots style */
.hg-pag-dot {
    width: 10px;
    min-width: 10px;
    height: 10px;
    border-radius: 50%;
    padding: 0;
    background: #d1d5db;
}
.hg-pag-dot.is-active {
    background: #F97316;
    width: 24px;
    min-width: 24px;
    border-radius: 5px;
}

/* ── Page transition ── */
.hg-page {
    animation: hg-fadein .28s ease;
}
@keyframes hg-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}