/* ============================================================
   Blue Star Offers — "The Open Letter" theme
   Single drop-in stylesheet. Load AFTER tailwind.min.css.

   Strategy: remap the Tailwind utility classes you already use
   (bg-blue-600, text-gray-700, rounded-lg, shadow-lg, etc.) to
   the Open Letter palette + typography. No markup changes needed.

   In each template, replace your current Tailwind <link> with:

     <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwind.min.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/open-letter.css') }}">

   That's the only template change. Fonts are imported below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=DM+Mono:wght@400;500&display=swap');

:root {
  --paper:   #f4ede0;   /* page background */
  --paper-2: #ede4d2;   /* tinted section bg */
  --cream:   #faf5e8;   /* card / "white" surfaces */
  --ink:     #0b1d3a;   /* primary text + navy brand */
  --ink-2:   #1b2c4a;   /* secondary text */
  --muted:   #5b6675;   /* tertiary / metadata */
  --rule:    #cdbfa3;   /* hairline rules + borders */
  --gold:    #b48a3b;   /* accent + link */
  --bad:     #8a3a2d;   /* errors / "you give up" red */
  --good:    #2c6a45;   /* success / "$0" green */
  --serif:   'Source Serif 4', Georgia, serif;
  --italic:  'Instrument Serif', Georgia, serif;
  --sans:    'Inter', system-ui, -apple-system, sans-serif;
  --mono:    'DM Mono', ui-monospace, monospace;
}

/* ------- Page defaults ----------------------------------- */

body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Editorial serif on all headings */
h1, h2, h3, h4 {
  font-family: var(--serif);
  letter-spacing: -0.018em;
  color: var(--ink);
}
h1 { font-weight: 500; line-height: 1.05; }
h2 { font-weight: 500; line-height: 1.08; }
h3 { font-weight: 500; line-height: 1.15; }
h4 { font-weight: 600; line-height: 1.2; }

/* Open Letter prefers a touch lighter weight than Tailwind's
   font-bold (700). Tone it down on headings only. */
h1.font-bold, h2.font-bold, h3.font-bold { font-weight: 500; }
h4.font-bold, h5.font-bold, h6.font-bold { font-weight: 600; }

p { color: var(--ink-2); }

/* ------- Hero gradient → cream paper -------------------- */

.hero-gradient {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--rule);
}
.hero-gradient h1,
.hero-gradient h2,
.hero-gradient h3,
.hero-gradient p,
.hero-gradient span,
.hero-gradient li { color: var(--ink); }
.hero-gradient .text-blue-100 { color: var(--muted) !important; }
.hero-gradient .text-yellow-400 { color: var(--gold) !important; }
.hero-gradient ul li { color: var(--ink); font-family: var(--serif); font-size: 18px; }

/* Italicize one-word emphasis ("Period.") for editorial feel.
   Targets the last word inside the hero h1/h2 — purely visual. */
.hero-gradient h1::first-letter,
.hero-gradient h2::first-letter { color: var(--ink); }

/* ------- Color remaps (Tailwind class → Open Letter) ---- */

/* Backgrounds */
.bg-white       { background-color: var(--cream)    !important; }
.bg-gray-50     { background-color: var(--paper)    !important; }
.bg-gray-100    { background-color: var(--paper-2)  !important; }
.bg-blue-50     { background-color: var(--paper-2)  !important; }
.bg-blue-100    { background-color: var(--cream)    !important; }
.bg-blue-600    { background-color: var(--ink)      !important; }
.bg-blue-700    { background-color: var(--ink-2)    !important; }
.bg-blue-900    { background-color: var(--ink)      !important; }
.bg-gray-900    { background-color: var(--ink)      !important; }
.bg-yellow-400  { background-color: var(--gold)     !important; color: var(--ink) !important; }
.bg-green-100   { background-color: rgba(44,106,69,0.10) !important; }
.bg-red-100     { background-color: rgba(138,58,45,0.08) !important; }

