/* ---------------------------------------------------------
   Modernised CSS for The Green Man, Horsted Keynes
   Lightweight, accessible, mobile-friendly update (2025)
----------------------------------------------------------*/

/* Base styles */
body {
  background-color: #F4F8F4; /* soft pastel background */
  color: #222; /* dark grey text for readability */
  margin: 20px;
  font-family: 'Inter', 'Open Sans', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

/* Visibility for different devices */
.mobile {
  display: none;
  font-size: 1.8em;
}

@media only screen {
  .desktop-wide { display: block; }
  .desktop-narrow { display: none; }
}

/* If mobile device max width 1250px */
@media only screen and (max-device-width: 1250px) {
  .mobile-small { display: none; }
  .mobile-wide { display: block; }
  .mobile { display: block; }
  .desktop { display: none; }
}

/* If mobile device max width 500px */
@media only screen and (max-device-width: 500px) {
  .mobile-small { display: block; }
  .mobile-wide { display: none; }
}

/* Headings */
h1, h2, h3 {
  font-weight: 600;
  color: #3C6E5A; /* deep green accent */
  line-height: 1.3;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.3em; }

/* Table alignment & layout */
td.title-center,
td.title-center-h,
td.title-center-m,
td.title-center-mw {
  text-align: center;
  padding: 20px 10px;
  background-color: #E7EFE7; /* replaces image background */
  border-radius: 6px;
}

td.event-description {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1em;
  text-align: center;
  line-height: 1.5;
  padding-bottom: 16px;
}

td.m-event-description {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1em;
  text-align: center;
  line-height: 1.5;
  padding-bottom: 16px;
}

/* Opening times table */
table.opentimes {
  font-family: 'Open Sans', Arial, sans-serif;
  border-collapse: collapse;
  border: 1px solid #DDE5DD;
  background-color: #EEF5EE;
  margin-bottom: 20px;
}

table.opentimes td {
  padding: 10px;
  border-bottom: 1px solid #DDE5DD;
}

/* Menu tables */
table.menu {
  background-color: #5A8A6E; /* sage green */
  color: #fff;
  border: none;
  border-spacing: 10px;
  margin-bottom: 20px;
  width: 100%;
  border-radius: 8px;
}

table.buttonmenu {
line-height: 4em;
}

td.menu-head, td.m-menu-head {
  font-weight: bold;
  text-align: center;
  line-height: 1.8;
  font-size: 1.2em;
}

td.m-menu-head {
  font-size: 1.4em;
  padding-bottom: 10px;
}

td.menutime, td.event-item,
td.menu-voption, td.menu-centered, td.m-menu-centered {
  padding: 8px 10px;
  text-align: center;
}

td.menu-item, td.m-menu-item {
  padding: 8px 10px;
  text-align: left;
}
td.menu-item-christmas, td.m-menu-item-christmas {
  padding: 8px 10px;
  line-height: 1.8;
  text-align: center;
}

td.menu-price, td.m-menu-price {
  padding: 8px 10px;
  font-weight: bold;
}

td.m-menu-price { font-size: 1.2em; }
td.m-menu-centered { font-size: 1.2em; }

/* Images */
img.title-image {
  border: 2px solid #3C6E5A;
  border-radius: 8px;
  padding: 4px;
  max-width: 100%;
  height: auto;
}

img.menutitle {
  border: none;
  max-width: 100%;
  height: auto;
}

/* Buttons */
button, .deskbutton, .mobilebutton {
  font-family: 'Inter', Arial, sans-serif;
  background-color: #5A8A6E;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  margin: 8px 8px 8px 8px;
  cursor: pointer;
  font-size: 1em;
  line-height: 1.2;
  transition: background-color 0.2s ease-in-out;
}

button:hover, .deskbutton:hover, .mobilebutton:hover {
  background-color: #3C6E5A;
}

button:focus, .deskbutton:focus, .mobilebutton:focus {
  outline: 2px solid #3C6E5A;
  outline-offset: 2px;
}

/* Accessibility tweaks */
a {
  color: #3C6E5A;
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: underline;
  color: #2F5848;
}

/* Table at top for mobile */
table.mobile-top {
  background-color: #E7EFE7;
}