/* ============================================
   PawMetrics - vBulletin 3.8 Style Recreation
   Modeled exactly on classic forum layout
   ============================================ */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000000;
  background: #DEE4E8;
  line-height: 1.4;
}

/* ============================================
   PAGE WRAPPER - 760px fixed width, centered
   ============================================ */
table.page {
  width: 760px;
  max-width: 100%;
  background: transparent;
  margin: 0 auto;
}

td.page { background: transparent; }

.outer {
  width: 760px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.gutter {
  padding: 0 20px;
  box-sizing: border-box;
}

/* Prevent any element from forcing horizontal scroll */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, table, iframe, video {
  max-width: 100%;
}
table { box-sizing: border-box; }

/* ============================================
   LOGO HEADER
   ============================================ */
.logo-bar {
  background: #FFFFFF;
  text-align: center;
  padding: 8px 0;
  width: 100%;
}
.logo-strip {
  background: linear-gradient(180deg, #5C7B97 0%, #3F5773 100%);
  width: 100%;
  text-align: center;
  padding: 18px 0;
  color: #FFFFFF;
  border-bottom: 2px solid #E5A92B;
}
.logo-strip a { color: #fff; text-decoration: none; }
.logo-strip .logo-inner {
  width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.logo-strip .logo-icon {
  width: 50px;
  height: 50px;
  background: #E5A92B;
  border: 2px solid #fff;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
}
.logo-strip .logo-icon svg { width: 30px; height: 30px; fill: #fff; }
.logo-strip .logo-text {
  text-align: left;
}
.logo-strip .logo-name {
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: -0.5px;
  line-height: 1;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.logo-strip .logo-tag {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #DCEBF5;
  margin-top: 3px;
}

/* ============================================
   XP-STYLE NAV BUTTONS (the orange/cream tabs)
   ============================================ */
.xp-nav {
  background: transparent;
  padding: 4px 0;
  text-align: center;
}
.xp-nav table {
  margin: 0 auto;
  max-width: 100%;
  border-collapse: collapse;
}
.xp-nav tr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.xp-nav td {
  padding: 1px;
  flex: 0 0 auto;
}
.xp-nav a.xp-btn {
  display: inline-block;
  min-width: 90px;
  padding: 0 8px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 9pt;
  font-weight: bold;
  color: #333333;
  text-decoration: none;
  background: linear-gradient(180deg, #FFFFFF 0%, #E8E8E8 50%, #C8C8C8 100%);
  border: 1px solid #888;
  border-radius: 2px;
  white-space: nowrap;
}
.xp-nav a.xp-btn:hover {
  background: linear-gradient(180deg, #FFEED6 0%, #FFD897 50%, #F5B554 100%);
  color: #000;
}
.xp-nav a.xp-btn.active {
  background: linear-gradient(180deg, #FFD897 0%, #F5B554 50%, #E5A92B 100%);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  border-color: #B17819;
}

/* ============================================
   AD/BANNER PLACEHOLDER - fully responsive
   ============================================ */
.banner-728 {
  text-align: center;
  margin: 8px auto 0;
  width: 100%;
  max-width: 728px;
  padding: 0 10px;
  box-sizing: border-box;
}
.banner-728 .ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 728px;
  height: 90px;
  background: #f5f5f5;
  border: 1px dashed #aaa;
  color: #888;
  font-size: 11px;
  text-align: center;
  box-sizing: border-box;
  padding: 0 10px;
  margin: 0 auto;
}
/* For real ad code embed: ensure any iframe/img scales down */
.banner-728 iframe,
.banner-728 ins,
.banner-728 img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   WELCOME TABLE (.tborder + .alt1)
   ============================================ */
table.tborder {
  background: #5C7B97;
  border-collapse: separate;
  margin-bottom: 10px;
  width: 100%;
}

.alt1 {
  background: #F7F7F7;
  color: #000000;
  padding: 6px;
  font-size: 12px;
}
.alt1 a { color: #22229C; }
.alt1 strong { font-weight: bold; }

.alt2 {
  background: #E1E4F2;
  color: #000000;
  padding: 6px;
  font-size: 12px;
}
.alt2 a { color: #22229C; }

/* TCAT - the dark module title bar */
.tcat {
  background: linear-gradient(180deg, #5C7B97 0%, #3F5773 100%);
  color: #FFFFFF;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #4A6483;
}
.tcat a { color: #FFFFFF; text-decoration: none; }
.tcat a:hover { color: #FFD897; text-decoration: underline; }
.tcat strong { font-weight: bold; }

/* THEAD - lighter sub-header bar */
.thead {
  background: linear-gradient(180deg, #A4B6CB 0%, #8FA5BE 100%);
  color: #303A50;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
  text-align: left;
}
.thead a { color: #22229C; text-decoration: none; }

/* TFOOT - bottom dark bar */
.tfoot {
  background: linear-gradient(180deg, #5C7B97 0%, #3F5773 100%);
  color: #FFFFFF;
  padding: 6px 8px;
  font-size: 11px;
}
.tfoot a { color: #FFD897; text-decoration: none; }
.tfoot a:hover { text-decoration: underline; }

.smallfont {
  font-size: 11px;
  font-family: Verdana, Arial, sans-serif;
}

/* ============================================
   NAVBAR / BREADCRUMB
   ============================================ */
.navbar {
  font-family: Verdana, Arial, sans-serif;
  color: #303A50;
}
.navbar a {
  color: #22229C;
  text-decoration: none;
}
.navbar a:hover { text-decoration: underline; }
.navbar img { vertical-align: middle; }
.navbar strong { color: #303A50; }

/* ============================================
   VBMENU CONTROL (Register | Blogs | FAQ | Calendar bar)
   ============================================ */
.vbmenu_control {
  background: linear-gradient(180deg, #5C7B97 0%, #3F5773 100%);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: bold;
  padding: 5px 12px;
  vertical-align: middle;
  border-right: 1px solid #4A6483;
}
.vbmenu_control a {
  color: #FFFFFF;
  text-decoration: none;
}
.vbmenu_control a:hover {
  color: #FFD897;
}

/* ============================================
   LOGIN FORM BAR
   ============================================ */
.bginput {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  background: #fff;
  border: 1px solid #888;
  padding: 1px 3px;
  color: #000;
}
.button {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  background: linear-gradient(180deg, #FFEED6 0%, #FFD897 50%, #E5A92B 100%);
  border: 1px solid #B17819;
  color: #5C3A0E;
  cursor: pointer;
  border-radius: 2px;
}
.button:hover {
  background: linear-gradient(180deg, #FFF4DD 0%, #FFE0A5 50%, #F5B554 100%);
}

/* ============================================
   FORM CONTROLS (Calculator forms)
   ============================================ */
.calc-form { font-size: 12px; }
.calc-form .row { margin-bottom: 10px; }
.calc-form label.lbl {
  display: block;
  font-size: 11px;
  font-weight: bold;
  color: #303A50;
  margin-bottom: 3px;
}
.calc-form .help {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
  font-style: italic;
}
.calc-form input[type="text"],
.calc-form input[type="number"],
.calc-form input[type="email"],
.calc-form select,
.calc-form textarea {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  padding: 3px 5px;
  border: 1px solid #888;
  background: #fff;
  color: #000;
}
.calc-form input[type="text"],
.calc-form input[type="number"],
.calc-form input[type="email"],
.calc-form select { width: 200px; }
.calc-form textarea { width: 100%; min-height: 80px; max-width: 100%; }
.calc-form .ig {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.calc-form .ig input { width: 130px; }
.calc-form .ig select { width: 65px; }
.calc-form .radios {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.calc-form .radios.cols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.calc-form .radios label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  background: #fff;
  border: 1px solid #ccc;
  font-size: 11px;
  cursor: pointer;
}
.calc-form .radios label:hover {
  background: #FFF8DC;
  border-color: #E5A92B;
}
.calc-form .radios label:has(input:checked) {
  background: #FFEED6;
  border-color: #E5A92B;
  font-weight: bold;
}
.calc-form .submit-row {
  margin-top: 10px;
}

/* ============================================
   CALCULATOR RESULT BOX
   ============================================ */
.result-empty {
  padding: 25px 15px;
  text-align: center;
  color: #888;
  background: #F7F7F7;
  font-size: 11px;
}
.result-empty p { margin: 0; }

.result-head {
  background: linear-gradient(180deg, #5C7B97 0%, #3F5773 100%);
  color: #fff;
  padding: 12px 15px;
}
.result-head .lbl {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.85;
}
.result-head .val {
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.1;
  margin: 2px 0;
}
.result-head .val small {
  font-size: 13px;
  font-weight: normal;
  opacity: 0.85;
  margin-left: 5px;
}
.result-head .sub {
  font-size: 11px;
  opacity: 0.9;
}

.result-stats {
  background: #E1E4F2;
  padding: 8px;
}
table.stats-grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 4px;
}
table.stats-grid td {
  background: #fff;
  border: 1px solid #B0BBC7;
  padding: 6px;
  text-align: center;
  width: auto;
  vertical-align: top;
  box-sizing: border-box;
}
.stat-lbl {
  font-size: 9px;
  text-transform: uppercase;
  color: #666;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.stat-val {
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #3F5773;
  margin-top: 2px;
}
.stat-val small {
  font-size: 10px;
  font-weight: normal;
  color: #666;
}

.result-section {
  padding: 10px 12px;
  background: #F7F7F7;
  border-top: 1px solid #DEE4E8;
  font-size: 12px;
}
.result-section h4 {
  margin: 0 0 6px 0;
  font-size: 12px;
  font-family: Verdana, Arial, sans-serif;
  color: #303A50;
  font-weight: bold;
}
.result-section ul { margin: 0 0 0 20px; padding: 0; }
.result-section li { padding: 2px 0; font-size: 11px; }

/* Alerts */
.alert {
  padding: 8px 10px;
  margin: 8px 0;
  font-size: 11px;
  border: 1px solid;
}
.alert strong { display: block; font-weight: bold; margin-bottom: 3px; }
.alert.info { background: #DEEAF5; border-color: #6F94BB; color: #1E3A5C; }
.alert.warn { background: #FFF4D6; border-color: #C58817; color: #6B4308; }
.alert.danger { background: #F8DCDC; border-color: #B82828; color: #6E1212; }

/* ============================================
   CONTENT AREA (long form text)
   ============================================ */
.content-area { padding: 10px 12px; font-size: 12px; color: #000; line-height: 1.5; }
.content-area h2 {
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-size: 16px;
  color: #303A50;
  margin: 14px 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #5C7B97;
}
.content-area h2:first-child { margin-top: 0; }
.content-area h3 {
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-size: 13px;
  color: #3F5773;
  margin: 10px 0 5px 0;
}
.content-area p { margin: 0 0 9px 0; font-size: 12px; line-height: 1.55; }
.content-area ul, .content-area ol { margin: 6px 0 10px 22px; padding: 0; }
.content-area li { padding: 2px 0; font-size: 12px; }
.content-area a { color: #22229C; text-decoration: underline; }
.content-area table.data {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 11px;
  background: #5C7B97;
}
.content-area table.data th {
  background: linear-gradient(180deg, #5C7B97, #3F5773);
  color: #fff;
  padding: 5px 8px;
  text-align: left;
  border: 1px solid #4A6483;
  font-weight: bold;
}
.content-area table.data td {
  padding: 5px 8px;
  border: 1px solid #DEE4E8;
  background: #fff;
}
.content-area table.data tr:nth-child(even) td { background: #F7F7F7; }
.content-area blockquote {
  margin: 10px 0;
  padding: 8px 12px;
  background: #FFF4D6;
  border-left: 3px solid #E5A92B;
  font-size: 11px;
  font-style: italic;
}

/* FAQ details/summary */
.faq-item {
  border: 1px solid #5C7B97;
  background: #fff;
  margin-bottom: 4px;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 10px;
  background: linear-gradient(180deg, #F7F7F7 0%, #E1E4F2 100%);
  font-size: 11px;
  font-weight: bold;
  color: #303A50;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: '+';
  display: inline-block;
  width: 12px;
  color: #E5A92B;
  font-weight: bold;
  margin-right: 4px;
}
.faq-item[open] summary { background: linear-gradient(180deg, #E1E4F2 0%, #C5CFE0 100%); border-bottom: 1px solid #5C7B97; }
.faq-item[open] summary::before { content: '–'; }
.faq-cnt { padding: 8px 12px; background: #F7F7F7; font-size: 11px; line-height: 1.5; }

/* ============================================
   BLOG POST HEAD
   ============================================ */
.post-head {
  padding: 14px 12px;
  background: linear-gradient(180deg, #F7F7F7 0%, #E1E4F2 100%);
  text-align: center;
  border-bottom: 1px solid #5C7B97;
}
.post-head h1 {
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-size: 20px;
  color: #303A50;
  margin: 4px 0 6px;
  line-height: 1.2;
}
.post-head .tag {
  display: inline-block;
  padding: 1px 8px;
  background: #E5A92B;
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  margin-right: 4px;
}
.post-head .meta { font-size: 11px; color: #666; }
.lede {
  font-size: 12px;
  color: #555;
  font-style: italic;
  padding: 10px 12px;
  background: #FAFAFA;
  border-bottom: 1px dotted #888;
}

/* ============================================
   SHOP NOW / FOOTER
   ============================================ */
.shop-line {
  text-align: center;
  font-size: 11px;
  padding: 8px 0;
  color: #303A50;
}
.shop-line b { color: #303A50; }
.shop-line a { color: #22229C; text-decoration: none; font-weight: bold; }
.shop-line a:hover { text-decoration: underline; }

.time-now {
  text-align: center;
  font-size: 11px;
  padding: 5px 0;
  color: #555;
}
.time-now .time { font-weight: bold; }

.archive-strip {
  text-align: center;
  font-size: 10px;
  line-height: 1.7;
  padding: 8px 0;
  color: #555;
}
.archive-strip a {
  color: #22229C;
  text-decoration: none;
  margin: 0 2px;
}
.archive-strip a:hover { text-decoration: underline; color: #E5A92B; }

.foot-copy {
  text-align: center;
  font-size: 10px;
  padding: 6px 0;
  color: #555;
}
.foot-copy a { color: #22229C; }

/* ============================================
   GOOGLE-STYLE SEARCH BOX
   ============================================ */
.search-box {
  text-align: center;
  padding: 8px 0;
}
.search-box form {
  display: inline-block;
  background: #fff;
  padding: 6px 10px;
  border: 1px solid #ccc;
}
.search-box .logo {
  display: inline-block;
  width: 75px;
  height: 25px;
  background: linear-gradient(135deg, #4285F4 25%, #EA4335 50%, #FBBC05 75%, #34A853);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-weight: bold;
  font-size: 18px;
  vertical-align: middle;
  text-align: left;
  line-height: 25px;
}
.search-box input[type="text"] {
  font-size: 12px;
  padding: 3px 5px;
  border: 1px solid #999;
  width: 280px;
  vertical-align: middle;
}
.search-box input[type="submit"] {
  font-size: 12px;
  padding: 3px 12px;
  vertical-align: middle;
  background: linear-gradient(180deg, #FFF 0%, #DDD 100%);
  border: 1px solid #888;
  cursor: pointer;
}

/* ============================================
   STYLE SELECTOR FOOTER
   ============================================ */
.style-foot {
  margin-top: 6px;
}

/* ============================================
   PHOTO THUMBS (sidebar)
   ============================================ */
.photo-cell {
  text-align: center;
  padding: 5px 0;
  border-bottom: 1px dotted #B0BBC7;
}
.photo-cell:last-child { border: none; }
.photo-cell .ph {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #5C7B97, #3F5773);
  border: 1px solid #303A50;
  margin: 0 auto 3px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.4);
}
.photo-cell .ph svg { width: 32px; height: 32px; }
.photo-cell.v2 .ph { background: linear-gradient(135deg, #E5A92B, #FFD897); }
.photo-cell .nm {
  font-size: 10px;
  font-weight: bold;
}
.photo-cell .nm a { color: #22229C; text-decoration: none; }
.photo-cell .by { font-size: 10px; color: #666; }

/* Calendar - 7-column grid, must stay grid at all sizes */
table.mcal {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 1px;
}
table.mcal td,
table.mcal th {
  width: 14.28%; /* 100/7 */
  text-align: center;
  font-size: 10px;
  padding: 4px 0;
  box-sizing: border-box;
  vertical-align: middle;
}
table.mcal td.dim,
table.mcal .alt1.dim {
  color: #aaa;
  background: #F7F7F7;
}
/* Override generic alt1/alt2 padding inside calendar to keep cells equal */
table.mcal td.alt1,
table.mcal td.alt2 {
  padding: 4px 0;
}
table.mcal .smallfont {
  font-size: 11px;
  line-height: 1.2;
}
/* "Today" highlight - inline style uses border:1px solid red; we boost it */
table.mcal td[style*="border:1px solid red"],
table.mcal td[style*="border: 1px solid red"] {
  background: #FFD897 !important;
  color: #B82828 !important;
  font-weight: bold !important;
  outline: 1px solid #B82828;
}
table.mcal td[style*="border:1px solid red"] .smallfont,
table.mcal td[style*="border: 1px solid red"] .smallfont {
  color: #B82828;
  font-weight: bold;
}

/* Stats list */
.stats-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stats-list li {
  font-size: 11px;
  padding: 2px 0;
  border-bottom: 1px dotted #B0BBC7;
}
.stats-list li:last-child { border: none; }
.stats-list b, .stats-list strong { color: #303A50; }

/* Item list rows (homepage all calculators table) */
table.itemlist {
  width: 100%;
  border-collapse: collapse;
  background: #5C7B97;
}
table.itemlist .alt1, table.itemlist .alt2 {
  padding: 6px 8px;
  border-bottom: 1px solid #DEE4E8;
  vertical-align: top;
}
table.itemlist a {
  font-weight: bold;
  color: #22229C;
  text-decoration: none;
}
table.itemlist a:hover { text-decoration: underline; }
.item-meta {
  font-size: 10px;
  color: #666;
  font-weight: normal;
}

/* News thread rows */
.news-meta {
  background: linear-gradient(180deg, #A4B6CB 0%, #8FA5BE 100%);
  color: #303A50;
  padding: 4px 8px;
  font-size: 10px;
  border-bottom: 1px solid #6F94BB;
}
.news-meta a { color: #22229C; }
.news-foot {
  background: #E1E4F2;
  padding: 4px 8px;
  font-size: 10px;
  color: #555;
  border-top: 1px solid #B0BBC7;
}
.news-foot a { color: #22229C; font-weight: bold; }

/* Blog card grid - keep simple */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 6px;
}
.blog-card {
  background: #fff;
  border: 1px solid #5C7B97;
  text-decoration: none;
  color: #000;
  font-size: 11px;
  display: flex;
  flex-direction: column;
}
.blog-card .ci {
  height: 70px;
  background: linear-gradient(135deg, #5C7B97, #3F5773);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.5);
}
.blog-card .ci.v2 { background: linear-gradient(135deg, #E5A92B, #FFD897); }
.blog-card .ci.v3 { background: linear-gradient(135deg, #4A8076, #84B9A8); }
.blog-card .ci svg { width: 34px; height: 34px; }
.blog-card .cb { padding: 6px; }
.blog-card .tg {
  display: inline-block;
  padding: 0 5px;
  background: #E5A92B;
  color: #fff;
  font-size: 8px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.blog-card h4 { font-size: 11px; font-weight: bold; color: #303A50; margin: 0 0 3px 0; }
.blog-card p { font-size: 10px; color: #444; margin: 0; line-height: 1.4; }

/* Buttons in content */
.btn {
  display: inline-block;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 12px;
  background: linear-gradient(180deg, #FFF 0%, #DDD 100%);
  border: 1px solid #888;
  color: #303A50;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
}
.btn:hover {
  background: linear-gradient(180deg, #FFEED6 0%, #FFD897 100%);
  border-color: #E5A92B;
}
.btn-primary {
  background: linear-gradient(180deg, #FFD897 0%, #E5A92B 100%);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  border-color: #B17819;
}
.btn-primary:hover { background: linear-gradient(180deg, #FFE0A5 0%, #F5B554 100%); }
.btn-row { margin-top: 8px; }
.btn-row .btn { margin-right: 3px; }

/* ============================================
   RESPONSIVE - comprehensive breakpoints
   covers: 4K → desktop → laptop → tablet → phone → small phone
   ============================================ */

/* DESKTOP/LAPTOP (≤ 900px) - keep 3 columns but tighter */
@media (max-width: 900px) {
  table.page, .outer { width: 100%; max-width: 760px; }
  .gutter { padding: 0 12px; }
  .logo-strip .logo-inner { max-width: 100%; padding: 0 12px; flex-wrap: wrap; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  /* Ad banner scales naturally because max-width: 100% is already set */
}

/* TABLET (≤ 768px) - intermediate, start stacking some elements */
@media (max-width: 768px) {
  .banner-728 { padding: 0 8px; }
  .banner-728 .ph {
    height: auto;
    min-height: 60px;
    padding: 10px;
    font-size: 10px;
  }
}

/* LARGE PHONE / TABLET-NARROW (≤ 760px) - stack the 3-col, allow nav to wrap */
@media (max-width: 760px) {
  body { background: #DEE4E8; font-size: 12px; }
  table.page, .outer { width: 100% !important; max-width: 100%; }
  .gutter { padding: 0 8px; }

  /* Logo strip */
  .logo-strip { padding: 14px 0; }
  .logo-strip .logo-inner { padding: 0 12px; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .logo-strip .logo-text { text-align: center; }
  .logo-strip .logo-name { font-size: 22px; }
  .logo-strip .logo-tag { font-size: 9px; letter-spacing: 1px; }
  .logo-strip .logo-icon { width: 44px; height: 44px; }
  .logo-strip .logo-icon svg { width: 26px; height: 26px; }

  /* XP nav - wrap to multiple rows */
  .xp-nav table { width: 100%; max-width: 100%; }
  .xp-nav tr { display: flex; flex-wrap: wrap; justify-content: center; }
  .xp-nav td { display: inline-block; padding: 2px; flex: 0 0 auto; }
  .xp-nav a.xp-btn { width: auto; min-width: 80px; padding: 0 10px; font-size: 8pt; height: 22px; line-height: 22px; }

  /* Banner ad - scale fully */
  .banner-728 {
    width: 100%;
    max-width: 100%;
    padding: 0 8px;
    margin: 8px auto 0;
  }
  .banner-728 .ph {
    width: 100%;
    height: auto;
    min-height: 60px;
    padding: 12px 10px;
    line-height: 1.3;
    font-size: 10px;
    word-break: break-word;
  }

  /* Welcome and breadcrumb tables */
  table.tborder { width: 100% !important; max-width: 100%; }

  /* Breadcrumb bar - stack login/search box below. Excludes calendar (.mcal). */
  table.tborder:not(.mcal) > tbody > tr > td.alt2[nowrap] { display: block; width: 100% !important; padding: 6px !important; }
  table.tborder:not(.mcal) > tbody > tr > td.alt1[width="100%"] { display: block; width: 100% !important; }

  /* VBmenu sub-nav - allow wrap, full width clickable */
  .vbmenu_control { padding: 6px 10px; font-size: 10px; display: inline-block; }
  .tborder[style*="border-top-width:0px"] table { display: flex; flex-wrap: wrap; }
  .tborder[style*="border-top-width:0px"] table tr { display: flex; flex-wrap: wrap; width: 100%; }

  /* Three-column layout → single column */
  table.layout3 { display: block; width: 100% !important; max-width: 100%; }
  table.layout3 > tbody { display: block; width: 100%; }
  table.layout3 > tbody > tr { display: block; width: 100%; }
  table.layout3 > tbody > tr > td {
    display: block;
    width: 100% !important;
    max-width: 100%;
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* Sidebars become full-width modules */
  table.layout3 > tbody > tr > td[width="175"] { padding-top: 10px !important; }

  /* Form inputs - all full-width */
  .calc-form input[type="text"],
  .calc-form input[type="number"],
  .calc-form input[type="email"],
  .calc-form input[type="password"],
  .calc-form select,
  .calc-form textarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* prevents iOS zoom on focus */
  }
  .calc-form .ig { display: flex; width: 100%; gap: 4px; }
  .calc-form .ig input { flex: 1; width: auto !important; min-width: 0; }
  .calc-form .ig select { flex-shrink: 0; width: 80px !important; }
  .calc-form .radios.cols2 { grid-template-columns: 1fr; }

  /* Result stats - stack to 2 columns on phone */
  .result-stats { padding: 6px; }
  table.stats-grid td { width: 50%; padding: 4px; }
  .result-head { padding: 12px 14px; }
  .result-head .val { font-size: 24px; }
  .result-head .val small { font-size: 12px; }
  .stat-val { font-size: 14px; }

  /* Blog grid - single column */
  .blog-grid { grid-template-columns: 1fr; padding: 8px; gap: 6px; }
  .blog-card .ci { height: 80px; }

  /* Content area - prevent overflow */
  .content-area { padding: 10px; }
  .content-area h2 { font-size: 15px; word-wrap: break-word; }
  .content-area h3 { font-size: 13px; }
  .content-area p, .content-area li { word-wrap: break-word; overflow-wrap: break-word; }
  .content-area table.data { font-size: 10px; width: 100%; max-width: 100%; }
  .content-area table.data th,
  .content-area table.data td { padding: 4px 6px; word-wrap: break-word; }
  /* Long words/URLs don't break layout */
  .content-area a, .navbar a { word-wrap: break-word; overflow-wrap: break-word; }
  /* Make wide content tables scroll horizontally as a last resort */
  .content-area > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Post header */
  .post-head { padding: 14px 10px; }
  .post-head h1 { font-size: 18px; word-wrap: break-word; }
  .lede { font-size: 12px; padding: 10px; }

  /* Search box */
  .search-box { padding: 8px 6px; }
  .search-box form {
    padding: 6px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    box-sizing: border-box;
  }
  .search-box .logo { width: auto; font-size: 16px; }
  .search-box input[type="text"] { width: 100%; flex: 1; min-width: 120px; font-size: 16px; }
  .search-box input[type="submit"] { font-size: 12px; }

  /* Shop line - smaller text, more wrappable */
  .shop-line { font-size: 10px; line-height: 1.7; padding: 8px 6px; word-wrap: break-word; }

  /* Bottom quick-navigate form */
  .tfoot select { font-size: 12px; max-width: 100%; width: 100%; padding: 6px; }
  table.page .tfoot {
    display: block;
    width: 100% !important;
    padding: 6px !important;
    text-align: center !important;
  }
  table.page .tfoot[align="right"] { text-align: center !important; }

  /* Archive strip - smaller */
  .archive-strip { font-size: 9px; padding: 8px 6px; line-height: 1.8; word-wrap: break-word; }
  .archive-strip a { margin: 0 2px; display: inline-block; }

  /* FAQ items - make summary easier to tap */
  .faq-item summary { padding: 10px 12px; font-size: 11px; min-height: 36px; }
  .faq-cnt { padding: 10px 12px; }

  /* Mini calendar - keep 7-col grid, just shrink cells */
  table.mcal { width: 100% !important; table-layout: fixed !important; display: table !important; }
  table.mcal tbody { display: table-row-group !important; }
  table.mcal tr { display: table-row !important; }
  table.mcal th,
  table.mcal td,
  table.mcal td.alt1,
  table.mcal td.alt2,
  table.mcal td.dim,
  table.mcal td.alt1.dim {
    display: table-cell !important;
    width: 14.28% !important;
    font-size: 11px;
    padding: 6px 0 !important;
    text-align: center;
    box-sizing: border-box;
  }
  table.mcal .smallfont { font-size: 11px; }

  /* Photo cells - keep centered */
  .photo-cell .ph { width: 60px; height: 60px; }

  /* Buttons easier to tap */
  .btn {
    padding: 8px 14px;
    font-size: 12px;
    min-height: 36px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .submit-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .submit-row .btn { flex: 1; min-width: 130px; min-height: 40px; }

  /* Radio labels - bigger tap area */
  .calc-form .radios label {
    padding: 8px 10px;
    font-size: 11px;
    min-height: 36px;
    word-wrap: break-word;
  }

  /* Tables in news listings - allow wrapping */
  table.itemlist { font-size: 11px; width: 100%; }
  table.itemlist td { word-wrap: break-word; }

  /* Footer copy */
  .foot-copy { padding: 8px 6px; line-height: 1.6; word-wrap: break-word; }
  .time-now { padding: 6px; }

  /* News meta/foot rows */
  .news-meta, .news-foot { word-wrap: break-word; }
  .news-foot span[style*="float:right"] { float: none !important; display: block; margin-top: 4px; }

  /* Item list rows - prevent table from forcing overflow */
  table.itemlist td:first-child { word-wrap: break-word; max-width: 50%; }
}

/* PHONE (≤ 480px) - aggressive shrinking */
@media (max-width: 480px) {
  body { font-size: 12px; }
  .gutter { padding: 0 6px; }

  /* Logo - even smaller */
  .logo-strip { padding: 10px 0; }
  .logo-strip .logo-name { font-size: 18px; }
  .logo-strip .logo-tag { font-size: 8px; letter-spacing: 0.5px; }
  .logo-strip .logo-icon { width: 38px; height: 38px; }
  .logo-strip .logo-icon svg { width: 22px; height: 22px; }

  /* XP nav - tighter, fits 3-4 per row */
  .xp-nav a.xp-btn { min-width: 70px; padding: 0 6px; font-size: 7pt; height: 20px; line-height: 20px; }

  /* Banner - even shorter */
  .banner-728 { padding: 0 6px; }
  .banner-728 .ph {
    min-height: 50px;
    padding: 10px 8px;
    font-size: 9px;
  }

  /* Breadcrumb */
  .navbar { font-size: 9pt !important; word-wrap: break-word; }

  /* Welcome box text */
  .alt1, .alt2 { font-size: 11px; word-wrap: break-word; }

  /* Stats grid - single column on tiny screens */
  table.stats-grid { display: block; }
  table.stats-grid tbody { display: block; }
  table.stats-grid tr { display: block; }
  table.stats-grid td { display: block; width: 100% !important; margin-bottom: 4px; }
  .result-head { padding: 10px 12px; }
  .result-head .val { font-size: 22px; }

  /* Sub-nav */
  .vbmenu_control { padding: 6px 8px; font-size: 9px; }

  /* Post h1 smaller */
  .post-head h1 { font-size: 16px; }
  .post-head .tag { font-size: 8px; padding: 1px 6px; }

  /* Content tables */
  .content-area table.data { font-size: 9px; }

  /* Module title bars */
  .tcat { padding: 5px 8px; font-size: 10px; }
  .thead { padding: 4px 6px; font-size: 10px; }

  /* Footer tightening */
  .foot-copy { font-size: 9px; padding: 6px 4px; }
  .shop-line { font-size: 9px; }

  /* Photo cells smaller */
  .photo-cell .ph { width: 50px; height: 50px; }
  .photo-cell .ph svg { width: 24px; height: 24px; }

  /* Result section padding */
  .result-section { padding: 8px 10px; }

  /* Alert padding */
  .alert { padding: 8px; font-size: 11px; }
}

/* SMALL PHONE (≤ 360px) */
@media (max-width: 360px) {
  .gutter { padding: 0 4px; }
  .logo-strip .logo-name { font-size: 16px; }
  .logo-strip .logo-tag { font-size: 7px; }
  .xp-nav a.xp-btn { min-width: 62px; font-size: 6.5pt; padding: 0 4px; }
  .post-head h1 { font-size: 15px; }
  .content-area h2 { font-size: 14px; }
  .result-head .val { font-size: 20px; }
  .banner-728 .ph { min-height: 44px; padding: 8px; font-size: 8px; }
  .vbmenu_control { padding: 5px 6px; font-size: 8.5px; }
  /* Stack ig (input group) on very small screens */
  .calc-form .ig { flex-direction: column; }
  .calc-form .ig select { width: 100% !important; }
}

/* EXTRA-SMALL (≤ 320px) - iPhone SE 1st gen, old Androids */
@media (max-width: 320px) {
  .gutter { padding: 0 2px; }
  .logo-strip .logo-name { font-size: 15px; }
  .xp-nav a.xp-btn { min-width: 56px; font-size: 6pt; padding: 0 3px; }
  .post-head h1 { font-size: 14px; }
  .content-area { padding: 8px; }
  .btn { padding: 6px 10px; font-size: 11px; }
}

/* Print */
@media print {
  .logo-strip, .xp-nav, .banner-728, .vbmenu_control, .shop-line,
  .archive-strip, .search-box, .style-foot, .layout3 td.col-side {
    display: none !important;
  }
  body { background: #fff; overflow-x: visible; }
  html, body { overflow-x: visible; }
}

/* Visually hidden */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}