/* ===== General Styles ===== */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial; }
html,body { height: 100%; }
body {
  display: flex;
  background-color: #f0f2f5;
  color: #222;
  line-height: 1.4;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: #007bff;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  z-index: 2000;
}

/* ===== Main Container ===== */
.main-container {
  flex: 1;
  padding: 2rem;
  max-width: 1100px;
  margin-left: 240px;
}

/* ===== Side Menu ===== */
.side-menu {
  position: fixed;
  left: 0;
  top: 0;
  width: 220px;
  height: 100%;
  background-color: #343a40;
  color: #fff;
  padding: 1rem;
  overflow-y: auto;
  transition: transform 0.28s ease, visibility 0.28s;
  transform: translateX(0);
  z-index: 1000;
}
.side-menu h3 { margin-bottom: 1rem; font-size: 1.1rem; }
.side-menu ul { list-style: none; }
.side-menu ul li { margin: 0.4rem 0; }
.side-menu ul li a { color: #f8f9fa; text-decoration: none; display: inline-block; padding: 0.15rem 0.25rem; border-radius: 3px; }
.side-menu ul li a:hover, .side-menu ul li a:focus { background: rgba(255,255,255,0.04); outline: none; }

/* hidden state for small screens */
.side-menu.hidden { transform: translateX(-110%); visibility: hidden; }

/* ===== Menu Toggle ===== */
.menu-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1100;
  background-color: #007bff;
  color: white;
  border: none;
  padding: 0.45rem 0.85rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
}
.menu-toggle:focus { outline: 3px solid rgba(0,123,255,0.3); }

@media (max-width: 920px) {
  .menu-toggle { display: block; }
  .side-menu { transform: translateX(-110%); visibility: hidden; }
  .side-menu.visible { transform: translateX(0); visibility: visible; }
  .main-container { margin-left: 0; padding: 1rem; }
}

/* ===== Section Styles ===== */
section {
  background-color: #fff;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
section h2 {
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  border-left: 4px solid #007bff;
  padding-left: 0.6rem;
}
.theory {
  background-color: #e9f3ff;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border-left: 4px solid #007bff;
  border-radius: 4px;
}
.message {
  background-color: #fff8c4;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  border-left: 4px solid #ffc107;
  border-radius: 4px;
  font-weight: 600;
}

/* ===== Inputs & Buttons ===== */
label { display:block; margin-bottom:0.25rem; font-weight:600; }
input, select, textarea, button {
  width: 100%;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}
input:focus, select:focus, button:focus, textarea:focus {
  outline: 3px solid rgba(0,123,255,0.18);
  border-color: #007bff;
}
button {
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background 0.22s ease;
  border: none;
}
button:hover { background-color: #0056b3; }

/* small inline buttons */
button.inline { width: auto; display: inline-block; }

/* ===== Modal Styles ===== */
.modal {
  display: none;
  position: fixed;
  z-index: 1500;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
  align-items: center; justify-content: center;
}
.modal[aria-hidden="false"] { display:flex; }
.modal-content {
  background-color: #fff;
  padding: 1rem;
  border-radius: 8px;
  width: 90%;
  max-width: 520px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.closeModal, #advCloseModal { position:absolute; top:0.5rem; right:0.6rem; font-size:1.25rem; background:transparent; border:none; cursor:pointer; }

/* ===== Media Elements ===== */
img, video, audio, canvas { max-width: 100%; margin-bottom: 0.75rem; border-radius: 6px; }

/* ===== Toggle Div ===== */
#toggleDiv { background-color: #d1ffd1; padding: 0.6rem; margin-top: 0.5rem; border-radius: 6px; }

/* ===== Shadow DOM Example ===== */
#shadowHost, #shadowAdvHost { margin-top: 1rem; padding: 0.5rem; border: 1px solid #007bff; border-radius: 6px; }

/* ===== Suggestion List ===== */
#suggestionsList {
  list-style: none;
  padding: 0.25rem;
  border: 1px solid #ccc;
  max-width: 320px;
  display: none;
  background: #fff;
  margin-top: -0.5rem;
}
#suggestionsList[aria-expanded="true"] { display: block; }
#suggestionsList li { padding: 0.35rem 0.5rem; cursor: pointer; border-radius: 4px; }
#suggestionsList li:hover, #suggestionsList li:focus { background-color: #e9f3ff; outline:none; }

/* ===== Drag & Drop ===== */
#dragItem { cursor: grab; text-align: center; line-height: 50px; background: #007bff; color:#fff; border-radius: 6px; padding: 0.5rem; width: 140px; }
#dropZone { text-align: center; line-height: 80px; border: 2px dashed #333; border-radius: 8px; padding: 0.5rem; margin-top:0.75rem; min-height:80px; }

/* ===== Table Styles ===== */
table { border-collapse: collapse; width: 100%; }
table th, table td { padding: 0.6rem; text-align: left; border-bottom: 1px solid #eee; }

/* ===== Tooltip Text ===== */
.tooltip-text { display:none; margin-left:0.5rem; background:#222; color:#fff; padding:0.25rem 0.5rem; border-radius:4px; }
.tooltip-text[aria-hidden="false"] { display:inline-block; }

/* ===== Utility classes ===== */
.hidden { display: none !important; }
.noscript-warning { background: #ffe6e6; color: #800; padding: 0.6rem; margin: 1rem 0; border-radius: 6px; }

/* small screens adjustments */
@media (max-width: 520px) {
  .main-container { padding: 0.8rem; }
  #dragItem { width: 100%; }
}