/* --- DTC SKY TRAIL GLOBAL STYLES (v12.0) --- */

/* --- COLOR PALETTE --- */
:root {
  --patton-brown: #6B5238;   
  --desert-sand: #EEE8AA;    
  --menu-text: #ffffff;      
  --hover-rust: #A63704;     
  --dropdown-bg: #F2ECEB;    
  --text-color: #333333;
}

/* --- BASIC LAYOUT --- */
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  margin: 0; padding: 0;
  background-image: linear-gradient(to bottom, #D2B48C, #F4E1C1); 
  background-attachment: fixed;
  color: var(--text-color);
}

/* --- HERO HEADER --- */
header {
  position: relative;
  height: 350px; 
  background-image: url('picture_library/essex_airfield_75_smooth_032_29a.gif');
  background-color: var(--patton-brown);
  background-position: center bottom;
  background-size: cover; 
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding-top: 20px;
  border-bottom: 5px solid var(--patton-brown);
}

header h1 { 
  margin: 0; 
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 3.2rem; 
  color: #FFF8DC;    
  text-transform: uppercase;
  letter-spacing: 2px; 
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

header p { 
  margin: 0.5rem 0 0; 
  font-size: 1.4rem; 
  color: #FFF; 
  font-weight: bold;
  text-shadow: 2px 2px 4px #000;
  background-color: rgba(107, 82, 56, 0.6); 
  padding: 5px 20px;
  border-radius: 8px;
  border: 1px solid #fff;
}

/* --- NAVIGATION BAR --- */
nav {
  background-color: var(--patton-brown); 
  position: sticky; top: 0; z-index: 1000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  border-top: 1px solid #C4A484;
  border-bottom: 3px solid #3e2b19;
}
nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; 
}
nav ul li { position: relative; }

/* TOP LEVEL LINKS */
nav ul li a {
  display: block; padding: 0.8rem 1.2rem; 
  font-family: "Arial Black", Gadget, sans-serif; 
  font-size: 1.0rem; 
  text-transform: uppercase;
  color: var(--menu-text); 
  text-decoration: none; 
  margin: 0; 
  transition: background 0.2s, color 0.2s;
}
nav ul li a:hover { background-color: #3e2b19; color: var(--hover-rust); }

/* --- DROPDOWNS --- */
nav ul ul {
  display: none; position: absolute;
  top: 100%; left: 0; margin-top: 0px;
  flex-direction: column; 
  background-color: var(--dropdown-bg); 
  min-width: 220px; 
  border: 2px solid var(--patton-brown);
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5); 
  padding: 5px 0;
}
nav ul li:hover > ul, nav ul li.touch-open > ul { display: flex; }

/* --- SUB-MENU ITEMS --- */
nav ul ul li a { 
  color: #4B3621; 
  font-family: Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  font-size: 0.95rem; 
  text-decoration: underline; 
  text-align: left; 
  padding: 3px 12px; 
  line-height: 1.2;
  margin: 0; 
  border-bottom: none; 
  text-transform: none; 
}
nav ul ul li a:hover { 
  background-color: #e6c8b5; 
  color: var(--hover-rust); 
  text-decoration: none; 
  border-radius: 2px; 
}

/* Category Headers */
nav ul li .menu-header {
  display: block; padding: 4px 12px; 
  background-color: #dcdcdc; 
  color: var(--patton-brown); 
  font-family: "Arial Black", sans-serif; 
  font-weight: 900;
  font-size: 0.9rem; 
  border-bottom: 1px solid #aaa;
  border-top: 1px solid #fff;
  cursor: default; pointer-events: none; text-transform: uppercase;
  text-decoration: none; 
}

/* Manual Radius Corrections */
nav ul ul > li:first-child .menu-header,
nav ul ul > li:first-child > a { border-top-left-radius: 12px; border-top-right-radius: 12px; }
nav ul ul > li:last-child > a { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }

/* --- LEVEL 3 FLYOUT --- */
nav ul ul ul {
  top: -5px; left: 98%; margin-left: 0;
  border-radius: 15px; 
  min-width: 200px; 
  border: 2px solid var(--patton-brown);
}

/* Arrows */
.has-submenu::after { content: " \25BC"; font-size: 0.8em; text-decoration: none; display: inline-block; }
nav ul ul .has-submenu::after { content: " \25B6"; color: var(--patton-brown); float: right;}
nav ul ul .has-submenu:hover::after { color: var(--hover-rust); }

