/* responsive.css - modern touches & responsive defaults */

/* Reset-ish basics */
* { box-sizing: border-box; }
html,body { margin:0; padding:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#222; }

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Images & media */
img, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Typography improvements */
h1,h2,h3,h4,h5 { line-height: 1.15; margin-top: 0.5rem; margin-bottom: 0.75rem; }
p { margin: 0 0 1rem 0; }

/* Make any fixed-width elements adapt */
[class*="width-"], .fixed, .fixed-width {
  max-width: 100% !important;
  width: auto !important;
}

/* Utility */
.row { display:flex; flex-wrap:wrap; gap:16px; }
.col { flex:1 1 0; min-width: 0; }
.center { text-align:center; }

/* Simple responsive navigation (if there's a .nav or nav element) */
.navbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; }
.navbar .nav-links { display:flex; gap:12px; align-items:center; }
.navbar .nav-links a { text-decoration:none; padding:8px 10px; border-radius:6px; }
.navbar .nav-toggle { display:none; background:none; border:0; font-size:18px; }

/* Cards & sections */
.card { border-radius: 10px; padding:16px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); background:#fff; }

/* Footer adjustments */
footer { padding:24px 0; font-size:0.95rem; color:#555; }

/* Responsive grid helpers */
.grid { display:grid; gap:16px; grid-template-columns: repeat(12, 1fr); }
.grid-col-6 { grid-column: span 6; }
.grid-col-4 { grid-column: span 4; }
.grid-col-3 { grid-column: span 3; }

/* Default breakpoints */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(8, 1fr); }
  .nav-toggle { display:block; }
  .navbar .nav-links { display:none; position:absolute; left:16px; right:16px; top:64px; background:#fff; flex-direction:column; padding:12px; border-radius:8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
  .navbar.expanded .nav-links { display:flex; }
}

@media (max-width: 768px) {
  h1 { font-size:1.6rem; }
  h2 { font-size:1.25rem; }
  .grid { grid-template-columns: repeat(4, 1fr); }
  .grid-col-6, .grid-col-4, .grid-col-3 { grid-column: auto; }
  .navbar { padding:10px 0; }
  .container { padding-left:12px; padding-right:12px; }
}

@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size:1.3rem; }
  p { font-size:0.95rem; }
  .navbar .nav-toggle { font-size:20px; }
}