:root {
  /* Backgrounds */
  --bodyBackground: #eee;       /* soft neutral */
  --containerBackground: #fff;  /* clean white for cards/sections */

  /* Text */
  --primaryText: #111;          /* strong dark for readability */
  --secondaryText: #555;        /* softer gray for contrast */

  /* Borders */
  --borderColor: #bbb;          /* lighter, unobtrusive */

  /* Accent Colors */
  --blue: #2d89ef;              /* modern flat blue */
  --green: #113940;             /* positive action */
  --orange: #ff9800;            /* highlight / warning */
  --red: #e53935;               /* error / critical */
  --gold: #D4AF37;
  --buttonHover: #164c54;   /* slightly brighter for hover */
  --buttonActive: #0d2e33;  /* slightly darker for active */
  
  /* Typography */
  --font-serif: Cambria, "Palatino Linotype", Palatino, "Book Antiqua",
                Georgia, "Times New Roman", Times, serif;
  --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                     Helvetica, Arial, sans-serif;
}

/* mobile-first font size */
html {
  font-size: 18px; /* mobile default */
}

/* Global box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Base body styles */
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans-serif);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "kern","liga","clig","calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  background-color: var(--bodyBackground);
  color: var(--primaryText);
}

/* Full-height layout & selection behavior */
html,
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* iOS long-press menu */
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Allow selection in interactive elements */
button,
.uiBtn,
a,
input,
textarea,
select,
label,
[contenteditable="true"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  user-select: text !important;
}

/* Prevent image dragging */
img,
a img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Main layout container */
#masterContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;  /* full screen height */
}

/* Banner */
#bannerContainer {
  aspect-ratio: 3.3 / 1;
  width: 100%;
  background-image: url("../images/ghostBanner.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 0 solid var(--green);
  flex: 0 0 auto;     /* fixed height */
}

/* Logo strip below banner */
#logoContainer {
  width: 90%;
  height: 80px;
  flex: 0 0 auto;         /* fixed height */
  text-align: center;     /* center all text */
  margin:1.1rem auto 2.5rem auto;
}


/* Logo text styles */
.logoText {
  font-family: var(--font-serif);
  font-size:2.1rem !important;     
  font-weight: 900;
}

.taglineText {
  font-family: var(--font-serif);
  font-size:1.5rem !important;
  margin:0.2rem auto !important;
  font-weight: 900;
}

/* Tight stacking of logo + tagline */
.logoText,
.taglineText {
  color: var(--green);
  padding: 0 !important;
  line-height: 1 !important;  /* remove vertical spacing */
  display: block;             /* avoid inline spacing quirks */
}

/* Logo image */
.logoImage {
  height:2.5rem !important;
  width: auto;
  margin-top:5px;
}

/* Main content area */
#contentContainer {
  flex: 1 0 auto;
  padding: 20px;
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
  text-align: center;   /* default: center all text */
  line-height:1.5;
}

/* Left-align utility inside centered containers */
.left-align {
  text-align: left !important;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;   /* allow left alignment in centered parent */
}

/*
Example:
<div class="left-align">
  <h2>Left aligned section</h2>
  <p>This whole block is left aligned.</p>
</div>
*/
.contentHeader {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 900;
    margin:70px auto 0px auto;
    color: var(--green);
}
.contentSection {
    text-align:left;
}

.button {
  margin:20px auto;
  background: var(--buttonHover);
  color: var(--bodyBackground);
  padding: 10px 20px;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  border-radius: 10px; /* rounded rectangle */
  cursor: pointer;
  display: inline-block;
  text-align: center;
  text-decoration: none; /* removes underline */
  transition: background 0.25s ease, transform 0.15s ease;
}

.button:hover {
  background: var(--green); /* or var(--green) adjusted darker */
  transform: translateY(-2px);
}

.button:active {
  background: var(--buttonActive);
  transform: translateY(0);
}

/* Footer */
#footerContainer {
  background: var(--green);
  color: var(--bodyBackground);
  text-align: center;
  padding: 0;
  border-top: 1px solid var(--gold);
  font-size: 0.7rem;
  line-height: 0.4rem;
  flex: 0 0 auto;       /* sticks to bottom */
}

/* Desktop / larger screens */
@media (min-width: 940px) {
  html {
    font-size: 21px;    /* desktop and tablets in landscape */
  }
    #contentContainer {
      max-width: 940px;
    }
}