/* Base Color Variables */
:root {
  --primary-color: #aea09b;
  --primary-hover: #b8aaa3;
  --light-bg: #e4d9d3;
  --dark-bg: #0f2233;
  --text-color: #333;
  --dark-text: #f1f1f1;
  --table-bg: #f9f7f5;
  --table-dark-bg: #1e3044;
  --shadow-light: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.4);
  --border-radius: 8px;
  --dark-primary-color: #182d40;
  --dark-primary-hover: #1a5278;
}

/* Global Styles */
body {
  font-family: 'Forum', serif;
  background-color: var(--light-bg);
  color: var(--text-color);
  margin: 0;
  padding: 20px;
  transition: background 0.3s, color 0.3s;
}
h1, h2 {
  font-family: 'Forum', serif;
  color: #0b3957;
  text-align: center;
  color: var(--text-color);
  margin-top: 20px;
}

/* Logo & Header */
.logo-container {
  display: flex;
  justify-content: center;
  margin-top: 3%;
}
.site-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--border-radius);
  object-fit: cover;
}
.header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px; /* adjust the value as needed */
  padding-bottom: 0;
}
.button-container {
  display: flex;
  flex-direction: column; /* Default vertical stacking */
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 1%; /* Adjusted from 10% to a fixed value */
  margin-bottom: 0.5%;
}
.button-container button {
  width: auto;            /* Ensures the button width is determined by its content */
  margin-bottom: 0.2%;
  margin-right: 0.2%;
  margin-left: 0.2%;
}

/* Text Elements */
p#date,
p#dateonly {
  margin: 0;
  font-size: 1.2em;
  text-align: center;
  color: var(--primary-color);
  padding-bottom: 0%;
}
.bottom-text {
  font-size: 0.9em;
  text-align: center;
  margin: 20px auto;
  padding: 0 2%;
  max-width: 600px;
}

/* Table Styles */
table {
  margin: 1% auto;
  width: 70%; /* about 2/3 of the screen on desktop */
  max-width: 100%;
  border-collapse: collapse;
  background-color: var(--table-bg);
  table-layout: auto;
  box-shadow: var(--shadow-light);
  border-radius: var(--border-radius);
  overflow: hidden;
}
th, td {
  vertical-align: top;
  padding: 15px;
  text-align: center;
  font-size: 1.1em;
  line-height: 1.6;
  border-bottom: 1px solid #ddd;
}
th {
  background-color: var(--primary-color);
  color: #fff;
  text-transform: uppercase;
}
td {
  font-size: 1.1em;
}

table.prayer-table th {
  background-color: var(--primary-color);
  color: #fff;
  font-size: 1.3em;      /* Bigger text */
  font-weight: bold;     /* Make it pop */
  padding: 8px 10px;     /* Slightly smaller padding = smaller row height */
  text-align: center;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Hebrew text: same size as English */
.hebrew {
  direction: rtl;
  font-family: 'Noto Serif Hebrew', serif;
  font-size: 1.2em;
  font-weight: 500;
}

/* Section Titles */
.section-title {
  text-align: center;
  font-size: 1.4em;
}

/* Button Styles */
.link-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1.2em;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s;
}
.link-button:hover {
  background-color: var(--primary-hover);
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
  margin-bottom: 1.2%;
  background-color: var(--primary-color);
  border: none;
  color: #fff;
  padding: 12px 15px;
  font-size: 1em;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color 0.3s;
}
.dark-mode-toggle:hover {
  background-color: var(--primary-hover);
}

/* Dark Mode Styles */
body.dark-mode {
  background-color: var(--dark-bg);
  color: var(--dark-text);
  --primary-color: var(--dark-primary-color);
  --primary-hover: var(--dark-primary-hover);
}
h1.dark-mode, h2.dark-mode {
  color: var(--dark-text);
}
p#date.dark-mode, p#dateonly.dark-mode {
  color: var(--dark-text);
}
table.dark-mode {
  background-color: var(--table-dark-bg);
  box-shadow: var(--shadow-dark);
}
th.dark-mode {
  background-color: #0b2d3c;
}
td.dark-mode {
  color: var(--dark-text);
}
.link-button.dark-mode {
  background-color: var(--primary-hover);
  color: #fff;
  box-shadow: var(--shadow-dark);
}
.link-button.dark-mode:hover {
  background-color: #34b3b6;
}
a.dark-mode {
  color: #34b3b6;
}
a.dark-mode:hover {
  color: #1abc9c;
}
.colored-text {
  color: rgb(32, 32, 33);
}
body.dark-mode .colored-text {
  color: rgb(228, 228, 228); /* Light gray color for dark mode */
}

/* Responsive Adjustments for Mobile */
@media (max-width: 768px) {
  .site-logo {
    width: 40px;
    height: 40px;
  }
  h1, h2 {
    font-size: 1.3em;
    margin-top: 1%;
  }
  p#date, p#dateonly {
    font-size: 1em;
  }
  table {
    width: 100%; /* nearly full width with small margins */
    margin: 2% auto;
  }
  th, td {
    font-size: 0.9em;
    padding: 4px;
  }
  .link-button {
    font-size: 0.9em;
    padding: 4px 8px;
  }
  .section-title {
    font-size: 1em;
  }
  .header-container {
    margin-top: 5px;
  }
  /* Hover undo for mobile taps */
  @media (hover: none) {
    .link-button:hover,
    .dark-mode-toggle:hover {
      background-color: var(--primary-color);
    }
  }  
  /* Mobile adjustments for button container */
  @media (max-width: 768px) {
    /* ...other mobile styles... */
    
    .button-container {
      width: 100%;               /* Force the container to span the full width */
      flex-direction: row;       /* Arrange buttons side by side */
      justify-content: space-around; /* Evenly space the buttons */
      gap: 0.5%;                  /* Maintain a gap between buttons */
    }
    
    .button-container button {
      margin: 0;                 /* Remove extra margins */
      width: 35%;                /* Fixed width on mobile */
    }
  }  
}