/* Global Styles for Sharmina Nasrin Campaign Website */

/* Import Space Grotesk from Google Fonts for body text.  
   We keep this external import since Google Fonts is widely accessible.  */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');

/* Import FivoSans Modern font family (multiple weights) to replace Sao Torpes for headings. */
@font-face {
  font-family: 'FivoSans Modern';
  src: url('./assets/fonts/FivoSansModern-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'FivoSans Modern';
  src: url('./assets/fonts/FivoSansModern-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'FivoSans Modern';
  src: url('./assets/fonts/FivoSansModern-ExtBlack.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

/* Colour palette inspired by the Street Poster Pop mood and user feedback */
:root {
  /* Colour palette updated to Sharmina Nasrin Option A website-ready palette */
  /* Use Electric Aqua for primary call‑to‑action and highlight elements */
  --bright-orange: #F85525;
  /* Use Warm Coral for campaign energy, stickers and action accents */
  --taxi-yellow: #FAA968;
  /* Primary Blue for navigation, hero, buttons and identity blocks */
  --cobalt: #01204E;
  /* Deep Espresso Ink for text */
  --almost-black: #01204E;
  /* Warm Paper for main page backgrounds */
  --warm-cream: #FFFDF8;
  /* Stone Neutral for secondary panels and soft backgrounds */
  --soft-mint: #F6DCAC;
  /* Vanilla Custard as an additional accent colour (used for hover states etc.) */
  --bubblegum: #028391;
  --white: #FFFFFF;
}


/* Modern semantic colour aliases for future development */
:root {
  --primary-blue: #1A3FAF;
  --warm-coral: #F26A3D;
  --marigold: #F5B82E;
  --warm-paper: #FFF7EF;
  --stone-neutral: #D9D7CC;
  --deep-espresso: #2A2623;
}

/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1.6;
  color: var(--almost-black);
  background-color: var(--soft-mint);
}
a {
  text-decoration: none;
  color: inherit;
}
ul { list-style: none; }

/* Navigation styles */
.nav {
  background-color: var(--cobalt);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.nav-brand {
  font-family: 'FivoSans Modern', sans-serif;
  font-size: 2rem;
  letter-spacing: 1px;
}
.nav-menu {
  display: flex;
  gap: 1.5rem;
}
.nav-menu a {
  font-size: 1rem;
  font-weight: 600;
  transition: color 0.2s ease;
}
.nav-menu a:hover {
  color: var(--taxi-yellow);
}
/* Mobile nav toggle (hidden for simplicity; not implemented) */

/* Hero section */
.hero {
  background-color: var(--cobalt);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
}
.hero-content {
  max-width: 600px;
  z-index: 2;
}
.hero h1 {
  font-family: 'FivoSans Modern', sans-serif;
  font-size: 3rem;
  line-height: 1.1;
  /* Use primary yellow for the main campaign message */
  color: var(--bright-orange);
  margin-bottom: 1rem;
}
.hero h2 {
  font-family: 'FivoSans Modern', sans-serif;
  font-size: 2rem;
  /* Use a light colour for subheadline to improve contrast against the hero background */
  color: var(--warm-cream);
  margin-bottom: 1rem;
}
.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  /* Keep hero description highly legible */
  color: var(--warm-cream);
}
.cta-buttons {
  display: flex;
  gap: 1rem;
}
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-primary {
  /* Primary call-to-action buttons use electric yellow */
  background-color: var(--bright-orange);
  color: var(--cobalt);
}
.btn-primary:hover {
  background-color: var(--bubblegum);
  color: var(--cobalt);
}
.btn-secondary {
  background-color: transparent;
  border: 2px solid var(--bright-orange);
  color: var(--bright-orange);
}
.btn-secondary:hover {
  background-color: var(--bright-orange);
  color: var(--cobalt);
}
/* Hero image styling */
.hero-image {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background-image: url('./assets/images/hero.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.95;
}
@media (max-width: 768px) {
  .hero {
    padding: 2rem 1rem;
  }
  .hero-image {
    display: none;
  }
  .hero h1 {
    font-size: 2.5rem;
  }
  .hero h2 {
    font-size: 1.5rem;
  }
}

/* Section styles */
section {
  padding: 4rem 2rem;
}
.section-title {
  font-family: 'FivoSans Modern', sans-serif;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: var(--cobalt);
  text-align: center;
}
.section-intro {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.1rem;
  margin-bottom: 3rem;
  text-align: center;
}

/* About section */
.about {
  background-color: var(--warm-cream);
}
.about-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
.about-card {
  flex: 1 1 250px;
  background-color: var(--white);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  text-align: center;
}
.about-card h3 {
  font-family: 'FivoSans Modern', sans-serif;
  font-size: 1.5rem;
  color: var(--cobalt);
  margin-bottom: 0.5rem;
}
.about-card p {
  font-size: 1rem;
}

/* Priorities section with accordion */
.priorities {
  background-color: var(--soft-mint);
}
.priority-list {
  max-width: 800px;
  margin: 0 auto;
}
.accordion-item {
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--white);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 1rem 1.5rem;
  font-family: 'FivoSans Modern', sans-serif;
  font-size: 1.5rem;
  background-color: var(--cobalt);
  color: var(--white);
  position: relative;
}
.accordion-header .icon {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}
.accordion-header.active .icon {
  transform: rotate(45deg);
}
.accordion-content {
  display: none;
  padding: 1.5rem;
  background-color: var(--warm-cream);
  color: var(--almost-black);
}
.accordion-content.active {
  display: block;
}
.accordion-content p {
  margin-bottom: 1rem;
  font-size: 1rem;
}
.accordion-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.accordion-content li {
  margin-bottom: 0.5rem;
  list-style-type: disc;
}
.accordion-content .video-placeholder {
  margin-top: 1rem;
  background-color: var(--soft-mint);
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  border-radius: 4px;
}
.accordion-content .video-placeholder::after {
  content: 'Video coming soon';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--cobalt);
  font-weight: 600;
}

/* Support tools section */
.support-section {
  background-color: var(--cobalt);
  color: var(--white);
}

/* Override section title colour inside the support section so it stands out on dark backgrounds */
.support-section .section-title {
  color: var(--bright-orange);
}
.support-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
.support-card {
  flex: 1 1 250px;
  /* Each support card is composed of a header (image) and body (text) */
  background-color: transparent;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.support-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.support-card h4 {
  font-family: 'FivoSans Modern', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--cobalt);
}
.support-card p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.support-card .support-btn {
  margin-top: auto;
  /* Use dark text on light buttons for better contrast */
  background-color: var(--cobalt);
  color: var(--warm-cream);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.support-card .support-btn:hover {
  background-color: var(--bright-orange);
  color: var(--almost-black);
}

/* New support card structure for hero-style panels */
.support-card .support-header {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
}
.support-card .support-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.support-body h3 {
  font-family: 'FivoSans Modern', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  /* Use a darker colour for support card headings so they stand out on bright card backgrounds */
  color: var(--almost-black);
}
.support-body p {
  font-size: 1rem;
  margin-bottom: 1rem;
  flex: 1;
  color: var(--almost-black);
}
.support-body.support-profile {
  background-color: var(--bright-orange);
}
.support-body.support-voted {
  background-color: var(--taxi-yellow);
}
.support-body.support-download {
  background-color: var(--soft-mint);
}
.support-body .support-btn {
  align-self: flex-start;
  margin-top: auto;
}

/* Call to action section */
.cta-section {
  /* Use hot pink for the CTA section background to stand out */
  background-color: var(--taxi-yellow);
  /* Switch to dark espresso for text to improve contrast */
  color: var(--almost-black);
  text-align: center;
  padding: 3rem 2rem;
}
.cta-section h3 {
  font-family: 'FivoSans Modern', sans-serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  /* Ensure the CTA heading uses a high‑contrast colour */
  color: var(--almost-black);
}
.cta-section .btn {
  margin-top: 1rem;
  /* Buttons within CTA section use the primary yellow */
  background-color: var(--bright-orange);
  /* Use dark text on the light button for better readability */
  color: var(--almost-black);
}
.cta-section .btn:hover {
  background-color: var(--soft-mint);
  color: var(--almost-black);
}

/* Ensure paragraph text inside the CTA section is also dark for readability */
.cta-section p {
  color: var(--almost-black);
}

/* Footer styling */
.site-footer {
  background-color: var(--almost-black);
  color: var(--white);
  padding: 2rem;
  border-top: 5px solid var(--taxi-yellow);
}
.footer-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}
.footer-column {
  flex: 1 1 250px;
}
.footer-column h4 {
  font-family: 'FivoSans Modern', sans-serif;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--taxi-yellow);
}
.footer-column p, .footer-column a {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: var(--white);
}
.footer-column a:hover {
  text-decoration: underline;
}
.social-icons {
  display: flex;
  gap: 0.5rem;
}
.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--cobalt);
  color: var(--taxi-yellow);
  font-size: 1.2rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.social-icons a:hover {
  background-color: var(--bubblegum);
  color: var(--cobalt);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 1rem;
  text-align: center;
  font-size: 0.8rem;
}

