/* NOTE: I was going for a warm, inviting, and
   earthy color scheme to match the coffee shop theme. 
   I used a mix of browns, greens, and oranges to evoke
   a cozy and natural atmosphere.  Author: Pat Esty, 2026 */
body {
    background: #37c7d8 url('/zImages/maldives.jpg') no-repeat
     center center / cover;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 20px;
    color:#E7EFF1; /* greyish font */
}

.welcomeHome, .contactFooter { 
    /* This is my top welcome, but in front of some
       lovely palm leaves. So, I want it to be "readable"
       but opaque enough to show the leaves at the same time. */
    background-color: gray;
    border-radius: 8px;
    opacity: 0.7;
    color: yellow;
    padding: 10px;
    text-align: justify;
}

h1 {
    color: lightblue; 
    /* text-shadow: 2px 2px 4px rgba(255,255,255,0.5); */
    padding: 0; margin: 5px 0;
}

h3 {
    color: lightgreen;
    font-style: italic;
}


a {
    color: lightblue;
    text-decoration: none;
}

.highlight {
    color: #F1E5E5; /* Bright 0 */
    font-weight: bold;
}


.at_top { /* override .nav-item background when at top */
  background-color: darkgreen !important;
  color: lightsteelblue !important;
}

/* Add autumn leaf-like accent */
.autumn-border {
    border: 3px solid #FF4500;
    padding: 5px 2px;
    border-radius: 8px;
    background-color: rgba(0, 255, 242, 0.3); /* Transparent light blue */
}

footer > p {
    color: #353b10; /* dark olive green */
    border-top: 1px solid #a77823; /* brownish */
    font-size: 0.7em;
    text-align: center;
    margin-top: 20px;
}

.nav-item .aboutTab {
    background-color: #8B4513; /* Saddle Brown */
    color: #F5DEB3; /* Wheat */
    border-style: dotted yellow 1px;
}

.nav-item .aboutTab.active {
    background-color: #c46019 !important; 
    color: #D8F0F2; 
}

.nav-item .nav-link.active {
  /* only the tab "header" "s bold */
  font-weight: 600;
}

.aboutDetail {
  background-color: #D54405; 
  color: #E1CFC3;
  padding-left: 15px;
  overflow-y: scroll;
  max-height: 320px;
}

.tab-pane > h4 {
  color: goldenrod;
  font-style: italic;
  padding-top: 10px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Subtle shadow for depth */
}

figcaption {
  font-size: smaller;
  color: purple;
  margin: 0 0 5px;
  font-style: italic;
}

.rowGray1 > td {
  background-color: #ccc !important; 
  color: red;
}

.rowGray2 > td {
  color:  darkred !important; font-weight: bold;
}