/* =====================================================================
   content.css
   Dedicated stylesheet for:
     1) Homepage hero + calculator + CTA sections
     2) FAQ accordion polish
     3) Reusable rich-content components for CMS-authored HTML
        (formula boxes, info/tip/warning boxes, diagrams, comparison
        tables, step-by-step blocks) — used across homepage, tool and
        blog content wherever an admin pastes structured HTML.

   Scoped with its own custom properties so it layers cleanly on top of
   the existing theme without overriding the site's configured primary
   color used by buttons/links elsewhere.
   ===================================================================== */

:root {
    --content-accent: #6d5ce7;
    --content-accent-dark: #4f3ec9;
    --content-accent-soft: #f1eefe;
    --content-info: #2563eb;
    --content-info-soft: #eef4ff;
    --content-tip: #0f9d68;
    --content-tip-soft: #eafbf3;
    --content-warning: #b45309;
    --content-warning-soft: #fff7ea;
    --content-border: #ece9fb;
    --content-radius: 0.75rem;
}

/* ---------------------------------------------------------------------
   1. Hero section
   --------------------------------------------------------------------- */

.hero-section {
    padding: 2.5rem 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--content-accent-soft) 0%, #ffffff 65%);
}

.hero-title {
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0.75rem;
    color: #1c1a2e;
}

.hero-subtitle {
    font-size: 1.05rem;
    color: #5b5875;
    max-width: 42rem;
    margin-bottom: 0;
}

.hero-actions .btn {
    border-radius: 0.6rem;
    font-weight: 600;
}

.hero-decoration {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.hero-shape {
    position: absolute;
    opacity: 0.5;
}

.hero-shape-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 2px solid var(--content-accent);
    opacity: 0.18;
    top: -40px;
    right: 8%;
}

.hero-shape-triangle {
    width: 0;
    height: 0;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
    border-bottom: 95px solid var(--content-accent);
    opacity: 0.08;
    bottom: -20px;
    left: 4%;
}

.hero-shape-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--content-accent);
    opacity: 0.35;
}

.hero-shape-dot-1 { top: 20%; left: 12%; }
.hero-shape-dot-2 { bottom: 18%; right: 20%; }

.hero-shape-symbol {
    position: absolute;
    top: 12%;
    right: 28%;
    font-size: 2.5rem;
    color: var(--content-accent);
    opacity: 0.12;
    font-weight: 700;
}

.hero-illustration {
    position: relative;
    width: 260px;
    height: 260px;
    max-width: 100%;
}

.hero-illustration-core {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 12px 30px -10px rgba(109, 92, 231, 0.35);
    font-size: 2.75rem;
    color: var(--content-accent);
}

.hero-illustration-letter {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 0.85rem;
    background: #ffffff;
    box-shadow: 0 8px 20px -8px rgba(28, 26, 46, 0.18);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--content-accent-dark);
}

.hero-illustration-letter-1 { top: 6%;  left: 4%;  animation: content-float 6s ease-in-out infinite; }
.hero-illustration-letter-2 { top: 12%; right: 2%; animation: content-float 7s ease-in-out infinite 0.6s; }
.hero-illustration-letter-3 { bottom: 8%; left: 10%; animation: content-float 6.5s ease-in-out infinite 1.1s; }
.hero-illustration-letter-4 { bottom: 4%; right: 12%; animation: content-float 7.5s ease-in-out infinite 0.3s; }

@keyframes content-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-illustration-letter {
        animation: none !important;
    }
}

/* ---------------------------------------------------------------------
   2. Calculator section + Gematria results
   --------------------------------------------------------------------- */

#calculator-section {
    border: 1px solid var(--content-border);
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(28, 26, 46, 0.04);
}

.gematria-results-table th {
    font-weight: 600;
    color: #5b5875;
    border-bottom-width: 1px;
}

.gematria-results-table td, .gematria-results-table th {
    padding: 0.65rem 0.75rem;
}

.gematria-letter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.5rem;
    background: var(--content-accent-soft);
    font-size: 0.85rem;
}

.gematria-letter-chip-letter {
    font-weight: 700;
    color: var(--content-accent-dark);
}

.gematria-letter-chip-value {
    color: #5b5875;
}

/* ---------------------------------------------------------------------
   3. Homepage CTA
   --------------------------------------------------------------------- */

.homepage-cta {
    border-top: 1px solid var(--content-border);
    border-bottom: 1px solid var(--content-border);
}

/* ---------------------------------------------------------------------
   4. FAQ accordion polish
   --------------------------------------------------------------------- */

.faq-accordion .accordion-item {
    border: 1px solid var(--content-border);
    border-radius: 0.65rem !important;
    overflow: hidden;
    margin-bottom: 0.6rem;
}

.faq-accordion .accordion-button {
    font-weight: 600;
    color: #1c1a2e;
}

