/* imhoff.us TNG restyle, STEP 1 of 2 (CSS only), v5
 * TNG 14.0, template8. File: TNG_GeneologyFiles/templates/template8/css/mytngstyle-v5.css
 *
 * Upload as a NEW file named mytngstyle-v5.css in the same folder. Then in
 * WPTNG-meta.php change the current mytngstyle-v3.css?v=3 to mytngstyle-v5.css?v=4.
 * To roll back, change the line back to v3.
 *
 * v4 adds: chart boxes (pedigree/descendant charts) no longer clip their text;
 *   my 16px card styling made the text taller than TNG's fixed-size boxes.
 * v3 added:
 *  - fixes overlapping/clipped tab pills (TNG's tngtabs1.css shifts each tab
 *    left by a different amount to make the old overlapping-tab look)
 *  - fixes the cut-off pin legend beside the Event Map
 *  - hides the Heat Map link (Google removed the Heatmap Layer from its Maps
 *    API, so TNG's heat map page cannot work)
 *  - stops All Media and Statistics from scrolling sideways on phones
 *
 * TESTED: desktop width and phone width (375px) on person, pedigree, descendants,
 * family, places, search, what's new, media and statistics pages.
 * NOT TESTED: surname list on a phone, print/PDF, admin pages, a real physical phone
 * (tested with a 375px emulated viewport).
 *
 * Caching: the firewall caches CSS for a long time. Changing the ?v= number in
 * WPTNG-meta.php on each update makes the change show immediately.
 */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@600;700&display=swap');

