@import url('https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@import "nx/nx.css";
@import "nx/nx_buttons.css";

:root {
  --primary: var(--p-primary-800);
  --p-primary-50:  #e6efec;
  --p-primary-100: #c2d6d0;
  --p-primary-200: #8db4a9;
  --p-primary-300: #589282;
  --p-primary-400: #2e7464;
  --p-primary-500: #00574a;
  --p-primary-600: #004b3f;
  --p-primary-700: #003e34;
  --p-primary-800: #002820;
  --p-primary-900: #001f1a;
  --p-primary-950: #001512;

  --cta: #CFFC78;
  --cta-hover: #85aa49;
  --accent: #909fdb;

  --text-dark: var(--bg-dark);
  --text-medium: #33544d;
  --text-header-font: 'Funnel Sans', sans-serif;
  --text-header-weight: 700;
  --text-header-size: clamp(28px, 4vw, 50px);
  --text-header-color: var(--text-dark);
  --text-subheader-size: 24px;
  --text-subheader-weight: 600;
  --text-subheader-font: var(--body-text-font);
  --text-subheader-color: var(--text-dark);

  --body-text-font: 'Funnel Sans', serif;
  --body-text-color: var(--text-medium);
  --body-text-weight: 400;

  --container-max-width: 1380px;
  --body-bg: white;
  --bg-dark: #002920;
  --bg-light: #F8F8F8;
  --border-ligh: #CCCCCE;

  --header-bg: var(--bg-dark);
  --header-padding-y: 15px;
  --header-logo-height: 18px;
  --header-logo-md-height: 30px;
  --header-main-nav-text-size: 16px;
  --header-color: var(--text-inverse);
  --header-join-now-height: 42px;
  --header-join-now-min-width: 120px;
  --header-toggle-mobile-display: none;
  --header-main-nav-mobile-display: flex;

  --footer-bg: var(--bg-dark);
  --footer-text-color: var(--text-inverse);
  --footer-text-size: var(--body-text-size);
  --footer-text-weight: 400;
  --footer-powered-by-label-size: 16px;
  --footer-powered-by-label-weight: 400;
  --footer-dso-logo-height: 56px;
  --footer-nav-margin-top: 0px;

  --home-banner-img-overlay-color: var(--bg-dark);

  --custom-table-border-radius: 0;
  --custom-table-border-color: transparent;
  --custom-table-body-bg: transparent;
  --custom-table-header-bg: transparent;
  --custom-table-header-border-color: var(--border-light);
  --custom-table-header-color: var(--text-inverse);
  --custom-table-header-size: clamp(15px, 2vw, 18px);
  --custom-table-body-border-width: 1px;
  --custom-table-body-border-color: var(--border-light);
  --custom-table-body-color: var(--text-inverse);
  --custom-table-body-size: clamp(16px, 2vw, 20px);
  --custom-table-highlight-color: var(--cta);
  --custom-table-mobile-body-size: 15px;
  --custom-table-body-weight: 500;
  --custom-table-footer-full-bg: transparent;
  --custom-table-footer-border-top-color: var(--border-light);
  --custom-table-footer-border-bottom-color: var(--border-light);
  --custom-table-footer-full-color: var(--cta);
  --custom-table-footer-full-font: var(--body-text-font);
  --custom-table-footer-full-size: 20px;
  --savings-summary-note-color: var(--text-inverse);
  --savings-summary-note-size: 15px;
  --savings-summary-note-weight: 400;

  --join-now-title-justify: center;
  --join-now-title-text-align: center;
  --join-now-title-size: clamp(24px, 3vw, 40px);
  --join-now-title-weight: 700;
  --signup-content-bg: #FCFAF6;
  --join-content-border-color: #F5F0E1;
  --signup-summary-max-width: 400px;
  --signup-summary-header-color: var(--bg-dark);
  --signup-summary-body-entry-size: 17px;
  --signup-summary-body-entry-weight: 600;
  --signup-summary-disclaimer-entry-size: 14px;
  --signup-summary-annual-cost-size: 16px;
  --signup-summary-annual-cost-weight: 600;
  --signup-summary-annual-cost-color: var(--text-header-color);
  --signup-summary-due-now-size: 16px;
  --signup-summary-due-now-weight: 600;
  --signup-summary-due-now-color: var(--text-header-color);
  --signup-summary-width: 32%;
  --signup-form-width: 62%;
  --signup-summary-link-color: var(--accent);

  --login-form-subtitle-display: block;
  --login-forgot-link-color: var(--accent);
  --link-color: var(--accent);

  --button-height: 46px;
  --button-text-size: 18px;
  --button-text-weight: 700;
  --button-border-radius: 999px;
}

@layer components {
  /* CTA Button */
  .terms-accept-btn,
  .submit-reset-btn,
  .login-forgot-submit-btn,
  .login-btn,
  .checkout-success-btn,
  .header-logout-btn,
  .home-office-btn,
  .home-plan-card-btn,
  .header-join-now-btn {
    background-color: var(--cta);
    color: var(--bg-dark);

    &:hover:not(:disabled) {
      background-color: var(--cta-hover);
    }
  }

  /* CTA Button with border */
  .home-plan-card-btn,
  .login-forgot-submit-btn,
  .login-btn,
  .home-office-btn {
    border-color: var(--cta-hover);
  }

  /* White Button */
  .home-banner-join-btn {
    background-color: white;
    color: var(--bg-dark);

    &:hover:not(:disabled) {
      background-color: var(--cta);
    }
  }

  /* Outlined Accent Buttons */
  .add-dependent-btn,
  .login-go-back-btn {
    background-color: var(--body-bg);
    border-color: var(--accent);
    color: var(--accent);

    &:hover {
      background-color: var(--accent);
      color: var(--text-inverse);
    }
  }

  /* Outline White / Primary */
  .home-banner-learn-more-btn {
    background-color: transparent;
    color: var(--text-inverse);
    border: 1px solid var(--text-inverse);

    &:hover:not(:disabled) {
      background-color: var(--cta);
      border-color: var(--cta);;
      color: var(--bg-dark);
    }
  }

  .start-btn {
    background-color: var(--bg-dark);
    color: var(--text-inverse);
    font-size: 18px;
    border-radius: 10px;
    height: 61px;

    &:hover:not(:disabled) {
      background-color: #667f79;
    }
  }
}

.home {
  --header-position: fixed;
}