/*
Theme Name: brieftaubenmarkt
Author: Stephan Henn
Description: Theme for brieftauben-markt.de
Version: 1.2
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

/* ==========================================================================
   MONTERRAT FONT - Self-hosted
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/montserrat/Montserrat-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400;
  src: url("fonts/montserrat/Montserrat-Italic.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/montserrat/Montserrat-Medium.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 500;
  src: url("fonts/montserrat/Montserrat-MediumItalic.ttf") format("truetype");
  font-display: swap;
}

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Variables)
   ========================================================================== */

:root {
  /* Color Palette - using HSL for consistency and maintainability */
  --hue-primary: 207.92; /* brieftauben-markt logo: #285e8d dark => hsl(207.92, 55.8%, 35.49%), #b6cadb light => hsl(207.57, 33.94%, 78.63%)*/
  --hue-background: 207.92;

  --color-primary: hsl(
    var(--hue-primary),
    57%,
    60%
  ); /* Main theme color (#78baff) */
  --color-primary-light: hsl(var(--hue-primary), 33.94%, 78.63%);
  --color-primary-dark: hsl(var(--hue-primary), 55.8%, 35.49%);

  --color-background: hsl(
    var(--hue-background),
    33.94%,
    78.63%
  ); /* Page background (#b7cadb) */
  --color-background-light: hsl(var(--hue-background), 30%, 85%);
  --color-background-dark: hsl(var(--hue-primary) 30% 65%);

  --color-white: hsl(0, 0%, 100%);
  --color-black: hsl(0, 0%, 0%);

  --color-text: hsl(0, 0%, 20%); /* Dark text (#333) */
  --color-text-light: hsl(0, 0%, 40%); /* Medium text (#666) */
  --color-text-lighter: hsl(0, 0%, 60%); /* Light text */
  --color-text-inverse: hsl(0, 0%, 100%); /* White text */

  --color-gray-100: hsl(0, 0%, 96%); /* #f5f5f5 */
  --color-gray-200: hsl(0, 0%, 93%); /* #eee */
  --color-gray-300: hsl(0, 0%, 80%); /* #ccc */

  /* Site Structure */
  --site-max-width: 1400px;
  --site-shadow: 0 0 20px hsla(0, 0%, 0%, 0.2);

  /* Spacing Scale */
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* Border */
  --border-radius: var(--spacing-xxs);
  --border: 1px solid var(--color-primary);

  /* Typography */
  /*--font-family: Helvetica, Arial, sans-serif; */
  --font-family: Montserrat, sans-serif;
  --font-size-sm: 0.9em;
  --font-size-base: 1em;
  --font-size-lg: 1.1em;
  --font-size-xl: 1.2em;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Transitions */
  --transition: 0.3s ease;
  --transition-sm: 0.2s ease;
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

* {
  box-sizing: border-box;
}

body {
  background-color: var(--color-background-dark);
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  color: var(--color-text);
}

a {
  text-decoration: none;
  color: var(--color-text);
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--color-black);
  outline-offset: 2px;
}

/* Theme-specific focus styles */
.hamburger:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.nav-menu a:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: -2px;
  background-color: hsla(0, 0%, 100%, 0.3);
}

/* Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   LAYOUT & STRUCTURE
   ========================================================================== */

/* Site Wrapper */
.site-wrapper {
  max-width: var(--site-max-width);
  margin: 0 auto;
  box-shadow: var(--site-shadow);
  background-color: var(--color-white);
}

/* Container Structure */
.site-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.container-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  width: 100%;
}

/* Header Top: Logo + Widget Area */
.header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding-left: var(--spacing-sm);
}

.logo {
  flex: 0 0 auto;
}

.logo h1 {
  margin: 0;
}

.logo h1 > a {
  color: var(--color-white);
  font-weight: 400;
}

.header-widget-area {
  flex: 1;
  margin-left: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
}

.header-widget-area .widget {
  margin-bottom: 0;
  padding: 0;
  background-color: transparent;
}

.header-widget-area .widget-title {
  color: var(--color-white);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
}

/* Header Bottom: Navigation */
.header-bottom {
  width: 100%;
  position: relative;
  background-color: var(--color-background);
}

.searchform {
  display: none; /* should only be visible on desktop */
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
  width: 100%;
  padding: var(--spacing-sm);
  background-color: var(--color-background);
  border: var(--color-background);
}

/* Footer Top: Three Column Layout */
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.footer-recent-news,
.footer-categories,
.footer-widget-area {
  flex: 1;
  min-width: 200px;
}

.footer-recent-news h2,
.footer-categories h2 {
  margin: 0 0 var(--spacing-xs);
  color: var(--color-text);
  font-size: var(--font-size-lg);
}

