/* =========================================
   GLOBAL THEME — MSDS Demo
   This section defines the color palette and basic theme elements for the entire site.
   By defining these as CSS variables, you can easily change them in one place and have it
   update across the entire site.
========================================= */
:root {
  /* --gold: #d4af37; - A strong, primary gold color. */
  --gold: #d4af37;
  /* --gold-light: #ffe8a8; - A lighter, softer gold, often used for text. */
  --gold-light: #ffe8a8;
  /* --parchment: #f3ecd8; - A background color that resembles parchment paper. */
  --parchment: #f3ecd8;

  /* --deep-blue: #0c1a2e; - A very dark blue, almost black. */
  --deep-blue: #0c1a2e;
  /* --mid-blue: #17314d; - A medium-dark blue. */
  --mid-blue: #17314d;
  /* --bg2: #17314d; - A secondary background color, mapped to mid-blue. */
  --bg2: #17314d;
  /* --ink: #f3ecd8; - A color for text, mapped to parchment. */
  --ink: #f3ecd8;

  /* --radius: 12px; - A standard border radius for rounded corners. */
  --radius: 12px;
  /* --shadow: 0 10px 30px rgba(0,0,0,.35); - A standard box shadow. */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* =========================================
   Reset
   This resets the default browser styles for all elements. This ensures a consistent
   look across different browsers.
========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ======================================================
   Background + Typography
   This section sets the basic styles for the body of the page, including the font,
   text color, and background.
   ADJUSTMENT: To add more space between the browser window wall and the main panel,
   you can increase the 'padding' value here. For example, 'padding: 5rem;'
====================================================== */
body {
  /* font-family: 'Cormorant Garamond', serif; - Sets the font for the page. */
  font-family: 'Cormorant Garamond', serif;
  /* color: var(--gold-light); - Sets the default text color. */
  color: var(--gold-light);
  /* background: ...; - Sets a radial gradient for the background. */
  background: radial-gradient(circle, #1a2a3a 0%, #0a131f 90%);
  /* min-height: 100vh; - Ensures the body takes up at least the full height of the viewport. */
  min-height: 100vh;
  /* padding: 5rem; - Adds padding around the entire page content. Increased from 2.5rem */
  padding: 5rem;
  /* display: flex; ... - These properties center the content on the page. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ======================================================
   Headings
   This section styles the h1 and h2 headings.
   ADJUSTMENT: You can change the 'font-family', 'font-size', 'color', and 'text-shadow'
   to alter the appearance of the headings.
====================================================== */
h1, h2 {
  font-family: 'Cinzel Decorative', serif;
  text-shadow:
    0 0 12px rgba(255,215,100,0.5),
    0 0 24px rgba(200,155,60,0.35);
}

h1 {
  color: #000; /* This will be overwritten by the body text-shadow for main header*/
  font-size: 3.2rem;
  text-shadow:
    0 0 10px rgba(255,215,100,1),
    0 0 25px rgba(230,190,60,0.9),
    0 0 45px rgba(200,155,40,0.75),
    0 0 60px rgba(160,120,30,0.5);
}

h2 {
  font-size: 1.55rem;
  color: var(--gold);
  margin-bottom: 1.4rem;
}

/* ======================================================
   Paragraphs
   This section styles the explanation text and lists.
   ADJUSTMENT: You can change 'font-size', 'color', 'line-height', etc.
====================================================== */
p.explanation ol {
    padding-left: 20px; /* Indent the list */
    margin-bottom: 1rem;
}

p.explanation ol li {
    text-align: left; /* Ensure list items are left aligned */
    margin-bottom: 0.5rem; /* Space between list items */
    margin-left: 0;
    max-width: 100%;
}

/* Specific styling for the explanation paragraph to make it left aligned and fit the panel */
p.explanation {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

/* ======================================================
   Button Stack
   This is for vertically stacked navigation buttons.
====================================================== */
.nav-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 700px;
  margin-top: 2rem;
}

.nav-stack .btn {
  width: 100%;
}

/* ======================================================
   Base Button (ALL buttons share this)
   This defines the default style for all buttons.
   ADJUSTMENT: To change the button appearance, you can modify properties like
   'background', 'border-radius', 'color', 'font-size', etc.
====================================================== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 50px; /* Reduced height */
  padding: 0.5rem 1rem; /* Reduced padding */

  background: rgba(10, 35, 60, 0.85);
  border-radius: 1.5rem;
  border: 1px solid rgba(212,175,55,0.4);

  color: #e9dba8;
  text-decoration: none;
  font-size: 1.1rem; /* Reduced font size */
  font-weight: 600;

  transition: 0.2s ease;
}

/* Added margin-top specifically for the analyze button */
.form-section .btn {
  margin-top: 1rem;
}

.btn:hover {
  background: rgba(10, 35, 60, 1);
  transform: translateY(-2px);
}

/* This is an override for smaller buttons, often used in footers. */
.footer-controls .btn {
    height: auto;
    font-size: 1rem;
    display: inline-flex;
    width: auto;
    margin: 0.5rem;
    border-radius: 12px;
}

/* ======================================================
   Site Header
   Styles for the main site header and navigation links.
====================================================== */
.site-header-main {
  width: 100%;
  padding: 1rem 0;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.nav-link {
  color: var(--gold-light);
  text-decoration: none;
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.2rem;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--gold);
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

/* ======================================================
   Footer
   Styles for the site footer.
====================================================== */
.site-footer {
  margin-top: 4rem;
  padding: 1.5rem 1rem;
  border-top: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(0, 0, 0, 0.35);
  color: #f5eedb;
  font-family: 'Cormorant Garamond', serif;
}

.footer-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.footer-line a {
  text-decoration: none;
  font-weight: 600;
  color: #d4af37;
}

.footer-line a:hover {
  text-decoration: underline;
}

.name-gaelic {
  font-weight: 600;
  letter-spacing: 0.03em;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: var(--gold-light);
  text-decoration: none;
  font-family: 'Cinzel Decorative', serif;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.social-links a:hover {
  background: var(--gold);
  color: var(--deep-green); /* defined? fallback to inherit or specific color if needed */
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* ======================================================
   Activity / Form Components
   These styles are for interactive elements like forms and dropdowns.
====================================================== */
/* This is for a collapsible/expandable section. */
.board-member {
  width: 100%;
  max-width: 850px;
  margin: 1.5rem auto;
  background: rgba(12, 26, 46, 0.4);
  border: 1px solid var(--gold); /* Outlined */
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  backdrop-filter: blur(3px);
  transition: all 0.3s ease;
}

.board-member summary {
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--gold-light);
  padding: 1rem 1.5rem;
  list-style: none;
  text-align: left;
  background: rgba(212, 175, 55, 0.1);
}

.board-member summary::-webkit-details-marker {
  display: none;
}

.board-member summary::after {
  content: "▾";
  float: right;
  font-size: 1.2rem;
  color: var(--gold-light);
  transition: transform 0.25s ease;
}

.board-member[open] summary {
    border-bottom: 1px solid rgba(212,175,55,0.4);
}

.board-member[open] summary::after {
  transform: rotate(-180deg);
}

.member-content {
  text-align: left; /* Left justified content */
  padding: 1.5rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--gold-light);
}

.member-content p, 
.member-content ul, 
.member-content li {
    text-align: left !important;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    margin-bottom: 1.2rem;
}

.member-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    color: var(--gold);
    font-family: 'Cinzel Decorative', serif;
}

.member-content ul {
    padding-left: 1.5rem;
}

/* ======================================================
   Panels
   This styles the main content container.
   ADJUSTMENT: Increase the 'padding' to add more space between the content and the
   edges of the panel. For example, 'padding: 3rem;'.
====================================================== */
.panel {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 16px;
  padding: 2rem 2.5rem; /* Increased padding */
  box-shadow: var(--shadow);
  margin-bottom: 2rem;
  text-align: left; /* Activities usually need left alignment in panels */
}

.panel h2 {
    text-align: center;
}

/* ======================================================
   Form Elements
   This styles the text boxes and labels.
   ADJUSTMENT: You can change 'min-height', 'font-size', 'padding', 'border-radius',
   'background', and 'color' to customize the form fields.
====================================================== */
input[type="text"],
textarea {
  width: 100%;
  min-height: 40px; /* Adjusted min-height for input type text */
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  padding: .75rem;
  border-radius: 10px;
  border: 1px solid rgba(212,175,55,.35);
  background: rgba(0,0,0,.25);
  color: var(--gold-light);
  margin-top: 0.5rem; /* Added margin-top for form elements */
}

textarea {
  min-height: 120px;
}

textarea:focus,
input[type="text"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

label {
    display: block;
    margin-top: 1.1rem;
    font-weight: 600;
    color: var(--gold);
    text-align: left;
}

/* ======================================================
   Floating Buttons
   These are for buttons that are fixed to the corners of the screen.
====================================================== */
.back-btn {
  position: fixed; top: .75rem; left: .75rem;
  padding: .45rem 1rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--gold);
  border-radius: 10px;
  color: var(--gold-light);
  z-index: 1000;
  text-decoration: none;
}

.translate-btn {
  position: fixed; top: .75rem; right: .75rem;
  padding: .35rem .9rem;
  background: var(--mid-blue);
  border: 1px solid var(--gold);
  border-radius: 10px;
  color: var(--gold);
  z-index: 1000;
  cursor: pointer;
}

.save-draft-btn-fixed {
  position: fixed; bottom: .75rem; right: .75rem;
  padding: .6rem 1.25rem;
  background: rgba(10, 35, 60, 0.9);
  border: 1px solid rgba(212,175,55,0.6);
  border-radius: 12px;
  color: var(--gold-light);
  z-index: 1000;
  cursor: pointer;
  font-size: 1rem;
}

/* ======================================================
   Language Toggles
   These styles are for a language toggle feature.
====================================================== */
body.lang-es .spanish { display: block; opacity: 1; }
body.lang-es .english { display: none; }
.spanish { display: none; opacity: 0; }

/* ======================================================
   Status & Warning
   These styles are for status messages and warnings.
====================================================== */
.warning {
  text-align: center;
  max-width: 900px;
  margin: 4.5rem auto 1rem;
  padding: .75rem 1rem;
  background: rgba(10, 35, 60, 0.9);
  border: 1px solid rgba(212,175,55,0.5);
  border-radius: 12px;
  font-weight: 600;
  color: #ffdb70;
}

#status {
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.9;
    color: #9fd39f; /* Keep a hint of green for status success if desired, or change to gold */
}

/* ======================================================
   Library Elements
   These are styles for specific library-related components.
====================================================== */
img.library-shot {
  display: block;
  margin: 1.25rem auto;
  width: 100%;
  max-width: 260px;
  border-radius: 10px;
  border: 1px solid rgba(212,175,55,0.5);
  box-shadow: var(--shadow);
}

.library-card-box {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: rgba(15, 23, 42, 0.3); /* dark blue tint */
}

.library-card-input {
  display: block;
  margin-top: 0.25rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(148, 163, 184, 0.7);
  font-size: 0.95rem;
  max-width: 260px;
  background: #0f1c2e;
  color: #fff;
}

/* This highlights fields that have unsaved changes. */
.unsaved {
  border: 2px solid rgba(212,175,55,0.8) !important;
  background: rgba(212,175,55,0.10) !important;
}

/* A wrapper for footer controls. */
.footer-controls {
  text-align: center;
  margin: 3rem auto 5rem;
}

/* ======================================================
   Splash / Fade-In Landing Screen
   These styles create a splash screen that fades out on page load.
====================================================== */
#splash-screen {
  position: fixed;
  inset: 0;
  background: rgba(12, 26, 46, 0.92); /* deep blue overlay */
  color: var(--gold-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  font-family: 'Cinzel Decorative', serif;
  text-align: center;
  animation: fadeOut 2.8s ease forwards;
  pointer-events: none;
}

#splash-screen h1 {
  font-size: 3rem;
  margin-bottom: 0.6rem;
}

#splash-screen p {
  font-size: 1.3rem;
  opacity: 0.9;
}

@keyframes fadeOut {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

#main-content {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#main-content.fade-in {
  opacity: 1;
}

.logo-container {
  text-align: center;
  margin: 2rem 0;
}

.logo {
  max-width: 240px;
  width: 100%;
  height: auto;
}

.btn-sub {
  font-size: 0.9rem;
  font-weight: 400;
  margin-top: 0.2rem;
  opacity: 0.85;
  color: var(--gold-light);
}

/* ======================================================
   Word Wrapping for Preformatted Text
   This ensures that JSON output and system prompts wrap within their containers.
====================================================== */
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

/* ======================================================
   Label Row & Counts
   Used for displaying word/token counts next to labels.
====================================================== */
.label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1.1rem;
}

.label-row label {
  margin-top: 0;
}

.counts {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  color: var(--gold-light);
  opacity: 0.7;
  font-weight: 400;
}