@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');

:root {
  --teal:       #216869;
  --teal-dark:  #1a5354;
  --coral:      #e76f51;
  --amber:      #f4a261;
  --charcoal:   #2d3436;
  --off-white:  #f4f4f4;

  --body-font:    'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --heading-font: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --logo-font:    var(--body-font);
  --menu-font:    var(--body-font);

  --color:                  #e76f51;
  --link-color-hover:       #e76f51;
  --highlight-color:        #f4a261;
  --page-bg:                #f4f4f4;
  --headings-color:         #216869;
  --nav-link-color:         rgba(255,255,255,0.85);
  --nav-link-color-hover:   rgba(255,255,255,1);
  --logo-color:             #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg:          #0e0e0e;
    --color:            #e76f51;
    --link-color-hover: #e76f51;
    --highlight-color:  #f4a261;
    --headings-color:   #f4f4f4;
    --nav-link-color:   rgba(255,255,255,0.85);
  }
}

/* ── NAV ── */
.top {
  background: var(--teal);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ── LOGO ── */
.logo img {
  width: 40px;
  height: 40px;
  max-width: none;
  border-radius: 0;
}

/* ── HEADINGS ── */
h1, h2, h3, h4 { color: var(--headings-color); }

/* Hero title stays white over image */
.hero__content h1,
.hero__content h2 { color: #fff !important; }

/* ── BUTTONS ── */
.btn {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  font-family: var(--body-font);
  font-weight: 600;
}
.btn:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: #fff;
}

/* ── READ MORE ── */
.readmore { color: var(--teal); font-weight: 600; }
.readmore:hover { color: var(--coral); }

/* ── FOOTER ── */
.footer {
  background: var(--charcoal);
  border-top: none;
}
.footer,
.footer__copyright,
.footer a { color: rgba(255,255,255,0.5); }
.footer a:hover { color: #fff; }
.footer__bttop { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.5); }
.footer__bttop:hover { border-color: #fff; color: #fff; }