/* Volunteer tools section styles */
.tools-section {
  padding: 4rem 2rem;
  background-color: var(--soft-mint);
}
.tools-section h2 {
  font-family: 'FivoSans Modern', sans-serif;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--cobalt);
}
.tool-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
.tool-card {
  background-color: var(--white);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 300px;
  flex: 1 1 250px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tool-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.tool-card h3 {
  font-family: 'FivoSans Modern', sans-serif;
  font-size: 1.5rem;
  margin: 1rem;
  color: var(--cobalt);
}
.tool-card p {
  font-size: 1rem;
  margin: 0 1rem 1rem;
  flex: 1;
  color: var(--almost-black);
}
.tool-card .btn {
  margin: 0 1rem 1.5rem;
  align-self: flex-start;
}
.btn.disabled,
.btn[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

/* Responsive layout tweaks */
@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }
  .footer-row {
    flex-direction: column;
  }
  .support-card {
    flex: 1 1 100%;
  }
  .about-card {
    flex: 1 1 100%;
  }
  .accordion-header {
    font-size: 1.25rem;
  }
  .accordion-content p {
    font-size: 0.9rem;
  }

  /* Stack volunteer tool cards on mobile */
  .tool-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* Final Option A palette accessibility refinements */
body {
  background-color: #FFF7EF;
  color: #2A2623;
}

.nav {
  background-color: #1A3FAF;
  color: #FFF7EF;
}

.nav-menu a:hover {
  color: #F5B82E;
}

.hero {
  background-color: #FFF7EF;
  color: #2A2623;
}

.hero h1 {
  color: #1A3FAF;
}

.hero h2 {
  color: #2A2623;
}

.hero p {
  color: #2A2623;
}

.btn-primary {
  background-color: #1A3FAF;
  color: #FFF7EF;
}

.btn-primary:hover {
  background-color: #F26A3D;
  color: #2A2623;
}

.btn-secondary {
  border-color: #1A3FAF;
  color: #1A3FAF;
}

.btn-secondary:hover {
  background-color: #1A3FAF;
  color: #FFF7EF;
}

.section-title,
.about-card h3,
.support-body h3,
.tool-card h3 {
  color: #1A3FAF;
}

.about,
.accordion-content {
  background-color: #FFF7EF;
}

.about-card,
.accordion-item,
.tool-card,
.support-body {
  background-color: #FFF7EF;
  color: #2A2623;
}

.accordion-header {
  background-color: #1A3FAF;
  color: #FFF7EF;
}

.support-section {
  background-color: #1A3FAF;
}

.support-section .section-title {
  color: #F5B82E;
}

.support-body.support-profile {
  background-color: #F5B82E;
}

.support-body.support-voted {
  background-color: #F26A3D;
}

.support-body.support-download {
  background-color: #D9D7CC;
}

.support-body.support-voted h3,
.support-body.support-voted p {
  color: #2A2623;
}

.support-btn,
.support-card .support-btn {
  background-color: #1A3FAF;
  color: #FFF7EF;
}

.support-btn:hover,
.support-card .support-btn:hover {
  background-color: #F26A3D;
  color: #2A2623;
}

.cta-section {
  background-color: #F5B82E;
  color: #2A2623;
}

.cta-section h3,
.cta-section p {
  color: #2A2623;
}

.cta-section .btn {
  background-color: #1A3FAF;
  color: #FFF7EF;
}

.cta-section .btn:hover {
  background-color: #F26A3D;
  color: #2A2623;
}

.site-footer {
  background-color: #2A2623;
  color: #FFF7EF;
  border-top-color: #F5B82E;
}

.footer-column h4,
.social-icons a {
  color: #F5B82E;
}

.social-icons a {
  background-color: #1A3FAF;
}

.social-icons a:hover {
  background-color: #F26A3D;
  color: #2A2623;
}

/* Final readability patch: ensure coral/orange accents never carry light low-contrast text */
.support-body.support-voted,
.support-body.support-voted h3,
.support-body.support-voted p,
.btn-primary:hover,
.support-btn:hover,
.support-card .support-btn:hover,
.cta-section .btn:hover,
.social-icons a:hover {
  color: #2A2623 !important;
}

/* Keep disabled buttons readable too */
.btn.disabled,
.btn[disabled],
.support-btn.disabled {
  background-color: #D9D7CC !important;
  color: #2A2623 !important;
  opacity: 1 !important;
}

/* Light hero surfaces keep all page intro text readable */
.hero {
  background-color: #FFF7EF !important;
  color: #2A2623 !important;
}
.hero h1 {
  color: #1A3FAF !important;
}
.hero h2,
.hero p {
  color: #2A2623 !important;
}


/* =========================================================
   Sharmina Nasrin Final Better Palette — Readability Safe
   Main Gold: #F2AC29
   Action Orange-Red: #F24405
   Support Blue: #6379F2
   Small Electric Blue Accent: #0D05F2
   Campaign Charcoal: #262626
   Clean Surface: #F8FAFC
   ========================================================= */

:root {
  --main-gold: #F2AC29;
  --action-orange: #F24405;
  --support-blue: #6379F2;
  --electric-blue: #0D05F2;
  --campaign-charcoal: #262626;
  --clean-surface: #F8FAFC;

  --bright-orange: var(--main-gold);
  --taxi-yellow: var(--action-orange);
  --cobalt: var(--campaign-charcoal);
  --almost-black: var(--campaign-charcoal);
  --warm-cream: var(--main-gold);
  --soft-mint: var(--support-blue);
  --bubblegum: var(--electric-blue);
  --white: #FFFFFF;
}

body {
  background: var(--main-gold) !important;
  color: var(--campaign-charcoal) !important;
}

.nav {
  background: var(--campaign-charcoal) !important;
  color: var(--main-gold) !important;
}

.nav-brand {
  color: var(--main-gold) !important;
}

.nav-menu a {
  color: var(--clean-surface) !important;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--main-gold) !important;
}

