/* ========================================
   Argument Theme - Responsive Breakpoints
   ======================================== */

/* === Tablet (max-width: 1024px) === */
@media screen and (max-width: 1024px) {
  #wrapper {
    max-width: 100%;
    padding: 0 10px;
  }

  #colmask.cols3-layout {
    grid-template-columns: 180px minmax(0, 1fr) 260px;
  }

  #colmask.cols2-left {
    grid-template-columns: 180px 1fr;
  }

  #colmask.cols2-right {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  #nav ul.primary-links li a:link,
  #nav ul.primary-links li a:visited {
    padding: 10px 8px;
    font-size: 0.9em;
  }
}

/* === Small Tablet (max-width: 900px) === */
@media screen and (max-width: 900px) {
  #colmask.cols3-layout {
    grid-template-columns: 1fr 1fr;
  }

  #colmask.cols3-layout #col2 {
    grid-column: 1 / -1;
    order: 3;
  }

  #colmask.cols3-layout #col1 {
    order: 1;
  }

  #colmask.cols3-layout #col3 {
    order: 2;
  }

  .showcase-grid {
    grid-template-columns: 1fr 1fr;
  }

  .showcase-grid .dp33 {
    border-right: none;
  }

  .showcase-grid .dp35 {
    border-left: none;
    grid-column: 1 / -1;
  }
}

/* === Mobile (max-width: 768px) === */
@media screen and (max-width: 768px) {
  /* Single column layouts */
  #colmask.cols3-layout,
  #colmask.cols2-left,
  #colmask.cols2-right {
    grid-template-columns: 1fr;
  }

  #colmask.cols3-layout #col2,
  #colmask.cols3-layout #col3 {
    grid-column: auto;
  }

  /* Internal pages do not need the latest-articles carousel on mobile.
   * The front page has a different #thema block and is not affected. */
  body.page-inner #showcase #thema {
    display: none !important;
  }

  body.page-inner #showcase.showcase-only-carousel {
    display: none !important;
  }

  /* Showcase single column */
  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .showcase-grid .dp33,
  .showcase-grid .dp35 {
    border: none;
  }

  /* Navigation: hamburger */
  #nav {
    display: block;
    width: 100%;
  }

  #nav .menu-toggle {
    display: block;
  }

  #nav ul.primary-links {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  #nav ul.primary-links.is-open {
    display: flex;
  }

  #nav ul.primary-links li {
    width: 100%;
    border-bottom: 1px solid #ddd;
  }

  #nav ul.primary-links li a:link,
  #nav ul.primary-links li a:visited {
    padding: 12px 15px;
  }

  /* Header */
  #header .block {
    float: none;
    margin: 10px 0 0;
    text-align: center;
  }

  #header li {
    float: none;
    display: inline-block;
    margin: 2px;
  }

  /* Logo */
  #logo {
    float: none;
    margin: 0 auto 15px;
  }

  /* Search */
  .search-src {
    width: 100%;
    margin: 3px 0 0;
  }

  /* Spacer blocks */
  .spacer.w49 .block,
  .spacer.w33 .block {
    width: 100%;
    float: none;
  }

  /* Footer */
  #footer li {
    float: none;
    padding: 5px 0;
  }

  #logo2 {
    float: none;
    margin: 15px auto 0;
  }

  /* Toppad */
  #topteaser {
    width: 100%;
  }

  /* Video block - stack on mobile */
  #mainmods3 .video-grid,
  #mainmods3 .video:has(table) {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  #mainmods3 .video table {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  #mainmods3 .video td {
    display: block;
    width: 100%;
  }

  /* The legacy Video view has three direct span children. Stack them on
   * mobile instead of allowing the desktop floats to remain active. */
  #mainmods3 .block-body > div > span {
    float: none;
    width: 100%;
    padding: 0;
    margin-bottom: 15px;
  }

  /* Video Grid (views template) - stack on mobile */
  .video-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  /* Reduce showcase title */
  #showcase h1 {
    font-size: 2em;
    margin: 15px 15px 10px;
  }

  /* Component padding */
  .component-pad {
    padding: 1px 15px 15px;
    border-right: none;
  }

  /* Gallery */
  .gallery .jcarousel-container-horizontal {
    width: 100%;
    box-sizing: border-box;
  }
}

