/*
  DragoFi site styles. Every page uses this one file.

  Sections:
    1. Colors and basics      7. Home page
    2. Layout helpers         8. Forms
    3. Header and navigation  9. Calculators
    4. Footer                10. Articles and pages
    5. Buttons               11. Tables
    6. Cards and banners     12. Messages

  To change a color everywhere, change it once in section 1.
*/


/* ---- 1. Colors and basics ---------------------------------------------- */

:root {
  --green-dark: #376837;   /* header, banners */
  --green: #5DA95C;        /* accents */
  --green-pale: #E6F2E4;   /* soft panels */
  --gold: #DBB71F;         /* buttons, highlights */
  --charcoal: #282E34;     /* footer, dark sections, text on gold */
  --cream: #EFF1E7;        /* page background */
  --white: #FFFFFF;
  --text: #1F2328;
  --muted: #5B6168;
  --border: #D9DED5;
  --error: #B42318;

  --radius: 18px;
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  --font: Helvetica, Arial, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 100px;   /* jumping to #results stops below the sticky header */
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;             /* keeps the footer at the bottom of short pages */
  flex-direction: column;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
}

main {
  flex: 1;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h3 { font-size: 1.35rem; }

p {
  margin: 0 0 1em;
}

a {
  color: var(--green-dark);
}

img {
  max-width: 100%;
  height: auto;
}


/* ---- 2. Layout helpers --------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow {
  max-width: 860px;
}

.section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.center {
  text-align: center;
}

@media (max-width: 600px) {
  body { font-size: 17px; }
  .container { padding: 0 16px; }
  .section { padding-top: 28px; padding-bottom: 28px; }
}


/* ---- 3. Header and navigation -------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--green-dark);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.logo img {
  display: block;
  height: 58px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links > li > a,
.dropdown-toggle {
  display: block;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--white);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.nav-links > li > a:hover,
.dropdown-toggle:hover,
.dropdown:focus-within .dropdown-toggle {
  background: rgba(255, 255, 255, 0.14);
}

.dropdown-toggle::after {
  content: " \25BE";   /* small down arrow */
  font-size: 0.85em;
}

.dropdown {
  position: relative;
}

/* Dropdown menus open when you point at or tap "Tools" / "Articles" */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 250px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}

.dropdown-menu a:hover {
  background: var(--green-pale);
}

.menu-button {
  display: none;
  padding: 10px 16px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  background: none;
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Small screens: the links fold into a menu opened with the "Menu" button (static/js/site.js) */
@media (max-width: 860px) {
  .header-inner { min-height: 68px; }
  .logo img { height: 46px; }
  .menu-button { display: block; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px 16px 20px;
    background: var(--green-dark);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }

  .site-nav.open { display: block; }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .dropdown-toggle { width: 100%; text-align: left; }
  .dropdown-toggle::after { content: ""; }

  .dropdown-menu {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 8px 18px;
    background: none;
    box-shadow: none;
  }

  .dropdown-menu a { color: var(--white); }
  .dropdown-menu a:hover { background: rgba(255, 255, 255, 0.14); }
}


/* ---- 4. Footer ------------------------------------------------------------ */

.site-footer {
  background: var(--charcoal);
  color: var(--white);
  text-align: center;
  padding: 48px 0 36px;
}

.site-footer a {
  color: var(--white);
}

.footer-brand {
  font-size: 1.5rem;
  margin: 0;
}

.footer-tagline {
  margin: 0 0 20px;
  opacity: 0.85;
}

.donate {
  margin-bottom: 16px;
}

.donate input[type="image"] {
  background: transparent;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 28px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.copyright {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.75;
}


/* ---- 5. Buttons ----------------------------------------------------------- */

/* The glowing gold button used across the site */
.btn {
  display: inline-block;
  padding: 10px 26px;
  border: 2px solid var(--gold);
  border-radius: 10px;
  background: var(--gold);
  color: var(--charcoal);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 1em rgba(219, 183, 31, 0.55);
  transition: background 0.15s, box-shadow 0.15s;
}

.btn:hover,
.btn:focus-visible {
  background: var(--white);
  box-shadow: 0 0 1.4em 0.25em rgba(219, 183, 31, 0.75);
}

/* A see-through button for dark photos */
.btn-light {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
  box-shadow: none;
}

.btn-light:hover,
.btn-light:focus-visible {
  background: var(--white);
  color: var(--charcoal);
  box-shadow: none;
}


/* ---- 6. Cards and banners ------------------------------------------------- */

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}

.card + .card {
  margin-top: 28px;
}

@media (max-width: 600px) {
  .card { padding: 22px 18px; }
}

/* Green title band at the top of inner pages */
.page-banner {
  background: linear-gradient(135deg, var(--green-dark), var(--green));
  color: var(--white);
  text-align: center;
  padding: 48px 0 44px;
}

.page-banner h1 {
  margin: 0;
}

.page-banner .lead {
  max-width: 700px;
  margin: 12px auto 0;
  font-size: 1.15rem;
  opacity: 0.95;
}


/* ---- 7. Home page ----------------------------------------------------------- */

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(78vh, 720px);
  padding: 80px 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5)),
    url("../images/journey.jpg") center 70% / cover;
  color: var(--white);
  text-align: center;
}

