/* ============================================================
   Footer
   ------------------------------------------------------------
   The footer is one template part shown on every page, and it
   was laid out for a wide screen only. These two rules are what
   it needs on the way down to a narrow one.
   ============================================================ */

/* The logo is set to fill its box by cropping whatever does not fit. That is
   right for a photograph and wrong for a mark: it holds only while the box
   keeps the file's proportions, and the first change to the footer's spacing or
   widths that breaks that would take a slice off the logo without anyone
   touching the image. Fitted inside its box instead, it cannot be cropped. */
.my-main-footer img,
.site-footer img {
  object-fit: contain;
}

/* The three link columns sit in a row that was told never to wrap. Between
   about 800px and 1200px they need 529px and are given 513, so the row runs
   over its own edge and the last column's links print on top of the one beside
   them — "مشارکت فنی و بهینه سازی فرآوری" landing across "پارس خان یاب".
   Letting the row wrap moves a column down instead of over.

   Only the row of link columns, found by having three children: the footer's
   own outer row holds two, the links and the logo, and wrapping that one sends
   the logo to a line of its own and leaves half the footer empty.

   Only below the width where the row still fits, so the wide layout the design
   was drawn at is untouched — and only down to 768px, where the footer has a
   stacked phone layout of its own. Below that these rules did real damage: a
   column held at its natural width made the whole footer wider than the screen,
   and the logo and the copyright line were sliced off down the left-hand side.
   A phone needs none of this; it has already stopped being a row. */
@media (min-width: 768px) and (max-width: 1279px) {

  .my-main-footer [class*="gb-element"]:has(> :nth-child(3)) {
    flex-wrap: wrap;
    /* Wrapping needs a line to wrap at. The row is a flex item itself and takes
       its width from what is in it, so however wide the columns came to be, the
       row simply grew to match and nothing ever moved to a second line: at
       768px it measured 731px inside a 614px space and hung off the side.
       Bounded by its parent, it has an edge to wrap against. */
    max-width: 100%;
    /* Once the columns are sized by their contents there is nothing holding
       them apart, and two headings end up touching. */
    gap: 28px 40px;
  }

  /* Wrapping alone was not enough. Each column is allowed to shrink, but the
     heading and the rule under it are set to a fixed 170px, so the column
     shrank to 126 and its own contents carried on past its edge and across the
     column beside it. Held at their natural width, the columns are too wide for
     the row and go to the next line, which is what wrapping is for.

     The width has to go with the shrink: each column is set to a share of the
     row, and a share of a row too narrow to hold them is what produced the
     126px in the first place. Sized by what is in them instead. */
  .my-main-footer [class*="gb-element"]:has(> :nth-child(3)) > * {
    flex-shrink: 0;
    width: auto;
    /* Its contents, unless its contents are wider than the row it is in — at
       768px exactly, one column on its own was still too wide and hung 40px off
       the side. A column never has to be wider than the row. */
    min-width: min(max-content, 100%);
  }

}