.faq-accordion .accordion-button:not(.collapsed) {
    background-color: var(--content-accent-soft);
    color: var(--content-accent-dark);
    box-shadow: none;
}

.faq-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(109, 92, 231, 0.25);
}

/* ---------------------------------------------------------------------
   5. Rich content components (CMS-authored, via editor "Formula box",
      "Info box" etc. classes — sanitizer allowlists `class` on these
      tags, see App\Helpers\Sanitizer)
   --------------------------------------------------------------------- */

.content-formula,
.formula-box {
    background: var(--content-accent-soft);
    border: 1px solid var(--content-border);
    border-radius: var(--content-radius);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    font-size: 1.05rem;
    text-align: center;
}

.content-info,
.info-box {
    background: var(--content-info-soft);
    border-left: 4px solid var(--content-info);
    border-radius: 0 var(--content-radius) var(--content-radius) 0;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}

.content-tip,
.tip-box {
    background: var(--content-tip-soft);
    border-left: 4px solid var(--content-tip);
    border-radius: 0 var(--content-radius) var(--content-radius) 0;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}

.content-warning,
.warning-box {
    background: var(--content-warning-soft);
    border-left: 4px solid var(--content-warning);
    border-radius: 0 var(--content-radius) var(--content-radius) 0;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}

.content-info p:last-child,
.content-tip p:last-child,
.content-warning p:last-child,
.info-box p:last-child,
.tip-box p:last-child,
.warning-box p:last-child {
    margin-bottom: 0;
}

.content-steps {
    counter-reset: content-step;
    list-style: none;
    padding-left: 0;
    margin: 1.25rem 0;
}

.content-steps > li {
    counter-increment: content-step;
    position: relative;
    padding: 0.75rem 1rem 0.75rem 3rem;
    margin-bottom: 0.6rem;
    background: #fafaff;
    border: 1px solid var(--content-border);
    border-radius: var(--content-radius);
}

.content-steps > li::before {
    content: counter(content-step);
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--content-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.geometry-diagram,
.content-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    margin: 1.25rem 0;
    background: #fafaff;
    border: 1px dashed var(--content-border);
    border-radius: var(--content-radius);
}

/* Responsive tables inside CMS content */
#content-box table:not(.gematria-results-table) {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
}

#content-box table:not(.gematria-results-table) th,
#content-box table:not(.gematria-results-table) td {
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--content-border);
    text-align: left;
}

#content-box table:not(.gematria-results-table) th {
    background: var(--content-accent-soft);
    font-weight: 600;
}

@media (max-width: 767.98px) {
    #content-box table:not(.gematria-results-table) {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

.content-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.content-comparison > div {
    border: 1px solid var(--content-border);
    border-radius: var(--content-radius);
    padding: 1rem 1.25rem;
    background: #fafaff;
}

/* ---------------------------------------------------------------------
   6. Single tool page: breadcrumb, header, related tools
   --------------------------------------------------------------------- */

.tool-breadcrumb .breadcrumb {
    font-size: 0.875rem;
}

.tool-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #b9b6cf;
}

.tool-breadcrumb .breadcrumb-item a {
    color: #5b5875;
    text-decoration: none;
}

.tool-breadcrumb .breadcrumb-item a:hover {
    color: var(--content-accent);
}

.tool-breadcrumb .breadcrumb-item.active {
    color: var(--content-accent-dark);
    font-weight: 600;
}

.tool-card {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--content-border);
}

.tool-card-header {
    background: linear-gradient(180deg, var(--content-accent-soft) 0%, #ffffff 100%);
    border-bottom: 1px solid var(--content-border);
}

.tool-card-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 0.6rem;
    background: #ffffff;
    padding: 0.4rem;
    box-shadow: 0 4px 12px -6px rgba(28, 26, 46, 0.18);
}

.related-tools-card {
    border-radius: 1rem;
    border: 1px solid var(--content-border);
}

.related-tool-card {
    border: 1px solid var(--content-border);
    border-radius: 0.75rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.related-tool-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(28, 26, 46, 0.25);
    border-color: var(--content-accent);
}

/* ---------------------------------------------------------------------
   7. All Tools page
   --------------------------------------------------------------------- */

.all-tools-header {
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--content-accent-soft) 0%, #ffffff 100%);
}

.category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-nav-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: #fafaff;
    border: 1px solid var(--content-border);
    color: #5b5875;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.category-nav-pill:hover {
    background: var(--content-accent-soft);
    color: var(--content-accent-dark);
    border-color: var(--content-accent);
}

.tool-category-card {
    border-radius: 1rem;
    border: 1px solid var(--content-border);
    overflow: hidden;
    scroll-margin-top: 1rem;
}

/* Shared tool-card hover treatment (All Tools grid, sidebar, related tools) */
.item-box {
    border: 1px solid var(--content-border);
    border-radius: 0.75rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.item-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(28, 26, 46, 0.25);
    border-color: var(--content-accent);
}