/* =========================================
   VOTER INFORMATION
   Vote4Arslan.ca
   ========================================= */

.voter-info-section {
  padding:
    90px
    max(7vw, 42px)
    95px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0)
    ),
    var(--navy-deep);

  color: var(--white);
}


/* =========================================
   SECTION HEADING
   ========================================= */

.voter-info-heading {
  max-width: 900px;

  margin:
    0
    0
    46px;
}


.voter-info-eyebrow {
  margin:
    0
    0
    12px;

  color: #F4B7C1;

  font-size: 14px;
  font-weight: 900;

  line-height: 1.3;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}


.voter-info-heading h2 {
  margin: 0;

  color: var(--white);

  font-family: "Barlow Condensed", sans-serif;

  font-size:
    clamp(
      64px,
      7vw,
      105px
    );

  font-weight: 900;

  line-height: 0.86;

  letter-spacing: -0.015em;

  text-transform: uppercase;
}


.voter-info-intro {
  max-width: 720px;

  margin:
    24px
    0
    0;

  color: #DCE7F2;

  font-size: 18px;

  line-height: 1.7;
}


/* =========================================
   TWO-CARD GRID
   ========================================= */

.voter-info-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 22px;

  max-width: 1500px;

  align-items: start;
}


/* =========================================
   VOTER CARDS
   ========================================= */

.voter-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;

  padding:
    37px
    38px
    36px;

  background: var(--white);

  color: var(--ink);

  border-top:
    9px
    solid
    var(--red);

  box-shadow:
    0
    24px
    55px
    rgba(0, 0, 0, 0.18);
}


.voter-card-king {
  border-top-color: var(--navy-soft);
}


/* =========================================
   LOCATION LABEL
   ========================================= */

.voter-card-location {
  display: flex;
  align-items: center;

  gap: 11px;

  margin:
    0
    0
    24px;

  color: var(--red);

  font-family: "Barlow Condensed", sans-serif;

  font-size: 29px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.025em;

  text-transform: uppercase;
}


.voter-card-king .voter-card-location {
  color: var(--navy);
}


.voter-location-icon {
  display: grid;

  place-items: center;

  width: 34px;
  height: 34px;

  flex: 0 0 auto;
}


.voter-location-icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.9;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================
   CARD TITLE
   ========================================= */

.voter-card h3 {
  max-width: 640px;

  margin:
    0
    0
    28px;

  color: var(--navy-deep);

  font-family: "Barlow Condensed", sans-serif;

  font-size:
    clamp(
      40px,
      4vw,
      58px
    );

  font-weight: 900;

  line-height: 0.96;

  letter-spacing: 0;

  text-transform: uppercase;
}


/* =========================================
   DATE BOXES
   ========================================= */

.voter-date-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  margin:
    0
    0
    27px;

  border-top:
    2px
    solid
    var(--line);

  border-bottom:
    2px
    solid
    var(--line);
}


.voter-date-box {
  min-width: 0;

  padding:
    23px
    22px
    24px
    0;
}


.voter-date-box + .voter-date-box {
  padding-left: 27px;

  border-left:
    1px
    solid
    var(--line);
}