.hero h1 {
  max-width: 900px;
  margin: 0 auto 16px;
  font-size: clamp(2.3rem, 6.5vw, 4.2rem);
  line-height: 1.12;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.hero .tagline {
  margin: 0 0 32px;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* Education / Tools / Insight */
.features {
  background: var(--charcoal);
  padding: 44px 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}

.feature {
  padding: 22px 24px;
  border: 3px solid var(--gold);
  border-radius: 20px;
  color: var(--white);
  text-align: center;
}

.feature h2 {
  margin: 0 0 6px;
  font-size: 1.8rem;
}

.feature p {
  margin: 0;
}

/* Financial Tools and Articles, over the mountain photo */
.explore {
  padding: 64px 0 120px;
  background: url("../images/mountain-background.jpg") center right / cover;
}

/* The photo stays still while scrolling on large screens only (it misbehaves on phones) */
@media (min-width: 1024px) and (hover: hover) {
  .explore { background-attachment: fixed; }
}

.explore-title {
  margin: 0 0 28px;
  color: var(--white);
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.explore-title + .card-grid {
  margin-bottom: 64px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.tool-card,
.topic-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  border-radius: 20px;
  color: var(--white);
  text-align: center;
}

.tool-card {
  background: rgba(55, 104, 55, 0.78);
}

.tool-card h3,
.topic-card h3 {
  margin: 0;
  font-size: 1.45rem;
}

.tool-card p,
.topic-card p {
  margin: 0;
}

.tool-card .btn {
  margin-top: auto;
  align-self: center;
}

.topic-card {
  background: rgba(0, 0, 0, 0.6);
  border: 3px solid var(--green-dark);
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s;
}

.topic-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}


/* ---- 8. Forms ---------------------------------------------------------------- */

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--text);
  font: inherit;
}

.field textarea {
  min-height: 220px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid rgba(93, 169, 92, 0.35);
  border-color: var(--green);
}

.field .help {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.field .error,
.form-error {
  margin: 6px 0 0;
  color: var(--error);
  font-size: 0.92rem;
  font-weight: 700;
}

.field.has-error input,
.field.has-error select {
  border-color: var(--error);
}

/* Checkboxes sit beside their label */
.field-checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: start;
}

.field-checkbox input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--green-dark);
}

.field-checkbox label {
  margin: 0;
}

.field-checkbox .help,
.field-checkbox .error {
  grid-column: 2;
}

.form-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}


/* ---- 9. Calculators ------------------------------------------------------------ */

.calc-layout {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

@media (max-width: 900px) {
  .calc-layout { grid-template-columns: minmax(0, 1fr); }
}

/* On wide screens the column beside the form stays in view while scrolling down the form */
@media (min-width: 901px) {
  .calc-side { position: sticky; top: 104px; }
}

.calc-form .btn {
  width: 100%;
  margin-top: 6px;
}

/* Before calculating: a photo with the steps for using the calculator */
.calc-intro {
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  background-position: center;
  background-size: cover;
  box-shadow: var(--shadow);
  color: var(--white);
}

.calc-intro-mortgage { background-image: url("../images/home.jpg"); }
.calc-intro-investment { background-image: url("../images/stock-chart.jpg"); }
.calc-intro-tax { background-image: url("../images/tax-form.jpg"); }

.calc-intro-text {
  width: 100%;
  padding: 80px 28px 24px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.82) 45%);
}

.calc-intro-text h2 {
  font-size: 1.5rem;
}

.calc-intro-text ol {
  margin: 0;
  padding-left: 1.3em;
}

.calc-intro-text li + li {
  margin-top: 6px;
}