.footer-recent-news ul,
.footer-categories ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-recent-news li,
.footer-categories li {
  margin-bottom: var(--spacing-xs);
}

.footer-recent-news a,
.footer-categories a {
  color: var(--color-text);
}

.footer-recent-news a:hover,
.footer-categories a:hover {
  text-decoration: underline;
}

.footer-widget-area .widget {
  background-color: transparent;
  padding: 0;
  margin: 0;
}

.footer-widget-area .widget-title {
  color: var(--color-text);
  margin-top: 0;
}

/* Footer Bottom: Copyright + Navigation */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.footer-bottom p,
.footer-bottom nav {
  margin: 0;
}

.footer-bottom p,
.footer-bottom nav a {
  color: var(--color-text);
}

.footer-bottom nav a {
  text-decoration: none;
}

.footer-bottom nav a:hover {
  text-decoration: underline;
}

/* Footer Menu (wp_nav_menu) */
footer .menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

footer .menu li {
  list-style: none;
  margin-left: var(--spacing-sm);
}

footer .menu li:first-child {
  margin-left: 0;
}

footer .menu a {
  color: var(--color-text);
  text-decoration: none;
}

footer .menu a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   BREADCRUMB NAVIGATION
   ========================================================================== */

.breadcrumb {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  /* background-color: var(--color-gray-100); */
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
}

.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-xs);
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin: 0 var(--spacing-xs);
  color: var(--color-text-light);
}

.breadcrumb a {
  /* color: var(--color-primary); */
  text-decoration: underline;
}

.breadcrumb li:last-child {
  color: var(--color-text);
}

/* ==========================================================================
   NAVIGATION MENU
   ========================================================================== */

.main-navigation {
  width: 100%;
}

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  margin: 0;
}

.nav-menu a {
  display: block;
  padding: 0.625rem 0.9375rem;
  color: var(--color-text);
  transition: background-color var(--transition);
  font-weight: var(--font-weight-medium);
}

.nav-menu a:hover {
  background-color: var(--color-background-dark);
  color: var(--color-white);
  text-decoration: none;
}

/* Hamburger Button */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs);
  margin-left: auto;
  margin-right: 0;
  z-index: 1001;
}

.hamburger-line {
  display: block;
  width: 1.5625rem;
  height: 0.1875rem;
  margin: 0.3125rem 0;
  background-color: var(--color-text);
  transition: all var(--transition);
}

/* ==========================================================================
   3-COLUMN LAYOUT
   ========================================================================== */

/* Column Base Styles (Mobile-first) */
.left-column,
.main-column,
.right-column {
  padding: var(--spacing-xs);
  background-color: var(--color-white);
  padding-top: var(--spacing-lg);
}

.left-column {
  order: 2;
}

.main-column {
  order: 1;
}

.right-column {
  order: 3;
}

/* Widget Areas */
.left-sidebar,
.right-sidebar {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm);
}

.widget {
  margin-bottom: var(--spacing-md);
  background-color: var(--color-white);
}

.widget-title {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-gray-300);
}

/* ==========================================================================
   ARTICLE & POST STYLES
   ========================================================================== */

.article-loop,
.article-full {
  display: block;
  vertical-align: top;
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
}

.article-loop header,
.article-full header {
  margin-bottom: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-gray-200);
}

.article-loop header h2,
.article-full header h2 {
  margin: 0 0 var(--spacing-xxs);
}

.article-loop header h2 a {
  color: var(--color-text);
}

.article-loop header h2 a:hover {
  color: var(--color-primary);
}

.article-full {
  width: 100%;
}

/* Featured Image */
.post-thumbnail {
  margin-bottom: var(--spacing-md);
}

.post-thumbnail img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Byline */
.byline {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* Post Tags */
.post-tags {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.post-tags a {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--spacing-xxs) var(--spacing-xs);
  border-radius: var(--border-radius);
  margin-right: var(--spacing-xs);
  text-decoration: none;
}

.post-tags a:hover {
  background-color: var(--color-primary-dark);
}

/* Author Section */
.post-author {
  display: flex;
  align-items: flex-start;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-gray-200);
}

.author-avatar {
  flex: 0 0 auto;
  margin-right: var(--spacing-sm);
}

.author-avatar img {
  border-radius: 50%;
}

.author-info {
  flex: 1;
}

.author-name {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

.author-bio {
  margin: 0;
  font-size: 0.95em;
  line-height: 1.5;
  color: var(--color-text-light);
}

/* ==========================================================================
   TRADE FAIR SHORTCODES
   ========================================================================== */

.tradefair-items-related,
.tradefair-companies-related {
  margin-bottom: var(--spacing-md);
  background-color: var(--color-white);
  border-radius: var(--border-radius);
}

.tradefair-items-related h2,
.tradefair-companies-related h2,
.single-post-shortcode h2 {
  margin: 0 0 var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-gray-200);
  color: var(--color-text);
  font-size: var(--font-size-xl);
}

