/**
 * @file
 * Base Layout.
 */

/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

/* Navigation related breakpoints */

/* Grid related breakpoints */

/* Grid shifts from 6 to 14 columns. */

/* Width of the entire grid maxes out. */

.container {
  width: 100%;
  max-width: var(--max-width);
  padding-inline: var(--container-padding);

  /* This fixes an issue where if the toolbar is open in vertical mode, and
   * the mobile navigation is open, the "close" button gets pushed outside of
   * the viewport. */
}

body.is-fixed .container {
    width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
}

.page-wrapper {
  max-width: var(--max-width);
  background: var(--color--background-page);
  margin: 0 auto;
}

/**
 * Creates stacking context ensuring that child elements can never appear in
 * front of mobile navigation.
 */

.layout-main-wrapper {
  position: relative;
  z-index: 2; /* Ensure dropdown is not cut off by footer. */
}

/* Contains the social sidebar, and the primary content area. */

@media (min-width: 1200px) {

.layout-main {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
  }

@media (min-width: 1200px) {

.main-content {
    width: 100%;
    margin-inline-end: auto;
}
  }

.main-content__container {
  margin: 0 auto;
  padding-block-start: var(--sp3);
}

/*
 * The homepage's Layout Builder sections (Highlighted Drink, Trending,
 * Tabbed Feed, Top 5, Articles, CTA banner) should share one common content
 * width, distinct from the site-wide max-width, so full-bleed section
 * backgrounds and narrower list content don't read as inconsistent widths.
 * Scoped to the front page only via body.path-frontpage.
 */

body.path-frontpage .main-content__container {
  max-width: 1200px;
}

/*
 * Homepage: widen the stats + Tendenser column relative to the Highlighted
 * Drink column in the first two-column section, so the stat strip and
 * trending list have more room to breathe. Scoped to the front page's first
 * two-column section only — the second (Tabbed Feed | Top 5) keeps the
 * default 67/33 ratio.
 *
 * The theme overrides Layout Builder's twocol_section to use CSS Grid (see
 * layout-builder-twocol-section.pcss.css) instead of core's flexbox
 * implementation, so the ratio is changed via grid-template-columns rather
 * than flex-basis. Matches that file's own min-width breakpoint (--md).
 */

@media (min-width: 768px) {
  body.path-frontpage .node__content > .layout--twocol-section:first-of-type {
    grid-template-columns: 3fr 2fr;
  }

  body.path-frontpage .node__content > .layout--twocol-section:first-of-type > .layout__region--first {
    grid-column: 1;
    display: flex;
    flex-direction: column;
  }

  body.path-frontpage .node__content > .layout--twocol-section:first-of-type > .layout__region--second {
    grid-column: 2;
  }
}

/*
 * Contextual link wrappers load without the ".contextual" CSS class, which
 * causes layout shifts. We fix this by setting this to position: absolute;
 */

[data-contextual-id]:not(.contextual) {
  position: absolute;
}