/* AAStyles */

.site-header {
	display: flex;
	background-repeat: repeat-x;
	background-position: center top;
	position: relative;
	z-index: 2;
	background-color: #339933;
	top: 0px;
	width: 100%;
}

.titlestyle {
	color: #D8E7D8;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	padding-left:7em;
	padding-top:0.8em;
	
	margin: 0px;
}

#HorseBar {
	background-image: url(../images/horsebar.jpg);
	position: relative;
	height: 70px;
	z-index: 2;
	background-repeat: repeat-x;
	width: 100%;
}

#AAcresPano {
	position: relative;
	height: 100px;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	background-image: url(../images/AAcresPano_c.jpg);
	background-color: #000000;
}

.F2 {
	background-color: #FFFFFF;
	border: 2px groove #957E6F;
}

.sidebyside2 {
  display: flex; /* Makes the container a flex container */
  /* Optional properties for alignment and spacing */
  justify-content: space-around; /* Distributes space around items */
  align-items: center; /* Vertically aligns items in the center */
  gap: 20px; /* Adds space between flex items */
  margin-left:1em;
}

.sidebyside-nopad {
  display: flex;
  justify-content: center; /* Centers children horizontally */
  align-items: center;    /* Centers children vertically */
  
}

.container{max-width:var(--max-w);padding:1rem}
.site-footer{background:#0f1724;color:#fff;padding:1rem 2}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.site-footer a{
	color:#FFFFFF;
}
.site-footer ul{
	list-style-type: none;
}
.style3 {
	font-weight: normal;
	font-size:smaller;
}

.dark-line {
    height: 2px; /* Set the height of the line */
    background-color: black; /* Set the color of the line */
    width: 100%; /* Ensure it spans the entire screen */
}

/* === Main Navigation === */
.main-nav {
  background-color: #004d26; /* dark green */
  color: #f5f5f0; /* off white */
  text-align: center;
  position: relative;
  font-family: Arial, sans-serif;
}

.main-nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}