/* --- MAIN CONTENT CONTAINER --- */
.container {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.95); 
  border-radius: 4px;
  border: 1px solid #aaa;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  min-height: 600px;
}

/* --- UTILS --- */
h2, h3 { color: var(--patton-brown); font-family: "Arial Black", sans-serif; border-bottom: 4px solid var(--desert-sand); padding-bottom: 5px; }
img { max-width: 100%; height: auto; }
.clear { clear: both; }

/* --- FOOTER --- */
footer {
  background: #3e2b19; color: #dcdcdc;
  padding: 1rem 2rem; text-align: center;
  border-top: 5px solid var(--patton-brown);
  font-size: 0.9rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
}
#menu-info-bar {
  width: 100%; background-color: #222; color: #FFD700; 
  padding: 5px; font-size: 0.9rem; font-style: italic;
  text-align: center; border-bottom: 1px solid #444; min-height: 1.5em; 
}
footer a { color: #DEB887; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }

/* --- DISCLAIMER --- */
#disclaimer-modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); 
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.modal-content {
  background: #fff; padding: 2rem; max-width: 600px; border-radius: 15px;
  text-align: center; border: 5px solid var(--patton-brown); font-family: Arial, sans-serif;
}
.modal-btn {
  background: var(--patton-brown); color: white; border: none;
  padding: 12px 30px; font-size: 1.2rem; cursor: pointer;
  border-radius: 50px; font-weight: bold; margin-top: 15px;
}

/* Back to Top */
#backToTop {
  display: none; position: fixed; bottom: 50px; right: 20px;
  z-index: 99; border: 2px solid #fff; outline: none;
  background-color: var(--patton-brown); color: white;
  cursor: pointer; padding: 10px 15px; border-radius: 5px;
  font-size: 14px; font-weight: bold; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
#backToTop:hover { background-color: var(--hover-rust); }

/* --- IMAGES & CAPTIONS (FIGURES) --- */

/* The Container */
figure {
  display: table; /* Keeps caption width matched to image */
  background: #fff;
  border: 1px solid #ccc; /* The border now goes on the box, not the image */
  padding: 6px;
  max-width: 100%;
  margin: 0; /* Reset margins for figures so they float correctly */
}

/* The Image inside */
figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid #eee; /* Subtle inner border */
}

/* The Caption Text */
figcaption {
  display: table-caption;
  caption-side: bottom;
  padding-top: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  color: #444;
  text-align: center;
  line-height: 1.3;
  font-style: italic;
}

/* Bold "Figure X:" prefix */
figcaption strong {
  color: var(--patton-brown);
  font-weight: bold;
  font-style: normal;
}

/* --- RESPONSIVE LAYOUT & FLOATS --- */
/* Floats for both Images and Figures */
.float-left { 
  float: left; 
  margin: 0 20px 20px 0; 
}

.float-right { 
  float: right; 
  margin: 0 0 20px 20px; 
}

/* Mobile Breakpoint (Matches Menu Collapse) */
@media (max-width: 900px) {
  header { height: 200px; } 
  header h1 { font-size: 1.8rem; letter-spacing: 0; }
  header p { font-size: 1rem; }
  
  nav ul { flex-direction: column; } 
  nav ul li a { text-align: center; }
  nav ul ul { position: static; border: none; width: 100%; box-shadow: none; margin-top: 0; border-radius: 0; }
  nav ul ul ul { position: static; margin-left: 0; border: none; border-radius: 0; overflow: visible; }
  #menu-info-bar { display: none; } 
  
  /* Stack Images on Mobile */
  figure { width: 100% !important; margin: 10px 0 !important; }
  .float-left, .float-right { 
    float: none; 
    display: block; 
    margin: 20px auto; /* Center them */
  }
}

/* --- RESPONSIVE VIDEO --- */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  margin: 20px 0;
  border: 1px solid #ccc;
}
.video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* --- GLOBAL POLICIES --- */

/* 1. All links must be underlined */
a {
    text-decoration: underline !important;
}

/* 2. All images must have a 2px black outline with NO space */
img {
    border: 2px solid #000 !important;
    padding: 0 !important; /* Ensure border touches image */
    max-width: 100%; /* Safety for mobile */
    height: auto;
}

