@charset "UTF-8";
/* CSS Document */
/* Base */
:root{
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --accent: #334155;
  --brand: #1e293b;
  --link: #0ea5e9;
  --border: #e2e8f0;
  --radius: 12px;
  --space: clamp(12px, 2.2vw, 24px);
  --maxw: 1120px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 24px rgba(2,6,23,.06);
}
*{box-sizing:border-box}
body{
  margin:0;
  font: 500 16px/1.6 system-ui, sans-serif;
  color:var(--text);
  background:var(--bg);
}
a{color:var(--link); text-decoration: none}
a:hover{text-decoration: underline}
.container{max-width:var(--maxw); margin:auto; padding-inline:var(--space)}

/* Header */
.site-header{
  border-bottom:1px solid var(--border);
  background: var(--bg);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 10px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand__logo{
  width:100px; height:100px; border-radius:8px;
  /*background: url("images/em_logo.png");
  background: radial-gradient(circle, var(--link), var(--brand));*/
  display:grid; place-items:center;
}
.brand__wordmark{font-weight:700; color:var(--brand); font-size:20px;}

/* Nav */
nav ul{display:flex; list-style:none; gap:20px; margin:0; padding:0;}
nav a{color:var(--accent); padding:8px; border-radius:6px;}
nav a:hover{background:var(--border);}
.menu-toggle{display:none;}
.menu-button{display:none;}
@media(max-width:720px){
  nav ul{display:none; flex-direction:column;}
  .menu-button{display:block;}
  .menu-toggle:checked + .menu-button + nav ul{display:flex;}
}

/* Hero */
.hero{
  padding-block:40px;
  background: #f8fafc;
}
.hero h1{margin:0; font-size:2.5rem;}
.hero p{color:var(--muted);}

/* Sections */
.section{padding-block:40px;}
.card{
  background:var(--bg);
  padding:20px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Library Grid */
.library-grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}
.library-item{
  text-align:center;
}
.library-item img{
  width:100%;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.library-item p{margin-top:8px; font-weight:500;}

/* Footer */
.site-footer{
  padding-block:20px;
  border-top:1px solid var(--border);
  color:var(--muted);
}
.address{font-style:normal;}

/* Modal */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.6);
  display:flex; justify-content:center; align-items:center;
  opacity:0; pointer-events:none; transition:opacity 0.3s ease;
}
.modal.show{opacity:1; pointer-events:auto;}
.modal-content{
  background:var(--bg); border-radius:var(--radius); padding:20px;
  max-width:400px; width:90%; text-align:center;
}
.modal-content img{width:100%; border-radius:var(--radius);}
.modal-close{
  background:none; border:none; font-size:1.5rem; cursor:pointer;
  position:absolute; top:10px; right:15px; color:var(--accent);
}

/* Modal navigation */
.modal-nav {
  display:flex;
  justify-content:space-between;
  margin-top:15px;
}
.modal-nav button {
  background: var(--link);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s;
}
.modal-nav button:hover {
  background: #0284c7; /* darker blue */
}

/* Add smooth transition when swiping (optional) */
.modal-content {
  transition: transform 0.2s ease-in-out;
}

/* ==== Responsive Table Wrapper (Centered) ==== */
.table-container {
  width: 100%;
  max-width: 100%;                  /* prevent edge overflow */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  display: flex;
  justify-content: center;         /* keeps table centered inside */
  padding: 1rem;
  box-sizing: border-box;
}

.table-container table {
  border-collapse: collapse;
  font-size: 1rem;
  background-color: #fff;
  /*color: #fff;*/
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);

  max-width: 100%;
  min-width: 300px;
}

/* Header */
.table-container thead {
  background: #333;
}

.table-container th,
.table-container td {
  padding: 1rem;
  text-align: left;
  white-space: nowrap;
  border-left: 3px solid #ccc;
}

.table-container th {
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /*border-bottom: 2px solid #444;*/
}

/* Row styling */
.table-container tr {
  border-bottom: 1px solid #333;
  transition: background 0.3s;
}
.table-container tr:nth-child(even) {
  background: #fff;
}
.table-container tr:hover {
  /*background: #444;*/
}

/* Rounded corners */
.table-container tr:first-child th:first-child {
  border-top-left-radius: 10px;
}
.table-container tr:first-child th:last-child {
  border-top-right-radius: 10px;
}
.table-container tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}
.table-container tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

/* ==== Responsive Adjustments ==== */
@media (max-width: var(--maxw)) {
  .table-container table {
    font-size: 0.9rem;
  }
  .table-container th,
  .table-container td {
    padding: 0.6rem;
  }
}