/*

Theme Name: Manass Connects

Theme URI: https://manassconnects.com

Author: Manass Connects

Description: Youth Mental Health Support theme

Version: 1.0

License: GNU General Public License v2 or later

Text Domain: manass-connects

*/



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



:root {

  --mc-primary: hsl(174, 55%, 39%);

  --mc-primary-fg: hsl(170, 40%, 98%);

  --mc-accent: hsl(168, 60%, 48%);

  --mc-accent-fg: hsl(170, 40%, 98%);

  --mc-background: hsl(30, 50%, 97%);

  --mc-foreground: hsl(160, 15%, 20%);

  --mc-card: hsl(30, 40%, 99%);

  --mc-secondary: hsl(174, 35%, 92%);

  --mc-secondary-fg: hsl(174, 45%, 25%);

  --mc-muted: hsl(170, 15%, 93%);

  --mc-muted-fg: hsl(174, 15%, 42%);

  --mc-border: hsl(174, 20%, 85%);

  --mc-destructive: hsl(0, 84%, 60%);

  --mc-radius: 1rem;

  --mc-font-heading: 'Nunito', sans-serif;

  --mc-font-body: 'Nunito Sans', sans-serif;

}



body { margin: 0; padding: 0; background-color: var(--mc-background); }

* { box-sizing: border-box; }



.mc-wrapper {

  background-color: var(--mc-background);

  color: var(--mc-foreground);

  font-family: var(--mc-font-body);

}

.mc-wrapper h1, .mc-wrapper h2, .mc-wrapper h3, .mc-wrapper h4 {

  font-family: var(--mc-font-heading);

}

.mc-container {

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 1.5rem;

}



/* ── Navbar ── */

.mc-navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: hsla(30, 50%, 97%, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mc-border);
  overflow: visible;   
}

.mc-navbar .mc-container {

  display: flex; align-items: center; justify-content: space-between;

  padding-top: 0.75rem; padding-bottom: 0.75rem;

}

.mc-navbar .mc-logo { height: 40px; width: auto; }




/* ── Hamburger — hidden on desktop ── */
.mc-menu-toggle {
  display: none;         
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--mc-primary);
  line-height: 1;
  padding: 4px 8px;
}



/* ── Nav links — row on desktop ── */

.mc-nav-links {

  display: flex;

  align-items: center;

  gap: 2rem;

}

.mc-nav-links a {

  color: var(--mc-muted-fg);

  font-family: var(--mc-font-body);

  font-weight: 500;

  text-decoration: none;

  transition: color 0.2s;

}

.mc-nav-links a:hover { color: var(--mc-foreground); }



/* ── Buttons ── */

.mc-btn-primary {

  display: inline-block;

  background: var(--mc-accent); color: var(--mc-accent-fg);

  padding: 0.875rem 2rem; border-radius: 9999px;

  font-family: var(--mc-font-heading); font-weight: 700; font-size: 0.875rem;

  text-decoration: none; text-align: center; transition: opacity 0.2s;

}

.mc-btn-primary:hover { opacity: 0.9; }

.mc-btn-outline {

  display: inline-block;

  border: 2px solid var(--mc-primary); color: var(--mc-primary);

  padding: 0.875rem 2rem; border-radius: 9999px;

  font-family: var(--mc-font-heading); font-weight: 700;

  text-decoration: none; text-align: center; transition: all 0.2s;

}

.mc-btn-outline:hover {

  background: var(--mc-primary); color: var(--mc-primary-fg);

}



.mc-badge {

  display: inline-block;

  background: var(--mc-secondary); color: var(--mc-secondary-fg);

  padding: 0.375rem 1rem; border-radius: 9999px;

  font-family: var(--mc-font-heading); font-weight: 600; font-size: 0.875rem;

  margin-bottom: 1.5rem;

}



/* ── Hero ── */

.mc-hero { padding: 9rem 0 6rem; }

.mc-hero-grid {

  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;

}

.mc-hero h1 {

  font-weight: 800; font-size: 3.5rem; line-height: 1.15; margin-bottom: 1.5rem;

}

.mc-hero h1 .mc-highlight { color: var(--mc-primary); }

.mc-hero p {

  font-size: 1.125rem; color: var(--mc-muted-fg); max-width: 32rem;

  line-height: 1.7; margin-bottom: 2rem;

}

.mc-hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

.mc-hero-img {

  width: 100%; border-radius: 1.5rem;

  box-shadow: 0 20px 50px -12px rgba(0,0,0,0.15);

}

.mc-hero-message {

  text-align: center; max-width: 42rem; margin: 5rem auto 0;

  font-size: 1.25rem; line-height: 1.7;

}

.mc-hero-message strong { font-weight: 700; }

.mc-hero-message .mc-highlight { color: var(--mc-primary); font-weight: 700; }



/* ── Sections ── */

.mc-section { padding: 5rem 0; }

.mc-section-header { text-align: center; margin-bottom: 3rem; }

.mc-section-header h2 { font-weight: 800; font-size: 2.25rem; margin-bottom: 1rem; }

.mc-section-header p {

  color: var(--mc-muted-fg); font-size: 1.125rem; max-width: 28rem; margin: 0 auto;

}



