/* Custom styling for hillstabletennis.org to match the legacy J3 JA Business theme */

:root {
  /* Color palette from legacy JA Business */
  --cassiopeia-color-primary: #261c17;     /* Dark earthy brown */
  --cassiopeia-color-hover: #dd6d14;       /* Warm orange */
  --cassiopeia-color-link: #dd6d14;        /* Warm orange links */
  --cassiopeia-bg-color: #f4f2ee;          /* Earthy off-white body background */
  
  --template-bg-light: #fafaf8;
  --template-text-dark: #6d625b;           /* Mmuted brown-grey text */
  --template-text-light: #ffffff;
  --link-color: #dd6d14;
  --link-color-hover: #bde211;             /* Lime green hover accent from legacy header */
  --template-special-color: #261c17;
}

body {
  background-color: #f4f2ee !important;
  color: #4a3e3d !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px;
  line-height: 1.6;
}

/* Header & Brand Container */
.header {
  background: #261c17 url('/templates/ja_business/images/header-bg-layer1.jpg') repeat-x top center !important;
  border-bottom: 3px solid #dd6d14;
  padding: 20px 0;
}

.brand-logo img {
  max-height: 80px;
  width: auto;
}

/* Navigation Menu (Horizontal Flexbox row) */
.container-nav, .navbar {
  background-color: #261c17 !important;
  border-bottom: 1px solid #1a1310;
  padding: 0 !important;
}

.mod-menu.nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.mod-menu.nav > .nav-item {
  position: relative !important;
}

.mod-menu.nav .nav-link, .mod-menu.nav .nav-item a {
  color: #eebe8a !important; /* Muted amber text from legacy header */
  font-weight: bold;
  text-transform: uppercase;
  font-size: 13px;
  padding: 15px 20px !important;
  display: block;
  text-decoration: none !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.mod-menu.nav .nav-link:hover, .mod-menu.nav .nav-item a:hover {
  color: #ffffff !important;
  background-color: #33251e !important;
}

.mod-menu.nav .active > a, .mod-menu.nav .nav-item.active a {
  color: #dd6d14 !important;
  background-color: #1a1310 !important;
}

/* Dropdown submenus (Hover activated CSS dropdowns) */
.mod-menu.nav .mod-menu__sub {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1000 !important;
  background-color: #261c17 !important;
  border: 1px solid #3d2d25 !important;
  min-width: 220px !important;
  padding: 5px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

.mod-menu.nav .nav-item:hover > .mod-menu__sub {
  display: block !important;
}

.mod-menu.nav .mod-menu__sub .nav-item {
  width: 100% !important;
  position: relative !important;
}

.mod-menu.nav .mod-menu__sub a {
  padding: 10px 15px !important;
  font-size: 12px !important;
  text-transform: none !important;
  color: #eebe8a !important;
  border-bottom: 1px solid #33251e !important;
}

.mod-menu.nav .mod-menu__sub a:hover {
  background-color: #dd6d14 !important;
  color: #ffffff !important;
}

/* Second level nested submenus */
.mod-menu.nav .mod-menu__sub .mod-menu__sub {
  top: 0 !important;
  left: 100% !important;
}

/* Main Layout & Cards */
.container-component, .container-sidebar {
  background: #ffffff;
  border: 1px solid #e1deda;
  border-radius: 4px;
  padding: 25px;
  margin-top: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Headings */
h1, h2, h3, h4, .page-header {
  color: #261c17 !important;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  border-bottom: 1px solid #e1deda;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }

/* Table styling to match the legacy theme */
table, .table {
  width: 100% !important;
  border-collapse: collapse;
  margin-bottom: 20px;
}

table th, .table th {
  background-color: #261c17 !important;
  color: #ffffff !important;
  font-weight: bold;
  padding: 8px 12px !important;
  border: 1px solid #3d2d25 !important;
  text-align: left;
}

table td, .table td {
  padding: 8px 12px !important;
  border: 1px solid #e1deda !important;
  background-color: #ffffff;
}

table tr:nth-child(even) td, .table tr:nth-child(even) td {
  background-color: #fafaf8;
}

table tr:hover td, .table tr:hover td {
  background-color: #ffffcc !important; /* Warm yellow row highlight from legacy CSS */
}

/* Sidebar module titles */
.container-sidebar h3.card-header, .container-sidebar .card-title {
  background-color: #261c17 !important;
  color: #ffffff !important;
  padding: 10px 15px;
  font-size: 14px;
  text-transform: uppercase;
  border: none;
  margin: -25px -25px 20px -25px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* General Link Colors */
a {
  color: #dd6d14;
  text-decoration: none;
}

a:hover {
  color: #bde211; /* Lime green hover accent */
  text-decoration: underline;
}

/* Footer styling */
footer, .footer {
  background: #261c17 !important;
  color: #eebe8a !important;
  padding: 30px 0;
  border-top: 5px solid #dd6d14;
  margin-top: 40px;
}

footer a {
  color: #eebe8a;
}

footer a:hover {
  color: #dd6d14;
}