/* === Small Mobile (max-width: 480px) === */
@media screen and (max-width: 480px) {
  body {
    font-size: 55%;
  }

  #wrapper {
    padding: 0 8px;
  }

  h1, .componentheading {
    font-size: 150%;
  }

  h2 {
    font-size: 130%;
  }

  h3 {
    font-size: 115%;
  }

  #showcase h1 {
    font-size: 1.6em;
  }

  .mainarticles h2,
  .catpage h2 {
    font-size: 1.1em;
  }

  .verynews h2 {
    font-size: 0.95em;
  }

  .lastnews dt {
    width: 30px;
    font-size: 10px;
  }

  .lastnews dd {
    margin-left: 38px;
  }

  /* Stack all blocks */
  .spacer .block {
    width: 100% !important;
    float: none !important;
  }

  /* Reduce image margins */
  .mainarticles img,
  .verynews img,
  .catpage img {
    margin-right: 8px;
  }

  /* Full-width images on very small screens */
  .node .lpic,
  .node .rpic {
    float: none;
    display: block;
    padding: 5px 0;
  }

  /* Video block - stack to 1 column on mobile */
  #mainmods3 .video {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  #mainmods3 .video table {
    border-spacing: 0;
  }
  #mainmods3 .video td {
    display: block;
    width: 100%;
  }
}

/* === Final overrides for the legacy OpenPublish navigation and MLP carousel === */
@media screen and (min-width: 769px) {
  /* Hide top-level submenus by default. Keep this without !important so
   * OpenPublish hover rules can reveal them. */
  #nav > ul.primary-links > li > ul.second-level {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* Show only while the top-level item is hovered/active for keyboard/IE
   * compatibility. */
  #nav > ul.primary-links > li:hover > ul.second-level,
  #nav > ul.primary-links > li.sfHover > ul.second-level,
  #nav > ul.primary-links > li.over > ul.second-level,
  #nav > ul.primary-links > li.off:hover > ul.second-level {
    display: block !important;
  }

  #nav > ul.primary-links > li > ul.second-level > li {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
  }

  #thema .jcarousel-skin-mlp .jcarousel-container-horizontal {
    height: auto !important;
    padding: 20px 40px !important;
  }

  #thema .jcarousel-skin-mlp .jcarousel-clip-horizontal {
    height: auto !important;
  }

  #thema .jcarousel-skin-mlp .jcarousel-item {
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
  }

  #thema .jcarousel-skin-mlp .jcarousel-next,
  #thema .jcarousel-skin-mlp .jcarousel-prev {
    filter: none !important;
  }
}

/* === Final layout overrides === */
@media screen and (min-width: 769px) {
  /* The old clearfix makes #nav an inline-block. The navigation must span
   * the complete theme container, not only the width of its links. */
  #wrapper > #nav {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #wrapper > #nav > ul.primary-links {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* The Video block's custom Views output is three direct span elements. */
  #mainmods3 > .block > .block-body > div > span {
    display: block !important;
    float: left !important;
    width: 33.333333% !important;
    box-sizing: border-box !important;
    padding: 0 8px !important;
    vertical-align: top !important;
  }

  #mainmods3 > .block > .block-body > div:after {
    content: "";
    display: block;
    clear: both;
  }

  #mainmods3 > .block > .block-body > div > span .video {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #mainmods3 > .block > .block-body > div > span .video a {
    display: block !important;
    width: 100% !important;
  }

  #mainmods3 > .block > .block-body > div > span .video img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }
}

@media screen and (max-width: 768px) {
  #wrapper > #nav {
    display: block !important;
    width: 100% !important;
  }

  #mainmods3 > .block > .block-body > div > span {
    display: block !important;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 15px !important;
  }
}

/* === Modern responsive search form === */
.m_src .search-src {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 42px;
  margin: 0;
  padding: 4px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #cfd5dc;
  border-radius: 6px;
  background: #fff;
}

