/**
 * Keynote Section Breakdown Tables
 *
 * Styles for the `.keynote-table` component used in keynote summary posts
 * to display timestamped YouTube segments with titles and descriptions.
 *
 * Structure:
 *   <table class="keynote-table">
 *     <tr class="keynote-title"><td><a href="...">Title</a> <em>· duration</em></td></tr>
 *     <tr class="keynote-content"><td>Description text...</td></tr>
 *     ...
 *   </table>
 *
 * Usage:
 *   Add `extra_css: ["/assets/css/keynote-table.css"]` to a post's front matter
 *   to load this file. It is intentionally not included globally.
 *
 * Design:
 *   - Card style: navy border (#3d4a7a), rounded corners, subtle drop shadow
 *   - Title rows: light blue-grey bg (#f0f2f8), dark navy text (#2c3460)
 *   - Title links: no underline; YouTube icon appended via ::after SVG
 *   - Content rows: off-white bg (#fafafa), relaxed line height
 */

/* Keynote section breakdown tables */
.keynote-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 36px 0;
  font-size: 0.95em;
  border: 3px solid #3d4a7a;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(61, 74, 122, 0.25);
}

.keynote-table td {
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid #e0e4f0;
  vertical-align: top;
}

.keynote-table tr:last-child td {
  border-bottom: none;
}

.keynote-table tr.keynote-title td {
  background-color: #f0f2f8;
  color: #2c3460;
  font-weight: 600;
  border-bottom: 1px solid #c8cce0;
  padding: 5px 12px;
}

.keynote-table tr.keynote-title td a {
  color: #2c3460;
  text-decoration: none;
}

.keynote-table tr.keynote-title td a::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 14px;
  margin-left: 9px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 17'%3E%3Crect width='24' height='17' rx='4' fill='%23cc2222'/%3E%3Cpolygon points='9.5,3.5 9.5,13.5 18,8.5' fill='%23fff'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
}

.keynote-table tr.keynote-title td a:hover {
  text-decoration: none;
  color: #3d4a7a;
}

.keynote-table tr.keynote-title td em {
  color: #6677aa;
  font-style: italic;
  font-weight: 400;
}

.keynote-table tr.keynote-content td {
  background-color: #fafafa;
  color: #333;
  line-height: 1.55;
}

.keynote-table tr.keynote-content td img {
  margin: 10px auto 4px auto;
}