/* ==========================================================
   EyeOnOconee — Clean Base + Map Gallery + News Table
   ========================================================== */

/* ===== Base ===== */
:root{
  --maxw:1100px;
  --pad:16px;
  --radius:16px;

  --pagebg:#f6f7f9;
  --cardbg:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --brand:#fb923c;

  /* table accents */
  --card-border:#e6e8ee;
  --row-zebra:rgba(0,0,0,.02);
  --row-hover:rgba(0,0,0,.04);
  --link:#0a58ca;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica;
  color:var(--ink); background:var(--pagebg);
}
a{ color:var(--link); text-decoration:none; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

/* ===== Header / Footer ===== */
header.site-header{ background:#fff; border-bottom:1px solid #e6e6e6; }
header.site-header .wrap, main, footer.site-footer .wrap{
  max-width:var(--maxw); margin:0 auto; padding:var(--pad);
}
nav a{ margin-right:14px; }

.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand .logo{ width:28px; height:28px; background:var(--brand); border-radius:8px; display:inline-block; }
.brand .name{ font-weight:700; letter-spacing:.2px; }

footer.site-footer{ text-align:center; padding:1rem 0; font-size:.9rem; color:var(--muted); }

/* ===== Section Head & Buttons ===== */
.section-head{ display:flex; align-items:center; justify-content:space-between; margin:1rem 0 .75rem; }
.section-head h2{ margin:0; }
.btn{
  display:inline-block; padding:.5rem .9rem; border-radius:999px;
  border:1px solid #d0d6f4; background:#fff;
}
.btn:hover{ background:#f0f0f0; }

/* ===== Generic Cards (home/news) ===== */
.card{
  background:var(--cardbg); border-radius:14px; padding:16px 22px; margin:10px 0;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.card h2{ font-size:1.1rem; font-weight:700; color:var(--ink); margin:0 0 6px 0; }
.card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.card li{ line-height:1.4; font-weight:550; }
.card a{ transition:color .2s ease; }
.card a:hover{ color:var(--brand); text-decoration:underline; }
.card .muted{ color:var(--muted); font-size:.92rem; }

/* ===== Map Gallery ===== */
.grid{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.grid .card{
  background:#fff; color:#0f172a; border-radius:16px;
  width:clamp(320px,46%,620px); padding:16px; box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.grid .card img{ display:block; width:100%; height:auto; border-radius:8px; }
.grid .card .caption{ margin-top:.6rem; font-weight:600; line-height:1.35; color:#0f172a; }
.grid .card .card-body{ margin-top:.35rem; }
.grid .card h3{ margin:.25rem 0 0; font-size:1.25rem; font-weight:800; color:#0f172a; }

/* Single column on phones */
@media (max-width:700px){
  .grid .card{ width:92%; }
  .section-head{ flex-direction:column; gap:.5rem; }
}

/* ===== News Table ===== */
.table-wrap{
  background:var(--cardbg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  overflow:hidden;               /* keeps rounded corners on table */
  position:relative; z-index:1;  /* ensure no overlay blocks clicks */
}
.table-wrap::before,.table-wrap::after{ pointer-events:none; }

#news-table{ width:100%; border-collapse:separate; border-spacing:0; }
#news-table th,#news-table td{
  padding:.9rem 1rem; border-bottom:1px solid rgba(0,0,0,.06);
  overflow:visible; white-space:normal; word-break:break-word;
}
#news-table thead th{ background:#f3f5fb; font-weight:700; }
#news-table tbody tr:nth-child(even){ background:var(--row-zebra); }
#news-table tbody tr:hover{ background:var(--row-hover); }

#news-table a{ color:var(--link); text-decoration:underline; font-weight:600; }
#news-table a:focus{ outline:2px solid var(--link); outline-offset:2px; }

/* --- Mobile: keep Link/Archive visible & allow horizontal scroll --- */
@media (max-width:760px){
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #news-table{ min-width:720px; } /* prevents Chrome from collapsing 4th/5th cols */

  /* force columns 4 & 5 to stay visible */
  #news-table th:nth-child(4),
  #news-table td:nth-child(4),
  #news-table th:nth-child(5),
  #news-table td:nth-child(5){
    display:table-cell !important; visibility:visible !important; opacity:1 !important;
  }

  #news-table th,#news-table td{ padding:.65rem .75rem !important; }
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme:dark){
  :root{
    --pagebg:#0e1217;
    --cardbg:#141a21;
    --ink:#e8eef7;
    --muted:#9aa7ba;
    --brand:#ffb26b;

    --card-border:#263141;
    --row-zebra:rgba(255,255,255,.03);
    --row-hover:rgba(255,255,255,.06);
    --link:#8ab4ff;
  }
  header.site-header{ background:#12171e; border-bottom-color:#1d2631; }
  .card, .grid .card{ background:var(--cardbg); color:var(--ink); }
  .grid .card .caption, .grid .card h3{ color:var(--ink); }

  #news-table thead th{ background:rgba(255,255,255,.04); }
  #news-table th,#news-table td{ border-bottom:1px solid rgba(255,255,255,.06); }
  #news-table a, #news-table a:visited{ color:var(--link) !important; }
}
/* Prevent short link words from breaking on new lines */
#news-table td a {
  white-space: nowrap;          /* keep “View” and “Archive” on one line */
  display: inline-block;
  padding-right: 2px;
}

/* Allow longer text elsewhere to wrap naturally */
#news-table td,
#news-table th {
  word-break: break-word;
  white-space: normal;
}
/* --- Mobile table layout: stack View/Archive under Headline --- */
@media (max-width:760px){
  /* allow the wrapper to shrink normally again */
  .table-wrap{ overflow-x: hidden; }
  #news-table{ min-width: 0; }

  /* hide the separate Link + Archive columns on phones */
  #news-table th:nth-child(4),
  #news-table td:nth-child(4),
  #news-table th:nth-child(5),
  #news-table td:nth-child(5){
    display: none !important;
  }

  /* headline cell becomes a mini "card" with the action row */
  #news-table td:nth-child(2){ 
    display:block; 
  }

  /* the injected mobile link row */
  .mobile-links{
    margin-top:.5rem;
    display:flex;
    gap:.6rem;
    flex-wrap:wrap;
  }
  .mobile-links a{
    white-space:nowrap;
    text-decoration:underline;
    font-weight:600;
    border:1px solid rgba(255,255,255,.15);
    padding:.25rem .6rem;
    border-radius:999px;
    display:inline-block;
  }

  /* tidy spacing in compact view */
  #news-table th, #news-table td{
    padding:.7rem .8rem !important;
  }
}
/* ===== Mobile Table Fix ===== */
@media (max-width: 700px) {
  table {
    width: 100%;
    border-collapse: collapse;
  }

  thead {
    display: none;
  }

  tr {
    display: block;
    background: var(--cardbg);
    border-radius: var(--radius);
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 10px;
  }

  td {
    display: block;
    text-align: left;
    padding: 6px 0;
    font-size: 0.95rem;
  }

  td:first-child::before {
    content: "Date: ";
    font-weight: 600;
    color: var(--muted);
  }
  td:nth-child(2)::before {
    content: "Headline: ";
    font-weight: 600;
    color: var(--muted);
  }
  td:nth-child(3)::before {
    content: "Source: ";
    font-weight: 600;
    color: var(--muted);
  }

  .btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 6px;
  }

  .btns a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
  }
}
/* ===== Mobile News Table Fix (force apply) ===== */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }

  table { 
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    background: transparent;
  }
  thead { display: none !important; }

  tbody, tr, td, th { display: block !important; }

  tr {
    background: var(--cardbg);
    border-radius: var(--radius);
    margin: 12px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    padding: 10px 12px;
  }

  td, th {
    padding: 6px 0 !important;
    font-size: 0.95rem !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* Label the columns (assumes 3 cols: Date, Headline, Source, plus optional Actions) */
  td:nth-child(1)::before { content: "Date: "; font-weight: 600; color: var(--muted); }
  td:nth-child(2)::before { content: "Headline: "; font-weight: 600; color: var(--muted); }
  td:nth-child(3)::before { content: "Source: "; font-weight: 600; color: var(--muted); }

  /* If you have a 4th cell with buttons/links, center and lay them out nicely */
  td:last-child {
    display: flex !important;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
  }

  /* Style the “View / Archive” links as pills */
  td a {
    display: inline-block !important;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    line-height: 1;
  }
  /* Make the archive button a neutral pill (optional) */
  td a[href*="archive" i] { background: #334155; }
}
.revtag {
  text-align:center;
  font-size:0.8rem;
  color:var(--muted);
  margin:40px 0 20px;
  opacity:0.7;
}