/* ══════════════════════════════════════════════════════════════════════════
   PHOTOPOST → SITE SKIN.  Loaded AFTER /inc/site.css by inc/skin.php.

   Boss, 27 Aug 2026: "i want the main site and pages to look the same as the
   css on index.html pages ... first of all we need a new header and footer
   then the middle section then needs to match".

   MEASURED on amateur-girls-posts.com/photopost/index.php, 1440px, 27 Aug:
     · PhotoPost ships its own Bootstrap navbar at position:FIXED, top 0,
       height 51 — it sat ON TOP of our banner and cut it in half.
     · Its body text was Times New Roman 14px in #333333 on our #050c1c
       background. Dark grey on near-black. That is the "mess".
     · Its own "Powered by PhotoPost" + 2003-2024 copyright ran directly
       above our footer, so the page ended twice.

   Nothing here edits a PhotoPost file. Delete this file to undo the lot.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ONE HEADER.  Their fixed navbar goes; ours stays. ────────────────── */
.navbar, .navbar-fixed-top, .navbar-inverse { display: none !important; }
body { padding-top: 0 !important; }

/* ── 2. ONE FOOTER.  Their sign-off goes; ours stays. ────────────────────── */
span.onbody { display: none !important; }          /* "Powered by PhotoPost" */
centre > p.text-center:last-child { display: none !important; }  /* old (c) line */

/* ── 3. THE MIDDLE.  Same type, same colours as index.html. ──────────────── */
.container,
.container p, .container td, .container th, .container div,
.container span, .container font, .container li, .container b,
.container strong, .container em, .container small {
  font-family: 'Inter Tight', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif !important;
  color: var(--text) !important;
}
.container { max-width: 1180px; }

/* their headings were 24px Arial in cream — keep the size, take our accent */
.container h1, .container h2, .container h3,
.container b > font[size], .container font[size="4"], .container font[size="5"] {
  color: var(--accent2) !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}

/* links: our blue, white on hover — matches index.html exactly */
.container a, .container a font, .container a b { color: var(--accent) !important; }
.container a:hover, .container a:hover font { color: #fff !important; text-decoration: underline; }

/* the grey-on-black killer: PhotoPost sets #333 and #666 inline in a dozen places */
.container [style*="color:#333"], .container [style*="color: #333"],
.container [style*="color:#666"], .container [style*="color: #666"],
.container [style*="color:#000"], .container [style*="color: #000"] {
  color: var(--text) !important;
}

/* ── 4. THE TABLES.  2004 PhotoPost tables, dressed as our panels. ───────── */
.container table { background: transparent !important; border-collapse: collapse; width: 100%; }
.container table table { margin: .2rem 0; }
.container td, .container th {
  background: transparent !important;
  border-color: var(--border2) !important;
  padding: .42rem .55rem !important;
  vertical-align: top;
}
/* the category / recent-photos blocks read as cards, like the index.html grids */
.container > table,
.container .row > div > table {
  background: var(--surface) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.container th, .container td[bgcolor], .container tr[bgcolor] > td {
  background: var(--surface2) !important;
}
.container th { color: var(--accent2) !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: .05em; font-size: .72rem !important; }

/* thumbnails: the same frame the galleries use on index.html */
.container img[src*="/data/"], .container img[src*="thumb"] {
  border: 1px solid var(--border2) !important;
  border-radius: 8px;
  background: #000;
}
.container img[src*="/data/"]:hover, .container img[src*="thumb"]:hover {
  border-color: var(--accent2) !important;
}

/* ── 5. FORMS — the search box was a white 1998 input ────────────────────── */
.container input[type="text"], .container input[type="password"],
.container select, .container textarea {
  background: var(--surface2) !important; color: var(--text) !important;
  border: 1px solid var(--border2) !important; border-radius: 8px;
  padding: .38rem .5rem !important; font: inherit !important;
}
.container input[type="submit"], .container input[type="button"], .container button {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .30), rgba(var(--accent-rgb), .16)) !important;
  color: #fff !important; border: 1px solid var(--border) !important;
  border-radius: 8px; padding: .38rem .9rem !important; cursor: pointer;
  font-weight: 700 !important;
}

