/* DEC v30 — narrowly scoped fixes for the mobile header and Contact details.
   Loaded AFTER the existing CSS layers, avoiding any changes to unrelated pages. */

/* Keep desktop navigation and its hamburger mutually exclusive.
   An older global icon rule had made the hamburger visible at full width. */
@media (min-width: 1151px) {
  .dec-ref-header .dec-ref-menu-button { display: none; }
}

/* At tablet/mobile sizes the brand must never collapse letter by letter. */
@media (max-width: 1150px) {
  .dec-ref-header .dec-ref-header-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.6vw, 16px);
    min-height: 68px;
  }
  .dec-ref-header .dec-ref-desktop-nav { display: none; }
  .dec-ref-header .dec-ref-brand {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    min-width: 0;
    width: auto;
    max-width: none;
    gap: 8px;
  }
  .dec-ref-header .dec-ref-brand > strong { flex: 0 0 auto; }
  .dec-ref-header .dec-ref-brand > span {
    flex: 0 0 auto;
    min-width: max-content;
    max-width: none;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    line-height: 1.17;
  }
  .dec-ref-header .dec-ref-brand-image {
    display: block;
    flex: 0 1 auto;
    width: auto;
    max-width: min(32vw, 210px);
    max-height: 49px;
    height: auto;
    object-fit: contain;
  }
  .dec-ref-header .dec-ref-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-left: auto;
    gap: 7px;
  }
  .dec-ref-header .dec-ref-menu-button,
  .dec-ref-header .dec-ref-header-search,
  .dec-ref-header .dec-ref-account {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .dec-ref-header .dec-ref-mobile-menu { overscroll-behavior: contain; }
}

/* Show the quote action inside the existing mobile menu rather than
   squeezing it against the logo and the three action icons. */
@media (max-width: 740px) {
  /* The legacy shared button rule has an ID-level specificity. */
  #store-header .dec-ref-header .dec-ref-header-quote { display: none; }
  .dec-ref-header .dec-ref-header-bar { gap: 8px; }
  .dec-ref-header .dec-ref-header-actions { gap: 5px; }
  .dec-ref-header .dec-ref-brand > strong {
    font-size: clamp(32px, 6.5vw, 38px);
    line-height: 1;
  }
  .dec-ref-header .dec-ref-brand > span { font-size: 9px; }
  .dec-ref-header .dec-ref-brand-image { max-width: min(37vw, 180px); }
}

@media (max-width: 420px) {
  .dec-ref-header .dec-ref-brand > span { display: none; }
  .dec-ref-header .dec-ref-brand { flex-shrink: 0; }
  .dec-ref-header .dec-ref-brand-image { max-width: min(34vw, 120px); }
  .dec-ref-header .dec-ref-header-actions { gap: 3px; }
}

/* Always keep touch controls inside the available viewport width. */
@media (max-width: 360px) {
  .dec-ref-header .dec-ref-header-bar { gap: 5px; }
  .dec-ref-header .dec-ref-header-actions { gap: 1px; }
  .dec-ref-header .dec-ref-brand > strong { font-size: 32px; }
}

/* Laptop and desktop Contact details: exactly two columns and two rows.
   Previously dec-polish-v4 forced ONE column between 791 and 1310px. */
@media (min-width: 992px) {
  #main .dec-contact-page-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(11px, 1.1vw, 17px);
    align-items: stretch;
  }
  #main .dec-contact-page-info-grid article {
    min-width: 0;
    min-height: 142px;
    padding: clamp(12px, 1.15vw, 19px);
    gap: clamp(9px, .9vw, 13px);
  }
  #main .dec-contact-page-info-grid article > span {
    flex: 0 0 clamp(38px, 3.2vw, 46px);
    width: clamp(38px, 3.2vw, 46px);
    height: clamp(38px, 3.2vw, 46px);
  }
  #main .dec-contact-page-info-grid article strong { font-size: clamp(11px, 1.02vw, 13px); }
  #main .dec-contact-page-info-grid article a,
  #main .dec-contact-page-info-grid article div > span {
    font-size: clamp(11px, .96vw, 14px);
    overflow-wrap: anywhere;
  }
  #main .dec-contact-page-info-grid article small { font-size: clamp(10px, .85vw, 12px); }
}

/* Keep the handset layout readable on smaller screens. */
@media (max-width: 640px) {
  #main .dec-contact-page-info-grid { grid-template-columns: 1fr; }
}

/* DEC v31: Contact information cards should grow with their content, not with
   the old 142px fixed minimum. Keep equal heights within each grid row. */
#main .dec-contact-page-info-grid {
  grid-auto-rows: auto;
  align-items: stretch;
}
#main .dec-contact-page-info-grid article {
  min-height: 0;
  height: auto;
  align-items: flex-start;
  padding-block: clamp(11px, 1.05vw, 15px);
}
#main .dec-contact-page-info-grid article small {
  margin-top: 5px;
}