/* Text */
.text-white       { color: var(--cream)  !important; }
.text-gray-300,
.text-gray-400    { color: #dad0b9       !important; }   /* in dark sections only */
.text-gray-500,
.text-gray-600    { color: var(--muted)  !important; }
.text-gray-700,
.text-gray-800    { color: var(--ink-2)  !important; }
.text-gray-900    { color: var(--ink)    !important; }
.text-blue-100,
.text-blue-200    { color: #dad0b9       !important; }
.text-blue-600,
.text-blue-800,
.text-blue-900    { color: var(--ink)    !important; }
.text-blue-700    { color: var(--gold)   !important; }
.text-yellow-400  { color: var(--gold)   !important; }
.text-green-400,
.text-green-600,
.text-green-700,
.text-green-800   { color: var(--good)   !important; }
.text-red-500,
.text-red-600,
.text-red-700,
.text-red-800     { color: var(--bad)    !important; }

/* Borders */
.border-blue-200,
.border-blue-300,
.border-blue-400,
.border-gray-100,
.border-gray-200,
.border-gray-300,
.border-gray-400  { border-color: var(--rule) !important; }
.border-blue-600  { border-color: var(--ink)  !important; }
.border-red-400   { border-color: var(--bad)  !important; }
.border-green-400 { border-color: var(--good) !important; }

/* Hover variants seen in templates */
.hover\:bg-blue-700:hover  { background-color: var(--ink-2)  !important; }
.hover\:bg-blue-800:hover  { background-color: var(--ink-2)  !important; }
.hover\:bg-gray-100:hover  { background-color: var(--paper-2) !important; }
.hover\:text-blue-200:hover{ color: #f3eedf !important; }
.hover\:text-blue-600:hover{ color: var(--gold) !important; }
.hover\:text-blue-700:hover{ color: var(--gold) !important; }
.hover\:text-blue-800:hover{ color: var(--ink-2) !important; }
.hover\:text-blue-900:hover{ color: var(--ink) !important; }
.hover\:text-gray-300:hover{ color: var(--cream) !important; }

/* Focus rings — replace bright blue ring with gold */
.focus\:ring-blue-500:focus { --tw-ring-color: var(--gold) !important; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px;
  border-color: var(--ink) !important;
  box-shadow: none !important;
}

/* ------- Shape: kill rounded corners, swap shadows ------ */

.rounded,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl { border-radius: 0 !important; }
.rounded-full { border-radius: 999px !important; }  /* keep pill chips */

.shadow,
.shadow-sm,
.shadow-md   { box-shadow: 0 1px 0 var(--rule) !important; }
.shadow-lg   { box-shadow: 6px 6px 0 var(--paper-2), 6px 6px 0 1px var(--ink) !important; }
.shadow-xl,
.shadow-2xl  { box-shadow: 10px 10px 0 var(--paper-2), 10px 10px 0 1px var(--ink) !important; }

/* ------- Sticky nav --------------------------------------- */

#stickyNav {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--rule) !important;
}
#stickyNav ul li a {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink-2);
}
.nav-link.active,
#stickyNav .nav-link.active {
  color: var(--gold) !important;
  font-weight: 600;
}

/* ------- Header masthead --------------------------------- */

header.bg-white,
header > .bg-white {
  border-bottom: 1px solid var(--rule);
}
header h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
header svg { color: var(--ink); }
header a[href^="tel:"] {
  color: var(--gold) !important;
  font-family: var(--serif);
  font-weight: 600;
}
header a[href^="tel:"]:hover { color: var(--ink) !important; }

/* ------- Buttons (.bg-blue-600 + .rounded-lg pattern) ---- */

button, a {
  font-family: var(--sans);
}
.bg-blue-600.text-white,
button.bg-blue-600,
a.bg-blue-600 {
  background: var(--ink) !important;
  color: var(--cream) !important;
  border: 1px solid var(--ink);
  letter-spacing: 0.02em;
}
.bg-blue-600.text-white:hover,
button.bg-blue-600:hover,
a.bg-blue-600:hover {
  background: var(--ink-2) !important;
}

/* Remove the "transform hover:scale-105" lift Tailwind applies to CTAs.
   Open Letter feels grounded, not bouncy. */
.transform.hover\:scale-105:hover { transform: none !important; }

/* ------- Form inputs ------------------------------------- */

input[type="text"], input[type="email"], input[type="tel"], textarea {
  background: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--serif) !important;
  font-size: 17px !important;
  color: var(--ink) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--muted);
  font-family: var(--serif);
}
label.block, .block.text-sm.font-medium {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.text-red-500 { color: var(--bad) !important; }

/* The "Get Your FREE Cash Offer" form card */
#leadForm {
  background: var(--cream) !important;
}

/* ------- FAQ ---------------------------------------------- */

.faq-item {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important;
}
.faq-item:last-child { border-bottom: 1px solid var(--rule) !important; }
.faq-question {
  padding: 22px 0 !important;
  background: transparent !important;
}
.faq-question:hover { background: transparent !important; }
.faq-question h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.faq-icon { color: var(--gold) !important; }
.faq-answer {
  padding: 0 0 22px !important;
  background: transparent !important;
}
.faq-answer p {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* ------- Compare table ----------------------------------- */

#pricing .bg-gray-50,
#pricing .bg-blue-50 {
  border: 1px solid var(--ink) !important;
}
#pricing .bg-blue-50 {
  background: var(--ink) !important;
  color: var(--cream) !important;
}
#pricing .bg-blue-50 * { color: var(--cream); }
#pricing .bg-blue-50 .text-gray-700 { color: #dad0b9 !important; }
#pricing .bg-blue-50 .text-gray-900 { color: var(--cream) !important; }
#pricing .bg-blue-50 .text-green-600 { color: var(--gold) !important; }
#pricing .bg-blue-50 .border-blue-200 { border-color: rgba(244,237,224,0.2) !important; }
#pricing .bg-blue-50 .border-blue-400 { border-color: var(--gold) !important; }

