/* ==========================================================================
   mytngstyle.css – Van Rooyen & Natal Genealogy (curiousgenie.co.za)
   Version 04 · 20 October 2026 (new menu on the inside pages)
   Template 22 overrides: minimal look matching vanrooyen.africa.
   Colours and type: see Logo/Brand style guide v02.pdf.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap');

:root {
  --genie: #00698F;
  --genie-deep: #004E6B;
  --ink: #1B1F23;
  --slate: #3D4750;
  --grey: #5B6670;
  --border: #C5CDD4;
  --rule: #DDE2E7;
  --panel: #F1F4F7;
  --panel-alt: #F7F9FA;
  --font: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
}

/* ---------- Page ---------- */
html, body { background: #FFFFFF; background-image: none; }
body, #art-main, td, th, input, select, textarea, button { font-family: var(--font); color: var(--ink); }
body, #art-main { font-size: 17px; line-height: 1.6; }
.art-nav { display: none; }
.art-sheet { width: auto; max-width: 1200px; min-width: 0; margin: 0 auto; padding: 0 24px; opacity: 1; }
.art-sheet-cc { background: #FFFFFF; border-radius: 0; box-shadow: none; -webkit-box-shadow: none; }
.art-sheet-body { margin-bottom: 0; }
.art-post-body { padding: 24px 0; }

/* ---------- Headings ---------- */
.header, .plainheader, .subhead, .home-menus, h1, h2, h3, h4,
.nameheader, .big-header, .mmaintitle, .admin-banner h1,
.art-blockheader h3.t, .title2 { font-family: var(--font); font-weight: 500; color: var(--ink); letter-spacing: 0; }
h2.site-head, h2.site-head a { font-family: var(--font); font-size: 26px; font-weight: 500; color: var(--genie); margin: 0 0 16px; padding: 0; text-decoration: none; }
.big-header { font-size: 46px; line-height: 1.12; color: var(--ink); }
.header, .nameheader { font-size: 32px; line-height: 1.2; }
.plainheader { font-size: 34px; }
.subhead, .adminsubhead { font-size: 22px; }

/* ---------- Links ---------- */
a, a:link, a:active, a:visited { color: var(--genie); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--genie-deep); }
.home-menus a, .home-menus a:visited, .home-menus a:link, div.icons a, div.icons-rt a { color: var(--genie); }

/* ---------- Top menu ---------- */
.menucontainer { margin-bottom: 16px; }
div.innercontainer, ul.tngdd .langmenu, ul.tngdd .stubmenu { background: #FFFFFF; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none; }
ul.tngdd .menulink, ul.tngdd .menulink:hover, ul.tngdd .menuhover { background: transparent; color: var(--ink); font-size: 16px; text-decoration: none; padding-top: 10px; padding-bottom: 10px; }
ul.tngdd .menulink:hover, ul.tngdd .menuhover { color: var(--genie); }
ul.tngdd ul li a, .slidedown { background-color: #FFFFFF; color: var(--ink); border-bottom: 1px solid var(--rule); text-decoration: none; }
ul.tngdd ul li a:hover { background-color: var(--panel); }
ul.tngdd a { color: var(--ink); }
.tngsmallicon, .tngsmallicon:visited { color: var(--ink); text-decoration: none; }
.tngsmallicon:hover { color: var(--genie); background: transparent; }

/* ---------- Person tabs ---------- */
#tngnav { border-bottom: 1px solid var(--rule); }
ul#tngnav li a, ul#tngnav li a:visited { background: transparent; border: 0; border-radius: 0; border-bottom: 3px solid transparent; color: var(--grey); font-size: 16px; text-decoration: none; padding: 10px 14px; }
ul#tngnav li a:hover { color: var(--ink); background: transparent; }
ul#tngnav li a.here, ul#tngnav li a.here:visited { background: transparent !important; color: var(--ink); font-weight: 500; border-bottom-color: var(--genie); }
#pub-innermenu { background: var(--panel); color: var(--slate); border-radius: 4px; padding: 8px 14px; }
#pub-innermenu a, #pub-innermenu a:visited { color: var(--genie); }

/* ---------- Data tables ---------- */
table.whiteback, .whiteback { background-color: var(--rule); }
.fieldnameback, .tablesaw-cell-label { background-color: var(--panel); }
.fieldname, .fieldnameback, .fieldnameback a, .fieldnameback a:visited, .fieldnameback .lightlink, th.fieldnameback { color: var(--slate); font-weight: 500; font-size: 15px; }
.databack, .fambackground { background-color: #FFFFFF; }
.databackalt { background-color: var(--panel-alt); }
.reportcol li:hover { background-color: var(--panel); }
.bar, .page { background-color: var(--genie); }

/* ---------- Flatten shadows and rounded boxes ---------- */
table.whiteback, table.whiteback.tfixed { box-shadow: none; border: 1px solid var(--rule); border-radius: 6px; }
img.smallimg, img.thumb, img.indexphoto { box-shadow: none; border-radius: 4px; }
#searchdrop, #searchdrop.slidedown { box-shadow: 0 4px 16px rgba(27, 31, 35, 0.08); border: 1px solid var(--rule); border-radius: 6px; }
ul.tngdd ul { box-shadow: 0 4px 16px rgba(27, 31, 35, 0.08); border: 1px solid var(--rule); border-radius: 6px; }
#searchdrop input, input#searchfirst, input#searchlast, input#searchid,
input[type="text"], input[type="search"], select, textarea { box-shadow: none !important; border-radius: 4px; border: 1px solid var(--border); }

/* ---------- Page numbers ---------- */
.snlink, a.snlink { display: inline-block; min-width: 40px; padding: 8px 10px; text-align: center; background: #FFFFFF; color: var(--ink); border: 1px solid var(--border); border-radius: 4px; text-decoration: none; }
a.snlink:hover, .snlinkact, .adminnav .snlinkact { background: var(--genie); border-color: var(--genie); color: #FFFFFF; }

/* ---------- Buttons and fields ---------- */
.btn, input[type="submit"], input[type="button"], button { font-family: var(--font); font-size: 16px; font-weight: 500; min-height: 44px; padding: 0 20px; border: 0; border-radius: 4px; background: var(--genie); background-image: none; color: #FFFFFF; box-shadow: none; cursor: pointer; }
.btn:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover { background: var(--genie-deep); }
input[type="text"], input[type="search"], input[type="email"], input[type="password"], select, textarea { font-size: 16px; min-height: 40px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px; background: #FFFFFF; box-shadow: none; box-sizing: border-box; }
input:focus, select:focus, textarea:focus, a:focus-visible, button:focus-visible { outline: 2px solid var(--genie); outline-offset: 2px; }

/* ---------- Home-page blocks (template 22) ---------- */
.art-blockcontent-body ul li, .fancy_list li { font-weight: 400; letter-spacing: 0; }
div.art-block img { box-shadow: none; border-radius: 4px; }
.postcard { background: #FFFFFF; box-shadow: none; border: 1px solid var(--rule); border-radius: 6px; }
.postcard .caption, .postcard:hover .thumbnail .caption { background: #FFFFFF; background-image: none; border-radius: 0 0 6px 6px; }
.title2 { font-size: 19px; color: var(--ink); }
.postcard figure img { border-radius: 6px 6px 0 0; }
.dotted-line { border-top: 1px solid var(--rule); }
#linkarea { column-count: 3; }

/* ---------- Pop-ups ---------- */
.LB_window { background: #FFFFFF; border: 1px solid var(--rule); border-radius: 6px; color: var(--ink); }
.LB_closeAjaxWindow { background-color: var(--genie); }

/* ---------- Calendar ---------- */
td.calDay, td.calToday, table.calendar { border-color: var(--rule); }

/* ---------- Footer ---------- */
.art-footer { margin-top: 32px; border-top: 1px solid var(--rule); }
.art-footer-text, .art-footer-text p, .footer, .smaller { color: var(--grey); font-size: 14px; }

/* ---------- Phones ---------- */
@media (max-width: 900px) {
  .art-sheet { padding: 0 16px; }
  #linkarea { column-count: 2; }
  .big-header { font-size: 32px; }
  table.whiteback { display: block; overflow-x: auto; }
}
@media (max-width: 500px) {
  body, #art-main { font-size: 16px; }
  h2.site-head { font-size: 22px; }
  #linkarea { column-count: 1; }
}

/* ==========================================================================
   Landing page (templates/template40/index.php) – the "two doors"
   ========================================================================== */
body.landing { margin: 0; font-size: 18px; line-height: 1.65; }
.lp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.lp-header { border-bottom: 1px solid var(--rule); }
.lp-header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 20px; padding-bottom: 20px; }
.lp a.lp-brand, .lp a.lp-brand:visited { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--genie); }
.lp-crest { display: inline-flex; color: var(--genie); }
.lp-sitename { font-size: 26px; font-weight: 500; line-height: 1.15; color: var(--genie); }
.lp-lang { display: flex; align-items: center; gap: 4px; font-size: 16px; color: var(--border); }
.lp-lang a { padding: 8px 10px; }
.lp-lang-current { padding: 8px 10px; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--ink); }

.lp-main { padding-top: 56px; padding-bottom: 32px; }
.lp h1.lp-question { margin: 0; font-size: 50px; font-weight: 500; line-height: 1.12; color: var(--ink); }
.lp-otherlang { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font-size: 20px; color: var(--slate); }
.lp-note { margin: 24px 0 0; max-width: 760px; background: var(--panel); border-radius: 6px; padding: 14px 18px; color: var(--slate); }

.lp a.lp-btn, .lp a.lp-btn:visited { display: inline-flex; align-items: center; min-height: 52px; padding: 0 30px; border-radius: 4px; background: var(--genie); color: #FFFFFF; font-size: 19px; font-weight: 500; text-decoration: none; }
.lp a.lp-btn:hover { background: var(--genie-deep); color: #FFFFFF; }
.lp a.lp-btn-outline, .lp a.lp-btn-outline:visited { min-height: 48px; padding: 0 22px; background: #FFFFFF; color: var(--genie); border: 2px solid var(--genie); font-size: 18px; }
.lp a.lp-btn-outline:hover { background: var(--panel); color: var(--genie-deep); }

.lp-doors { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 32px; }
.lp-door { flex: 1 1 420px; min-width: 0; background: var(--panel); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.lp-door-photo { aspect-ratio: 16 / 7; background: #E6EBEF; overflow: hidden; }
.lp-door-photo .indexphototable, .lp-door-photo a { display: block; height: 100%; }
.lp-door-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; border-radius: 0; display: block; }
.lp-door-photo .indexphototable > div { display: none; }   /* hide TNG's caption under the photo */
.lp-door-body { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lp-door-body h2 { margin: 0; font-size: 30px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.lp-door-body p { margin: 0; color: var(--slate); }
.lp-door-body .lp-btn { margin-top: auto; align-self: flex-start; }

.lp-both { margin-top: 32px; border: 1px solid var(--rule); border-radius: 8px; padding: 22px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.lp-both-title { font-size: 22px; font-weight: 500; }
.lp-both-text { color: var(--slate); }

.lp-footer { border-top: 1px solid var(--rule); margin-top: 40px; color: var(--grey); font-size: 15px; }
.lp-footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; padding-bottom: 8px; }
.lp-footer-right { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lp a.lp-admin { display: inline-flex; color: #9AA5AF; padding: 6px; margin: -6px 0 -6px -6px; }
.lp a.lp-admin svg { width: 18px; height: 18px; }
.lp-tng, .lp-tng p { font-size: 13px; color: var(--grey); padding-bottom: 24px; }

@media (max-width: 700px) {
  .lp h1.lp-question { font-size: 34px; }
  .lp-main { padding-top: 32px; }
  .lp-door-body { padding: 22px; }
  .lp-both { padding: 20px; }
}

/* ==========================================================================
   Family home pages (templates/template40/home.php via vanrooyen.php, gafn.php)
   ========================================================================== */
.hp-brandtext { display: flex; flex-direction: column; }
.hp-tagline { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }

/* Main menu: plain words; Albums and Documents open on click */
.hp-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; font-size: 17px; }
.lp .hp-nav > a, .lp .hp-nav > a:visited, .hp-menu > summary { color: var(--ink); text-decoration: none; padding: 10px 0; }
.lp .hp-nav > a:hover, .hp-menu > summary:hover { color: var(--genie); text-decoration: underline; }
.hp-menu { position: relative; }
.hp-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.hp-menu > summary::-webkit-details-marker { display: none; }
.hp-menu > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); }
.hp-menu[open] > summary { color: var(--genie); }
.hp-menu[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.hp-menu-list { position: absolute; top: 100%; left: -16px; z-index: 50; min-width: 260px; background: #FFFFFF; border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 4px 16px rgba(27, 31, 35, 0.08); padding: 6px 0; }
.lp .hp-menu-list a, .lp .hp-menu-list a:visited { display: block; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.lp .hp-menu-list a:hover { background: var(--panel); color: var(--genie); }
.hp-lang { border-left: 1px solid var(--rule); padding-left: 14px; }

/* Project bar */
.hp-projects { background: var(--panel); border-bottom: 1px solid var(--rule); }
.hp-projects-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; font-size: 17px; padding-top: 8px; padding-bottom: 8px; }
.hp-projects-row > * { padding: 8px 0; }
.hp-projects-row [aria-current] { font-weight: 600; border-bottom: 2px solid var(--genie); }
.lp .hp-projects-row a.hp-start { margin-left: auto; color: var(--slate); }
.hp-note { margin-top: 20px; }

/* Top: introduction and search */
.hp-main { padding-top: 48px; padding-bottom: 24px; }
.hp-top { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: flex-start; }
.hp-intro { flex: 999 1 520px; min-width: 0; }
.hp-intro p { max-width: 660px; margin: 0 0 16px; }
.lp h1.hp-h1 { margin: 0 0 14px; font-size: 48px; font-weight: 500; line-height: 1.12; color: var(--ink); }
.lp .hp-intro p.hp-other { color: var(--slate); margin-bottom: 22px; }
.hp-search { flex: 1 1 300px; background: var(--panel); border-radius: 6px; padding: 28px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; }
.hp-search h2 { margin: 0 0 4px; font-size: 22px; font-weight: 500; }
.hp-search label { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--slate); }
.hp-search input[type="text"] { font-size: 17px; min-height: 48px; padding: 8px 12px; }
.hp-search button { min-height: 52px; font-size: 18px; }
.hp-search-links { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 16px; }

/* GAFN download */
.hp-download { margin-top: 56px; background: var(--panel); border-radius: 6px; padding: 28px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; scroll-margin-top: 24px; }
.hp-dl-text { flex: 999 1 420px; min-width: 0; }
.hp-dl-text h2 { margin: 0 0 8px; font-size: 26px; font-weight: 500; line-height: 1.25; }
.hp-dl-text p { margin: 0; color: var(--slate); max-width: 640px; }
.lp p.hp-kicker { margin: 0 0 4px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }
.hp-dl-actions { flex: 1 1 220px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hp-soon { margin: 0; color: var(--slate); font-style: italic; }
.hp-small { font-size: 16px; }

/* Featured family members */
.hp-featured { margin-top: 64px; }
.hp-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; border-bottom: 1px solid var(--rule); padding-bottom: 10px; margin-bottom: 24px; }
.hp-section-head h2 { margin: 0; font-size: 26px; font-weight: 500; }
.hp-cards { display: flex; flex-wrap: wrap; gap: 28px; }
.lp a.hp-card, .lp a.hp-card:visited { flex: 1 1 210px; min-width: 0; display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; }
.hp-card-img { display: block; aspect-ratio: 4 / 5; background: #E6EBEF; border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.hp-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; border-radius: 0; }
.hp-card-name { font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--genie); text-decoration: underline; text-underline-offset: 3px; }
.hp-card-note { font-size: 15px; color: var(--grey); }

/* Featured photograph and Explore */
.hp-bottom { margin-top: 64px; display: flex; flex-wrap: wrap; gap: 40px 56px; }
.hp-photo { flex: 1 1 320px; margin: 0; min-width: 0; }
.hp-photo h2, .hp-explore h2 { margin: 0 0 16px; font-size: 22px; font-weight: 500; }
.hp-photo-frame { background: #E6EBEF; border-radius: 4px; overflow: hidden; }
.hp-photo-frame img { width: 100%; height: auto; display: block; border-radius: 0; }
.hp-photo-frame .indexphototable > div { padding: 10px 14px; background: #FFFFFF; font-size: 15px; color: var(--slate); }
.hp-photo figcaption { margin-top: 10px; font-size: 16px; }
.hp-explore { flex: 999 1 520px; min-width: 0; }
.hp-explore-grid { display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); }
.lp .hp-explore-grid a, .lp .hp-explore-grid a:visited { flex: 1 1 200px; padding: 13px 4px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.lp .hp-explore-grid a:hover { color: var(--genie); text-decoration: underline; }
.hp-question { margin: 28px 0 0; color: var(--slate); }

@media (max-width: 900px) {
  .hp-nav { gap: 2px 18px; }
  .hp-lang { border-left: 0; padding-left: 0; }
}
@media (max-width: 700px) {
  .lp h1.hp-h1 { font-size: 34px; }
  .hp-main { padding-top: 32px; }
  .hp-download { padding: 22px; }
  .hp-menu-list { left: 0; }
  .lp .hp-projects-row a.hp-start { margin-left: 0; }
  .lp a.hp-card { flex: 1 1 140px; }
}

/* ==========================================================================
   Inside pages (templates/template40/topmenu.php and footer.php)
   ========================================================================== */
body.t40-inside { margin: 0; }
.t40-inside .menucontainer { display: none; }      /* TNG's own icon bar (Home, Find, Media, Info …): replaced by the new menu */
.t40-inside h2.site-head { display: none; }
.t40-inside .art-post-body { padding-top: 32px; }
.t40-inside .lp-footer { margin-top: 24px; }

.hp-dl-actions { flex-direction: column; align-items: flex-start; }
.hp-dl-size { color: var(--grey); }

.lp a.lp-btn { justify-content: center; text-align: center; }

/* Last database update, at the right of the project bar */
.lp .hp-projects-row a.hp-start { margin-left: 0; }
.hp-projects-row .hp-updated { margin-left: auto; font-size: 15px; color: var(--grey); }
@media (max-width: 700px) { .hp-projects-row .hp-updated { margin-left: 0; width: 100%; padding-top: 0; } }