/* =========================================================
   Women First Morgantown Reviews Page Stylesheet
   Revision: V580
   Date/Time: 2026-08-17 23:35 EDT

   Isolates the reviews page's established visual design from the
   global stylesheet while retaining the shared responsive navigation.
   ========================================================= */

/* =========================================================
       Women First Morgantown Reviews Page Styles
       Created: 2026-05-23 00:00 America/New_York
       Revision: 1.1
       Purpose: Match the soft, warm, elegant color palette and layout
                of the current Women First Morgantown home page.
       ========================================================= */

    :root {
      --rose: #9f5263;
      --rose-dark: #733746;
      --rose-soft: #f6e8eb;
      --blush: #fbf4f2;
      --cream: #fffaf6;
      --sage: #7f9478;
      --sage-soft: #edf3eb;
      --gold: #c8a96a;
      --ink: #352a2d;
      --muted: #6f6064;
      --white: #ffffff;
      --shadow: 0 16px 40px rgba(115, 55, 70, 0.12);
      --radius-large: 28px;
      --radius-card: 22px;
      --max-width: 1180px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: Georgia, "Times New Roman", serif;
      color: var(--ink);
      background:
        radial-gradient(circle at top left, rgba(246, 232, 235, 0.95), transparent 34rem),
        linear-gradient(180deg, var(--cream) 0%, var(--blush) 48%, var(--sage-soft) 100%);
      line-height: 1.65;
      min-height: 100vh;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 250, 246, 0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(159, 82, 99, 0.16);
    }

    .nav-wrap {
      width: min(100% - 32px, var(--max-width));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 16px 0;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      color: var(--rose-dark);
      letter-spacing: 0.03em;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--rose), var(--gold));
      color: var(--white);
      box-shadow: 0 8px 18px rgba(159, 82, 99, 0.22);
      font-size: 1.1rem;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 18px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 0.94rem;
      color: var(--muted);
    }

    .nav-links a:hover {
      color: var(--rose-dark);
    }

    .phone-pill {
      padding: 9px 14px;
      border-radius: 999px;
      background: var(--rose);
      color: var(--white);
      box-shadow: 0 8px 18px rgba(159, 82, 99, 0.2);
      white-space: nowrap;
    }

    .hero {
      width: min(100% - 32px, var(--max-width));
      margin: 52px auto 28px;
      padding: clamp(36px, 6vw, 70px);
      border-radius: var(--radius-large);
      background:
        linear-gradient(135deg, rgba(255,255,255,0.92), rgba(246,232,235,0.88)),
        radial-gradient(circle at 85% 15%, rgba(200,169,106,0.25), transparent 20rem);
      box-shadow: var(--shadow);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .hero::before,
    .hero::after {
      content: "✧";
      position: absolute;
      color: rgba(200, 169, 106, 0.4);
      font-size: clamp(2.5rem, 7vw, 5.5rem);
    }

    .hero::before {
      left: 28px;
      top: 24px;
    }

    .hero::after {
      right: 34px;
      bottom: 16px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-size: 0.78rem;
      color: var(--rose-dark);
      background: rgba(255,255,255,0.75);
      border: 1px solid rgba(159,82,99,0.18);
      border-radius: 999px;
      padding: 9px 15px;
      margin-bottom: 22px;
    }

    .hero h1 {
      font-size: clamp(2.3rem, 7vw, 4.8rem);
      color: var(--rose-dark);
      line-height: 1.05;
      margin-bottom: 18px;
    }

    .hero p {
      max-width: 780px;
      margin: 0 auto 28px;
      color: var(--muted);
      font-size: clamp(1.05rem, 2vw, 1.35rem);
    }

    .hero-actions {
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      font-family: Arial, Helvetica, sans-serif;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 46px;
      padding: 12px 20px;
      border-radius: 999px;
      font-weight: 700;
      transition: transform 160ms ease, box-shadow 160ms ease;
    }

    .button:hover {
      transform: translateY(-2px);
    }

    .button-primary {
      background: var(--rose);
      color: var(--white);
      box-shadow: 0 10px 22px rgba(159,82,99,0.22);
    }

    .button-secondary {
      background: rgba(255,255,255,0.82);
      color: var(--rose-dark);
      border: 1px solid rgba(159,82,99,0.2);
    }

    main {
      width: min(100% - 32px, var(--max-width));
      margin: 0 auto 60px;
    }

    .intro-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 24px;
      margin: 28px 0;
    }

    .panel {
      background: rgba(255,255,255,0.84);
      border: 1px solid rgba(159,82,99,0.12);
      border-radius: var(--radius-card);
      padding: 28px;
      box-shadow: 0 10px 26px rgba(115,55,70,0.08);
    }

    .panel h2,
    .section-title h2 {
      color: var(--rose-dark);
      font-size: clamp(1.75rem, 4vw, 2.55rem);
      line-height: 1.12;
      margin-bottom: 12px;
    }

    .panel p,
    .section-title p {
      color: var(--muted);
      font-family: Arial, Helvetica, sans-serif;
    }

    .stat-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 20px;
    }

    .stat {
      padding: 16px;
      background: var(--rose-soft);
      border-radius: 18px;
      text-align: center;
    }

    .stat strong {
      display: block;
      color: var(--rose-dark);
      font-size: 1.5rem;
    }

    .stat span {
      font-family: Arial, Helvetica, sans-serif;
      color: var(--muted);
      font-size: 0.85rem;
    }

    .section-title {
      text-align: center;
      max-width: 780px;
      margin: 58px auto 26px;
    }

    .review-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .review-card {
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(159,82,99,0.12);
      border-radius: var(--radius-card);
      padding: 24px;
      box-shadow: 0 12px 28px rgba(115,55,70,0.08);
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }

    .stars {
      color: var(--gold);
      letter-spacing: 0.08em;
      font-size: 1.15rem;
      margin-bottom: 12px;
    }

    .quote {
      color: var(--ink);
      font-size: 1.03rem;
      margin-bottom: 20px;
      flex: 1;
    }

    .meta {
      border-top: 1px solid rgba(159,82,99,0.12);
      padding-top: 14px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 0.9rem;
      color: var(--muted);
    }

    .meta strong {
      color: var(--rose-dark);
    }

    .source-link {
      display: inline-flex;
      margin-top: 8px;
      color: var(--sage);
      font-weight: 700;
    }

    .source-link:hover {
      color: var(--rose-dark);
    }

    .note-box {
      margin: 44px 0 0;
      padding: 24px;
      border-radius: var(--radius-card);
      background: rgba(237, 243, 235, 0.9);
      border: 1px solid rgba(127,148,120,0.18);
      color: var(--muted);
      font-family: Arial, Helvetica, sans-serif;
    }

    .note-box strong {
      color: var(--rose-dark);
    }

    .cta {
      margin-top: 54px;
      padding: 34px;
      border-radius: var(--radius-large);
      background: linear-gradient(135deg, var(--rose-dark), var(--rose));
      color: var(--white);
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 22px;
      box-shadow: var(--shadow);
    }

    .cta h2 {
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      margin-bottom: 8px;
    }

    .cta p {
      font-family: Arial, Helvetica, sans-serif;
      color: rgba(255,255,255,0.88);
    }

    .cta .button {
      background: var(--white);
      color: var(--rose-dark);
      white-space: nowrap;
    }

    .site-footer {
      text-align: center;
      padding: 34px 16px 48px;
      color: var(--muted);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 0.94rem;
    }

    @media (max-width: 920px) {
      .intro-grid,
      .review-grid,
      .cta {
        grid-template-columns: 1fr;
      }

      .nav-wrap {
        align-items: flex-start;
        flex-direction: column;
      }

      .nav-links {
        width: 100%;
        flex-wrap: wrap;
      }
    }

    @media (max-width: 620px) {
      .hero {
        margin-top: 28px;
      }

      .stat-row {
        grid-template-columns: 1fr;
      }

      .review-card,
      .panel,
      .cta {
        padding: 22px;
      }
    }
  
    /* =========================================================
       Unified Navigation Fix for Reviews Page
       Revision: 1.0
       Date/Time: 2026-05-26 EDT
       Purpose: Makes the reviews page top menu match the rest of the site.
       ========================================================= */

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      gap: 32px;
      min-height: 98px;
      padding: 18px 38px;
      background: rgba(255, 250, 243, 0.96);
      border-bottom: 1px solid rgba(185, 133, 41, 0.35);
      backdrop-filter: blur(8px);
    }

    .site-header .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 295px;
      color: #34104d;
      letter-spacing: normal;
      font-weight: normal;
    }

    .site-header .brand strong {
      display: block;
      color: #34104d;
      font-size: clamp(2rem, 3vw, 2.75rem);
      line-height: 1;
      font-weight: 700;
    }

    .site-header .brand em {
      display: block;
      margin-top: 4px;
      color: #34104d;
      font-size: 1rem;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      font-style: normal;
    }

    .site-header .lotus-mark {
      color: #b98529;
      font-size: 3.2rem;
      line-height: 1;
    }

    .site-header .main-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      flex: 1;
      flex-wrap: wrap;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1rem;
      color: #34104d;
    }

    .site-header .main-nav a {
      padding: 8px 0;
      color: #34104d;
      white-space: nowrap;
    }

    .site-header .main-nav a:hover {
      color: #b98529;
    }

    .site-header .phone-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      padding: 12px 22px;
      border-radius: 999px;
      color: white;
      background: linear-gradient(135deg, #5b1b73, #34104d);
      box-shadow: 0 16px 38px rgba(52, 16, 77, 0.13);
      font-family: Arial, sans-serif;
    }

    @media (max-width: 1050px) {
      .site-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
      }

      .site-header .brand {
        justify-content: center;
        min-width: 0;
      }

      .site-header .main-nav {
        gap: 16px;
      }

      .site-header .phone-pill {
        align-self: center;
      }
    }

  
    /* =========================================================
       Reviews Page Purple / Gold Palette Alignment
       Revision: 1.0
       Date/Time: 2026-07-08 EDT
       Purpose: Aligns the reviews page colors with the rest of the
                Women First Morgantown website.
       ========================================================= */

    :root {
      --rose: #34104d;
      --rose-dark: #34104d;
      --rose-soft: #f5eff9;
      --blush: #fff7ef;
      --cream: #fffaf3;
      --sage: #5b1b73;
      --sage-soft: #f8f1e8;
      --gold: #b98529;
      --ink: #25163f;
      --muted: #574965;
      --white: #ffffff;
      --shadow: 0 16px 38px rgba(52, 16, 77, 0.13);
      --radius-large: 28px;
      --radius-card: 22px;
      --max-width: 1180px;
    }

    body {
      color: var(--ink);
      background:
        radial-gradient(circle at top left, rgba(185, 133, 41, 0.13), transparent 34rem),
        linear-gradient(180deg, var(--cream) 0%, var(--blush) 48%, var(--rose-soft) 100%);
    }

    .hero {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 239, 249, 0.90)),
        radial-gradient(circle at 85% 15%, rgba(185, 133, 41, 0.25), transparent 20rem);
      box-shadow: var(--shadow);
    }

    .hero h1,
    h2,
    .reviewer,
    .meta strong {
      color: var(--rose-dark);
    }

    .section-eyebrow,
    .stars,
    .brand-mark,
    .footer-brand span {
      color: var(--gold);
    }

    .review-card {
      border: 1px solid rgba(185, 133, 41, 0.35);
      background: rgba(255, 255, 255, 0.92);
      box-shadow: var(--shadow);
    }

    .featured-new-review {
      border: 2px solid rgba(185, 133, 41, 0.65);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 239, 249, 0.92));
    }

    .featured-new-review::before {
      content: "New Google Review";
      display: inline-block;
      margin-bottom: 12px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(185, 133, 41, 0.13);
      color: var(--rose-dark);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .cta {
      background:
        linear-gradient(135deg, rgba(52, 16, 77, 0.96), rgba(91, 27, 115, 0.95));
      color: var(--white);
    }

    .button,
    .btn,
    .phone-pill {
      background: linear-gradient(135deg, #5b1b73, #34104d);
      color: var(--white);
    }

/* V47: Ensure the shared responsive navigation wins over legacy review-page header rules. */
    @media (min-width: 921px) {
      .site-header .mobile-menu-toggle,
      .site-header .mobile-nav { display: none !important; }
    }

    @media (max-width: 920px) {
      .site-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 10px;
        min-height: 82px;
        padding: 12px 18px;
      }
      .site-header .brand { justify-content: flex-start; min-width: 0; }
      .site-header .main-nav { display: none !important; }
      .site-header .phone-pill { align-self: auto; }
      .site-header .mobile-nav { grid-column: 1 / -1; }
    }