/*
Theme Name: Arborstone Foreclosures
Theme URI: https://www.arborstonestorageforeclosures.com
Author: Arborstone Storage
Description: Studied-neutral single-page lien-sale notice for arborstonestorageforeclosures.com. Plain, unbranded, indexable public notice — no page builder, no promotional chrome. Independent of any other Arborstone site.
Version: 0.7.1
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arborstone-foreclosures
*/

/* ============================================================
   Neutral tokens (studied-neutral build — no brand color)
   ============================================================ */
:root {
  --ink: #1a1d21;          /* near-black text + headings */
  --muted: #55606a;        /* captions, footer */
  --border: #d7dce1;       /* rules, table borders */
  --bg: #ffffff;
  --surface: #ffffff;
  --tint: #f4f5f7;         /* light panel / table header */
  --zebra: #fafbfc;        /* table striping */
  --link: #14568a;         /* plain, non-brand link blue */
  --link-hover: #0e3d63;
  --brand-navy: #003A60;   /* Arborstone navy — masthead only */
  --radius: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1200px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: underline; }
a:hover { color: var(--link-hover); }
h1, h2, h3 { color: var(--ink); line-height: 1.25; margin: 0 0 .5em; }

.arbor-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ============================================================
   Header — navy brand bar + white logo (top-left)
   ============================================================ */
.site-header {
  background: var(--brand-navy);
  border-bottom: 3px solid #012a46;
}
.site-header .arbor-container {
  display: flex;
  align-items: center;
  min-height: 84px;
}
.site-branding a { display: inline-flex; align-items: center; }

/* Arborstone logo — locked aspect ratio (986x340 = 2.9:1). Never distort. */
.site-branding img,
.arbor-logo {
  height: 46px;
  width: auto;
  aspect-ratio: 986 / 340;
  object-fit: contain;
  align-self: flex-start;
  flex: 0 0 auto;
  max-width: none;
}

/* ============================================================
   Lien-sale notice
   ============================================================ */
.notice { padding: 40px 0 8px; }
.notice-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 40px;
}
.notice h1 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-bottom: .15em;
}
.notice .notice-brand {
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 22px;
}
.notice p { margin: 0 0 16px; color: var(--ink); }
.notice .terms {
  background: var(--tint);
  border-left: 4px solid #c3c9cf;
  border-radius: 0 4px 4px 0;
  padding: 16px 18px;
  font-size: .96rem;
  margin-top: 24px;
}

/* ============================================================
   Auction table
   ============================================================ */
.notice-table-section { padding: 32px 0 64px; }
.notice-table-section .arbor-container { max-width: min(1680px, 96vw); }
.notice-table-section h2 {
  font-size: 1.35rem;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  display: inline-block;
  margin-bottom: 20px;
}
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.lien-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  table-layout: fixed;
}
.lien-table thead th {
  background: var(--tint);
  color: var(--ink);
  text-align: left;
  font-weight: 700;
  padding: 11px 12px;
  border-right: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
}
.lien-table thead th:last-child { border-right: 0; }
.lien-table tbody td {
  padding: 11px 12px;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  vertical-align: top;
  color: var(--ink);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.lien-table tbody td:last-child { border-right: 0; }
.lien-table tbody tr:nth-child(even) { background: var(--zebra); }

/* Column sizing (of the table's 100% width). Order = the 9 header columns. */
.lien-table th:nth-child(1), .lien-table td:nth-child(1) { width: 13%; }   /* Customer */
.lien-table th:nth-child(2), .lien-table td:nth-child(2) { width: 9%;  }   /* Auction Date */
.lien-table th:nth-child(3), .lien-table td:nth-child(3) { width: 11%; }   /* Property */
.lien-table th:nth-child(4), .lien-table td:nth-child(4) { width: 16%; }   /* Address */
.lien-table th:nth-child(5), .lien-table td:nth-child(5) { width: 5%;  }   /* State */
.lien-table th:nth-child(6), .lien-table td:nth-child(6) { width: 7%;  }   /* Zip */
.lien-table th:nth-child(7), .lien-table td:nth-child(7) { width: 11%; }   /* Phone */
.lien-table th:nth-child(8), .lien-table td:nth-child(8) { width: 15%; }   /* Description */
.lien-table th:nth-child(9), .lien-table td:nth-child(9) { width: 13%; }   /* Website */

/* Keep short value cells on one line (headers still wrap). */
.lien-table td:nth-child(2),
.lien-table td:nth-child(5),
.lien-table td:nth-child(6),
.lien-table td:nth-child(7),
.lien-table td:nth-child(9) { white-space: nowrap; }

.table-note {
  margin: 14px 2px 0;
  font-size: .85rem;
  color: var(--muted);
}

/* ============================================================
   Footer — plain, unbranded
   ============================================================ */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 24px 0;
  margin-top: 8px;
}
.site-footer p { color: var(--muted); font-size: .85rem; margin: 0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 700px) {
  .notice-card { padding: 24px 18px; }
  .notice { padding: 28px 0 4px; }
  .notice h1 { font-size: 1.3rem; }
}

/* --- Mobile auction table: collapse each row into a labeled card --- */
@media (max-width: 767px) {
  .notice-table-section .arbor-container { max-width: 100%; }

  .table-scroll { overflow: visible; border: 0; border-radius: 0; background: transparent; }

  .lien-table { font-size: 15px; }
  .lien-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .lien-table,
  .lien-table tbody,
  .lien-table tr { display: block; width: 100%; }

  .lien-table tbody tr,
  .lien-table tbody tr:nth-child(even) {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    padding: 4px 4px;
    overflow: hidden;
  }

  .lien-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    width: auto !important;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--border);
    white-space: normal !important;
    text-align: right;
    word-break: break-word;
  }
  .lien-table tbody td:last-child { border-bottom: 0; }
  .lien-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 42%;
    text-align: left;
    font-weight: 700;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.35;
  }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  .site-footer { display: none; }
  body { background: #fff; font-size: 12px; }
  .notice-card, .table-scroll { border: 1px solid #999; }
  .lien-table thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: #000; }
}