/*
	Theme Name: Republican Party

*/
:root {
        --brand-primary: #1e4fb3; /* logo blue */
        --brand-accent: #e5432a; /* logo red/orange */
      }

      /* Grid: 1 column on mobile, 4 columns on md+ (Bootstrap breakpoints) */
      .steps-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
      }
      @media (min-width: 768px) {
        .steps-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }

      /* Step card */
      .step {
        position: relative;
        background: var(--bs-body-bg);
        border-radius: 0.75rem;
        padding: 1rem;
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }
      .step:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.08);
      }

      /* Icon badge uses theme colors */
      .icon-badge {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: var(--brand-primary);
        box-shadow: 0 0 0 4px
          color-mix(in srgb, var(--brand-primary) 20%, transparent);
      }
      .icon-badge i {
        font-size: 1.2rem;
      }

      /* Connectors: horizontal on md+, vertical on mobile */
      .step::after {
        content: "";
        position: absolute;
        background: linear-gradient(
          90deg,
          var(--brand-accent),
          var(--brand-primary)
        );
        height: 4px;
        width: 24px;
        top: 28px;
        right: -12px; /* horizontal link */
        display: none;
        border-radius: 2px;
      }
      @media (min-width: 768px) {
        .step::after {
          display: block;
        }
        .step:nth-child(4)::after {
          display: none;
        } /* hide on last in row */
      }

      /* Vertical connectors for mobile */
      .step::before {
        content: "";
        position: absolute;
        background: linear-gradient(
          180deg,
          var(--brand-accent),
          var(--brand-primary)
        );
        width: 4px;
        height: 24px;
        left: 22px;
        bottom: -12px; /* vertical link */
        display: block;
        border-radius: 2px;
      }
      .step:last-child::before {
        display: none;
      }

      /* Respect dark mode via Bootstrap’s color-mode */
      [data-bs-theme="dark"] .step {
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.4);
      }
      .text-brand-primary {
        color: var(--brand-primary) !important;
      }
      .border-brand-accent {
        border-color: var(--brand-accent) !important;
      }

      /* Subtle hover for modern feel */
      #legal .card:hover {
        transform: translateY(-2px);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
      }
      /* Gradient brand bar with subtle blur-on-scroll look */
      .brandbar-blue {
        background-color: var(--brand-primary);
      }
      .brandbar-blue .nav-link {
        color: #fff;
      }
      .navbar-dark .navbar-toggler-icon {
        filter: invert(1) opacity(0.9);
      }

      html {
        scroll-behavior: smooth;
      }
      body {
        line-height: 1.6;
      }
      .navbar-brand img {
        height: 48px;
        width: auto;
      }
      header.hero {
        padding: 4rem 0 2rem;
      }
      .hero-title {
        font-weight: 700;
        font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem);
      }
      section {
        padding: 3rem 0;
      }
      .accent {
        color: var(--brand-accent);
      }
      .btn-accent {
        --bs-btn-bg: var(--brand-primary);
        --bs-btn-border-color: var(--brand-primary);
        --bs-btn-hover-bg: #173c87;
        --bs-btn-hover-border-color: #173c87;
      }
      .list-dot > li {
        margin-bottom: 0.5rem;
      }
      .signature-line {
        line-height: 1.2;
      }
      .disclaimer {
        font-size: 0.95rem;
      }
      .muted-note {
        color: var(--bs-secondary-color);
      }
      .nav-underline .nav-link {
        padding-bottom: 0.6rem;
      }
      .nav-underline .nav-link.active {
        /* color: var(--brand-primary); */
        border-bottom: 0.2rem solid #fff;
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          scroll-behavior: auto;
        }
      }
      /* Theme-forward donation button */
      .btn-donate {
        color: #fff;
        background: linear-gradient(
          90deg,
          var(--brand-accent),
          var(--brand-primary)
        );
        border: none;
        border-radius: 0.75rem;
        box-shadow: 0 0.75rem 1.25rem rgba(30, 79, 179, 0.25),
          0 0 0 4px color-mix(in srgb, var(--brand-primary) 20%, transparent);
        transition: transform 0.15s ease, box-shadow 0.15s ease,
          filter 0.15s ease;
      }
      .btn-donate:hover,
      .btn-donate:focus {
        transform: translateY(-2px);
        filter: brightness(1.05);
        box-shadow: 0 1rem 1.75rem rgba(30, 79, 179, 0.35),
          0 0 0 4px color-mix(in srgb, var(--brand-accent) 25%, transparent);
      }
      .bg-brand {
        background-color: var(--brand-primary) !important;
      }

      /* Subscribe button themed for prominence */
      .btn-subscribe {
        color: #fff;
        background: linear-gradient(
          90deg,
          var(--brand-primary),
          var(--brand-accent)
        );
        border: none;
      }
      .btn-subscribe:hover,
      .btn-subscribe:focus {
        filter: brightness(1.05);
      }

      /* Improve input-group tooltips placement on large inputs */
      .input-group .invalid-tooltip {
        display: block;
        position: absolute;
        inset-inline-start: 0.75rem;
        inset-block-end: -1.75rem;
      }
      .txt-brand-primary {
        color: var(--brand-primary) !important;
      }


.sfba_subscribe_form__fields {
    width: 100%;
    margin: 0;
}

body .sfba_subscribe_form__fields_wrap {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    justify-content: space-between;
    margin: 0;
    max-width: 650px;
    width: 650px;
	border-radius:10px;
	overflow:hidden;
}

body  .sfba_subscribe_form #sfba-form2-button {  
    color: #fff !important;
	font-size: 19px !important;
    font-weight: 400 !important;  
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)) !important;
    padding:15px 20px !important;
	width: 150px !important;
	 margin: 0 !important;
}

.sfba_subscribe_form__fields input {
    height: auto !important;
    padding: 13px 0 !important;
    font-size: 16px !important;
    margin: 0 !important;
}


.sfba_subscribe_form__fields {
    display: flex;
    gap: 10px;
}

.sfba_subscribe_form__fields:before {
    content: "\f32c";
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    padding: .5rem 1rem;
    font-size: 1.25rem;
    color: #fff;
    background: var(--brand-primary);
    display: flex;
    align-items: center;
}

.sfba_subscribe_form .sfba_subscribe_form__fields .sfba-form2-fields{
	border:0 !important;
}


@media (max-width:1150px){
	body .sfba_subscribe_form__fields_wrap{
		width:100%;
	}
}

@media (max-width:767px){
	body .sfba_subscribe_form #sfba-form2-button{
		font-size:14px !important;
	}
	
	.sfba_subscribe_form__fields input {   
		padding: 10px 0 !important;   
	}
}