/* ==========================================================================
   ULTAMICA.CSS — THE MASTER TEXT & MEDIA CODE ENVELOPE
   ========================================================================== */

/* 1. Global Document Root (The Visual Base Layout) */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;         /* Base text scale */
  line-height: 1.6;        /* Generous line spacing for readable mobile files */
  color: #e2e8f0;          /* Soft crisp white text */
  background-color: #0f172a; /* Sleek slate-dark theme */
  padding: 24px;
  max-width: 680px;        /* Limits text line length so reading is comfortable */
  margin: 0 auto;          /* Centers your text column on desktop viewports */
}

/* 2. Heading Sections (h1 through h6) */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff;          /* Pure white headers to break up content sections */
  font-weight: 700;
  line-height: 1.25;
  margin-top: 24px;
  margin-bottom: 12px;
}

h1 { font-size: 2.25rem; border-bottom: 1px solid #334155; padding-bottom: 8px; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; text-transform: uppercase; color: #94a3b8; }

/* 3. Standard Text Blocks & Code Previews */
p {
  margin-top: 0;
  margin-bottom: 16px;
}

strong, b {
  color: #ffffff;          /* Makes bold words stand out brighter than paragraphs */
  font-weight: 600;
}

/* Monospace font blocks for reading raw .txt and .md data payloads */
pre, code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  background-color: #1e293b; /* Dark content panel drawer */
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 12px;
  white-space: pre-wrap;   /* Keeps text strings from clipping past mobile screen edges */
}

/* 4. Anchor Links & Clicking States */
a {
  color: #38bdf8;          /* High contrast sky-blue link color */
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}

a:visited {
  color: #a855f7;          /* Soft purple line indicator for paths already clicked */
}

a:hover, a:active {
  color: #7dd3fc;          /* Brilliant neon highlight when actively hovered or tapped */
  text-decoration-thickness: 2px;
}

/* 5. Interactive Buttons & Actions */
button {
  font-family: inherit;    /* Inherits your core system font setup */
  font-size: 16px;
  font-weight: 600;
  background-color: #38bdf8;
  color: #0f172a;          /* Dark font for immediate high visibility */
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.15s ease;
}

button:hover {
  background-color: #7dd3fc; /* Lightens up on contact touch */
}

button:focus-visible {
  outline: 3px solid #6366f1; /* High-visibility border ring for navigation accessibility */
}

/* 6. Document List Elements */
ul, ol {
  margin-top: 0;
  margin-bottom: 16px;
  padding-left: 24px;       /* Standard reading indentation */
}

li {
  margin-bottom: 8px;       /* Vertical padding cushion between individual bullet line rows */
}

/* 7. Media Elements & Connected Frames (Borders & Layout Containment) */
img, video, iframe {
  max-width: 100%;         /* Restricts large media blocks from leaking outside phone screens */
  height: auto;            /* Standard automatic aspect ratio scaling */
  display: block;          /* Wipes away the default 4px layout empty space gap underneath media tags */
  margin-bottom: 20px;     /* Uniform whitespace margin underneath content elements */
  box-sizing: border-box;  /* Locks border adjustments inside total structural dimensions */
}

img {
  border: 2px solid #334155; /* Slate-gray image border silhouette */
  border-radius: 8px;      /* Curved framing corners */
}

video {
  border: 2px solid #475569; /* Brighter border outline to separate media player windows */
  border-radius: 8px;
  background-color: #000000; /* Dark canvas frame background while file finishes loading */
}

audio {
  display: block;          /* Drops the player tracking capsule safely to its own row */
  margin-bottom: 20px;
  width: 100%;             /* Fills the layout width column nicely */
  max-width: 400px;        /* Limits length expansion on wider browser viewports */
  border: 2px solid #334155;
  border-radius: 28px;     /* Wraps perfectly around native pill-shaped mobile players */
}

iframe {
  width: 100%;             /* Stretches inline frames completely across your workspace columns */
  height: 450px;           /* Sturdy fallback view container resolution height */
  border: 2px solid #1e293b; /* Dark containment boundary for embedding sub-apps or outside files */
  border-radius: 12px;     /* Deep curve styling block */
}

/* 8. Native Submissions (Netlify Form Element Configurations) */
form[data-netlify="true"], form[netlify] {
  background-color: #16161a; /* Separate off-black container panel style card */
  border: 1px solid #242629;
  border-radius: 12px;
  padding: 32px;
  max-width: 480px;
  margin: 20px auto;
  display: flex;
  flex-direction: column; /* Input rows stack automatically below one another */
  gap: 20px;               /* Symmetrical vertical cushion between question fields */
}

form input[type="text"], 
form input[type="email"], 
form textarea {
  width: 100%;
  background-color: #010101;
  color: #fffffe;
  border: 2px solid #242629;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 16px;         /* Explicitly locks text at 16px to completely stop iOS safari auto-zoom shifts */
  box-sizing: border-box;  /* Completely protects inputs from expanding past layout rows */
}

form input:focus, 
form textarea:focus {
  border-color: #7f5af0;   /* Bright neon-purple focus state frame accent line */
  outline: none;
}

form button[type="submit"] {
  background-color: #7f5af0; /* Distinct form submit action button style track */
  color: #fffffe;
  border: none;
  border-radius: 6px;
  padding: 14px;
  font-size: 16px;
  font-weight: bold;
}

form button[type="submit"]:hover {
  background-color: #6246ea;
}