/* Men's Health Network — shared styles
   Base reset, responsive breakpoints, form helpers.
   All other styling is inline per the design handoff. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #f2ebdf; }

/* Form helpers (Join) */
.men-input {
  width: 100%;
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  color: #15212e;
  background: #fff;
  border: 1px solid rgba(21, 33, 46, 0.16);
  border-radius: 10px;
  padding: 13px 15px;
  outline: none;
}
.men-input:focus {
  border-color: #c4392b;
  box-shadow: 0 0 0 3px rgba(196, 57, 43, 0.12);
}
.men-chip { cursor: pointer; user-select: none; }

/* Nav: desktop links vs. hamburger */
.mhn-desktop { display: flex; }
.mhn-burger { display: none; }

/* ---- Responsive breakpoints ----
   Ordered descending so narrower rules override wider ones. */

@media (max-width: 900px) {
  .r-split { grid-template-columns: 1fr !important; gap: 36px !important; }
  .r-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-domains { grid-template-columns: 1fr !important; gap: 22px !important; }
  .r-sticky { position: static !important; }
}

@media (max-width: 840px) {
  .mhn-desktop { display: none !important; }
  .mhn-burger { display: inline-flex !important; }
}

@media (max-width: 760px) {
  .r-bento { grid-template-columns: 1fr !important; grid-auto-rows: 210px !important; }
  .r-bento > figure { grid-column: auto !important; grid-row: auto !important; }
}

@media (max-width: 720px) {
  .r-foot { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
}

@media (max-width: 640px) {
  .r-3 { grid-template-columns: 1fr !important; }
  .r-2 { grid-template-columns: 1fr !important; }
  .r-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 460px) {
  .r-media { grid-template-columns: 104px 1fr !important; }
  .r-foot { grid-template-columns: 1fr !important; }
}

@media (max-width: 440px) {
  .r-names { grid-template-columns: 1fr !important; }
}