/* FOOTER — MOBILE CLEAN-UP
================================================== */

/*
 * The footer is built in the Divi Theme Builder, so its layout CSS lives in the
 * database and ships in et-core-unified-tb-*.css — there is no footer markup or
 * CSS anywhere else in this child theme. The two fixes below patch that
 * generated CSS from here.
 *
 * The footer menu row and its four columns:
 *
 *   col 1  .et_pb_column_3_tb_footer  logo + phone/ABN
 *   col 2  .et_pb_column_4_tb_footer  Get Involved
 *   col 3  .et_pb_column_5_tb_footer  About
 *   col 4  .et_pb_column_6_tb_footer  Club Support
 *
 * The `.et-db #et-boc .et-l` prefix mirrors the specificity Divi uses for its
 * own Theme Builder rules — needed because the unified Theme Builder stylesheet
 * loads after this file.
 */

/* 1. The row is `display: flex` with no `flex-wrap`, so below 980px the four
 *    columns are pinned to a single line and shrink to fit instead of stacking.
 *    The Theme Builder's own responsive widths only make sense on a wrapping
 *    row — it gives the logo column `width: 100%` at <=980px and 50% at <=480px,
 *    which a nowrap row cannot honour. Restoring the wrap lets those widths do
 *    what they were written to do.
 *
 *    Deliberately capped at 980px: on desktop the four column widths total more
 *    than 100% (24.06 + 25 + 30 + 40), so wrapping there would break the layout.
 */
@media all and (max-width: 980px) {
  .et-db #et-boc .et-l .footer__mainmenu {
    flex-wrap: wrap;
  }
}

/* 2. At phone size the generated CSS sets widths for the logo column (50%),
 *    Get Involved (50%) and Club Support (100%) but skips About, which then
 *    falls back to its Theme Builder width of 30% and squashes every link onto
 *    two lines. It was also indented 6px more than Club Support, so the two
 *    stacked menus did not line up. Match About to Club Support.
 */
@media all and (max-width: 480px) {
  .et-db #et-boc .et-l .footer__mainmenu .et_pb_column.et_pb_column_5_tb_footer {
    width: 100% !important;
    padding-left: 0 !important;
  }

  /* 3. Stack all four blocks. The generated CSS pairs the logo/contact column and
   *    Get Involved on one 50/50 row, which left them narrower than the two menus
   *    below. Giving them full width too makes the whole footer one consistent
   *    column, and lets the logo column's bottom border span the full row instead
   *    of stopping halfway across.
   *
   *    The leading `body` is load-bearing: the generated rule uses this exact
   *    selector minus the element, and it loads after this file, so matching its
   *    specificity would lose on source order.
   */
  body.et-db #et-boc .et-l .footer__mainmenu .et_pb_column.et_pb_column_3_tb_footer,
  body.et-db #et-boc .et-l .footer__mainmenu .et_pb_column.et_pb_column_4_tb_footer {
    width: 100% !important;
  }

  /* Keep the logo above the phone/ABN details, both centred in the now
   * full-width column. The generated CSS already centres the column's flex
   * items at <=980px; the phone/ABN text needs putting back to centre because
   * that same <=980px block switches it to left.
   */
  /* The auto margins are what actually centre the logo: Divi's image module
   * ships `margin-right: auto` with no matching left, and in a flex row that
   * lone auto margin eats all the free space and pins the logo to the left,
   * overriding the column's `justify-content: center`.
   */
  .footer__mainmenu .et_pb_column:nth-child(1) .et_pb_image {
    width: 40% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer__mainmenu .et_pb_column:nth-child(1) .et_pb_code {
    width: 100% !important;
    padding-left: 0 !important;
  }

  .et-db #et-boc .et-l .footer__mainmenu a.phone,
  .et-db #et-boc .et-l .footer__mainmenu span.abn {
    text-align: center !important;
  }
}

/* 4. Copyright row: below 768px the generated CSS centres the copyright text
 *    (`.footer__copyright .et_pb_column p`) and the social icons, but misses
 *    the Policies / Terms / GolfWA Login links — that module holds bare <a>
 *    tags rather than a <p>, so the `p` selector never matches it and it stayed
 *    left-aligned under two centred blocks.
 *
 *    Needs the id-prefixed selector and !important to beat Divi's
 *    `.et_pb_text_align_left { text-align: left !important }`, which the module
 *    carries as a class.
 */
@media all and (max-width: 768px) {
  .et-db #et-boc .et-l .footer__copyright .privacy__terms {
    text-align: center !important;
  }
}