/* 3. Back to Top Widget */
#back-to-top {
    position: fixed;
    bottom: 88px;
    right: 30px;
    display: none;
    background: #6b5238;
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    z-index: 1000;
    border: 2px solid #fff;
    font-family: "Arial Black", Arial, sans-serif;
    font-weight: 900;
    font-size: 25px;
    line-height: 1;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

#back-to-top:hover {
    background: #5a422b;
    text-decoration: none;
}

/* --- Issue 2: Mobile Banner Styling --- */
@media (max-width: 600px) {
    header {
        height: 220px !important; /* Reduces total banner height on mobile */
    }
    header h1 {
        font-size: 1.8rem !important; /* Reduces large text size for mobile */
        letter-spacing: 1px !important;
        padding-top: 15px !important;
    }
    header p {
        font-size: 1.0rem !important; /* Reduces sub-head text size for mobile */
        padding: 5px 10px !important;
    }
}

/* --- Issue 1a & 4: Top Status Bar --- */
.top-status-bar {
    background-color: #f4f4f4;
    color: #666;
    font-size: 11px;
    text-align: left;           /* Issue 1a: Left justified */
    padding: 4px 0 4px 20px;    /* Issue 1a: 20px left buffer */
    border-bottom: 2px solid #000; /* Issue 4: 2px black border (Top of banner) */
    font-family: Arial, sans-serif;
}

/* --- Issue 5: Disclaimer Modal --- */
#disclaimer-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex; 
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-content {
    background: #fff;
    padding: 2rem;
    max-width: 600px;
    border-radius: 8px;
    text-align: center;
    border: 5px solid #c0392b; /* Red warning border */
}

.modal-btn {
    background: #27ae60;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 15px;
}

.modal-btn:hover { background: #2ecc71; }

/* --- Custom 2x2 Image Grid (Non-Bootstrap) --- */
.dtc-image-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px; /* Counteracts inner padding */
}

.dtc-grid-item {
    flex: 0 0 50%; /* 2 items per row by default */
    max-width: 50%;
    padding: 10px;
    box-sizing: border-box;
}

.dtc-grid-item figure {
    margin: 0 auto;
    width: 100%;
}

.dtc-grid-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile Tweak: On very small screens, keep it 2x2 but shrink text */
@media (max-width: 480px) {
    .dtc-grid-item figcaption {
        font-size: 0.75rem;
    }
}

/* --- Site Search Popup --- */
nav ul li.menu-search-item a.menu-search-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    text-decoration: none !important;
}

.menu-search-icon {
    display: block;
    color: currentColor;
}

.menu-search-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-search-modal[hidden] {
    display: none !important;
}

.site-search-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6rem 1rem 1rem;
    background: rgba(0, 0, 0, 0.55);
}

.site-search-dialog {
    position: relative;
    width: min(560px, 92vw);
    background: #fffaf0;
    border: 4px solid var(--patton-brown);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
    padding: 1.8rem 2rem;
}

.site-search-dialog h2 {
    margin-top: 0;
}

.site-search-close {
    position: absolute;
    top: 0.4rem;
    right: 0.55rem;
    border: 0;
    background: transparent;
    color: var(--patton-brown);
    cursor: pointer;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.site-search-form label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: bold;
}

.site-search-row {
    display: flex;
    gap: 0.5rem;
}

.site-search-row input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.65rem;
    border: 2px solid var(--patton-brown);
    border-radius: 6px;
    font-size: 1rem;
}

.site-search-row button {
    flex: 0 0 auto;
    padding: 0.65rem 1rem;
    border: 2px solid #3e2b19;
    border-radius: 6px;
    background: var(--patton-brown);
    color: #fff;
    cursor: pointer;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 0.95rem;
}

.site-search-row button:hover,
.site-search-row button:focus {
    background: #3e2b19;
}

.site-search-note {
    margin-bottom: 0;
    color: #5a422b;
    font-size: 0.9rem;
}

body.site-search-open {
    overflow: hidden;
}

.site-search-highlight {
    background: #fff176;
    color: #111;
    outline: 2px solid #a63704;
    scroll-margin-top: 8rem;
}

@media (max-width: 600px) {
    .site-search-modal {
        align-items: flex-start;
        padding-top: 4rem;
    }

    .site-search-row {
        flex-direction: column;
    }

    .site-search-row button {
        width: 100%;
    }
}