.voter-date-label {
  display: block;

  margin:
    0
    0
    7px;

  color: var(--muted);

  font-size: 13px;
  font-weight: 900;

  line-height: 1.25;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.voter-date-box strong {
  display: block;

  color: var(--navy-deep);

  font-size:
    clamp(
      20px,
      1.8vw,
      27px
    );

  font-weight: 900;

  line-height: 1.22;
}


.voter-date-box small {
  display: block;

  margin-top: 6px;

  color: var(--muted);

  font-size: 13px;
  font-weight: 700;

  line-height: 1.4;
}


/* =========================================
   KING ADVANCE VOTING LOCATIONS
   ========================================= */

.advance-location-panel {
  margin:
    0
    0
    27px;

  padding:
    22px;

  background: #F4F7FA;

  border:
    1px
    solid
    var(--line);

  border-left:
    5px
    solid
    var(--navy);
}


.advance-location-title {
  display: flex;

  align-items: center;

  gap: 12px;

  padding-bottom: 18px;

  border-bottom:
    1px
    solid
    var(--line);
}


.advance-location-title-icon {
  display: grid;

  place-items: center;

  width: 35px;
  height: 35px;

  flex: 0 0 auto;

  color: var(--navy);
}


.advance-location-title-icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.9;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.advance-location-title strong {
  display: block;

  color: var(--navy-deep);

  font-family: "Barlow Condensed", sans-serif;

  font-size: 23px;
  font-weight: 900;

  line-height: 1.05;

  text-transform: uppercase;
}


.advance-location-title small {
  display: block;

  margin-top: 5px;

  color: var(--muted);

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}


.advance-location-list {
  display: grid;
}


.advance-location-row {
  display: grid;

  grid-template-columns:
    66px
    minmax(0, 1fr);

  align-items: center;

  gap: 17px;

  padding:
    17px
    0;
}


.advance-location-row + .advance-location-row {
  border-top:
    1px
    solid
    var(--line);
}


.advance-location-date {
  display: grid;

  place-items: center;

  align-content: center;

  min-height: 61px;

  background: var(--navy-deep);

  color: var(--white);

  text-align: center;
}


.advance-location-date span {
  display: block;

  font-size: 10px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.12em;
}


.advance-location-date strong {
  display: block;

  margin-top: 3px;

  font-family: "Barlow Condensed", sans-serif;

  font-size: 27px;
  font-weight: 900;

  line-height: 0.9;
}


.advance-location-copy {
  min-width: 0;
}


.advance-location-copy strong {
  display: block;

  color: var(--navy-deep);

  font-size: 15px;
  font-weight: 900;

  line-height: 1.35;
}


.advance-location-copy span {
  display: block;

  margin-top: 4px;

  color: var(--muted);

  font-size: 13px;
  font-weight: 600;

  line-height: 1.4;
}


/* =========================================
   DESCRIPTION
   ========================================= */

.voter-card-copy {
  margin:
    0
    0
    28px;

  color: #445A72;

  font-size: 16px;

  line-height: 1.72;
}


.king-voter-copy {
  margin-top: 0;
}


/* =========================================
   BUTTONS
   ========================================= */

.voter-actions {
  display: grid;

  gap: 11px;

  margin-top: auto;
}


.voter-button {
  display: flex;

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

  gap: 15px;

  min-height: 59px;

  padding:
    16px
    19px;

  font-size: 14px;
  font-weight: 900;

  line-height: 1.3;

  letter-spacing: 0.04em;

  text-decoration: none;

  text-transform: uppercase;
}


.voter-button span {
  flex: 0 0 auto;

  font-size: 22px;

  line-height: 1;
}


.voter-button-primary {
  background: var(--red);

  color: var(--white);

  border:
    2px
    solid
    var(--red);
}


.voter-button-primary:hover {
  background: var(--red-dark);

  color: var(--white);

  border-color: var(--red-dark);

  transform:
    translateY(-2px);
}


.voter-card-king .voter-button-primary {
  background: var(--navy);

  border-color: var(--navy);
}


.voter-card-king .voter-button-primary:hover {
  background: var(--navy-deep);

  border-color: var(--navy-deep);
}


.voter-button-secondary {
  background: var(--white);

  color: var(--navy-deep);

  border:
    2px
    solid
    var(--navy-deep);
}


.voter-button-secondary:hover {
  background: var(--off-white);

  color: var(--navy);

  border-color: var(--navy);

  transform:
    translateY(-2px);
}


/* =========================================
   ELECTION DAY
   ========================================= */

.election-day-box {
  margin:
    27px
    0
    0;

  padding:
    20px
    21px;

  background: var(--off-white);

  border-left:
    5px
    solid
    var(--red);
}


.voter-card-king .election-day-box {
  border-left-color: var(--navy);
}


.election-day-box span {
  display: block;

  margin-bottom: 3px;

  color: var(--red);

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.voter-card-king .election-day-box span {
  color: var(--navy);
}


.election-day-box strong {
  display: block;

  color: var(--navy-deep);

  font-family: "Barlow Condensed", sans-serif;

  font-size: 27px;
  font-weight: 900;

  line-height: 1.1;

  text-transform: uppercase;
}


.election-day-box p {
  margin:
    5px
    0
    0;

  color: var(--muted);

  font-size: 14px;
  font-weight: 700;

  line-height: 1.4;
}


/* =========================================
   OFFICIAL SOURCE LINK
   ========================================= */

.official-election-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  width: fit-content;

  margin-top: 20px;

  color: var(--navy-deep);

  font-size: 13px;
  font-weight: 800;

  line-height: 1.4;

  text-decoration-thickness: 1px;

  text-underline-offset: 4px;
}


.official-election-link:hover {
  color: var(--red);
}


/* =========================================
   DISCLAIMER
   ========================================= */

.voter-info-disclaimer {
  max-width: 980px;

  margin:
    30px
    0
    0;

  color: #C4D3E2;

  font-size: 13px;

  line-height: 1.6;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1050px) {

  .voter-info-grid {
    grid-template-columns: 1fr;
  }


  .voter-card h3 {
    max-width: 760px;
  }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {

  .voter-info-section {
    padding:
      67px
      22px
      72px;
  }


  .voter-info-heading {
    margin-bottom: 32px;
  }


  .voter-info-heading h2 {
    font-size: 62px;
  }


  .voter-info-intro {
    margin-top: 18px;

    font-size: 16px;
  }


  .voter-card {
    padding:
      29px
      24px
      27px;
  }


  .voter-card-location {
    margin-bottom: 20px;

    font-size: 25px;
  }


  .voter-location-icon {
    width: 30px;
    height: 30px;
  }


  .voter-card h3 {
    margin-bottom: 23px;

    font-size: 42px;
  }


  .voter-date-grid {
    grid-template-columns: 1fr;
  }


  .voter-date-box {
    padding:
      19px
      0;
  }


  .voter-date-box + .voter-date-box {
    padding-left: 0;

    border-left: 0;

    border-top:
      1px
      solid
      var(--line);
  }


  .voter-date-box strong {
    font-size: 23px;
  }


  .voter-card-copy {
    font-size: 15px;
  }


  .advance-location-panel {
    padding: 18px;
  }


  .advance-location-title strong {
    font-size: 21px;
  }


  .advance-location-row {
    grid-template-columns:
      59px
      minmax(0, 1fr);

    gap: 14px;
  }


  .advance-location-date {
    min-height: 57px;
  }


  .advance-location-date strong {
    font-size: 24px;
  }


  .advance-location-copy strong {
    font-size: 14px;
  }


  .advance-location-copy span {
    font-size: 12px;
  }


  .voter-button {
    min-height: 57px;

    font-size: 13px;
  }


  .election-day-box strong {
    font-size: 24px;
  }

}


/* =========================================
   VERY SMALL PHONES
   ========================================= */

@media (max-width: 420px) {

  .voter-info-section {
    padding-left: 17px;
    padding-right: 17px;
  }


  .voter-info-heading h2 {
    font-size: 54px;
  }


  .voter-card {
    padding:
      25px
      20px;
  }


  .voter-card-location {
    font-size: 23px;
  }


  .voter-card h3 {
    font-size: 38px;
  }


  .advance-location-panel {
    padding:
      16px
      14px;
  }


  .advance-location-title {
    align-items: flex-start;
  }


  .advance-location-title-icon {
    width: 30px;
    height: 30px;
  }


  .advance-location-row {
    grid-template-columns:
      54px
      minmax(0, 1fr);

    gap: 12px;
  }


  .advance-location-date {
    min-height: 54px;
  }


  .voter-button {
    padding:
      15px
      15px;
  }

}