/**
 * Rosies footer.
 *
 * Matches the typography and three-column proportions of the production
 * Rosie's Theater Kids footer while remaining scoped to Salient's footer.
 */

/* Footer hover patch 01: override Salient's important accent-color rule.
 * Keep social and navigation colors independently scoped; keyboard users
 * receive the same colors without removing the native focus indicator.
 */
#footer-outer #footer-widgets .rosies-nectar-social-icons a:hover,
#footer-outer #footer-widgets .rosies-nectar-social-icons a:focus-visible {
  color: #e88529 !important;
}

#footer-outer #footer-widgets .widget_nav_menu a:hover,
#footer-outer #footer-widgets .widget_nav_menu a:focus-visible {
  color: #059dd9 !important;
}

/* --------------------------------------------------------------------------
 * Shared footer typography
 * -------------------------------------------------------------------------- */

#footer-outer #footer-widgets,
#footer-outer #footer-widgets p,
#footer-outer #footer-widgets li,
#footer-outer #footer-widgets a,
#footer-outer #footer-widgets .textwidget {
  font-family: var(--rosies-font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--rosies-white);
}

#footer-outer #footer-widgets p {
  margin: 0;
  padding: 0;
}

#footer-outer #footer-widgets .widget_nav_menu li,
#footer-outer #footer-widgets .widget_nav_menu li:first-child {
  margin: 0;
  padding: 0 !important;
}

#footer-outer #footer-widgets .widget_nav_menu li a {
  display: inline-block;
  line-height: 1.4;
}

/* The first-column social heading is sentence case on the production site. */
#footer-outer
  #footer-widgets[data-cols='3']
  > .container
  > .row
  > .col:first-child
  .widget
  h4,
#footer-outer
  #footer-widgets[data-cols='3']
  > .container
  > .row
  > .col:first-child
  .widget-title,
#footer-outer
  #footer-widgets[data-cols='4']
  > .container
  > .row
  > .col:nth-child(2)
  .widget
  h4,
#footer-outer
  #footer-widgets[data-cols='4']
  > .container
  > .row
  > .col:nth-child(2)
  .widget-title {
  margin: 0 0 12px;
  font-family: var(--rosies-font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rosies-white);
}

/* Newsletter heading uses the site's condensed display face. */
#footer-outer
  #footer-widgets[data-cols='3']
  > .container
  > .row
  > .col:nth-child(3)
  h2,
#footer-outer
  #footer-widgets[data-cols='3']
  > .container
  > .row
  > .col:nth-child(3)
  h3,
#footer-outer
  #footer-widgets[data-cols='3']
  > .container
  > .row
  > .col:nth-child(3)
  h4,
#footer-outer
  #footer-widgets[data-cols='3']
  > .container
  > .row
  > .col:nth-child(3)
  .widget-title,
#footer-outer
  #footer-widgets[data-cols='3']
  > .container
  > .row
  > .col:nth-child(3)
  .gform_title,
#footer-outer
  #footer-widgets[data-cols='4']
  > .container
  > .row
  > .col:nth-child(4)
  h2,
#footer-outer
  #footer-widgets[data-cols='4']
  > .container
  > .row
  > .col:nth-child(4)
  h3,
#footer-outer
  #footer-widgets[data-cols='4']
  > .container
  > .row
  > .col:nth-child(4)
  h4,
#footer-outer
  #footer-widgets[data-cols='4']
  > .container
  > .row
  > .col:nth-child(4)
  .widget-title,
#footer-outer
  #footer-widgets[data-cols='4']
  > .container
  > .row
  > .col:nth-child(4)
  .gform_title {
  margin: 0 0 24px;
  font-family: var(--rosies-font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--rosies-white);
}

/* Keep form typography consistent without changing field geometry. */
#footer-outer #footer-widgets input,
#footer-outer #footer-widgets textarea,
#footer-outer #footer-widgets select {
  font-family: var(--rosies-font-body);
  font-size: 18px;
  font-weight: 400;
}

#footer-outer #footer-widgets label,
#footer-outer #footer-widgets .gfield_description,
#footer-outer #footer-widgets .gform-field-label {
  font-family: var(--rosies-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--rosies-white);
}
#footer-outer #footer-widgets .gform-field-label * {
  font-size: 16px !important;
}

