
/* responsive.css - added by assistant */
:root{
  --container-max:1200px;
  --gap:16px;
  --radius:8px;
}

/* make layout fluid */
*{box-sizing:border-box;}
img, video, iframe {max-width:100%;height:auto;display:block;}
.container{
  width:100%;
  max-width:var(--container-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gap);
  padding-right:var(--gap);
}

/* simple grid/card responsiveness */
.row{display:flex;flex-wrap:wrap;margin-left:-8px;margin-right:-8px;}
.col{padding-left:8px;padding-right:8px;flex:1 1 0%;}
.col-1{flex: 0 0 8.333%;}
.col-2{flex: 0 0 16.666%;}
.col-3{flex: 0 0 25%;}
.col-4{flex: 0 0 33.333%;}
.col-6{flex: 0 0 50%;}
.col-12{flex: 0 0 100%;}

/* navbar and header adjustments */
.navbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px;}
.navbar .nav-links{display:flex;gap:12px;flex-wrap:wrap;}
.navbar .brand img{height:44px;max-width:200px;}

/* forms */
form{max-width:100%;}
input, textarea, select, button{width:100%;padding:10px;border-radius:6px;border:1px solid #ddd;margin-bottom:10px;}

/* footer */
.footer{padding:20px 0;text-align:center;}

/* small devices */
@media (max-width: 991px){
  .col-3{flex:0 0 50%;}
  .col-4{flex:0 0 50%;}
  .navbar .brand img{height:40px;}
}

/* extra small */
@media (max-width: 575px){
  .col-3, .col-4{flex:0 0 100%;}
  .navbar{padding:10px;}
  .navbar .nav-links{width:100%;justify-content:space-around;}
}
