/* ============================================================================
   St-Takla.org - Coptic Links directory   (/Links/)
   Styling for the link tables only.  Works for both the English (LTR) and the
   Arabic (RTL) pages - everything uses logical properties, so the same rules
   flip automatically with dir="rtl".
   2026-08-20
   ========================================================================= */

.lnk-wrap{
  max-width:1120px;
  margin:22px auto 30px;
  text-align:start;
  -webkit-overflow-scrolling:touch;
}

.lnk-tbl{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid #dbe2ea;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(16,32,52,.07);
  font-family:"Segoe UI",Tahoma,"Traditional Arabic",Arial,sans-serif;
  font-size:15px;
  line-height:1.65;
  color:#22303f;
}

/* ---------- head ---------- */
.lnk-tbl thead th{
  background:#0d6e63;
  color:#fff;
  font-weight:600;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:start;
  padding:11px 14px;
  white-space:nowrap;
  border:0;
}
.lnk-tbl thead th:first-child{width:58px;text-align:center}

/* ---------- body ---------- */
.lnk-tbl td{
  padding:13px 14px;
  border-top:1px solid #e8edf3;
  vertical-align:top;
  text-align:start;
}
.lnk-tbl tbody tr:first-child td{border-top:0}
.lnk-tbl tbody tr:nth-child(even) td{background:#f7f9fb}
.lnk-tbl tbody tr:hover td{background:#eaf4f2}

.lnk-tbl td.lnk-n{                     /* the row number */
  width:58px;
  text-align:center;
  color:#0d6e63;
  font-weight:700;
  font-size:14px;
  white-space:nowrap;
}
.lnk-tbl td.lnk-t,
.lnk-tbl th.lnk-t{width:40%}
.lnk-tbl td.lnk-t{                     /* the site / church name */
  font-weight:600;
  color:#1b3d5c;
  min-width:170px;
}
.lnk-tbl td.lnk-u{                     /* the addresses */
  direction:ltr;                       /* they are English, even on the Arabic pages */
  overflow-wrap:anywhere;
  word-break:break-word;
  font-size:14px;
}

/* ---------- right-to-left tables ---------- */
.lnk-tbl[dir="rtl"] td,
.lnk-tbl[dir="rtl"] th{text-align:right}
.lnk-tbl[dir="rtl"] td.lnk-n,
.lnk-tbl[dir="rtl"] th.lnk-n,
.lnk-tbl[dir="rtl"] thead th:first-child{text-align:center}
/* the address column is English: it reads and lines up left to right, header included */
.lnk-tbl[dir="rtl"] td.lnk-u,
.lnk-tbl[dir="rtl"] th.lnk-u{text-align:left}

/* ---------- links ---------- */
.lnk-tbl a{
  color:#125ea8;
  text-decoration:none;
  border-bottom:1px solid rgba(18,94,168,.30);
}
.lnk-tbl a:hover,.lnk-tbl a:focus{color:#0a3d70;border-bottom-color:#0a3d70}
.lnk-tbl a[target="_blank"]::after{
  content:"\2197";                     /* small ↗ for links that leave the site */
  font-size:.78em;
  margin-inline-start:3px;
  opacity:.55;
  border:0;
}
.lnk-tbl td.lnk-t a{border-bottom:0}

/* dead addresses that were kept for the record */
.lnk-tbl strike,.lnk-tbl s,.lnk-tbl del{
  color:#93a1b0;
  text-decoration:line-through;
  text-decoration-color:#b9c4cf;
}

/* ---------- inner bits inherited from the old FrontPage markup ---------- */
.lnk-tbl ul{margin:0;padding-inline-start:20px;padding-inline-end:0}
.lnk-tbl li{margin:0 0 5px}
.lnk-tbl li:last-child{margin-bottom:0}
.lnk-tbl p{margin:0 0 6px}
.lnk-tbl p:last-child{margin-bottom:0}
.lnk-tbl img{max-width:100%;height:auto}

/* ---------- phones / narrow screens: one card per row ---------- */
@media (max-width:640px){
  .lnk-wrap{margin:16px auto 22px}
  .lnk-tbl{border:0;background:transparent;box-shadow:none;border-radius:0;font-size:15px}
  .lnk-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .lnk-tbl,.lnk-tbl tbody,.lnk-tbl tr,.lnk-tbl td{display:block;width:auto}
  .lnk-tbl tbody tr{
    background:#fff;
    border:1px solid #dbe2ea;
    border-radius:12px;
    box-shadow:0 1px 3px rgba(16,32,52,.07);
    margin:0 0 12px;
    padding:12px 14px;
  }
  .lnk-tbl tbody tr:nth-child(even) td:not(.lnk-n),
  .lnk-tbl tbody tr:hover td:not(.lnk-n){background:transparent}
  .lnk-tbl td{border:0;padding:0 0 8px}
  .lnk-tbl td:last-child{padding-bottom:0}
  .lnk-tbl td:empty{display:none}
  /* the extra tbody tr keeps this above the zebra rule for even rows */
  .lnk-tbl tbody tr td.lnk-n{
    display:inline-block;
    width:auto;
    min-width:24px;
    margin:0 0 8px;
    padding:2px 10px;
    border-radius:999px;
    background:#0d6e63;
    color:#fff;
    font-size:12.5px;
    text-align:center;
  }
  /* the desktop column widths must not survive here, or the name keeps its 40%
     of the card and breaks into a narrow ribbon of one or two words per line */
  .lnk-tbl tbody tr td.lnk-t,
  .lnk-tbl tbody tr td.lnk-u,
  .lnk-tbl tbody tr td{width:auto;max-width:none}
  .lnk-tbl td.lnk-t{font-size:16.5px;padding-bottom:7px;min-width:0}
  .lnk-tbl td[data-l]::before{
    content:attr(data-l) ": ";
    font-weight:600;
    color:#5b6b7c;
  }
  /* first column of a table that has its own header row: show it as a badge too */
  .lnk-tbl tbody tr td:first-child[data-l]{
    display:inline-block;
    width:auto;
    min-width:24px;
    margin:0 0 8px;
    padding:2px 10px;
    border-radius:999px;
    background:#0d6e63;
    color:#fff;
    font-size:12.5px;
    text-align:center;
  }
  .lnk-tbl tbody tr td:first-child[data-l]::before{content:""}
}

/* very small phones: let long addresses shrink a little instead of overflowing */
@media (max-width:380px){
  .lnk-tbl td.lnk-u{font-size:13px}
}

/* ---------- printing ---------- */
@media print{
  .lnk-tbl{box-shadow:none;border-color:#999}
  .lnk-tbl thead th{background:#eee;color:#000}
  .lnk-tbl a{color:#000;border:0}
  .lnk-tbl a[target="_blank"]::after{content:""}
}