:root{--ink:#1a1a1a;--link:#007acc;--gold:#8a6d2b;--burg:#7a1f2b;--paper:#f6f1e6;--rule:#e8dfca}

html,body{background:#fff!important;color:var(--ink);font-family:Lato,Arial,sans-serif!important;font-size:16px!important;line-height:1.6}
body a{color:var(--link)}
body a:hover{color:var(--burg)}

/* Hides the empty dark bar at the top of every TNG page.
   CHECK on search, pedigree and surname pages that this hides only the bar. */
div.innercontainer:first-of-type{display:none}

/* Person name header */
#nameheader h1,h1{font-family:Montserrat,Arial,sans-serif!important;font-size:30px!important;font-weight:700;color:var(--ink)!important;letter-spacing:-.01em}
#nameheader img{border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
#nameheader{margin-top:6px}

/* Main tabs (Individual / Ancestors / ...) as pills, text only */
#tngmenu{background:transparent!important;box-shadow:none!important;border:0!important;height:auto!important;margin:14px 0 6px!important}
#tngnav{background:transparent!important;box-shadow:none!important;border:0!important;height:auto!important;padding:0!important;margin:0!important;list-style:none}
#tngnav li{float:none!important;display:inline-block!important;width:auto!important;background:none!important;border:0!important;padding:0!important;margin:0 6px 8px 0!important}
#tngnav li a{width:auto!important;white-space:nowrap;display:inline-block;font-family:Montserrat,Arial,sans-serif!important;font-size:13px!important;font-weight:600;color:var(--ink)!important;background:var(--paper)!important;border:1px solid var(--rule)!important;border-radius:999px!important;padding:7px 16px!important;text-decoration:none!important;box-shadow:none!important;text-shadow:none!important}
#tngnav li a:hover{border-color:var(--gold)!important;color:var(--burg)!important}
#tngnav li a.here{background:var(--burg)!important;color:#fff!important;border-color:var(--burg)!important}
.tngsmallicon2{display:none!important}

/* Section sub-menu (Personal Information | Media | Notes ...).
   TNG puts a drop-shadow FILTER on this bar; that was the blue glow. */
#pub-innermenu,.innermenu{background:transparent!important;box-shadow:none!important;filter:none!important;border:0!important;padding:4px 0 10px!important}
#pub-innermenu *,.innermenu *{text-transform:none!important;text-shadow:none!important;letter-spacing:0!important;font-weight:700!important}
#pub-innermenu a,#pub-innermenu span,.innermenu a{color:var(--link)!important;font-family:Lato,Arial,sans-serif!important;font-size:14px!important}
#pub-innermenu a:hover{color:var(--burg)!important}
#pub-innermenu a{padding:0 4px}

/* Data tables as cards */
table.whiteback{border-collapse:separate!important;border-spacing:0;border-radius:10px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.14)!important;border:1px solid var(--rule)!important;background:#fff!important;margin-bottom:18px;max-width:100%}
td.fieldnameback,.fieldnameback{background:var(--paper)!important;padding:12px 14px!important;border:0!important;border-bottom:1px solid var(--rule)!important}
.fieldnameback *,.fieldname{color:#4a3b1f!important;font-family:Montserrat,Arial,sans-serif!important;font-size:12px!important;font-weight:600!important;letter-spacing:.05em;text-transform:uppercase}
td.databack,.databack{background:#fff!important;color:var(--ink)!important;font-family:Lato,Arial,sans-serif!important;font-size:16px!important;padding:12px 14px!important;border:0!important;border-bottom:1px solid #f0e9d9!important}
.databack *{font-family:Lato,Arial,sans-serif!important}
td.databack a,.databack a{font-size:inherit!important;color:var(--link)!important}
.normal{font-size:16px!important;font-family:Lato,Arial,sans-serif!important}
.small{font-size:14px!important}

/* PHONE (written blind, untested; adjust after a real phone check) */
@media (max-width:768px){
  #nameheader h1,h1{font-size:24px!important}
  #tngnav li a{padding:6px 12px!important;font-size:12px!important}
  td.fieldnameback,.fieldnameback{padding:8px 10px!important}
  td.databack,.databack{padding:8px 10px!important;font-size:15px!important}
  .normal{font-size:15px!important}
  .fieldnameback *,.fieldname{font-size:11px!important}
}

/* v3 -------------------------------------------------------------------- */

/* Heat Map: TNG's heat map page needs the Google Heatmap Layer, which Google
   removed from the Maps API (v3.65+), so hide the link. A "|" separator may
   remain next to it because TNG prints that as plain text. */
a[href*="heatmap.php"]{display:none!important}

@media (max-width:768px){
  /* All Media and other wide list tables: scroll inside the table, not the page */
  table.whiteback.thfixed,table.whiteback.tfixed,table.thfixed,table.tfixed{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Statistics: the three charts are a fixed 400px wide */
  #charts{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Tabs: TNG gives each tab a different negative left offset (#a1 -15px, #a2
   -40px ...) so the old tab images overlap. Pills must not be shifted. */
#tngnav li a,#tngnav a[id^="a"]{left:0!important;right:auto!important}

/* Event Map pin legend (right of the map): compact so it fits its narrow box */
#mapevents table.whiteback{margin:0!important;box-shadow:none!important;border:0!important;border-radius:0!important;width:100%}
#mapevents td.databack{padding:6px 6px!important;font-size:13px!important;line-height:1.35!important;border-bottom:1px solid #f0e9d9!important}
#mapevents td.databack *{font-size:13px!important}
td.databack:has(> #mapevents){padding:12px 8px!important}

/* v4 -------------------------------------------------------------------- */

/* Pedigree / vertical chart boxes are fixed-size with hidden overflow. The
   general card styling above (16px text, 14px padding) made the text too tall
   for the boxes and clipped names and dates. Tested: 0 of 15 boxes clipped. */
#vcontainer .box .inner.databack,#vcontainer .box .databack{padding:3px 5px!important;font-size:12px!important;line-height:1.2!important;border:0!important}
#vcontainer .box .inner *{font-size:12px!important;line-height:1.2!important}

/* v5: center TNG content to match the header width (wide monitors) */
body{max-width:1200px;margin-left:auto!important;margin-right:auto!important;padding-left:16px!important;padding-right:16px!important;box-sizing:border-box}
body:has(#vcontainer){max-width:none}
@media (max-width:820px){body{padding-left:8px!important;padding-right:8px!important}}