/* After calculating: the numbers */
.results-title {
  margin-bottom: 16px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 20px;
  border-left: 6px solid var(--green);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.stat-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.stat-value {
  color: var(--charcoal);
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The main result, e.g. the monthly payment */
.stat-main {
  grid-column: 1 / -1;
  background: var(--green-dark);
  border-left-color: var(--gold);
}

.stat-main .stat-label { color: rgba(255, 255, 255, 0.85); }
.stat-main .stat-value { color: var(--white); font-size: 2.4rem; }

.stat-owed { background: #7A2E1E; }

.chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-pie {
  max-width: 560px;
  margin: 0 auto;
}

.results-details {
  margin-top: 32px;
}

/* "How it works" and other explanations, folded into sections that open on a click */
.guide {
  max-width: 900px;
}

.guide details,
.legend {
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.guide summary,
.legend summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.guide summary::-webkit-details-marker,
.legend summary::-webkit-details-marker {
  display: none;
}

.guide summary::after,
.legend summary::after {
  content: "+";
  color: var(--green-dark);
  font-size: 1.4rem;
  line-height: 1;
}

.guide details[open] summary::after,
.legend[open] summary::after {
  content: "\2212";   /* minus sign */
}

.details-body {
  padding: 0 24px 20px;
}

.details-body ul {
  margin: 0 0 1em;
}

.legend {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  box-shadow: none;
}

.legend summary {
  padding: 12px 18px;
  font-size: 1rem;
}

.legend dl {
  margin: 0;
  padding: 0 18px 14px;
}

.legend dt {
  font-weight: 700;
}

.legend dd {
  margin: 0 0 8px;
}


/* ---- 10. Articles and pages ------------------------------------------------- */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}

@media (max-width: 960px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
}

.article-image {
  display: block;
  width: 100%;
  height: clamp(200px, 32vw, 380px);
  object-fit: cover;
  border-radius: var(--radius);
}

.article-header {
  margin: 24px 0;
  text-align: center;
}

.article-header h1 {
  margin-bottom: 6px;
}

.article-date {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Article and page text written in the admin.
   Text pasted from Google Docs carries its own font sizes; the !important rules below
   keep headings large and lines well spaced, as on the original site. */
.prose {
  overflow-wrap: break-word;
}

.prose p {
  line-height: 1.6 !important;
}

.prose h2, .prose h2 span { font-size: 1.75rem !important; }
.prose h3, .prose h3 span { font-size: 1.45rem !important; }
.prose h4, .prose h4 span { font-size: 1.25rem !important; }

.prose h2,
.prose h3,
.prose h4 {
  margin-top: 1.4em;
}

.prose img {
  height: auto !important;
  border-radius: 10px;
}

.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.sidebar h2 {
  font-size: 1.3rem;
}

.series-list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.series-list li {
  margin-bottom: 8px;
}

.series-list a,
.series-list .current {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow);
  font-weight: 700;
  text-decoration: none;
}

.series-list .current {
  background: var(--green-dark);
  color: var(--white);
}

.series-list .current small {
  display: block;
  font-weight: 400;
  opacity: 0.85;
}

.share-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.share-links a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.9rem;
  text-decoration: none;
}

/* Category pages: one block per series, with a card per article */
.series-block + .series-block {
  margin-top: 48px;
}

.series-block > p {
  color: var(--muted);
}

.article-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.article-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.15s;
}

.article-card:hover {
  transform: translateY(-4px);
}

.article-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
}

.article-card-body {
  padding: 18px 20px 22px;
}

.article-card h3 {
  margin-bottom: 8px;
  color: var(--green-dark);
}

.article-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}


/* ---- 11. Tables ---------------------------------------------------------------- */

.table-scroll {
  max-height: 460px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #EEF0EA;
  text-align: right;
  white-space: nowrap;
}

.data-table thead th {
  position: sticky;
  top: 0;
  background: var(--green-dark);
  color: var(--white);
}

.data-table th:first-child,
.data-table td:first-child {
  text-align: left;
  font-weight: 600;
}

.data-table tbody tr:nth-child(even) {
  background: #F7F8F4;
}

/* Two-column list of amounts, like the tax breakdown */
.breakdown {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.breakdown td {
  padding: 9px 0;
  border-bottom: 1px solid #EEF0EA;
}

.breakdown td:last-child {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.breakdown .subtotal td {
  border-top: 2px solid var(--charcoal);
  font-weight: 700;
}


/* ---- 12. Messages ----------------------------------------------------------------- */

.messages {
  margin: 20px auto 0;
  padding: 0;
  list-style: none;
}

.message {
  margin-bottom: 8px;
  padding: 14px 18px;
  border-left: 6px solid var(--green);
  border-radius: 10px;
  background: var(--green-pale);
}

.message.error { border-color: var(--error); background: #FDECEA; }
.message.warning { border-color: var(--gold); background: #FBF4D9; }
.message.info { border-color: #3B6EA5; background: #EAF1F8; }