.main-nav a,
.main-nav button {
  background: #004d26;
  color: #f5f5f0;
  text-decoration: none;
  padding: 0.75em 1.5em;
  display: block;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.main-nav a:hover,
.main-nav button:hover,
.main-nav a:focus,
.main-nav button:focus {
  background: #001f4d; /* navy blue */
  color: #ffffff; /* bright white */
}

.main-nav .triangle {
  font-size: 0.7em;
  margin-left: 0.4em;
}

/* Submenu styles */
.submenu {
  display: none;
  position: absolute;
  background: #004d26;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 200px;
  text-align: left;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.submenu li a {
  padding: 0.6em 1.2em;
}

/* Fade-in effect for hover/focus */
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu {
  display: block;
  opacity: 1;
  visibility: visible;
}

.has-submenu {
  position: relative;
}

/* Mobile Menu */
.menu-toggle {
  display: none;
  background: #004d26;
  color: #f5f5f0;
  border: none;
  font-size: 1.2rem;
  padding: 0.75em 1.5em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.menu-toggle:hover {
  background: #001f4d;
  color: #ffffff;
}

/* Responsive Behavior */
@media (max-width: 768px) { /* was 768px */
  /*.menu-toggle {
    display: block;
  }
  
  .main-nav .menu {
    flex-direction: column;
    display: none;
    width: 100%;
  }

  .main-nav .menu.show {
    display: flex;
  }

  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
  }*/

  .has-submenu button .triangle {
    float: right;
  }
  
   .sidebyside2 {
	flex-direction: column; 
	padding:1rem; 
  }
}

/* for information webpage /*
/* --- Root Variables (Colors from table) --- */
:root {
  --color-header-main: #000066;
  --color-header-col: #000099;
  --color-row-header: #009900;
  --color-sub-row-header: #6060ff;
  --color-data: #cccccc;
  --color-data-alt: #d2d2ff;
  --color-text-light: #ffffff;
  --border-color: #000; /* From border="1" */
}

/* --- Base Styles --- */
/*body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 20px;
}

p {
  margin: 0;
  padding: 0;
} */

/* --- Main Table Container (replaces <table>) --- */
.boarding-rates {
  display: flex; /* Use flexbox for the main container */
  flex-direction: column; /* Stack all rows vertically */
  width: 100%;
  max-width: 900px; /* Set a max-width for large screens */
  margin: 0 auto; /* Replicates align="center" */
  border: 1px solid var(--border-color);
  /* Replicates border-top/left: medium solid white (if needed) */
  border-top: 2px solid #fff;
  /*border-left: 2px solid #fff;*/
  box-sizing: border-box;
}

/* --- Row Container (replaces <tr>) --- */
.rates-row {
  display: flex;
  width: 100%;
  /* Replicates cellspacing="0" by adding a top border to all rows */
  border-top: 1px solid var(--border-color);
}
/* Remove double top border from the first row */
.boarding-rates > .rates-row:first-child {
  border-top: none;
}

/* --- Cell Container (replaces <td> and <th>) --- */
.rates-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px; /* From cellpadding="3" */
  box-sizing: border-box;
  text-align: center; /* From align="center" */
  
  /* Replicates cellspacing="0" by adding a left border to all cells */
  border-left: 1px solid var(--border-color);
}
/* Remove double left border from the first cell in each row */
.rates-row > .rates-cell:first-child {
  border-left: none;
}

/* --- Flex-based Column Sizing (replaces colspan) --- */
/* We have 5 columns. We use flex-basis to set percentage widths.
  1 col = 20%, 2 cols = 40%, 4 cols = 80%, 5 cols = 100%
*/
.rates-cell {
  flex-grow: 1;
  flex-basis: 20%; /* Default 1-column width */
}
.header-main,
.footer-note {
  flex-basis: 100%; /* colspan=5 */
}
.span-2 {
  flex-basis: 40%; /* colspan=2 */
}
.span-4 {
  flex-basis: 80%; /* colspan=4 */
  justify-content: center; /* flex-start; /* Align link to the left */
  padding-left: 10px;
}

/* --- Sizing for the Rowspan 3-5 Block --- */
.data-block {
  /* This row is special, items should not grow, just stick to basis */
  align-items: stretch; /* Make all 3 columns equal height */
}
.row-header-hay,
.row-header-daily {
  flex-basis: 20%; /* 1 column width */
  flex-grow: 0;
}
.data-subgrid {
  flex-basis: 60%; /* 3 columns width */
  flex-grow: 0;
  display: flex;
  flex-direction: column; /* Stack the sub-rows */
  border-left: 1px solid var(--border-color);
}
.subgrid-row {
  display: flex;
  flex-grow: 1; /* Make all 3 sub-rows share height */
  border-top: 1px solid var(--border-color);
}
.subgrid-row:first-child {
  border-top: none;
}
.subgrid-row > .rates-cell {
  flex-basis: 33.333%; /* 1/3 width inside the subgrid */
}

/* --- Color & Text Styles --- */
.bg-header-main { background-color: var(--color-header-main); }
.bg-header-col { background-color: var(--color-header-col); }
.bg-row-header { background-color: var(--color-row-header); }
.bg-sub-row-header { background-color: var(--color-sub-row-header); }
.bg-data { background-color: var(--color-data); }
.bg-data-alt { background-color: var(--color-data-alt); }

.text-light { color: var(--color-text-light); }
.text-size-2 { font-size: 0.9em; } /* Approximation of size="2" */
.no-wrap { white-space: nowrap; }

/* Assuming .style16 and .style21 are white and bold
  based on the header context
*/
.text-style16,
.text-style21 {
  color: var(--color-text-light);
  font-weight: bold;
}
.footer-note {
  text-align: left;
  padding: 8px;
}

/* center UL */
.flex-container {
  display: flex; /* Makes the container a flexbox */
  justify-content: center; /* Centers the child elements horizontally */
}
.flex-container ul {
  padding-left: 0; /* Optional: Removes default left padding */
}

/* --- 📱 Responsive (Mobile) View --- */
@media (max-width: 8px) {
  /* Stack all rows and sub-rows */
  .rates-row,
  .subgrid-row,
  .data-block {
    flex-direction: column;
  }

  /* Make all cells full-width */
  .rates-cell,
  .span-2,
  .span-4,
  .row-header-hay,
  .row-header-daily,
  .data-subgrid {
    flex-basis: 100% !important; /* Force full width */
    width: 100%;
  }

  /* Remove all unneeded borders for a clean stack */
  .rates-cell,
  .data-subgrid {
    border-left: none;
  }
  .rates-row,
  .subgrid-row {
    border-top: 1px solid var(--border-color);
  }
  .data-subgrid {
    border-top: 1px solid var(--border-color);
  }
  
  /* Hide the blank spacer cell on mobile */
  .header-cols .span-2 {
    display: none;
  }
  
  /* Add borders back between stacked sub-cells */
  .subgrid-row > .rates-cell {
     border-top: 1px dashed var(--color-header-main);
  }
  .subgrid-row > .rates-cell:first-child {
    border-top: none;
  }
}