/* ── Cards ── */

.mc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.mc-card {

  background: var(--mc-card); border: 1px solid var(--mc-border);

  border-radius: 1.5rem; padding: 2rem;

  transition: box-shadow 0.3s;

}

.mc-card:hover { box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1); }



.mc-icon-wrap {

  width: 56px; height: 56px; border-radius: 1rem;

  display: flex; align-items: center; justify-content: center;

  margin-bottom: 1.5rem; transition: transform 0.2s;

}

.mc-card:hover .mc-icon-wrap { transform: scale(1.1); }

.mc-icon-wrap.learn { background: var(--mc-secondary); }

.mc-icon-wrap.connect { background: hsla(168, 60%, 48%, 0.1); }

.mc-icon-wrap.gethelp { background: hsla(174, 55%, 39%, 0.1); }

.mc-icon-wrap svg { width: 28px; height: 28px; }

.mc-icon-wrap.learn svg { color: var(--mc-primary); }

.mc-icon-wrap.connect svg { color: var(--mc-accent); }

.mc-icon-wrap.gethelp svg { color: var(--mc-primary); }



.mc-card h3 { font-weight: 700; font-size: 1.25rem; margin-bottom: 0.75rem; }

.mc-card p { color: var(--mc-muted-fg); line-height: 1.7; font-size: 0.9375rem; margin: 0; }



.mc-section-alt { background: hsla(174, 35%, 92%, 0.5); }

.mc-quote-icon { width: 32px; height: 32px; color: hsla(174, 55%, 39%, 0.4); margin-bottom: 1rem; }

.mc-card blockquote {

  font-style: italic; line-height: 1.7; margin-bottom: 1.5rem; font-size: 0.9375rem;

}

.mc-card .mc-author {

  font-family: var(--mc-font-heading); font-weight: 700;

  font-size: 0.875rem; color: var(--mc-primary);

}



/* ── Crisis ── */

.mc-crisis { padding: 3rem 0; }

.mc-crisis-inner {

  background: var(--mc-primary); border-radius: 1.5rem;

  padding: 3.5rem; text-align: center;

}

.mc-crisis-inner svg {

  width: 40px; height: 40px; color: var(--mc-primary-fg); margin: 0 auto 1rem; display: block;

}

.mc-crisis-inner h2 {

  font-weight: 800; font-size: 1.875rem; color: var(--mc-primary-fg); margin-bottom: 0.75rem; margin-top: 0;

}

.mc-crisis-inner p {

  color: hsla(170, 40%, 98%, 0.8); max-width: 28rem; margin: 0 auto 2rem;

}

.mc-crisis-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.mc-btn-crisis-outline {

  display: inline-block;

  border: 2px solid var(--mc-primary-fg); color: var(--mc-primary-fg);

  padding: 0.875rem 2rem; border-radius: 9999px;

  font-family: var(--mc-font-heading); font-weight: 700;

  text-decoration: none; transition: background 0.2s;

}

.mc-btn-crisis-outline:hover { background: hsla(170, 40%, 98%, 0.1); }



/* ── Footer ── */

.mc-footer { padding: 2.5rem 0; border-top: 1px solid var(--mc-border); }

.mc-footer .mc-container {

  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem;

}

.mc-footer p { font-size: 0.875rem; color: var(--mc-muted-fg); margin: 0; }

.mc-footer-links { display: flex; gap: 1.5rem; }

.mc-footer-links a {

  font-size: 0.875rem; color: var(--mc-muted-fg); text-decoration: none; transition: color 0.2s;

}

.mc-footer-links a:hover { color: var(--mc-foreground); }



@media (max-width: 768px) {

  .mc-menu-toggle {
    display: block;
  }

  .mc-nav-links {
    position: fixed;        /* ← changed from absolute to fixed */
    top: 65px;              /* ← matches navbar height */
    left: 0;
    right: 0;
    background: hsl(30, 50%, 97%);   /* ← solid, not transparent */
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    z-index: 49;
    border-bottom: 1px solid var(--mc-border);
  }

  .mc-nav-links.active {
    max-height: 400px;
    padding: 1.5rem 0;
    opacity: 1;
  }

  .mc-hero-grid { grid-template-columns: 1fr; }
  .mc-hero h1 { font-size: 2rem; }
  .mc-cards { grid-template-columns: 1fr; }
  .mc-crisis-inner { padding: 2rem; }
  .mc-footer .mc-container { flex-direction: column; text-align: center; }
}



@media (min-width: 769px) and (max-width: 1024px) {

  .mc-cards { grid-template-columns: repeat(2, 1fr); }

}


/* ── Mobile menu fix ── */
@media (max-width: 768px) {
  .mc-nav-links {
    display: flex !important;
    position: fixed;
    top: 65px;
    left: 0;
    right: 0;
    background: hsl(30, 50%, 97%);
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    z-index: 9999;
    border-bottom: 1px solid var(--mc-border);
  }

  .mc-nav-links.active {
    max-height: 400px !important;
    padding: 1.5rem 0 !important;
    opacity: 1 !important;
  }
}