/*
Theme Name: Two Skies
Theme URI: https://astrolovespell.com/
Author: Two Skies
Description: Own block theme for astrolovespell.com - relationship-chart atlas design system for an honest synastry resource.
Requires at least: 6.5
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: twoskies
*/

body { background-color: #F5F6FA; color: #2A2B3D; }
a { text-decoration: none; }
.legal-links-row a { text-decoration: underline; }
.wp-block-button__link { border-radius: 999px !important; }
.wp-block-group.ts-footer a { color: inherit; }

.ts-rings { display: inline-flex; align-items: center; margin-right: 6px; vertical-align: middle; }
.ts-card { transition: box-shadow .2s ease, transform .2s ease; }
.ts-card:hover { box-shadow: 0 12px 28px -14px rgba(27,35,64,0.22); transform: translateY(-2px); }
.ts-faq-row { border-top: 1px solid var(--wp--preset--color--mono-3); padding-top: 18px; padding-bottom: 18px; }
.ts-step-num { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; background:var(--wp--preset--color--mono-4); color:var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--fontprimary); font-weight:700; font-size:1.15rem; }

:root {
  --ts2-ink: #12192f;
  --ts2-navy: #1b2450;
  --ts2-rose: #a85f73;
  --ts2-gold: #d8b46f;
  --ts2-paper: #f7f8fc;
  --ts2-line: rgba(34, 44, 92, 0.16);
  --ts2-muted: #63687e;
  --ts2-shadow: 0 24px 70px -36px rgba(12, 18, 42, 0.42);
}