.tradefair-item-list,
.tradefair-company-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tradefair-item,
.tradefair-company {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-gray-200);
}

.tradefair-item:last-child,
.tradefair-company:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.tradefair-item-thumbnail,
.tradefair-company-thumbnail {
  margin-bottom: var(--spacing-xs);
}

.tradefair-item-thumbnail img,
.tradefair-company-thumbnail img {
  max-width: 100%;
  height: auto;
  display: block;
}

.tradefair-item-title,
.tradefair-company-title {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-base);
  font-weight: bold;
}

.tradefair-item-title a,
.tradefair-company-title a {
  color: var(--color-text);
}

.tradefair-item-title a:hover,
.tradefair-company-title a:hover {
  color: var(--color-primary);
}

.tradefair-item-excerpt,
.tradefair-company-excerpt {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-text-light);
}

.tradefair-item-content,
.tradefair-company-content {
  margin-left: 0;
}

/* Responsive for Trade Fair Shortcodes 
@media screen and (min-width: 1024px) {
  .tradefair-item-thumbnail,
  .tradefair-company-thumbnail {
    float: left;
    margin-right: var(--spacing-sm);
    margin-bottom: 0.3125rem;
    max-width: 3.75rem;
  }

  .tradefair-item-content,
  .tradefair-company-content {
    margin-left: 4.6875rem;
  }
} */

@media screen and (max-width: 1023px) {
  .tradefair-item-thumbnail,
  .tradefair-company-thumbnail {
    margin-right: 0;
    text-align: center;
  }

  .tradefair-item-content,
  .tradefair-company-content {
    margin-left: 0;
  }
}

/* Category Menu */
.category-menu {
  list-style: none;
  padding: 0;
}

.category-menu > .menu-item > a {
  display: inline-block;
  padding: var(--spacing-xxs);
  transform: TranslateX(-var(--spacing-xxs));
  color: var(--color-text);
  transition: background-color var(--transition);
  border-radius: var(--border-radius);
}

.category-menu > .menu-item > a:hover {
  text-decoration: underline;
  background-color: var(--color-primary-light);
}

/* ==========================================================================
   HOME PAGE GRID
   ========================================================================== */

.home-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  width: 100%;
}

.grid-post {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 0.125rem var(--spacing-xxs) hsla(0, 0%, 0%, 0.1);
}

.featured-post {
  grid-column: span 2;
}

.grid-post-inner {
  padding: var(--spacing-sm);
}

.grid-post-category {
  display: inline-block;
  padding: 0.3125rem 0.625rem;
  margin-bottom: var(--spacing-xs);
  background-color: var(--color-background);
  color: var(--color-text);
  font-size: 0.85em;
  font-weight: 600;
  border-radius: var(--border-radius);
}

.grid-post-category a {
  color: inherit;
}

.grid-post-category a:hover {
  text-decoration: underline;
}

.grid-post-thumbnail {
  margin-bottom: var(--spacing-md);
}

.grid-post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius);
}

.grid-post-meta {
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.grid-post-title {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-xl);
}

.grid-post-title a {
  color: var(--color-text);
}

.grid-post-title a:hover {
  color: var(--color-primary);
}

.grid-post-excerpt {
  margin: 0 0 var(--spacing-md);
  font-size: 0.95em;
  line-height: 1.5;
  color: var(--color-text-light);
}

.grid-post-readmore {
  margin-top: var(--spacing-xs);
}

.grid-post-readmore a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.grid-post-readmore a:hover {
  text-decoration: underline;
}

/* Responsive Grid */
@media screen and (max-width: 1023px) {
  .home-posts-grid {
    grid-template-columns: 1fr;
  }

  .featured-post {
    grid-column: span 1;
  }
}

/* ==========================================================================
   FEATURED IMAGES CATEGORY SHORTCODE
   ========================================================================== */

.featured-images-category {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  background-color: var(--color-white);
  border-radius: var(--border-radius);
}

.featured-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
  gap: var(--spacing-sm);
}

.featured-image-item {
  display: block;
}

.featured-image-item a {
  display: block;
}

.featured-image-item img,
.tradefair-item-thumbnail img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.featured-image-item a:hover img,
.tradefair-item-thumbnail a:hover img {
  transform: scale(1.05);
  box-shadow: 0 var(--spacing-xxs) 0.75rem hsla(0, 0%, 0%, 0.2);
}

/* ==========================================================================
   SINGLE POST SHORTCODE
   ========================================================================== */

.single-post-shortcode {
  margin-bottom: var(--spacing-xl);
  background-color: var(--color-white);
  border-radius: var(--border-radius);
}

.single-post-shortcode p:first-child {
  margin-top: 0;
}

