/* astro-tools.css — vibrant styling for the astrology calculators/checkers.
   Reuses brand tokens from styles.css (--maroon, --saffron, --cream, --ink, radii, fonts)
   and adds bright gradients, glows and per-category accent colours. */

:root {
  --tool-grad: linear-gradient(135deg, #F7B23B 0%, #E8821E 48%, #C2641A 100%);
  --tool-grad-warm: linear-gradient(120deg, #6E1320 0%, #B22240 55%, #E8821E 100%);
  --tool-glow: 0 16px 40px rgba(232, 130, 30, .30);
}

/* ---------- vibrant section background ---------- */
.tools-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 50% -12%, #FFE6BE 0%, rgba(255, 230, 190, 0) 62%),
    radial-gradient(720px 460px at 92% 6%, #FFD7E6 0%, rgba(255, 215, 230, 0) 58%),
    radial-gradient(720px 520px at 4% 26%, #FCE9CC 0%, rgba(252, 233, 204, 0) 58%),
    linear-gradient(180deg, #FFF7EC 0%, #FFF0DA 100%);
}
.tools-section::before {
  content: ""; position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
  width: 460px; height: 460px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(244, 178, 59, .35), rgba(244, 178, 59, 0) 70%);
}
.tools-section > .container { position: relative; z-index: 1; }

/* ---------- hero ---------- */
.tools-hero { text-align: center; padding: 2.8rem 0 1.4rem; }
.tools-hero .eyebrow {
  display: inline-flex; align-items: center; gap: .4rem; justify-content: center;
  background: var(--tool-grad); color: #fff !important; font-weight: 800;
  padding: .45em 1.1em; border-radius: 999px; box-shadow: var(--tool-glow);
  letter-spacing: .08em;
}
.tools-hero .eyebrow::before { color: #fff; }
.tools-hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.7rem); line-height: 1.04; margin: .7rem 0 0;
  background: linear-gradient(118deg, #6E1320 0%, #C2641A 52%, #E8821E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tools-hero .lead { color: var(--ink-2); }

/* ---------- category grid (hub) ---------- */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 1.3rem; margin: 1.8rem 0; }
.tool-cat-card {
  --accent: #E8821E;
  position: relative; display: block; background: #fff; border: 0; border-radius: 20px;
  padding: 1.5rem 1.4rem 1.3rem; text-decoration: none; color: var(--ink); overflow: hidden;
  box-shadow: 0 10px 30px rgba(110, 19, 32, .10); transition: transform .18s, box-shadow .18s;
}
.tool-cat-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff)); }
.tool-cat-card:hover { transform: translateY(-7px); box-shadow: 0 22px 46px color-mix(in srgb, var(--accent) 26%, rgba(110, 19, 32, .12)); }
.tool-cat-card .ic {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  font-size: 1.7rem; border-radius: 16px; margin-top: .3rem;
  background: color-mix(in srgb, var(--accent) 16%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, #fff);
}
.tool-cat-card h3 { margin: .7rem 0 .35rem; font-family: var(--f-display); color: var(--maroon); font-size: 1.3rem; }
.tool-cat-card p { margin: 0 0 .7rem; color: var(--ink-2); font-size: .92rem; }
.tool-cat-card ul { margin: 0; padding-left: 1.05rem; color: var(--ink-3); font-size: .82rem; }
.tool-cat-card ul li { margin: .12rem 0; }
.tool-cat-card--soon { opacity: .9; }
.tool-cat-card .soon-tag { display: inline-block; margin-top: .8rem; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--accent); border-radius: 999px; padding: .28em .8em; }