/* Shared Newsletter treatment; opt other Gravity forms in with rtk-cyan-pill-form. */
#footer-outer #footer-widgets button,
#footer-outer #footer-widgets input[type='button'],
#footer-outer #footer-widgets input[type='submit'],
.gform_wrapper.gform-theme.rtk-cyan-pill-form_wrapper
  :is(.gform_footer, .gform_page_footer) .gform_button[type='submit'] {
  font-family: var(--rosies-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 50px !important;
  background-color: #059dd9 !important;
  font-family: 'Rift Soft';
}

/* Copyright typography on production is larger, bold, and wraps naturally. */
#footer-outer #copyright,
#footer-outer #copyright p,
#footer-outer #copyright a {
  font-family: var(--rosies-font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--rosies-white);
}

/* --------------------------------------------------------------------------
 * Desktop proportions and spacing
 * -------------------------------------------------------------------------- */

@media only screen and (min-width: 1000px) {
  #footer-outer #footer-widgets[data-cols='3'] > .container > .row,
  #footer-outer #footer-widgets[data-cols='4'] > .container > .row {
    display: flex;
    align-items: start;
    justify-content: space-between;
  }

  #footer-outer #footer-widgets[data-cols='3'] > .container > .row > .col,
  #footer-outer #footer-widgets[data-cols='4'] > .container > .row > .col {
    float: none;
    width: auto;
  }

  /*
   * This install stores its three visible widgets in Footer Areas 2–4 while
   * Salient is configured for four columns. Remove the unused Area 1 shell
   * so the three populated areas occupy one desktop row.
   */
  #footer-outer
    #footer-widgets[data-cols='4']
    > .container
    > .row
    > .col:first-child {
    display: none;
  }

  #footer-outer #copyright.row {
    padding: 30px 0 40px;
  }
}

/* --------------------------------------------------------------------------
 * Responsive type scale; Salient retains its native stacked column layout.
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 999px) {
  #footer-outer #footer-widgets,
  #footer-outer #footer-widgets p,
  #footer-outer #footer-widgets li,
  #footer-outer #footer-widgets a,
  #footer-outer #footer-widgets .textwidget,
  #footer-outer
    #footer-widgets[data-cols='3']
    > .container
    > .row
    > .col:first-child
    .widget
    h4,
  #footer-outer
    #footer-widgets[data-cols='3']
    > .container
    > .row
    > .col:first-child
    .widget-title,
  #footer-outer
    #footer-widgets[data-cols='4']
    > .container
    > .row
    > .col:nth-child(2)
    .widget
    h4,
  #footer-outer
    #footer-widgets[data-cols='4']
    > .container
    > .row
    > .col:nth-child(2)
    .widget-title,
  #footer-outer #copyright,
  #footer-outer #copyright p,
  #footer-outer #copyright a {
    font-size: 18px;
  }

  #footer-outer
    #footer-widgets[data-cols='3']
    > .container
    > .row
    > .col:nth-child(3)
    h2,
  #footer-outer
    #footer-widgets[data-cols='3']
    > .container
    > .row
    > .col:nth-child(3)
    h3,
  #footer-outer
    #footer-widgets[data-cols='3']
    > .container
    > .row
    > .col:nth-child(3)
    h4,
  #footer-outer
    #footer-widgets[data-cols='3']
    > .container
    > .row
    > .col:nth-child(3)
    .widget-title,
  #footer-outer
    #footer-widgets[data-cols='3']
    > .container
    > .row
    > .col:nth-child(3)
    .gform_title,
  #footer-outer
    #footer-widgets[data-cols='4']
    > .container
    > .row
    > .col:nth-child(4)
    h2,
  #footer-outer
    #footer-widgets[data-cols='4']
    > .container
    > .row
    > .col:nth-child(4)
    h3,
  #footer-outer
    #footer-widgets[data-cols='4']
    > .container
    > .row
    > .col:nth-child(4)
    h4,
  #footer-outer
    #footer-widgets[data-cols='4']
    > .container
    > .row
    > .col:nth-child(4)
    .widget-title,
  #footer-outer
    #footer-widgets[data-cols='4']
    > .container
    > .row
    > .col:nth-child(4)
    .gform_title {
    font-size: 26px;
  }
}