.hero {
  background: var(--main-gold) !important;
  color: var(--campaign-charcoal) !important;
}

.hero h1 {
  color: var(--campaign-charcoal) !important;
}

.hero h2 {
  color: var(--electric-blue) !important;
}

.hero p {
  color: var(--campaign-charcoal) !important;
  font-weight: 600 !important;
}

.section-title {
  color: var(--campaign-charcoal) !important;
}

.section-intro,
.about p,
.priorities p,
.about-card p,
.accordion-content p,
.accordion-content li,
.support-body p,
.tool-card p {
  color: var(--campaign-charcoal) !important;
}

.about,
.priorities,
.tools-section {
  background: var(--main-gold) !important;
}

.about-card,
.accordion-item,
.tool-card,
.support-body,
form,
.sharminafy-wrapper,
.tool-wrapper {
  background: var(--clean-surface) !important;
  color: var(--campaign-charcoal) !important;
}

.about-card h3,
.support-body h3,
.tool-card h3 {
  color: var(--campaign-charcoal) !important;
}

.accordion-header {
  background: var(--campaign-charcoal) !important;
  color: var(--main-gold) !important;
}

.accordion-header .icon {
  color: var(--main-gold) !important;
}

.accordion-content {
  background: var(--clean-surface) !important;
  color: var(--campaign-charcoal) !important;
}