.m_src .search-src .form-item {
  flex: 1 1 auto;
  min-width: 0;
  float: none;
  margin: 0;
}

.m_src .search-src .form-text {
  display: block;
  width: 100%;
  height: 32px;
  min-width: 0;
  margin: 0;
  padding: 0 10px;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333;
  font: inherit;
}

.m_src .search-src .form-text:focus {
  box-shadow: inset 0 -2px 0 #b01600;
}

.m_src .search-src .butt {
  flex: 0 0 auto;
  float: none;
  padding: 0;
  margin: 0;
}

.m_src .search-src .butt input.form-submit {
  display: block;
  width: auto;
  min-width: 74px;
  height: 32px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: #b01600;
  color: #fff;
  cursor: pointer;
  font: 600 "Fira Sans", system-ui, sans-serif;
  text-align: center;
  text-transform: none;
}

.m_src .search-src .butt input.form-submit:hover,
.m_src .search-src .butt input.form-submit:focus {
  background: #8f1200;
}

/* === Typography overrides === */
body,
button,
input,
textarea,
select,
#main,
#nav,
#nav a,
#showcase,
#main-content,
#footer {
  font-family: "Fira Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#nav ul.primary-links a,
#nav ul.secondary-links a,
#showcase h1,
#showcase h2,
#showcase h3,
#showcase h4,
#main h1,
#main h2,
#main h3,
#main h4,
#main .mainarticles h2,
#main .catpage h2,
#main .verynews h2,
#main .anons h2,
#mainmods3 h3,
#mainmods3 h4,
.block-header {
  font-family: "Fira Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* The legacy theme starts at 10px (62.5% body) and drops to 8.8px on
 * small screens. Keep the old layout scale, but give reading content sane
 * sizes explicitly. */
#main .node .content,
#main .component-pad .content {
  font-size: 1rem;
  line-height: 1.4;
}

#main .node h1 {
  font-size: 1.5rem;
  line-height: 1.15;
}

#nav ul.primary-links a {
  font-size: 0.875rem;
}

#col2 .block-body,
#col3 .block-body {
  font-size: 0.86rem;
  line-height: 1.3;
}

#thema .mlptitl a {
  font-size: 0.9375rem;
  line-height: 1.35;
}

#mainmods3 h4 {
  font-size: 0.875rem;
  line-height: 1.35;
}

/* Front-page teasers: deliberately compact, but still readable. */
#main .mainarticles,
#main .anons,
#main .verynews,
#main .catpage {
  font-size: 0.9rem;
  line-height: 1.4;
}

#main .mainarticles h2,
#main .catpage h2 {
  font-size: 1.1rem;
  line-height: 1.25;
}

#main .mainarticles p,
#main .anons p,
#main .verynews p,
#main .catpage p {
  font-size: 0.9rem;
  line-height: 1.3;
}

/* Short news teasers. */
#main .verynews h2 {
  font-size: 0.85rem;
  line-height: 1.4;
}

/* The compact headings in the news/Accent column. */
#news h2,
#news .anons h2,
#showcase .lastnews h3 {
  font-size: 0.93rem;
  line-height: 1.3;
}

/* Featured blocks at the top of the front page. */
#showcase .coolthema h2 {
  font-size: 1rem;
  line-height: 1.35;
}

#showcase .topnews h2 {
  font-size: 1.35rem;
  line-height: 1.25;
}

@media screen and (max-width: 768px) {
  /* Cancel the old 55% mobile scale. */
  body {
    font-size: 62.5%;
  }

  #main .node h1 {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  #main .node .content,
  #main .component-pad .content {
    font-size: 1rem;
    line-height: 1.4;
  }

  #nav ul.primary-links a {
    font-size: 1rem;
  }

  #col2 .block-body,
  #col3 .block-body {
    font-size: 0.9375rem;
  }
}

/* === Print === */
@media print {
  .background,
  #nav,
  #header .block,
  #showcase,
  #col2,
  #col3,
  #footer,
  .addthis_toolbox,
  .comment-form,
  .links {
    display: none;
  }

  #col1 {
    width: 100%;
  }

  body {
    font-size: 12pt;
    color: #000;
  }
}