.ts2-page { background: var(--ts2-paper); color: var(--ts2-ink); overflow: hidden; }
.ts2-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.ts2-hero {
  position: relative;
  padding: clamp(56px, 8vw, 112px) 0 clamp(42px, 6vw, 78px);
  background:
    radial-gradient(circle at 86% 16%, rgba(216, 180, 111, 0.22), transparent 28%),
    radial-gradient(circle at 16% 8%, rgba(168, 95, 115, 0.22), transparent 28%),
    linear-gradient(135deg, #10182f 0%, #1f2c5f 52%, #f7f8fc 52.2%, #f7f8fc 100%);
}
.ts2-hero-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr); gap: clamp(28px, 5vw, 68px); align-items: center; }
.ts2-hero-copy { color: #fff; max-width: 620px; }
.ts2-kicker { margin: 0 0 14px; color: var(--ts2-gold); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ts2-hero h1, .ts2-section h2, .ts2-cta h2 { margin: 0; font-family: var(--wp--preset--font-family--fontprimary); font-weight: 700; letter-spacing: 0; line-height: 0.98; }
.ts2-hero h1 { max-width: 11ch; font-size: clamp(3.25rem, 8vw, 6rem); color: #fff; }
.ts2-lede { max-width: 58ch; margin: 24px 0 0; color: rgba(255,255,255,0.82); font-size: clamp(1.04rem, 1.7vw, 1.22rem); line-height: 1.72; }
.ts2-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ts2-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.92rem 1.35rem; border-radius: 999px; font-weight: 800; line-height: 1; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.ts2-button:hover { transform: translateY(-2px); }
.ts2-button:focus-visible { outline: 3px solid var(--ts2-gold); outline-offset: 4px; }
.ts2-button-primary { background: var(--ts2-rose); color: #fff; box-shadow: 0 18px 32px -20px rgba(168,95,115,0.9); }
.ts2-button-primary:hover { background: #944f61; color: #fff; }
.ts2-button-ghost { color: #fff; border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.08); }
.ts2-trust-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; color: rgba(255,255,255,0.82); font-size: 0.92rem; }
.ts2-trust-strip span { padding: 8px 12px; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; background: rgba(255,255,255,0.07); }
.ts2-hero-art { position: relative; margin: 0; border-radius: 22px; box-shadow: var(--ts2-shadow); transform: rotate(-1.2deg); }
.ts2-hero-art img { display: block; width: 100%; height: auto; border-radius: 22px; }

.ts2-section { padding: clamp(58px, 8vw, 104px) 0; }
.ts2-section-light { background: #f7f8fc; }
.ts2-section-ink { background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent), var(--ts2-ink); color: #fff; }
.ts2-section-rose { background: #fbf2f5; }
.ts2-split, .ts2-proof-grid, .ts2-glossary { display: grid; grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1.18fr); gap: clamp(28px, 6vw, 74px); align-items: start; }
.ts2-section h2, .ts2-cta h2 { max-width: 13ch; font-size: clamp(2.4rem, 5vw, 4.6rem); color: var(--ts2-ink); }
.ts2-section-ink h2, .ts2-section-ink h3, .ts2-cta h2 { color: #fff; }
.ts2-prose p, .ts2-proof-grid p, .ts2-card p, .ts2-process p, .ts2-question-grid p, .ts2-faq p, .ts2-glossary dd, .ts2-cta p { color: var(--ts2-muted); font-size: 1rem; line-height: 1.75; }
.ts2-section-ink p, .ts2-section-ink dd { color: rgba(255,255,255,0.74); }
.ts2-section-head { max-width: 760px; margin-bottom: clamp(26px, 4vw, 44px); }
.ts2-section-head h2 { max-width: 15ch; }

.ts2-question-grid, .ts2-service-grid, .ts2-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ts2-question-grid article { min-height: 238px; padding: 24px; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; background: rgba(255,255,255,0.05); }
.ts2-question-grid span { color: var(--ts2-gold); font-weight: 800; }
.ts2-question-grid h3, .ts2-card h3, .ts2-process h3 { margin: 18px 0 10px; font-family: var(--wp--preset--font-family--fontprimary); font-size: 1.45rem; line-height: 1.12; }
.ts2-card, .ts2-process-grid article { padding: 24px; border: 1px solid var(--ts2-line); border-radius: 16px; background: #fff; box-shadow: 0 18px 44px -38px rgba(18,25,47,0.52); transition: transform 180ms ease, box-shadow 180ms ease; }
.ts2-card:hover, .ts2-process-grid article:hover { transform: translateY(-3px); box-shadow: 0 26px 58px -38px rgba(18,25,47,0.62); }
.ts2-card img { display: block; width: 42px; height: 42px; }

.ts2-check-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ts2-check-list li { padding: 18px 18px 18px 48px; border: 1px solid rgba(168,95,115,0.18); border-radius: 16px; background: rgba(255,255,255,0.72); color: #3c3040; position: relative; }
.ts2-check-list li::before { content: ""; position: absolute; left: 18px; top: 23px; width: 13px; height: 13px; border-radius: 50%; background: var(--ts2-rose); box-shadow: inset 0 0 0 4px #fbf2f5; }
.ts2-process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ts2-process-grid b { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ts2-ink); color: var(--ts2-gold); font-family: var(--wp--preset--font-family--fontprimary); font-size: 1.2rem; }

.ts2-glossary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
.ts2-glossary div { padding: 20px; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; background: rgba(255,255,255,0.05); }
.ts2-glossary dt { margin-bottom: 8px; color: #fff; font-weight: 800; }
.ts2-glossary dd { margin: 0; }
.ts2-faq { max-width: 840px; }
.ts2-faq details { border-top: 1px solid var(--ts2-line); padding: 20px 0; }
.ts2-faq summary { cursor: pointer; color: var(--ts2-ink); font-family: var(--wp--preset--font-family--fontprimary); font-size: 1.35rem; font-weight: 700; }
.ts2-faq summary:focus-visible { outline: 3px solid var(--ts2-gold); outline-offset: 4px; }
.ts2-cta { padding: clamp(70px, 10vw, 118px) 0; text-align: center; background: linear-gradient(rgba(18,25,47,0.78), rgba(18,25,47,0.88)), url("/wp-content/uploads/2026/08/two-skies-synastry-hero.png") center / cover; color: #fff; }
.ts2-cta .ts2-shell { max-width: 760px; }
.ts2-cta h2 { max-width: 12ch; margin-left: auto; margin-right: auto; }
.ts2-cta p { max-width: 58ch; margin: 22px auto 28px; color: rgba(255,255,255,0.78); }

@media (prefers-reduced-motion: no-preference) {
  .ts2-hero-art { animation: ts2-float 7s ease-in-out infinite; }
  @keyframes ts2-float {
    0%, 100% { transform: translateY(0) rotate(-1.2deg); }
    50% { transform: translateY(-10px) rotate(-0.6deg); }
  }
}

@media (max-width: 960px) {
  .ts2-hero { background: radial-gradient(circle at 80% 10%, rgba(216,180,111,0.2), transparent 30%), linear-gradient(180deg, #10182f 0%, #1f2c5f 62%, #f7f8fc 62.2%, #f7f8fc 100%); }
  .ts2-hero-grid, .ts2-split, .ts2-proof-grid, .ts2-glossary { grid-template-columns: 1fr; }
  .ts2-hero h1 { max-width: 12ch; }
  .ts2-hero-art { transform: none; }
  .ts2-question-grid, .ts2-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .ts2-shell { width: min(100% - 28px, 1120px); }
  .ts2-hero { padding-top: 42px; }
  .ts2-hero h1 { font-size: clamp(3rem, 16vw, 4.5rem); }
  .ts2-actions, .ts2-button { width: 100%; }
  .ts2-question-grid, .ts2-service-grid, .ts2-process-grid, .ts2-glossary dl { grid-template-columns: 1fr; }
  .ts2-question-grid article { min-height: auto; }
  .ts2-section h2, .ts2-cta h2 { font-size: clamp(2.45rem, 12vw, 3.4rem); }
}