/* Responsive utilities and breakpoint rules */
:root{
  --container-max: 900px;
  --accent: #cc0000;
}

/* Make media scale nicely */           
*{box-sizing: border-box}
img, picture, video{max-width:100%; height:auto; display:block}

/* containers */
.container{max-width:var(--container-max); margin:1rem auto; padding:0 1rem}

/* Buttons & touch targets */
button, .filter-btn, .widget-btn, .arrow{min-height:44px; min-width:44px; padding:0.5rem 0.9rem; touch-action:manipulation}

/* Inputs full width on small screens */
input[type="text"], input[type="email"], input[type="password"], textarea, select{width:100%; max-width:100%;}

/* Menu behaviour on mobile */
#menu-box{display:none}
#menu-box.open{display:block}
#menu-box a{display:block; padding:10px 12px}

/* Ensure small-screen friendlier default spacing */
.calendar-header{padding:0 0.5rem}

/* Event tweaks */
.event-wrapper{gap:1rem}
.event-card{width:320px; max-width:90%}

/* Chatbot adjustments */
#chatbot-toggle img{width:40px; height:auto}
#chatbot-container{max-width:90vw}

/* Breakpoints */
@media (max-width: 800px){
  header{padding:1rem}
  header h1{font-size:1.1rem}
  .event-wrapper{gap:.6rem}
  .arrow{width:44px; height:44px}
}

@media (max-width: 600px){
  .container{margin:0.6rem}
  .calendar-header{justify-content:center}
  /* stack arrows on small screens */
  .event-wrapper{flex-direction:column}
  .event-wrapper .arrow{order:2; margin-top:0.5rem}
  .event-card{aspect-ratio: auto; width: 88vw; padding:1rem}
  .filter-btn{align-self:center}
  /* menu becomes full-width panel */
  #menu-box{position:fixed; left:10px; right:10px; top:56px; background:#2b2b2b; border:2px solid #800000; border-radius:8px; padding:10px; z-index:9999}
  #menu-toggle{top:12px; left:12px}
}

@media (max-width: 400px){
  header h1{font-size:0.95rem}
  button, .arrow{padding:0.4rem 0.6rem}
  .event-card{width:92vw}
}

/* Small-screen fixes for shop & forms */
@media (max-width: 600px){
  .item{max-width:100%; width:92vw; margin:12px auto}
  #contact-form-wrapper{left:10px; right:10px; width:auto; max-width:calc(100% - 20px)}
}

/* Accessibility helpers */
.sr-only{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}