.single-post-shortcode p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   RESPONSIVE NAVIGATION
   ========================================================================== */

/* Desktop Menu (>= 768px) */
@media screen and (min-width: 768px) {
  .hamburger {
    display: none;
  }

  .main-navigation {
    display: block;
    z-index: inherit;
    padding-left: var(--spacing-sm);
  }

  .nav-menu {
    display: flex;
    justify-content: flex-start;
  }

  .nav-menu li {
    position: relative;
    margin-right: 4px;
    /* border: 1px solid var(--color-background-dark); */
  }

  .nav-menu li.menu-item-has-children > a {
    padding-right: 2rem;
  }

  .nav-menu li.menu-item-has-children > a:after {
    content: "";
    position: absolute;
    border: 7px solid transparent;
    border-top: 7px solid var(--color-text); /* Pfeil zeigt nach unten */
    top: 1rem;
    right: 0.75rem;
  }

  .nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-primary-light);
    min-width: 12.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.625rem);
    transition:
      opacity var(--transition),
      transform var(--transition),
      visibility var(--transition);
    z-index: 1000;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .nav-menu li:hover > .sub-menu,
  .nav-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-menu .sub-menu li {
    display: block;
    width: 100%;
    margin: 0;
    border: none;
  }

  .nav-menu .sub-menu a {
    padding: 0.625rem 0.9375rem;
    display: block;
    white-space: nowrap;
  }

  .header-bottom {
    padding: var(--spacing-xs);
    display: flex;
  }
}

/* Mobile Menu (< 768px) */
@media screen and (max-width: 767px) {
  .hamburger {
    display: block;
    position: fixed;
    top: 0;
    z-index: 1002;
    width: 100%;
    background-color: var(--color-background-light);
    opacity: 0.5;
    padding-left: 94%;
  }

  .header-bottom {
    position: relative;
    z-index: 1001;
  }

  .main-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: var(--color-primary);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition:
      opacity var(--transition),
      visibility var(--transition),
      height var(--transition);
    padding-top: 0;
  }

  .main-navigation.active {
    height: 100%;
    opacity: 1;
    z-index: 1000;
    visibility: visible;
    padding-top: 6rem;
  }

  .nav-menu {
    display: block;
    width: 100%;
  }

  .nav-menu li {
    text-align: left;
    padding-left: var(--spacing-sm);
  }

  .nav-menu a {
    display: block;
    padding: var(--spacing-sm);
    font-size: var(--font-size-xl);
  }

  /* Mobile: show all submenu items */
  .nav-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: block;
    background-color: hsla(0, 0%, 100%, 0.1);
    padding-left: var(--spacing-lg);
    margin: 0;
  }

  .nav-menu .sub-menu li {
    text-align: left;
    padding-left: var(--spacing-sm);
  }

  .nav-menu .sub-menu a {
    padding: var(--spacing-sm);
    font-size: var(--font-size-lg);
  }

  /* Hamburger to X animation */
  .hamburger.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(0.375rem, 0.375rem);
  }

  .hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(0.375rem, -0.375rem);
  }
}

/* ==========================================================================
   RESPONSIVE LAYOUT
   ========================================================================== */

/* Mobile Layout (< 768px) - Vertical stack */
@media screen and (max-width: 767px) {
  .left-column,
  .main-column,
  .right-column {
    width: 100%;
    flex: 0 0 100%;
  }

  .main-column {
    order: 1;
  }

  .left-column {
    order: 2;
  }

  .right-column {
    order: 3;
  }
}

/* Tablet Layout (768px - 1023px) - 2 columns top, 1 column bottom */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .left-column {
    width: 33.333%;
    flex: 0 0 33.333%;
    order: 1;
  }

  .main-column {
    width: 66.667%;
    flex: 0 0 66.667%;
    order: 2;
  }

  .right-column {
    width: 100%;
    flex: 0 0 100%;
    order: 3;
  }

  .left-column,
  .main-column {
    margin-bottom: var(--spacing-md);
  }
}

/* Desktop Layout (>= 1024px) - 3 columns side-by-side */
@media screen and (min-width: 1024px) {
  .left-column {
    width: 20%;
    flex: 0 0 20%;
    order: 1;
    padding-right: var(--spacing-md);
  }

  .main-column {
    width: 55%;
    flex: 0 0 55%;
    order: 2;
  }

  .right-column {
    width: 20%;
    flex: 0 0 20%;
    order: 3;
    padding-left: var(--spacing-md);
  }

  .container-wrap {
    align-items: flex-start;
    justify-content: space-between;
  }

  /* Responsive Header */

  .main-navigation {
    flex: 1 1 70%;
  }

  .searchform {
    display: block;
    flex: 1 1 30%;
    text-align: end;
    padding-top: var(--spacing-xs);
  }
}