.btn,
button,
input[type="submit"] {
  font-weight: 800 !important;
}

.btn-primary,
.cta-section .btn,
.support-btn,
.support-card .support-btn,
.tool-card a,
.download-btn {
  background: var(--campaign-charcoal) !important;
  color: var(--main-gold) !important;
  border: 2px solid var(--campaign-charcoal) !important;
}

.btn-primary:hover,
.cta-section .btn:hover,
.support-btn:hover,
.support-card .support-btn:hover,
.tool-card a:hover,
.download-btn:hover {
  background: var(--action-orange) !important;
  color: var(--campaign-charcoal) !important;
  border-color: var(--action-orange) !important;
}

.btn-secondary {
  background: transparent !important;
  border: 2px solid var(--campaign-charcoal) !important;
  color: var(--campaign-charcoal) !important;
}

.btn-secondary:hover {
  background: var(--campaign-charcoal) !important;
  color: var(--main-gold) !important;
}

.support-section {
  background: var(--campaign-charcoal) !important;
}

.support-section .section-title {
  color: var(--main-gold) !important;
}

.support-body.support-profile {
  background: var(--main-gold) !important;
}

.support-body.support-voted {
  background: var(--action-orange) !important;
}

.support-body.support-download {
  background: var(--support-blue) !important;
}

