/**
 * Branwell Numerology — 2026 styling
 *
 * All colours, radii, and typography resolve through the shared
 * theme palette tokens defined in soulpath-website.css. The theme is
 * required; the plugin only owns its own component-level rules.
 *
 * The .s2p-section-header at the top of the template is styled by
 * the theme (§6e of soulpath-website.css) — no duplicate rules here.
 */

/* ══════════════════════════════════════════════════════════════
   Plugin-local tokens — fall back to theme palette
   ══════════════════════════════════════════════════════════════ */
.branwell-numerology-plugin {
    --bn-dark:    var(--color-text-strong, #1E3F7A);
    --bn-primary: var(--color-primary,     #4169A8);
    --bn-mid:     var(--color-mid,         #4169A8);
    --bn-light:   var(--color-soft,        #EBF0F8);
    --bn-border:  var(--color-border,      #C5D3E8);
    --bn-text:    var(--color-text,        #5a6a85);
    --bn-faint:   var(--color-text-faint,  #8a9ab5);

    --bn-radius:    12px;
    --bn-radius-sm: 8px;

    color: var(--bn-text);
    line-height: 1.6;
}

/* The plugin is a full-page block. No horizontal padding or margin
   on desktop — the parent container (.entry, .section__inner, etc)
   takes control of width. On mobile, 10px left/right only, nothing else. */
.branwell-numerology-plugin {
    margin: 0;
    padding: 0;
}
@media (max-width: 768px) {
    .branwell-numerology-plugin { padding: 0 10px; }
}


/* ══════════════════════════════════════════════════════════════
   At-a-glance stat cards
   ══════════════════════════════════════════════════════════════ */
.bn-intro-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 2.5rem;
}
.bn-intro-card {
    background: var(--bn-light);
    border-radius: var(--bn-radius-sm);
    padding: 18px 20px;
}
.bn-ic-num {
    font-size: 28px;
    font-weight: 500;
    color: var(--bn-dark);
    line-height: 1;
    margin: 0 0 8px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.bn-ic-text {
    font-size: 13px;
    color: var(--bn-text);
    line-height: 1.55;
    margin: 0;
}


/* ══════════════════════════════════════════════════════════════
   Calculator block
   ══════════════════════════════════════════════════════════════ */
.bn-calc-wrap {
    margin: 0 0 2.5rem;
}
.bn-calc-block {
    background: #fff;
    border: 1px solid var(--bn-border);
    border-top: 3px solid var(--bn-primary);
    border-radius: 0 0 var(--bn-radius) var(--bn-radius);
    padding: 28px 32px 32px;
}
.bn-calc-head {
    margin: 0 0 1.5rem;
}
.bn-calc-block h2 {
    font-size: 17px;
    font-weight: 500;
    color: var(--bn-dark);
    margin: 0 0 4px;
    letter-spacing: -0.005em;
}
.bn-calc-sub {
    font-size: 13px;
    color: var(--bn-text);
    margin: 0;
    line-height: 1.55;
}


/* ══════════════════════════════════════════════════════════════
   Form
   ══════════════════════════════════════════════════════════════ */
.bn-form-row {
    margin-bottom: 1.25rem;
}
.bn-form-row label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bn-dark);
    margin-bottom: 7px;
}
.bn-form-row input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid var(--bn-border);
    border-radius: var(--bn-radius-sm);
    font-size: 15px;
    color: #1a1a2e;
    background: #fff;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bn-form-row input:focus {
    border-color: var(--bn-mid);
    box-shadow: 0 0 0 3px rgba(65, 105, 168, 0.18);
}
.bn-form-row input::placeholder {
    color: var(--bn-faint);
}
.bn-form-2col {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
    margin-bottom: 1.25rem;
}
.bn-form-2col .bn-form-row {
    margin-bottom: 0;
}


/* ══════════════════════════════════════════════════════════════
   Button + spinner
   ══════════════════════════════════════════════════════════════ */
.bn-btn {
    height: 44px;
    padding: 0 28px;
    background: var(--bn-dark);
    color: #fff;
    border: none;
    border-radius: var(--bn-radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: background-color 0.15s;
    font-family: inherit;
    margin: 0.5rem 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.bn-btn:hover    { background: var(--bn-mid); }
.bn-btn:active   { background: #163060; }
.bn-btn:disabled { background: #b0bdd4; cursor: not-allowed; }

.bn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bn-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes bn-spin { to { transform: rotate(360deg); } }


/* ══════════════════════════════════════════════════════════════
   Error message — matches dashboard error styling
   ══════════════════════════════════════════════════════════════ */
.bn-error {
    margin: 1.25rem 0 0;
    padding: 12px 14px;
    background: #fdf2f2;
    border: 1px solid #f0c4c4;
    border-left: 4px solid #c0392b;
    border-radius: 0 var(--bn-radius-sm) var(--bn-radius-sm) 0;
    font-size: 13.5px;
    color: #8b1a1a;
    line-height: 1.5;
}


/* ══════════════════════════════════════════════════════════════
   Results
   ══════════════════════════════════════════════════════════════ */
.bn-results {
    margin-top: 2rem;
    border-top: 1px solid var(--bn-border);
    padding-top: 1.75rem;
}
.bn-results-label,
.bn-report-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bn-primary);
    margin: 0 0 1rem;
}

/* ─── Core-number cards — 4 ramps for visual distinction ─── */
.bn-results-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 2.25rem;
}
.bn-result-card {
    background: var(--bn-light);
    border-radius: var(--bn-radius-sm);
    padding: 14px 16px 16px;
    text-align: center;
}
.bn-rc-label {
    font-size: 10px;
    color: var(--bn-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin: 0 0 8px;
}
.bn-rc-val {
    font-size: 36px;
    font-weight: 500;
    color: var(--bn-dark);
    line-height: 1;
    margin: 0 0 8px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.bn-rc-title {
    font-size: 13px;
    color: var(--bn-dark);
    margin: 0 0 2px;
    font-weight: 500;
}
.bn-rc-meaning {
    font-size: 12px;
    color: var(--bn-text);
    margin: 0;
    line-height: 1.4;
}

/* Ramp variants — match the 2026 mockup */
.bn-rc--blue   { background: #E6F1FB; }
.bn-rc--blue   .bn-rc-label,
.bn-rc--blue   .bn-rc-meaning  { color: #185FA5; }
.bn-rc--blue   .bn-rc-val,
.bn-rc--blue   .bn-rc-title    { color: #042C53; }

.bn-rc--purple { background: #EEEDFE; }
.bn-rc--purple .bn-rc-label,
.bn-rc--purple .bn-rc-meaning  { color: #534AB7; }
.bn-rc--purple .bn-rc-val,
.bn-rc--purple .bn-rc-title    { color: #26215C; }

.bn-rc--teal   { background: #E1F5EE; }
.bn-rc--teal   .bn-rc-label,
.bn-rc--teal   .bn-rc-meaning  { color: #0F6E56; }
.bn-rc--teal   .bn-rc-val,
.bn-rc--teal   .bn-rc-title    { color: #04342C; }

.bn-rc--amber  { background: #FAEEDA; }
.bn-rc--amber  .bn-rc-label,
.bn-rc--amber  .bn-rc-meaning  { color: #854F0B; }
.bn-rc--amber  .bn-rc-val,
.bn-rc--amber  .bn-rc-title    { color: #412402; }


/* ══════════════════════════════════════════════════════════════
   Detailed report cards
   ══════════════════════════════════════════════════════════════ */
.bn-detail-card {
    border: 1px solid var(--bn-border);
    border-left: 4px solid var(--bn-primary);
    border-radius: 0 var(--bn-radius-sm) var(--bn-radius-sm) 0;
    background: #fff;
    margin-bottom: 14px;
    overflow: hidden;
}
.bn-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: var(--bn-light);
    border-bottom: 1px solid var(--bn-border);
}
.bn-detail-num {
    font-size: 22px;
    font-weight: 500;
    color: var(--bn-dark);
    min-width: 36px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.bn-detail-type {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bn-text);
}
.bn-detail-title {
    font-size: 13px;
    color: var(--bn-dark);
    margin-left: auto;
    font-weight: 500;
}
.bn-detail-body {
    padding: 18px 22px;
    font-size: 14px;
    color: var(--bn-text);
    line-height: 1.7;
}


/* ══════════════════════════════════════════════════════════════
   Method section + Pythagorean table
   ══════════════════════════════════════════════════════════════ */
.bn-section {
    margin: 0;
}
.bn-section-head {
    margin: 2.5rem 0 1.25rem;
    border-top: 1px solid var(--bn-border);
    padding-top: 2rem;
}
.bn-sh-cat {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bn-text);
    margin: 0 0 6px;
}
.bn-section-head h2 {
    font-size: 22px;
    font-weight: 500;
    color: var(--bn-dark);
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.01em;
}
.bn-body-text {
    font-size: 14px;
    color: var(--bn-text);
    line-height: 1.7;
    margin: 0 0 1.25rem;
}

/* ─── Pythagorean letter grid ─── */
.bn-pyth-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 14px;
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-sm);
    overflow: hidden;
}
.bn-pyth-table thead th {
    background: var(--bn-dark);
    color: #fff;
    padding: 9px 0;
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.04em;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.bn-pyth-table thead th:last-child { border-right: none; }
.bn-pyth-table tbody td {
    padding: 9px 0;
    text-align: center;
    border-top: 1px solid var(--bn-border);
    border-right: 1px solid var(--bn-border);
    color: var(--bn-dark);
    font-weight: 500;
}
.bn-pyth-table tbody td:last-child { border-right: none; }
.bn-pyth-table tbody tr:nth-child(even) td { background: var(--bn-light); }


/* ─── Worked-example callout ─── */
.bn-example-box {
    background: var(--bn-light);
    border-left: 3px solid var(--bn-mid);
    border-radius: 0 var(--bn-radius-sm) var(--bn-radius-sm) 0;
    padding: 14px 18px;
    margin: 1.5rem 0;
}
.bn-example-box p {
    font-size: 13.5px;
    color: var(--bn-dark);
    line-height: 1.7;
    margin: 0;
}
.bn-example-box code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--bn-primary);
    background: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--bn-border);
}


/* ══════════════════════════════════════════════════════════════
   Inline links + country-aware CTA strip
   ══════════════════════════════════════════════════════════════ */
.bn-inline-link {
    color: var(--bn-mid);
    font-weight: 500;
    text-decoration: none;
}
.bn-inline-link:hover {
    color: var(--bn-dark);
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   Final CTA — matches the branwell-cta editorial closing pattern
   Hairline divider → headline w/ italic emphasis word → soft sub
   → outlined pill button with arrow, right-aligned.
   ══════════════════════════════════════════════════════════════ */
.bn-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 2.5rem 0 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bn-border);
}
.bn-final-cta__text {
    flex: 1 1 auto;
    min-width: 0;
}
.bn-final-cta__title {
    font-size: 22px;
    font-weight: 500;
    color: var(--bn-dark);
    margin: 0 0 6px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.bn-final-cta__title em {
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-weight: 500;
    color: var(--bn-primary);
}
.bn-final-cta__sub {
    font-size: 14px;
    color: var(--bn-text);
    margin: 0;
    line-height: 1.55;
}
.bn-final-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none!important;
    padding: 12px 24px;
    background: transparent;
    color: var(--bn-dark);
    border: 1.5px solid var(--bn-dark);
    border-radius: var(--bn-radius-sm);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.15s, color 0.15s, transform 0.15s;
}
.bn-final-cta__btn:hover,
.bn-final-cta__btn:focus,
.bn-final-cta__btn:active,
.bn-final-cta__btn:visited {
    text-decoration: none;
}
.bn-final-cta__btn:hover {
    background: var(--bn-dark);
    color: #fff;
}
.bn-final-cta__btn:hover .bn-final-cta__arrow {
    transform: translateX(3px);
}
.bn-final-cta__arrow {
    transition: transform 0.15s;
    line-height: 1;
}


/* ══════════════════════════════════════════════════════════════
   Disclaimer
   ══════════════════════════════════════════════════════════════ */
.bn-disclaimer {
    font-size: 12px;
    color: var(--bn-faint);
    line-height: 1.6;
    margin: 1rem 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--bn-border);
}


/* ══════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .bn-intro-grid       { grid-template-columns: 1fr; }
    .bn-calc-block       { padding: 22px 18px 24px; }
    .bn-form-2col        { grid-template-columns: 1fr; }
    .bn-results-grid     { grid-template-columns: 1fr 1fr; }
    .bn-detail-title     { display: none; }
    .bn-section-head h2  { font-size: 20px; }

    .bn-final-cta        { flex-direction: column; align-items: flex-start; }
    .bn-final-cta__btn   { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .bn-results-grid     { grid-template-columns: 1fr; }
    .bn-rc-val           { font-size: 32px; }
    .bn-pyth-table       { font-size: 13px; }
}

@media print {
    .bn-btn,
    .bn-final-cta,
    .bn-error { display: none; }
}