/* ---------- tab bar ---------- */
.tool-tabs { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.6rem 0 1.3rem; }
.tool-tabs button {
  border: 2px solid #F2D6B0; background: #fff; color: var(--maroon); font-weight: 800;
  font-family: var(--f-body); font-size: .92rem; padding: .58em 1.15em; border-radius: 999px;
  cursor: pointer; transition: all .16s; box-shadow: 0 4px 12px rgba(110, 19, 32, .05);
}
.tool-tabs button:hover { border-color: var(--saffron); transform: translateY(-1px); }
.tool-tabs button.is-active { background: var(--tool-grad); color: #fff; border-color: transparent; box-shadow: var(--tool-glow); }

/* ---------- tool widget ---------- */
.tool {
  position: relative; background: #fff; border: 0; border-radius: 22px; padding: 1.8rem 1.7rem 1.7rem;
  box-shadow: 0 20px 54px rgba(110, 19, 32, .13); overflow: hidden;
}
.tool::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; background: var(--tool-grad); }
.tool::after { content: ""; position: absolute; right: -70px; top: -70px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 178, 59, .16), rgba(244, 178, 59, 0) 70%); pointer-events: none; }
.tool h3 { margin: .25rem 0 .3rem; font-family: var(--f-display); color: var(--maroon); font-size: 1.55rem; }
.tool__sub { margin: 0 0 1.2rem; color: var(--ink-2); font-size: .96rem; }
.tool__form { display: grid; gap: 1rem; max-width: 480px; position: relative; }
.tool__form .field { display: flex; flex-direction: column; gap: .4rem; }
.tool__form label { font-size: .82rem; font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.tool__form input, .tool__form select, .tool__form textarea {
  padding: .85em .95em; border: 2px solid #EAD7BD; border-radius: 14px; font-family: inherit;
  font-size: 1.02rem; background: #FFFCF6; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.tool__form input:focus, .tool__form select:focus { outline: 0; border-color: var(--saffron); box-shadow: 0 0 0 4px rgba(232, 130, 30, .2); background: #fff; }
.tool__form .hint { font-size: .77rem; color: var(--ink-3); }
.tool .btn-primary, .tool [data-calc] {
  font-size: 1.06rem; padding: .95em 1.6em; box-shadow: var(--tool-glow); letter-spacing: .01em;
}
.tool .btn-primary:hover, .tool [data-calc]:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(232, 130, 30, .42); }

/* ---------- result card ---------- */
.tool__result { margin-top: 1.4rem; }
.tool-result__card {
  position: relative; background: linear-gradient(135deg, #FFF7EA 0%, #FFEFD3 55%, #FFE3CE 100%);
  border: 1px solid rgba(201, 154, 46, .45); border-left: 6px solid var(--saffron);
  border-radius: 18px; padding: 1.5rem 1.6rem; box-shadow: 0 14px 36px rgba(110, 19, 32, .12);
  animation: toolpop .35s ease;
}
@keyframes toolpop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.tool-result__headline { margin: 0 0 .8rem; font-family: var(--f-display); font-size: 1.55rem; background: var(--tool-grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tool-result__lead { margin: .4rem 0 .9rem; color: var(--ink); line-height: 1.6; font-size: 1.02rem; }
.tool-result__badges { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; }
.tool-badge { display: inline-flex; flex-direction: column; background: #fff; border: 0; border-radius: 14px; padding: .55rem .95rem; min-width: 96px; box-shadow: 0 6px 16px rgba(110, 19, 32, .1); }
.tool-badge__k { font-size: .67rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 800; }
.tool-badge__v { font-size: 1.35rem; font-weight: 800; background: var(--tool-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--f-display); }
.tool-result__points { margin: .5rem 0 .2rem; padding-left: 1.2rem; color: var(--ink-2); }
.tool-result__points li { margin: .3rem 0; }
.tool-result__err { background: #fff4f4; border: 1.5px solid #f0c2c2; color: var(--maroon); border-radius: 14px; padding: .95rem 1.15rem; font-weight: 700; }

/* meter */
.tool-meter { margin: .4rem 0 1.1rem; }
.tool-meter__label { font-size: .82rem; font-weight: 800; color: var(--ink-2); margin-bottom: .35rem; }
.tool-meter__bar { height: 14px; border-radius: 999px; background: #efe0c9; overflow: hidden; box-shadow: inset 0 1px 3px rgba(110, 19, 32, .12); }
.tool-meter__bar > i { display: block; height: 100%; border-radius: 999px; background: var(--tool-grad); transition: width .6s ease; }
.tool-meter--good .tool-meter__bar > i { background: linear-gradient(90deg, #34c47a, #157B4A); }
.tool-meter--low .tool-meter__bar > i { background: linear-gradient(90deg, #ef8b43, #B22240); }

/* CTA */
.tool-result__cta { margin-top: 1.25rem; padding-top: 1.15rem; border-top: 2px dashed rgba(110, 19, 32, .2); }
.tool-result__cta p { margin: 0 0 .7rem; font-weight: 800; color: var(--maroon); font-size: 1.05rem; }
.tool-result__cta .btn-primary { box-shadow: var(--tool-glow); }
.tool-result__note { display: block; margin-top: .55rem; font-size: .73rem; color: var(--ink-3); }
.tools-disclaimer { margin: 1.8rem auto 0; max-width: 720px; font-size: .8rem; color: var(--ink-3); text-align: center; }

@media (max-width: 560px) {
  .tool { padding: 1.4rem 1.2rem; }
  .tool-result__card { padding: 1.2rem; }
}