.support-body.support-voted h3,
.support-body.support-voted p,
.support-body.support-download h3,
.support-body.support-download p {
  color: var(--campaign-charcoal) !important;
}

.cta-section {
  background: var(--support-blue) !important;
  color: var(--clean-surface) !important;
}

.cta-section h3,
.cta-section p {
  color: var(--clean-surface) !important;
}

input,
textarea,
select {
  background: var(--clean-surface) !important;
  color: var(--campaign-charcoal) !important;
  border: 2px solid var(--campaign-charcoal) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: 3px solid var(--main-gold) !important;
  border-color: var(--electric-blue) !important;
}

.overlay-text {
  background: var(--campaign-charcoal) !important;
  color: var(--main-gold) !important;
}

.color-circle {
  border-color: var(--campaign-charcoal) !important;
}

.site-footer {
  background: var(--campaign-charcoal) !important;
  color: var(--clean-surface) !important;
  border-top-color: var(--main-gold) !important;
}

.footer-column h4 {
  color: var(--main-gold) !important;
}

.footer-column p,
.footer-column a {
  color: var(--clean-surface) !important;
}

.social-icons a {
  background: var(--main-gold) !important;
  color: var(--campaign-charcoal) !important;
}

.social-icons a:hover {
  background: var(--action-orange) !important;
  color: var(--campaign-charcoal) !important;
}

.btn.disabled,
.btn[disabled],
.support-btn.disabled {
  background: #D8D8CC !important;
  color: var(--campaign-charcoal) !important;
  border-color: #D8D8CC !important;
  opacity: 1 !important;
}

/* Mobile readability and spacing */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.25rem !important;
  }

  .hero h2 {
    font-size: 1.35rem !important;
  }

  .hero p,
  .section-intro {
    font-size: 1rem !important;
  }

  .support-body {
    padding: 1.5rem 1rem !important;
  }
}


/* =========================================================
   Sharmina Nasrin Final Client Palette — Readability Safe
   Coral Orange: #F07446
   Stone Beige: #D8D8CC
   Off White: #F9F9F9
   Deep Navy: #082D52
   Royal Blue: #27458E
   ========================================================= */

:root {
  --coral-orange: #F07446;
  --stone-beige: #D8D8CC;
  --off-white: #F9F9F9;
  --deep-navy: #082D52;
  --royal-blue: #27458E;

  /* Map old theme variables to final palette */
  --bright-orange: var(--coral-orange);
  --taxi-yellow: var(--coral-orange);
  --cobalt: var(--deep-navy);
  --almost-black: var(--deep-navy);
  --warm-cream: var(--off-white);
  --soft-mint: var(--stone-beige);
  --bubblegum: var(--royal-blue);
  --white: #FFFFFF;
}

/* Global readability */
html, body {
  background: var(--off-white) !important;
  color: var(--deep-navy) !important;
  font-family: 'Space Grotesk', Arial, sans-serif !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  text-rendering: optimizeLegibility;
}

