/* Mealper site styles.
 *
 * Generated once out of layout.js and hand-edited here since. Linked from every page
 * with a ?v=<hash> built by tools/build_css.py — edit this file, then re-run that
 * script so the version changes and browsers actually pick the change up.
 */
.dropbtnc {
  color: #201E2B;
  margin-top: 10px;
  padding: 16px;
  font-size: 15px;
  border: none;
  cursor: pointer;
  display: flex;
  font-family: "Alata", sans-serif;
  font-weight: 500;
}
.dropbtnc img {
  width: 15px;
  padding-left: 5px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #ddd;
}

/* Boxed containers are capped at 1300px but carry no side
   padding, so between ~768px and 1300px the text ran flush
   against the viewport edge on every page. Add the gutter only
   below the cap — wider screens already have natural margin. */
@media (max-width: 1329px) {
  .elementor-section-boxed > .elementor-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Store badges. Selected by CLASS, never by filename: the earlier
   img[src*="..."] rules silently stopped matching the moment the asset was
   renamed, and every badge fell back to its full intrinsic width.
   `fix_badges.py` stamps .mp-badge on all of them.

   Both PNGs are pre-trimmed to the same artwork height (168px) by
   tools/make_badges.py, so the pair below renders at exactly the same height
   with each mark keeping its own natural width — that is what Apple's and
   Google's guidelines ask for, and forcing equal width is what distorted them.

   Width and height are both pinned to the natural ratio instead of using
   `max-width: 100%`: a percentage max-width in a narrow column clamped the
   width while the fixed height stayed put, which squashed the App Store badge
   (that is why the footer pair still looked mismatched). */
img.mp-badge {
  height: 46px !important;
  width: 154px !important;
  object-fit: contain;
  display: block;
  margin: 0 !important;
}
/* Both PNGs are the same 564x168, so this single rule is all the sizing there is —
   no per-badge override, nothing that can drift apart again. */
/* Give both links one shared box, the width of the wider (Play) badge, and pin the
   artwork to its left edge. Without this the badges sat in a text-align:center
   container and each was centred on its OWN width, so their left edges landed
   7-9px apart wherever the pair stacked vertically (footer, mobile hero).
   Left-aligning inside a shared box keeps the block itself centred while the two
   badges stay flush with each other. */
a:has(> img.mp-badge) {
  display: inline-block;
  width: 154px;
  line-height: 0;
}
/* One badge size everywhere, footer included. The footer columns default to a ~130px
   half-width, which is narrower than the badge, so the columns that hold one are told
   to size to their content instead of stepping the badge down — two different badge
   sizes on the same site is exactly what looked wrong. */
footer .elementor-inner-column:has(img.mp-badge) {
  width: 100% !important;
  flex: 0 0 100% !important;
}
/* ...and follow the footer's own alignment: the logo above the badges is left-aligned
   on desktop and centred on mobile, while the pasted badge markup carried a hard
   text-align:center that left them out of line with it on wide screens. */
footer .elementor-inner-column:has(img.mp-badge) .elementor-widget-container {
  text-align: left;
}
@media (max-width: 767px) {
  footer .elementor-inner-column:has(img.mp-badge) .elementor-widget-container {
    text-align: center;
  }
}

/* Elementor gives individual image widgets their own margins, and the App Store
   widget on the home page carried margin-top:10px — which is what knocked the two
   badges off a shared baseline. Zero it wherever a badge lives. */
.elementor-widget-container:has(> a > img.mp-badge),
.elementor-widget-container:has(> img.mp-badge) {
  margin: 0 !important;
  padding: 0 !important;
}
.elementor-widget-image:has(img.mp-badge) {
  margin: 0 !important;
}

/* Anything wrapping a badge pair puts them on one baseline. */
.mp-stores { align-items: center; }
.mp-stores a { line-height: 0; }

/* The social-icons grid still reserves two columns from when there was more than one
   network, so the single Instagram icon sat left of centre. Lay it out with flex, and
   put it under its own heading: the "Bizi izləyin" heading is left-aligned down to the
   phone breakpoint and centred below it, so the icon does the same.

   `!important` is required — Elementor's own e-grid-align-* rules are !important and
   centre the icons on large screens too, which is what kept knocking the icon out of
   line there. Below 1024px the footer columns go full width and their headings centre,
   so the icon centres with them. */
.elementor-social-icons-wrapper {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 1024px) {
  .elementor-social-icons-wrapper {
    justify-content: center !important;
  }
}

/* On mobile the .language column stretched to fill the header row
   and landed on top of the MEALPER logo. The row carries
   elementor-reverse-mobile, so it just needs its columns to size
   to their content and hug the right edge — AZ then the burger,
   matching the desktop corner placement. Keeping them in flow
   matters: pulling .language out with position:absolute collapsed
   the row and dragged the burger over to the left. */
@media (max-width: 767px) {
  .elementor-element-2940ef7 > .elementor-container {
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
  }
  .elementor-element-2940ef7
    > .elementor-container
    > .elementor-column {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  header .language .dropbtnc {
    margin-top: 0;
    padding: 8px 4px;
  }
  header .language .dropdown-content {
    right: 0;
  }

  /* AZ/EN/RU still crowded the logo — it overlapped by 7px. Two causes, both fixed
     here rather than by nudging margins until it looks right on one phone:

     1. The hamburger widget carries a 45px left margin from the template. The header
        row is right-aligned, so that dead space pushed the whole AZ + burger group
        45px further left, straight into the logo.
     2. The logo column collapses to 54px while the logo image itself is a fixed
        150px, so the image overflows its own column and there is nothing for the
        flex row to keep clear of. Capping it against the viewport — with room
        reserved for the group on the right — makes it shrink instead of collide on
        narrow phones (below ~350px the fixed 150px could not fit either way). */
  header .elementor-element-2940ef7 .elementor-widget-container {
    margin-left: 0 !important;
  }
  header .elementor-column img[src*="logo"] {
    /* !important: the template pins the logo with its own !important width, which is
       what let a fixed 150px overflow a 54px column in the first place. */
    width: min(150px, calc(100vw - 216px)) !important;
    max-width: none !important;
    height: auto !important;
  }
}