* { box-sizing: border-box }

/* ─────────────── Sticky‐footer layout ─────────────── */

html, body {
  height: 100%;
  margin: 0;
}

/* Site-wide stationary background */
html {
  background: url("../epimages/bluewhirlagain.png") center top / cover fixed no-repeat;
}

/* Body must be transparent so the html background shows through */
body {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #221811;
  font-family: Tahoma, Arial, sans-serif;
}

/* Make content readable (use translucent white instead of solid) */
#wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: rgba(255,255,255,0.30);
  padding: 0;
}

/* Optional: give main a little extra readability */
main {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.80); /* adjust: 0.70 more see-through, 0.90 less */
  display: block;
  padding: 0 0 2em 0;
  padding-bottom: 15px;
  min-width: 0;
}
/* ───────────── End sticky‐footer additions ───────────── */

html {
  scroll-behavior: smooth; /* For the back to top. Creates a smooth scroll ups */
}

header {
  color: #231814;
  height: 100px;
  padding-top: 5px;
  padding-bottom: 5px;
}
/* Ensure header is positioned correctly for the pseudo-element */
header {
  position: relative;
  z-index: 3;
}

/* --- Subtle, soft gradient shadow below header --- */
header::after {
  content: "";
  position: absolute;
  bottom: -20px;
left: 50%;              /* overlap just below header */
 transform: translateX(-50%); /* pull back half the width */
  width: 50%;
  height: 25px;              /* gentle vertical fade */
  background: linear-gradient(
    to bottom,
   rgba(3, 54, 81, 0.25) 0%,   /* deep brand blue at start */
    rgba(3, 54, 81, 0.12) 40%,  /* soften mid-way */
    rgba(3, 54, 81, 0) 100%     /* fade to transparent */
  );
  filter: blur(4px);         /* softens the transition */
  opacity: 0.9;              /* makes gradient nearly transparent */
  pointer-events: none;
  z-index: 2;
}

.logo-link {
  display: block;           /* or inline-block, as needed */
  width: 100%;
  height: 128px;
  text-align: center;       /* center the image horizontally */
}
.logo-img {
  max-height: 100%;         /* scale image to header height */
  height: 60%;             /* force full header height */
  width: auto;              /* preserve aspect ratio */
  display: inline-block;    /* so text-align on parent works */
}

header a { text-decoration: none;  color: #000435; font-size: 1.5em; text-shadow: 3px 10px 5px #667788; }
header a:link { color: #000435 }
header a:visited { color: #000435; }
header a:hover { color: #FEF6C2; }


h1 { font-size: 2em; text-decoration: none; } 

h2 { color: #000435; }

h3, dt  { color: #000435; }

h4 { background-color: #033651; 
font-size: 1.2em;
color: #ffffff; 
padding-left: .5em; 
padding-bottom: 0; 
text-transform: uppercase;
border-bottom: 1px solid #221811;
clear: left;
}

nav {   background-color: rgba(255, 255, 255, 0.75);
text-align:center; }

nav a { text-decoration: none; } 
nav a:focus { outline: 2px solid #033651; }
nav a:link { color: #033651; }
nav a:visited { color: #033651; } 
nav a:hover { color: #033651; } 
nav ul { display: flex; 
flex-direction: column; 
font-size: 1.25em;
list-style-type: none;
margin: 0; padding: 0; }
nav li { z-index: 999;
padding: .25em 1em;
width: 100%}

h2,h3,h4,p,div,ul,dl

{ padding-left: 1em; padding-right: 1em; }

main ul { padding-left: 2em; }


main div { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 2em; }


#shieldicon { height: 300px; 
background-image: url('../epimages/shieldepsmall.png'); 
background-repeat: no-repeat;  
background-size: 100% 100%; }

#mobile { display: inline; margin: 0; padding: 0;  line-height: 1;}
#desktop { display: none; margin: 0; padding: 0;  line-height: 1;}
footer { background-color: #ffffff; height: 3em;
	font-size: .60em; font-style: italic; text-align: center; padding-bottom: 1em; border-top: 2px solid #231814; }



/* MOBILE: hide shield to reduce congestion */
@media (max-width: 599px) {
  header {
    background-image: none;
    text-align: center;
  }

  /* Mobile nav sizing/spacing */
  nav ul { font-size: 1em; gap: 0; }
  nav li { padding: .25em .75em; }
}

/* TABLET AND UP: show shield */
@media (min-width: 600px) {
  header {
    background-image: url('../epimages/shieldepsmall.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 85px center;
    padding-left: 105px;
    text-align: left;
  }

  /* Tablet nav (horizontal) */
  nav ul {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    font-size: 1.5em;
  }

  nav li {
    width: auto;
    border-bottom: none;
    padding: .5em 1em;
  }
}

/* DESKTOP: sidebar layout + vertical nav */
@media (min-width: 1024px) {
  #wrapper {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header"
      "nav    main"
      "footer footer";
  }

  header { grid-area: header; }
  nav    { grid-area: nav; }
  main   { grid-area: main; }
  footer { grid-area: footer; }

  /* Force vertical nav on desktop */
  nav ul {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    font-size: 1.5em;
  }

  nav li {
    width: 100%;
    border-bottom: none;
    padding: .5em 1em;
  }
}