/* "BEST VALUE" badge */
#pricing .bg-blue-600.text-white.px-4.py-1.rounded-full {
  background: var(--gold) !important;
  color: var(--ink) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em;
  border-radius: 0 !important;
  padding: 6px 14px !important;
}

/* ------- Numbered "step" circles ------------------------- */

.w-12.h-12.bg-blue-600.text-white.rounded-full {
  background: transparent !important;
  color: var(--gold) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--italic) !important;
  font-style: italic;
  font-size: 56px !important;
  font-weight: 400 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin-bottom: 4px;
  line-height: 1;
}

/* ------- Benefit icons (small circles w/ blue SVG) ------- */

.w-16.h-16.bg-blue-100.rounded-full {
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
}
.w-16.h-16.bg-blue-100.rounded-full svg {
  color: var(--gold) !important;
}

/* ------- Trust badges ------------------------------------ */

.rounded-full.px-5.py-2.shadow-sm {
  background: var(--cream) !important;
  border: 1px solid var(--rule) !important;
  font-family: var(--serif);
  font-weight: 600;
}

/* ------- Testimonial cards ------------------------------- */

.bg-white.rounded-lg.p-6.shadow-sm.border.border-gray-100 {
  background: var(--cream) !important;
  border: 1px solid var(--rule) !important;
}
.bg-white.rounded-lg.p-6.shadow-sm.border.border-gray-100 p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
}

/* ------- Sample offer card ------------------------------- */

.bg-blue-50.border-2.border-blue-200 {
  background: var(--cream) !important;
  border: 1px solid var(--ink) !important;
  box-shadow: 10px 10px 0 var(--paper-2), 10px 10px 0 1px var(--ink);
}
.bg-blue-600.text-white.text-xs.font-bold.px-3.py-1.rounded-full.uppercase {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
  padding: 5px 12px !important;
  font-family: var(--mono);
  letter-spacing: 0.2em;
}

/* ------- Mobile sticky bottom bar ------------------------ */

.md\:hidden.fixed.bottom-0 {
  background: var(--cream) !important;
  border-top: 1px solid var(--ink) !important;
}
.md\:hidden.fixed.bottom-0 a.text-blue-600 {
  color: var(--ink) !important;
  font-family: var(--sans);
  font-weight: 600;
}
.md\:hidden.fixed.bottom-0 a.bg-blue-600 {
  background: var(--ink) !important;
  color: var(--cream) !important;
}

/* ------- Back-to-top button ------------------------------ */

#backToTop {
  background: var(--cream) !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink);
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--ink);
}

/* ------- Footer ------------------------------------------ */

footer.bg-gray-900 {
  background: var(--ink) !important;
  color: var(--cream) !important;
}
footer.bg-gray-900 p,
footer.bg-gray-900 a,
footer.bg-gray-900 span { color: #dad0b9 !important; }
footer.bg-gray-900 a:hover { color: var(--gold) !important; }
footer.bg-gray-900 .text-gray-400 { color: #dad0b9 !important; }
footer.bg-gray-900 .text-gray-500 {
  color: #8d9aaf !important;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ------- Legal pages (privacy / sms / terms) ------------- */

/* They use a simple `bg-blue-900` header + serif-able body */
body.bg-white { background: var(--paper) !important; }
header.bg-blue-900 {
  background: var(--ink) !important;
  border-bottom: 1px solid var(--ink);
}
header.bg-blue-900 a {
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  color: var(--cream) !important;
  font-size: 22px !important;
  letter-spacing: -0.01em;
}
header.bg-blue-900 a:hover { color: var(--gold) !important; }

/* Underlined inline links on legal pages */
a.underline { text-decoration-color: var(--gold); text-underline-offset: 3px; }
a.text-blue-700 { color: var(--gold) !important; }
a.text-blue-700:hover { color: var(--ink) !important; }

/* Lede / last-updated lines */
main p.text-gray-500.text-sm { font-family: var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }

/* Numbered policy headings */
main h2.text-xl.font-semibold {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  color: var(--ink);
  margin-top: 8px;
  letter-spacing: -0.012em;
}
main ul.list-disc li { font-family: var(--serif); font-size: 17px; color: var(--ink-2); }

/* ------- Stars rating ------------------------------------ */

.flex.text-yellow-400 { color: var(--gold) !important; letter-spacing: 0.06em; }

/* ------- Small touches ----------------------------------- */

/* "Save up to $46,000..." callout line beneath the comparison */
.text-xl.font-semibold.text-gray-900 { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: -0.012em; }

/* Section headings size — let Tailwind drive size; just refine letter-spacing */
.text-3xl, .text-4xl { letter-spacing: -0.022em; }
.text-5xl, .text-6xl { letter-spacing: -0.028em; }