p, li, label, input, textarea, select, a, span {
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

/* Headings use FivoSans only; body stays clean */
h1, h2, h3, h4, .nav-brand, .section-title, .accordion-header, .btn, button {
  font-family: 'FivoSans Modern', 'Space Grotesk', Arial, sans-serif !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

/* Navigation */
.nav {
  background: var(--off-white) !important;
  color: var(--deep-navy) !important;
  border-bottom: 2px solid var(--stone-beige) !important;
}

.nav-brand {
  color: var(--deep-navy) !important;
  font-weight: 900 !important;
}

.nav-menu a {
  color: var(--deep-navy) !important;
  font-weight: 800 !important;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--coral-orange) !important;
}

/* Hero */
.hero {
  background: var(--deep-navy) !important;
  color: var(--off-white) !important;
  min-height: 560px !important;
}

.hero-content {
  max-width: 560px !important;
}

.hero h1 {
  color: var(--off-white) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

.hero h2 {
  color: var(--coral-orange) !important;
  font-weight: 900 !important;
}

.hero p {
  color: var(--off-white) !important;
  font-weight: 500 !important;
  max-width: 520px !important;
}

/* Buttons */
.btn,
button,
input[type="submit"] {
  font-weight: 900 !important;
  border-radius: 2px !important;
}

.btn-primary,
.cta-section .btn,
.support-btn,
.support-card .support-btn,
.tool-card a,
.download-btn {
  background: var(--coral-orange) !important;
  color: var(--off-white) !important;
  border: 2px solid var(--coral-orange) !important;
}

.btn-primary:hover,
.cta-section .btn:hover,
.support-btn:hover,
.support-card .support-btn:hover,
.tool-card a:hover,
.download-btn:hover {
  background: var(--royal-blue) !important;
  color: var(--off-white) !important;
  border-color: var(--royal-blue) !important;
}

.btn-secondary {
  background: transparent !important;
  border: 2px solid var(--off-white) !important;
  color: var(--off-white) !important;
}

.btn-secondary:hover {
  background: var(--off-white) !important;
  color: var(--deep-navy) !important;
}

/* Section structure */
section {
  background: var(--off-white) !important;
}

.section-title {
  color: var(--deep-navy) !important;
  font-weight: 900 !important;
}

.section-intro,
.about p,
.priorities p,
.about-card p,
.accordion-content p,
.accordion-content li,
.support-body p,
.tool-card p {
  color: var(--deep-navy) !important;
  font-weight: 500 !important;
}

.about {
  background: var(--off-white) !important;
}

.priorities,
.tools-section {
  background: var(--stone-beige) !important;
}

.about-card,
.accordion-item,
.tool-card,
.support-body,
form,
.sharminafy-wrapper,
.tool-wrapper {
  background: var(--off-white) !important;
  color: var(--deep-navy) !important;
  border: 1px solid rgba(8,45,82,0.10) !important;
}

.about-card h3,
.support-body h3,
.tool-card h3 {
  color: var(--deep-navy) !important;
  font-weight: 900 !important;
}

/* Accordions */
.accordion-header {
  background: var(--deep-navy) !important;
  color: var(--off-white) !important;
}

.accordion-header .icon {
  color: var(--off-white) !important;
}

.accordion-content {
  background: var(--off-white) !important;
  color: var(--deep-navy) !important;
}

/* Support cards */
.support-section {
  background: var(--off-white) !important;
}

.support-section .section-title {
  color: var(--deep-navy) !important;
}

.support-body.support-profile {
  background: var(--off-white) !important;
}

.support-body.support-voted {
  background: var(--stone-beige) !important;
}

.support-body.support-download {
  background: var(--off-white) !important;
}

.support-body.support-voted h3,
.support-body.support-voted p,
.support-body.support-download h3,
.support-body.support-download p {
  color: var(--deep-navy) !important;
}

/* CTA strip */
.cta-section {
  background: var(--coral-orange) !important;
  color: var(--off-white) !important;
}

.cta-section h3,
.cta-section p {
  color: var(--off-white) !important;
}

.cta-section .btn {
  background: var(--deep-navy) !important;
  color: var(--off-white) !important;
  border-color: var(--deep-navy) !important;
}

.cta-section .btn:hover {
  background: var(--royal-blue) !important;
  color: var(--off-white) !important;
  border-color: var(--royal-blue) !important;
}

/* Forms and tools */
input,
textarea,
select {
  background: var(--off-white) !important;
  color: var(--deep-navy) !important;
  border: 2px solid var(--stone-beige) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: 3px solid rgba(240,116,70,0.35) !important;
  border-color: var(--coral-orange) !important;
}

.overlay-text {
  background: var(--deep-navy) !important;
  color: var(--off-white) !important;
}

.color-circle {
  border-color: var(--deep-navy) !important;
}

/* Footer */
.site-footer {
  background: var(--deep-navy) !important;
  color: var(--off-white) !important;
  border-top-color: var(--coral-orange) !important;
}

.footer-column h4 {
  color: var(--coral-orange) !important;
}

.footer-column p,
.footer-column a {
  color: var(--off-white) !important;
}

.social-icons a {
  background: var(--off-white) !important;
  color: var(--deep-navy) !important;
}

.social-icons a:hover {
  background: var(--coral-orange) !important;
  color: var(--off-white) !important;
}

/* Disabled buttons still readable */
.btn.disabled,
.btn[disabled],
.support-btn.disabled {
  background: var(--stone-beige) !important;
  color: var(--deep-navy) !important;
  border-color: var(--stone-beige) !important;
  opacity: 1 !important;
}

/* Icons */
.about-card .fa,
.about-card .fas,
.tool-icon,
.social-icons i {
  color: inherit !important;
}

/* Mobile readability */
@media (max-width: 768px) {
  .hero {
    min-height: auto !important;
    padding: 3rem 1.25rem !important;
  }

  .hero h1 {
    font-size: 2.25rem !important;
  }

  .hero h2 {
    font-size: 1.35rem !important;
  }

  .hero p,
  .section-intro {
    font-size: 1rem !important;
  }

  .support-body {
    padding: 1.5rem 1rem !important;
  }
}


/* =========================================================
   Sharmina Nasrin Final Palette — Teal / Sand / Orange
   Deep Navy: #01204E
   Civic Teal: #028391
   Warm Sand: #F6DCAC
   Soft Apricot: #FAA968
   Campaign Orange: #F85525
   White: #FFFFFF
   Clean Cream: #FFFDF8
   ========================================================= */

:root {
  --deep-navy: #01204E;
  --civic-teal: #028391;
  --warm-sand: #F6DCAC;
  --soft-apricot: #FAA968;
  --campaign-orange: #F85525;
  --pure-white: #FFFFFF;
  --clean-cream: #FFFDF8;

  /* Map old theme variables to final palette */
  --bright-orange: var(--campaign-orange);
  --taxi-yellow: var(--soft-apricot);
  --cobalt: var(--deep-navy);
  --almost-black: var(--deep-navy);
  --warm-cream: var(--clean-cream);
  --soft-mint: var(--warm-sand);
  --bubblegum: var(--civic-teal);
  --white: var(--pure-white);
}

/* Global readability */
html, body {
  background: var(--clean-cream) !important;
  color: var(--deep-navy) !important;
  font-family: 'Space Grotesk', Arial, sans-serif !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  text-rendering: optimizeLegibility;
}

p, li, label, input, textarea, select, a, span {
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

h1, h2, h3, h4, .nav-brand, .section-title, .accordion-header, .btn, button {
  font-family: 'FivoSans Modern', 'Space Grotesk', Arial, sans-serif !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

/* Navigation */
.nav {
  background: var(--pure-white) !important;
  color: var(--deep-navy) !important;
  border-bottom: 2px solid var(--warm-sand) !important;
}

.nav-brand {
  color: var(--deep-navy) !important;
  font-weight: 900 !important;
}

.nav-menu a {
  color: var(--deep-navy) !important;
  font-weight: 800 !important;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--campaign-orange) !important;
}

/* Hero */
.hero {
  background: var(--deep-navy) !important;
  color: var(--pure-white) !important;
  min-height: 560px !important;
}

.hero-content {
  max-width: 560px !important;
}

.hero h1 {
  color: var(--pure-white) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

.hero h2 {
  color: var(--campaign-orange) !important;
  font-weight: 900 !important;
}

.hero p {
  color: var(--pure-white) !important;
  font-weight: 500 !important;
  max-width: 520px !important;
}

/* Buttons */
.btn,
button,
input[type="submit"] {
  font-weight: 900 !important;
  border-radius: 2px !important;
}

.btn-primary,
.cta-section .btn,
.support-btn,
.support-card .support-btn,
.tool-card a,
.download-btn {
  background: var(--campaign-orange) !important;
  color: var(--pure-white) !important;
  border: 2px solid var(--campaign-orange) !important;
}

.btn-primary:hover,
.cta-section .btn:hover,
.support-btn:hover,
.support-card .support-btn:hover,
.tool-card a:hover,
.download-btn:hover {
  background: var(--civic-teal) !important;
  color: var(--pure-white) !important;
  border-color: var(--civic-teal) !important;
}

.btn-secondary {
  background: transparent !important;
  border: 2px solid var(--pure-white) !important;
  color: var(--pure-white) !important;
}

.btn-secondary:hover {
  background: var(--pure-white) !important;
  color: var(--deep-navy) !important;
}

/* Section structure */
section {
  background: var(--clean-cream) !important;
}

.section-title {
  color: var(--deep-navy) !important;
  font-weight: 900 !important;
}

.section-intro,
.about p,
.priorities p,
.about-card p,
.accordion-content p,
.accordion-content li,
.support-body p,
.tool-card p {
  color: var(--deep-navy) !important;
  font-weight: 500 !important;
}

.about {
  background: var(--clean-cream) !important;
}

.priorities,
.tools-section {
  background: var(--warm-sand) !important;
}

.about-card,
.accordion-item,
.tool-card,
.support-body,
form,
.sharminafy-wrapper,
.tool-wrapper {
  background: var(--pure-white) !important;
  color: var(--deep-navy) !important;
  border: 1px solid rgba(1,32,78,0.12) !important;
}

.about-card h3,
.support-body h3,
.tool-card h3 {
  color: var(--deep-navy) !important;
  font-weight: 900 !important;
}

/* Accordions */
.accordion-header {
  background: var(--civic-teal) !important;
  color: var(--pure-white) !important;
}

.accordion-header .icon {
  color: var(--pure-white) !important;
}

.accordion-content {
  background: var(--pure-white) !important;
  color: var(--deep-navy) !important;
}

/* Support cards */
.support-section {
  background: var(--clean-cream) !important;
}

.support-section .section-title {
  color: var(--deep-navy) !important;
}

.support-body.support-profile {
  background: var(--pure-white) !important;
}

.support-body.support-voted {
  background: var(--warm-sand) !important;
}

.support-body.support-download {
  background: var(--pure-white) !important;
}

.support-body.support-voted h3,
.support-body.support-voted p,
.support-body.support-download h3,
.support-body.support-download p {
  color: var(--deep-navy) !important;
}

/* CTA strip */
.cta-section {
  background: var(--campaign-orange) !important;
  color: var(--pure-white) !important;
}

.cta-section h3,
.cta-section p {
  color: var(--pure-white) !important;
}

.cta-section .btn {
  background: var(--deep-navy) !important;
  color: var(--pure-white) !important;
  border-color: var(--deep-navy) !important;
}

.cta-section .btn:hover {
  background: var(--civic-teal) !important;
  color: var(--pure-white) !important;
  border-color: var(--civic-teal) !important;
}

/* Forms and tools */
input,
textarea,
select {
  background: var(--pure-white) !important;
  color: var(--deep-navy) !important;
  border: 2px solid var(--warm-sand) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: 3px solid rgba(248,85,37,0.35) !important;
  border-color: var(--campaign-orange) !important;
}

.overlay-text {
  background: var(--deep-navy) !important;
  color: var(--pure-white) !important;
}

.color-circle {
  border-color: var(--deep-navy) !important;
}

/* Footer */
.site-footer {
  background: var(--deep-navy) !important;
  color: var(--pure-white) !important;
  border-top-color: var(--campaign-orange) !important;
}

.footer-column h4 {
  color: var(--campaign-orange) !important;
}

.footer-column p,
.footer-column a {
  color: var(--pure-white) !important;
}

.social-icons a {
  background: var(--pure-white) !important;
  color: var(--deep-navy) !important;
}

.social-icons a:hover {
  background: var(--campaign-orange) !important;
  color: var(--pure-white) !important;
}

/* Disabled buttons stay readable */
.btn.disabled,
.btn[disabled],
.support-btn.disabled {
  background: var(--warm-sand) !important;
  color: var(--deep-navy) !important;
  border-color: var(--warm-sand) !important;
  opacity: 1 !important;
}

/* Icons */
.about-card .fa,
.about-card .fas,
.tool-icon,
.social-icons i {
  color: inherit !important;
}

/* Mobile readability */
@media (max-width: 768px) {
  .hero {
    min-height: auto !important;
    padding: 3rem 1.25rem !important;
  }

  .hero h1 {
    font-size: 2.25rem !important;
  }

  .hero h2 {
    font-size: 1.35rem !important;
  }

  .hero p,
  .section-intro {
    font-size: 1rem !important;
  }

  .support-body {
    padding: 1.5rem 1rem !important;
  }
}