/* =============================================================================
  GLOBAL VARIABLE ARCHITECTURE
  Defining the core color palette and layout constants for the ARPANET environment.
  =============================================================================
*/
:root {
  --primary-bg: #0f1c24;           /* Deep dark blue-gray base */
  --accent-cyan: #00e0d6;         /* Signature ARPANET glowing cyan */
  --secondary-bg: rgba(22, 36, 44, 0.9); /* Translucent panel background */
  --border-subtle: #2f4956;       /* Soft blue-gray for borders */
  --text-main: #ddd;               /* Light gray for high readability */
  --transition-speed: 1s;         /* Standard speed for opacity shifts */
  --glow-shadow: 0 0 15px #00e0d6; /* Neon glow effect for buttons */
}

/* RULE 5: SEMANTIC CSS - Avoiding generic tags.
  Every block is defined by its functional name within the site architecture.
*/

/* --- 1. GLOBAL LAYOUT --- */
* { 
  box-sizing: border-box; 
}

.arpanet-main-body {
  margin: 0; 
  padding: 0;
  background-color: var(--primary-bg);
  background-image: url("images/digitalmesh.png");
  background-repeat: repeat;
  font-family: Arial, sans-serif;
  color: var(--text-main);
  overflow-x: hidden;
}

/* --- 2. SPLASH OVERLAY (INTRO) --- */
.arpanet-overlay-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-speed) ease-in-out;
}

.arpanet-video-full-frame { 
  width: 100%; 
  height: 100%; 
}

.arpanet-skip-control {
  position: absolute;
  bottom: 30px; right: 30px;
  background: rgba(0, 224, 214, 0.2);
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  padding: 10px 20px;
  cursor: pointer;
  z-index: 10000;
  text-transform: uppercase;
  font-size: 0.8em;
}

/* --- 3. HEADER & BRANDING --- */
.arpanet-header-flex {
  display: flex;
  min-height: 25vh;
  border-bottom: 2px solid var(--accent-cyan);
  background: rgba(15, 28, 36, 0.9);
}

.arpanet-branding-box { 
  flex: 1.5; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 10px; 
}

.arpanet-logo-img { 
  max-height: 20vh; 
  width: auto; 
}

.arpanet-intro-text { 
  flex: 1.5; 
  padding: 20px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  font-style: italic; 
  color: var(--accent-cyan);
  border-left: 1px solid var(--border-subtle); 
  font-size: 1.1em;
}

/* --- 4. SUPPORT & QR SECTION --- */
.arpanet-support-column { 
  flex: 1; 
  padding: 15px; 
  background: var(--secondary-bg); 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  gap: 8px; 
  border-left: 1px solid var(--border-subtle);
}

.arpanet-qr-item { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  border: 1px solid var(--accent-cyan); 
  padding: 5px; 
  border-radius: 5px; 
}

.arpanet-qr-icon { 
  width: 40px; 
  height: 40px; 
}

.arpanet-qr-label { 
  font-size: 0.8em; 
}

.arpanet-accent-link { 
  color: var(--accent-cyan); 
  text-decoration: none; 
}

/* --- 5. INTERACTION & FORM --- */
.arpanet-content-grid {
  display: flex; 
  gap: 30px; 
  max-width: 1400px; 
  margin: 40px auto; 
  padding: 0 20px;
}

.arpanet-video-container { 
  flex: 1.2; 
  background: rgba(22, 36, 44, 0.5); 
  padding: 20px; 
  border: 1px solid var(--border-subtle); 
  border-radius: 10px; 
}

.arpanet-responsive-video { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  border: 2px solid var(--accent-cyan); 
  background: #000; 
}

.arpanet-responsive-video iframe { 
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; 
  height: 100%; 
}

.arpanet-form-container { 
  flex: 1; 
  background: var(--secondary-bg); 
  padding: 25px; 
  border: 2px solid var(--accent-cyan); 
  border-radius: 8px;
}

.arpanet-form-title {
  margin: 0;
  color: var(--accent-cyan);
}

.arpanet-input-field, .arpanet-text-area { 
  width: 100%; 
  padding: 12px; 
  margin: 10px 0; 
  background: var(--primary-bg); 
  border: 1px solid var(--border-subtle); 
  color: white; 
}

.arpanet-submit-action { 
  background: var(--accent-cyan); 
  color: var(--primary-bg); 
  border: none; 
  padding: 15px; 
  font-weight: bold; 
  width: 100%; 
  cursor: pointer; 
}

/* --- 6. NAVIGATION HUB (FORK) --- */
.arpanet-navigation-hub { 
  max-width: 1200px; 
  margin: 20px auto; 
  padding: 0 20px 60px 20px; 
}

.arpanet-dual-column { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 30px; 
}

.arpanet-nav-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center; 
}

.arpanet-nav-button {
  display: block;
  width: 100%;
  max-width: 380px;
  padding: 12px;
  background: rgba(0, 224, 214, 0.1);
  border: 2px solid var(--accent-cyan);
  color: var(--accent-cyan);
  text-decoration: none;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.3s ease;
  border-radius: 4px;
}

.arpanet-nav-button:hover {
  background: var(--accent-cyan);
  color: var(--primary-bg);
  box-shadow: var(--glow-shadow);
}

.arpanet-video-loop-window {
  position: relative;
  width: 100%;
  max-width: 380px; 
  padding-bottom: 56.25%; 
  height: 0;
  border: 2px solid var(--border-subtle);
  background: #000;
  overflow: hidden;
  border-radius: 8px;
}

.arpanet-video-loop-window iframe {
  position: absolute;
  top: -50%; 
  left: 0;
  width: 100%;
  height: 200%; 
  pointer-events: none;
}

/* --- MOBILE RESPONSIVITY --- */
@media (max-width: 1000px) {
  .arpanet-header-flex { flex-direction: column; height: auto; }
  .arpanet-intro-text { display: none; }
  .arpanet-support-column { border-left: none; border-top: 1px solid var(--border-subtle); }
  .arpanet-content-grid { flex-direction: column; }
  .arpanet-dual-column { grid-template-columns: 1fr; }
}