/* ── 6. leftovers Bootstrap paints white ────────────────────────────────── */
.container .well, .container .panel, .container .thumbnail,
.container .row > div[class*="col-"] { background: transparent !important; border-color: var(--border2) !important; }
hr { border-color: var(--border2) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   ROUND TWO — 27 Aug 2026, measured at 1440 on amateur-girls-posts.com
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 7. THE BANNER WAS ON THE PAGE TWICE ────────────────────────────────────
   Ours sits in the site header at the top (header2.png, 775px). PhotoPost then
   printed its OWN logo again 236px further down (header.gif, 531px) inside a
   .row.header, with a stray 162px cut-out girl in the col-md-2 beside it. One
   banner is a masthead; two is a mistake. The whole row goes. */
.container .row.header { display: none !important; }

/* ── 8. THE MIDDLE WAS TWO-THIRDS OF THE PAGE ───────────────────────────────
   MEASURED: container 1170px, but the content sat in a col-md-9 of 731px
   inside a col-md-10-offset-1 of 975px — and there was no col-md-3 beside it.
   244px of the page was simply empty. Bootstrap's grid is doing nothing useful
   here, so the content takes the full width. */
.container > .row > .col-md-10.col-md-offset-1 {
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.container .col-md-10.col-md-offset-1 > .row > .col-md-9 { width: 100% !important; }

/* the gallery table and the thumb rows breathe at the new width */
.container .col-md-9 > table { width: 100% !important; }

/* ── 8b. and it must not hang off the edge ──────────────────────────────────
   Bootstrap rows carry -15px side margins and columns carry +15px padding, so
   a column forced to width:100% ends up WIDER than its container. Measured
   1200px inside a 1170px container, overhanging 15px to the left. Cancel the
   pair inside this block only. */
.container > .row,
.container .col-md-10.col-md-offset-1 > .row { margin-left: 0 !important; margin-right: 0 !important; }
.container .col-md-10.col-md-offset-1 > .row > .col-md-9,
.container > .row > .col-md-10.col-md-offset-1 { padding-left: 0 !important; padding-right: 0 !important; }
.container [class*="col-md-"] { box-sizing: border-box; }
body { overflow-x: hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   9. THE CATEGORY LIST — from a 2004 table to the card grid the rest of the
   site uses.  Boss, 27 Aug 2026: "make the index.php categories colourful
   with images preview thumbs etc ... im easy with anything that makes look
   better".

   NOTE FOR WHOEVER READS THIS NEXT: the cells are called `tdnothumbs`, which
   is PhotoPost telling us category thumbnails are switched OFF in its admin.
   Turn them on there and real preview pictures appear in these cards with no
   further CSS. Everything below is written so that works either way.
   ══════════════════════════════════════════════════════════════════════════ */

/* the header strip: our pink caps, like every other panel heading */
.container td.menubar, .container .menubar span, .container .menubar b {
  background: transparent !important;
  color: var(--accent2) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .7rem !important;
  font-weight: 800 !important;
}
.container table.tableborders { border-collapse: separate; border-spacing: 0 8px; background: transparent !important; }

/* each category becomes a card */
.container table.tableborders > tbody > tr { transition: transform .12s, box-shadow .12s; }
.container td.tdnothumbs, .container td.tdthumbs,
.container td.photocol, .container td.lastphocol {
  background: var(--surface) !important;
  border-top: 1px solid var(--border2) !important;
  border-bottom: 1px solid var(--border2) !important;
  padding: .7rem .8rem !important;
  vertical-align: middle !important;
}
.container td.tdnothumbs, .container td.tdthumbs {
  border-left: 3px solid var(--accent2) !important;
  border-radius: 10px 0 0 10px;
}
.container td.lastphocol { border-right: 1px solid var(--border2) !important; border-radius: 0 10px 10px 0; }
.container table.tableborders > tbody > tr:hover td { background: var(--surface2) !important; }

/* the category name — the thing the eye should land on */
.container td.tdnothumbs a, .container td.tdthumbs a {
  color: var(--accent) !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}
.container table.tableborders > tbody > tr:hover td.tdnothumbs a { color: #fff !important; }

/* the photo count reads as a badge, not as body text */
.container td.photocol span, .container td.photocol {
  color: var(--accent2) !important;
  font-weight: 800 !important;
  font-size: 1.02rem !important;
  white-space: nowrap;
}

/* ── THUMBNAILS: THE SAME SHAPE AS index.html ───────────────────────────────
   Boss, 22 Sep 2026: "make the .php thumbs match them, so we have uniformity
   across the site pages - it's important, in header and footer too, so people
   are familiar with the site quickly, not changing from one to another."
   The house style, lifted from site.css (.thumb-item / .thumbs img / .sb-thumb):
     aspect-ratio 3/4 · object-fit cover · 8px radius · 1px border · hover lift
   These were `max-height: 74px` postage stamps on a site whose product is the
   photograph. index.html has never shown them that way. */
.container td.tdthumbs img, .container td.lastphocol img {
  width: 100% !important; max-width: 104px !important; height: auto !important;
  aspect-ratio: 3/4; object-fit: cover; display: block;
  border-radius: 8px; border: 1px solid var(--border2) !important;
  background: var(--surface2); transition: border-color .2s, transform .2s;
}
.container td.tdthumbs a:hover img, .container td.lastphocol a:hover img {
  border-color: var(--accent) !important; transform: translateY(-2px);
}
.container td.lastphocol { color: var(--muted) !important; font-size: .78rem !important; }

/* the gallery strips (Recent / Most Popular / Random) - same card as index.html */
.container img[src*="/data/"] {
  width: 100%; max-width: 210px; height: auto;
  aspect-ratio: 3/4; object-fit: cover; display: block; margin: 0 auto;
  border-radius: 8px; border: 1px solid var(--border2);
  background: var(--surface2); transition: border-color .2s, transform .2s;
}
.container a:hover > img[src*="/data/"] {
  border-color: var(--accent); transform: translateY(-2px);
}

/* ── 9b. CORRECTION, same night ─────────────────────────────────────────────
   The card treatment above assumed one table row per category. It is not:
   PhotoPost nests a table inside the name cell for sub-categories, so the top
   row spanned the page while GIRLS / WIVES / SWINGERS / MATURE / MOVIES had
   their names outside the card and their counts floating in the middle. It
   read worse than the plain table did.

   So the borders and radii come off, and what is left is the part that
   actually helped: our colours, a readable name, a badge-like count and one
   quiet separator per row. It cannot misalign because it no longer draws a
   box around anything. */
.container td.tdnothumbs, .container td.tdthumbs,
.container td.photocol, .container td.lastphocol {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border2) !important;
  border-radius: 0 !important;
  padding: .6rem .7rem !important;
}
.container table.tableborders { border-spacing: 0 !important; }
.container table.tableborders > tbody > tr:hover td { background: rgba(var(--accent-rgb), .06) !important; }
.container td.tdnothumbs table, .container td.tdthumbs table { background: transparent !important; }
.container td.photocol { text-align: right !important; }
.container td.lastphocol { text-align: left !important; }


/* ── THE TOPLIST KEEPS THE HEADER PINK (Boss, 22 Sep 2026) ──────────────────
   "make that the same colours as the header pink - seems a bit hard to read,
   the dark blue then the blue text."
   site.css already puts the pills in --accent2 (#ec6ae8 - the pink of FREE
   AMATEUR GIRLS POSTS and of the brand in the menu bar). On the PHP pages the
   rule `.container a, .container a font, .container a b { color: var(--accent)
   !important; }` further up this file wins, and forces them back to --accent
   (#4d9bff) - blue text on the dark blue --surface2 pill, which is the worst
   contrast on the page and is used for the links the page exists to be clicked
   on. These lines let the toplist and the footer boxes keep the pink. Nothing
   else in .container changes. */
.container a.hl-item { color: var(--accent2) !important; }
.container a.hl-item b { color: var(--text) !important; }
.container a.sister-link { color: var(--accent2) !important; }
.container a.hl-item:hover, .container a.sister-link:hover { color: #fff !important; }


/* ── THE .PHP HEADER, SAME SIZE AS THE .HTML ONE (Boss, 22 Sep 2026) ──────────
   Bootstrap 3.3.7 is loaded AFTER /inc/site.css on the PhotoPost pages and opens
   with `html{font-size:10px}`. Every rem in the skin - the whole header and footer -
   therefore rendered at 62.5%. Put the root back and they land as designed.
   `!important` wins over a normal declaration regardless of source order. */
html { font-size: 16px !important; }

/* PhotoPost's default.css underlines every anchor. A menu is not body copy. */
.wv-head a, .wv-brand, .wv-nav a, .wv-menus a, .wv-drop a, .wv-join,
.site-footer a, .sister-link { text-decoration: none !important; }
.wv-head a:hover, .wv-menus a:hover, .wv-drop a:hover { text-decoration: none !important; }


/* ── THUMBS: PHOTOS ONLY, AND THE SAME SIZE AS index.html (22 Sep 2026) ───────
   Boss: "those thumbs are way too big" / "the middle of index.php looks like shit".
   Two faults, both from my earlier "match the thumbs" rule. */

/* 1. Only a PHOTOGRAPH gets the photo frame. PhotoPost drops images/nonewposts.gif -
      a 314-byte status icon - into the Last Photo Upload cell when a category has had
      no recent upload. Stretching that to 104px and cropping it 3:4 produced the grey
      blocks, and its forced 139px height is what blew every category row open. */
.container td.lastphocol img:not([src*="/data/"]),
.container td.tdthumbs img:not([src*="/data/"]) {
  width: auto !important; max-width: none !important; height: auto !important;
  aspect-ratio: auto !important; object-fit: initial !important;
  border: 0 !important; background: none !important; border-radius: 0 !important;
}

/* 2. The Recent Photos strip had no cap and rendered at full size. index.html shows
      its gallery thumbs at 104px; these are the same thing on the same site. */
.container table.tddetails img[src*="/data/"] {
  max-width: 104px !important; width: 100% !important; height: auto !important;
  aspect-ratio: 3/4; object-fit: cover; display: block;
  border-radius: 8px; border: 1px solid var(--border2) !important;
}

/* 3. With the icon back to its own size, the category rows do not need to be tall. */
.container td.catcolumn, .container td.lastphocol { vertical-align: top !important; }
.container td.catcolumn table td { padding: .15rem 0 !important; }


/* ── TOPLIST PILLS, SAME ON .PHP AS ON .HTML (22 Sep 2026) ────────────────────
   The injected grid sits outside PhotoPost's .container, so the earlier
   `.container a.hl-item` rule never reached it and PhotoPost's global anchor
   underline won. Unscoped here on purpose. */
a.hl-item, a.hl-item:link, a.hl-item:visited, a.hl-item:hover,
a.sister-link, a.sister-link:link, a.sister-link:visited {
  text-decoration: none !important;
}
a.hl-item, a.hl-item:link, a.hl-item:visited { color: var(--accent2) !important; }
a.hl-item b { color: var(--text) !important; font-weight: 800; }
a.hl-item.hl-free { color: var(--muted) !important; }

/* ── THE SPONSOR STRIP WHERE PHOTOPOST'S COPYRIGHT USED TO BE ───────────────
   Boss, 23 Sep 2026: "that copyright photopost, take all that away and add a
   sponsor banner there, an AI one, horizontal." 728x90, centred, and it shrinks
   on a phone instead of forcing the page sideways. */
.adz-php-sponsor { text-align: center; margin: 1.4rem auto 1rem; }
.adz-php-sponsor img { max-width: 100%; height: auto; border-radius: 8px;
  border: 1px solid var(--border2); }

/* ══ THE MIDDLE OF THE .PHP PAGES — THE REAL CLASS NAMES ═══════════════════════
   Boss, 23 Sep 2026: "the middle members section text is too small."

   🩸 WHY IT WAS NEVER STYLED. The rules above target `td.tdnothumbs` and
   `td.tdthumbs`. THOSE CLASSES DO NOT EXIST ON THESE PAGES. Counted on the live
   amateur-wives-posts index.php: tdnothumbs 0, tdthumbs 0 — while `small` appears 46
   times, `tddetails` 30, `lastphocol` 28, `catcolumn` 19, `medium` 12, `photocol` 10,
   `menubar` 9. So the category table kept PhotoPost's own 2003 styling: a WHITE
   background with small black text and blue links, in the middle of a dark red site.
   Every rule was written against a class name nobody checked against the page.

   The sizes below are deliberately bigger than the old ones: the category name goes
   from PhotoPost's default to 1.18rem, and the description — which had no rule at all
   — is set at .95rem instead of whatever <font class="small"> inherited.
   ══════════════════════════════════════════════════════════════════════════════ */

/* the table itself, and every cell in it: our surface, never white */
.container table.tableborders,
.container table.tableborders td,
.container td.catcolumn, .container td.tddetails,
.container td.photocol, .container td.lastphocol,
.container td.menubar {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* the column headings: pink caps, like every other panel heading on the site */
.container td.menubar, .container td.menubar font, .container td.menubar b {
  background: transparent !important;
  color: var(--accent2) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .82rem !important;
  font-weight: 800 !important;
}

/* the category name — the thing the eye should land on */
.container td.catcolumn a, .container td.catcolumn a font,
.container td.catcolumn a b, .container td.catcolumn b a {
  color: var(--accent2) !important;
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  text-decoration: none;
}
.container td.catcolumn a:hover { color: #fff !important; }

/* the line under it. It had NO rule at all, so it inherited <font class="small">. */
.container td.catcolumn font.small,
.container td.tddetails font.small,
.container td.catcolumn,
.container td.tddetails {
  font-size: .95rem !important;
  line-height: 1.5;
  color: var(--muted) !important;
}

/* the photo count reads as a figure, not as body text */
.container td.photocol, .container td.photocol font, .container td.photocol b {
  color: var(--accent2) !important;
  font-weight: 800 !important;
  font-size: 1.12rem !important;
  white-space: nowrap;
}

/* who posted last, and when */
.container td.lastphocol, .container td.lastphocol font {
  color: var(--muted) !important;
  font-size: .9rem !important;
}
.container td.lastphocol a { color: var(--accent) !important; }

/* PhotoPost's two size classes, used all over the middle of the page */
.container font.small  { font-size: .95rem !important; }
.container font.medium { font-size: 1.05rem !important; }

/* the strip headings — "Recent Posts", "Most Popular Images", "Random Images" —
   were black bars with small white text sitting on a white block */
.container td.tdheader, .container .tdheader,
.container td.thead, .container .thead {
  background: transparent !important;
  color: var(--accent2) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* 25 Sep 2026: long photo names (no spaces) stretched the grid to twice the screen width */
td.menubar a, td.menubar font, td.tddetails, td.tddetails a { word-break: break-all; overflow-wrap: anywhere; }