/*your custom style goes in this file*/
/*if you're overriding style blocks from genstyle.css, you only need to include the attributes you're overriding, not the whole block*/

@font-face {
    font-family: 'Norse';
    src: url('/templates/template16/fonts/Norse.eot');
    src: url('/templates/template16/fonts/Norse.eot?#iefix') format('embedded-opentype'),
        url('/templates/template16/fonts/Norse.woff2') format('woff2'),
        url('/templates/template16/fonts/Norse.woff') format('woff'),
        url('/templates/template16/fonts/Norse.ttf') format('truetype'),
        url('/templates/template16/fonts/Norse.svg#Norse') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('/font/EBGaramond-Regular.woff2') format('woff2'),
        url('/font/EBGaramond-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Elder Futhark';
    src: url('/font/ElderFuthark.woff2') format('woff2'),
        url('/font/ElderFuthark.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fleur De Leah';
    src: url('/templates/template16/fonts/FleurDeLeah-Regular.eot');
    src: url('/templates/template16/fonts/FleurDeLeah-Regular.eot?#iefix') format('embedded-opentype'),
        url('/templates/template16/fonts/FleurDeLeah-Regular.woff2') format('woff2'),
        url('/templates/template16/fonts/FleurDeLeah-Regular.woff') format('woff'),
        url('/templates/template16/fonts/FleurDeLeah-Regular.ttf') format('truetype'),
        url('/templates/template16/fonts/FleurDeLeah-Regular.svg#FleurDeLeah-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Mobilanpassning */
@media screen and (max-width: 800px) {
    #ha-translate-wrapper { top: 10px !important; right: 15px !important; }
}

/* Mobilanpassning */
@media screen and (max-width: 800px) {
    #ha-translate-wrapper {
        top: 10px !important;
        right: 15px !important;
    }
}

/* Tvingar din unika sid-kropp att vägra flytta sig nedåt */
html, 
body, 
body#bodytop {
    top: 0px !important;
    margin-top: 0px !important;
}

/* Döljer även den irriterande rutan som dyker upp när man håller musen över översatt text */
#goog-gt-tt, 
.goog-te-balloon-frame {
    display: none !important; 
}
.goog-text-highlight {
    background: transparent !important;
    box-shadow: none !important;
}

/* body: describes page background color and all non-table text not governed by any other style */
body {
	background-color: #838b7e;
	font-family : 'EB Garamond', Arial, Helvetica, sans-serif;
	font-size: 14px;
}

.fieldnameback	{
	background-color: #737770;
}

.tblock {
    padding: 20px;
    margin-bottom: 25px;
    border: none; /* Ta bort den svarta ramen */
    border-radius: 8px; /* Rundade hörn */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Skapa den mjuka skuggan */
    background-color: #fff; /* Säkerställ vit bakgrund */
}

.databack, div.innercontainer, #tngnav a {
	background-color: #efefef;
}

#tngnav a.here	{
	background: #737770;
}

/* Denna regel sätter en standardfärg för många element, inklusive dina länkar */
a, a:link, a:active, div.icons a, .header, .plainheader, #thomemast h1, #tmast h1, ul.tngdd a, #tsidebar h3, #thomebody h2 {
    color: #627157; /* Ändrad till din önskade grön-gråa färg */
}

/* Tar bort understrykning från länkar (alla tillstånd utom hover) */
a, a:link, a:visited {
    text-decoration: none;
}

/* Lägger till en mjuk övergång för länkar */
a {
    transition: color 0.3s ease;
}

/* Stil för när muspekaren är över länken (lyser upp) */
a:hover {
    color: #8da47f; /* En ljusare nyans av #627157 för "lysa upp"-effekten */
    cursor: pointer; /* Ändrar muspekaren till en hand */
}

/* Behåll besökta länkar i standardfärgen (inte understrukna) */
a:visited {
    color: #627157;
}

/*#tmenu ul li {
	font-size: 14pt;
}*/

.mainsection p {
	font-size: 14pt;
	
}

.normal, .indleftcol {
	font-family: 'EB Garamond', Arial, Helvetica, sans-serif;
	font-size: 14pt;
}

#thomebody h2, #tsidebar h3, #tmenu, h1, .plainheader, .adminsubhead, .admintotal {
	font-family: 'EB Garamond', sans-serif;
}

ul.normal li {
	font-size: 14pt;
}

/* Döljer BARA käll-id-länkarna, rör inte Ratsit/Facebook */
ol.citeblock li a[href*="showsource.php"] {
    display: none !important;
}

.notearea {
    max-height:none;
    overflow:visible;
}

/* --- Fix för Formulär & Tabeller (Läsbarhet i Standard-läge på Mobil) --- */

@media screen and (max-width: 800px) {

    /* 1. Gör så att textrutor och rullgardiner tar hela bredden */
    input[type="text"], 
    select, 
    textarea {
        width: 100% !important;       /* Fyll ut hela skärmbredden */
        box-sizing: border-box;       /* Se till att padding inte gör dem bredare än skärmen */
        font-size: 16px !important;   /* Förhindrar att iPhone zoomar in när man klickar */
        height: 40px;                 /* Gör dem lite högre och lättare att träffa */
        margin-bottom: 10px;          /* Luft under varje fält */
    }

    /* 2. "Spräng" tabellerna i formulär! (Tvinga celler att staplas) */
    form table, 
    form tbody, 
    form tr {
        display: block !important;    
        width: 100% !important;       
    }

    form td {
        display: block !important;
        width: 100% !important;
        padding: 4px 0 !important;    
        text-align: left !important;  
        box-sizing: border-box;
        height: auto !important;      /* Låt höjden anpassas efter innehållet */
    }
    
    /* 3. Gör Sök-knappar stora, tydliga och MED RÄTT FONT */
    input[type="submit"], 
    input[type="button"], 
    input[type="reset"] {
        width: 100% !important;
        padding: 12px !important;
        margin-top: 10px !important;
        font-size: 16px !important;
        cursor: pointer;
        
        /* HÄR ÄR NYHETEN: */
        font-family: inherit !important; /* Tvingar knappen att använda sajtens vanliga font */
        font-weight: bold !important;    /* Gör texten fet så den syns bra (valfritt) */
    }
    
    /* 4. Ta bort onödig marginal så man utnyttjar hela skärmen */
    body, .homebody {
        padding: 0 !important;
        min-width: 0 !important; /* Hindrar sidan från att tvingas vara bred */
    }
    
    #tpage {
        margin: 0 !important;
        width: 100% !important;
        padding: 10px; 
        box-sizing: border-box;
    }
}

/* -----------------------------------------------------------
   FIX FÖR TABELLER (Sökresultat, Efternamn, etc.)
   Denna kod gör att tabeller staplas snyggt på mobilen.
   ----------------------------------------------------------- */
@media screen and (max-width: 800px) {
    #tpage table,
    #tpage tbody, 
    #tpage tr,
    #tpage td {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }

    #tpage tr {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc; 
    }

    #tpage td {
        text-align: left !important;
        padding: 4px 0 !important;
        word-wrap: break-word !important; /* Viktigt för långa ortnamn */
    }
    
    #tpage img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* DÖLJ "TOPP 30"-LISTAN PÅ PLACES.PHP */
@media screen and (max-width: 800px) {
    
    /* BEHÅLL DENNA: Göm själva tabellen med listan */
    table.table-top30, 
    .table-top30 {
        display: none !important;
    }

    /* TA BORT ELLER AVAKTIVERA DENNA DEL: */
    /* .titlebox:last-of-type {
        display: none !important;
    }
    */
}

/* --- MENY-FIX: BEHÅLL DESIGN - AKTIVERA SCROLL --- */

@media screen and (max-width: 800px) {

    /* 1. Övre menyn (Flikarna: Individ, Anor, Ättlingar...) */
    #tngmenu ul {
        display: flex !important;
        flex-wrap: nowrap !important;       /* Tvingar allt på en rad */
        overflow-x: auto !important;        /* Aktivera scroll */
        -webkit-overflow-scrolling: touch;  /* Mjuk scroll */
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        
        /* Dölj scrollbar men behåll funktionen */
        scrollbar-width: none; 
    }
    #tngmenu ul::-webkit-scrollbar { display: none; }

    #tngmenu li {
        float: none !important;
        display: inline-block !important;   /* Behåller flik-utseendet */
        flex: 0 0 auto !important;          /* Krymp inte flikarna */
        white-space: nowrap !important;
    }
    
    /* OBS: Vi rör inte 'a'-taggarna här, så de behåller sin grå/gula färg */


    /* 2. Undre menyn (Mörka listen: Personlig information | Källor...) */
    div#pub-innermenu,
    div.pub-innermenu {
        display: block !important;
        white-space: nowrap !important;  /* Tvingar raden att fortsätta åt höger */
        overflow-x: auto !important;     /* Tillåter scroll */
        width: 100% !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
        
        /* Se till att den mörkgrå bakgrunden täcker hela bredden */
        min-width: 100%; 
    }

    /* Justering för länkarna i den mörka listen */
    div#pub-innermenu a,
    div.pub-innermenu a {
        display: inline !important;      /* Ligg på rad som text */
        float: none !important;
        white-space: nowrap !important;
        
        /* Vi rör INGA färger eller fonter, så de förblir vita/gula som i originalet */
    }
    
    /* Se till att texten och strecken vertikal-centreras snyggt */
    div#pub-innermenu {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        height: auto !important;
    }
}

/* =======================================================
   BÄTTRE LÄSBARHET (.notearea)
   ======================================================= */

/* --- 1. Grundinställningar (PC & Standard) --- */
.notearea {
    /* Typografi */
    font-size: 19px !important; 
    line-height: 1.6 !important;
    color: #222 !important;
    
    /* Bredd och Avstånd PC */
    max-width: 800px !important; 
    margin-top: -10px !important;    
    margin-bottom: 10px !important;
    padding-top: 10px !important;    
    padding-bottom: 0 !important;

}

/* VIKTIGT: Ta bort marginalen från första stycket */
.notearea > :first-child {
    margin-top: 0 !important;
}

.notearea p { margin-bottom: 1.0em !important; }

/* --- 2. Mobilanpassning --- */
@media screen and (max-width: 800px) {
    .notearea {
        font-size: 19px !important; 
        line-height: 1.6 !important;
        
        /* Avstånd */
        margin-top: 0px !important; 
        margin-bottom: 10px !important;
        padding-top: 10px !important; 

        /* Vänsterjustering + Fix för indraget */
        margin-left: -25px !important; 
        width: calc(100% + 25px) !important;
        max-width: none !important;
        
        /* Täcka cirkeln */
        background-color: #fff !important; 
        
        /* Luft på sidorna */
        padding-left: 10px !important; 
        padding-right: 10px !important;
        
        box-sizing: border-box !important;
        text-align: left !important;
        
        -webkit-hyphens: auto !important;
        hyphens: auto !important;

    }
}

/* --- KROCKANDE KOD: TA BORT DESSA BLOCK (DE ÄR Gamla/Krockar) --- */
/* (Block som börjar med #tmenu ul li { font-size: 14pt; } bör tas bort härifrån) */
/* ------------------------------------------------------------------- */


/* --- 2. FONT-STORLEK PC (min-width) --- */
@media screen and (min-width: 801px) {
    #tmenu ul li {
        font-size: 14pt !important; 
    }

    /* Justera om utrymmet känns trångt på PC */
    #tmenu ul li a {
        padding: 14px 20px !important;
    }
}


/* --- 3. FONT-STORLEK MOBIL (max-width) - FINJUSTERAD PADDING --- */
@media screen and (max-width: 800px) {
    
    #tmenu ul li,
    #tmenu ul li a {
        font-size: 14pt !important;
        font-weight: normal !important;
        line-height: 1.4 !important;
    }

    #tmenu ul li a {
        /* Ändrat från 15px till 10px (minskar luft uppåt/nedåt) */
        padding: 10px 15px !important; 
    }

    /* Vänsterställ menyn på små skärmar */
    #tmenu ul {
        justify-content: flex-start;
        padding-bottom: 10px;
    }
}
/* --- FIX FÖR TMENU SLUT --- */

/* --- PEDIGREE: ÅTERSTÄLL TEXTSTORLEK (Back to Basics) --- */
@media screen and (min-width: 801px) {
    
    /* Vi siktar på klassen .pedbox som omsluter hela rutan */
    /* Stjärnan (*) betyder: "Allt inuti denna ruta" */
    .pedbox * {
        font-size: 11px !important;    /* Tvinga ner till liten storlek */
        line-height: 1.2 !important;   /* Tajt radavstånd */
        font-weight: normal !important;
    }

    /* Gör namnet lite fetare så det syns */
    .pboxname a {
        font-size: 12px !important;
        font-weight: bold !important;
        text-decoration: none !important;
    }
    
    /* Se till att ikonerna (pennorna) är små */
    .pedbox img {
        width: auto !important;
        height: 10px !important;
    }
}

/* --- FIX FÖR ANTAVLA PÅ MOBIL (KORRIGERAD: SYNLIG TEXT) --- */
@media screen and (max-width: 800px) {

    /* 1. TVINGA TILLBAKA TABELLEN */
    #tpage div.pedbox table {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important; 
        border-collapse: collapse !important;
    }
    
    #tpage div.pedbox tr {
        display: table-row !important;
        border: none !important;
    }

    #tpage div.pedbox td {
        display: table-cell !important;
        vertical-align: top !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* 2. ETIKETTEN (F: / D:) - Smal kolumn */
    #tpage div.pedbox td[align="right"] {
        width: 15px !important; 
        white-space: nowrap !important;
    }

    /* 3. DATUM & PLATS - Här var felet sist! */
    /* Vi sätter en max-bredd på 170px istället för 0 */
    #tpage div.pedbox td[colspan] {
        width: auto !important;          /* Ta resten av platsen */
        max-width: 160px !important;     /* Bli inte bredare än så här! */
        
        white-space: nowrap !important;  /* En rad */
        overflow: hidden !important;     /* Klipp av */
        text-overflow: ellipsis !important; /* Visa "..." */
    }

    /* 4. Justera textstorleken */
    .pboxpopup {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    /* 5. Namnet högst upp */
    .pboxname a {
        font-size: 12px !important;
        font-weight: bold !important;
        display: block !important;
        margin-bottom: 2px !important;
        
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 210px !important;
    }
    
    /* Dölj skräp */
    .pedboxtable br { display: none !important; }
    .pedbox img { height: 9px !important; width: auto !important; }
}

/* --- MOBIL-RUBRIK: STÖRRE TEXT & INGA BILDER (VERSION 2) --- */
@media screen and (max-width: 800px) {

    /* 1. Göm bilderna i sidhuvudet */
    #thomemast img,
    #tmast img {
        display: none !important;
    }

    /* 2. Förstora texten (siktar nu även på länken inuti) */
    #thomemast h1,
    #tmast h1,
    #thomemast h1 a,
    #tmast h1 a {
        font-size: 42px !important; /* Ökad storlek */
        line-height: 1.2 !important;
        text-align: center !important;
        
        display: block !important;    /* Tvingar den att bete sig som en "låda" */
        width: 100% !important;       /* Tar hela bredden för att centreringen ska funka */
        margin-left: 0 !important;    /* Nollställer marginaler */
        margin-right: 0 !important;
    }
    
    /* Justering av avståndet runt titeln */
    #thomemast, #tmast {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        height: auto !important; /* Låter höjden anpassas efter den nya stora texten */
    }
}

/* =======================================================
   UNIVERSELL MENY (FIXAD Z-INDEX FÖR LOGIN)
   ======================================================= */

/* 1. Behållaren (#tmenu) - Själva "Balken" */
#tmenu {
    display: flex !important;
    justify-content: center;   /* Centrera paketet (Text + Ikon) i mitten av skärmen */
    align-items: center;       /* Centrera i höjdled */
    gap: 8px;                  /* Avstånd mellan texten "MENY" och strecken */
    
    width: 100% !important;    
    height: 50px;              
    
    /* FÄRG & RAM */
    background-color: #efefef;        
    border-top: 1px solid #737770;    
    border-bottom: 1px solid #737770; 
    
    margin: 0 !important;
    padding: 0 !important;
    position: relative;        /* <--- HÄR ÄR BOVEN! */
    
    z-index: 50; 
    pointer-events: none; /* Balken i sig blockerar inte klick på sidorna */
}

/* 2. TEXTEN "MENY" (Uppdaterad för att täcka hela höjden) */
#tmenu::after {
    content: "MENU";
    display: block;
    order: 1; 
    
    /* NYTT: Gör knappen 50px hög så den når ända ner till menyn */
    height: 50px;       
    line-height: 50px;  /* Centrerar texten vertikalt i den nya höjden */
    
    font-family: 'EB Garamond', serif; 
    font-size: 16px !important;       
    font-weight: bold !important;
    letter-spacing: 1px;              
    color: #627157;                   
    
    cursor: pointer;
    pointer-events: auto;             
    
    /* Ta bort padding-top, line-height sköter centreringen nu */
    padding: 0 5px;     /* Lite bredd på sidan så den är lättare att träffa */
}

/* 3. Hamburgarikonen (Strecken) */
#tmenu::before {
    content: "";
    display: block;
    order: 2; /* Siffran 2 gör att denna hamnar TILL HÖGER */
    
    width: 30px;    /* Lite smalare klickyta nu när vi har texten också */
    height: 50px;   
    
    pointer-events: auto; 
    cursor: pointer;

    /* Rita de tre strecken */
    background: linear-gradient(
        to bottom, 
        #627157 0%, #627157 20%, 
        transparent 20%, transparent 40%, 
        #627157 40%, #627157 60%, 
        transparent 60%, transparent 80%, 
        #627157 80%, #627157 100%
    );
    background-size: 24px 18px; /* Storleken på själva strecken */
    background-repeat: no-repeat;
    background-position: center;
}

/* 4. Menyn (Listan som fälls ut) */
#tmenu ul {
    display: none; 
    position: absolute;
    top: 50px;          
    left: 50%;          
    transform: translateX(-50%); 
    
    width: 280px;       
    background-color: #fff;
    border: 1px solid #737770;
    border-top: none;   
    border-radius: 0 0 5px 5px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    
    padding: 0;
    margin: 0;
    
    z-index: 51;
    
    flex-direction: column !important;
    pointer-events: auto; 
}

/* 5. Öppna menyn vid hovring */
#tmenu:hover ul, 
#tmenu:active ul, 
#tmenu:focus-within ul {
    display: block !important;
}

/* 6. Design på länkarna i listan */
#tmenu ul li {
    display: block !important;
    width: 100%;
    border-bottom: 1px solid #eee;
    text-align: center;
    margin: 0 !important; padding: 0 !important;
}
#tmenu ul li:last-child { border-bottom: none; }

#tmenu ul li a {
    display: block;
    padding: 15px 10px;
    font-size: 16px !important;
    color: #000;
    text-decoration: none;
    line-height: normal !important;
}
#tmenu ul li a:hover {
    background-color: #f4f4f4;
    color: #627157;
}

/* Dölj gamla menyn */
.mhead { display: none !important; }

/* --- FIX FÖR SÖKFORMULÄR (Sticky Buttons - Centrerad) --- */
@media screen and (max-width: 800px) {

    /* Gemensam stil för knapparna */
    form[action="search.php"] input[type="submit"],
    form[action="search.php"] input[type="reset"] {
        position: fixed !important;
        bottom: 0 !important;
        z-index: 9999 !important;
        margin: 0 !important;
        padding: 15px !important;
        height: auto !important;
        font-size: 16px !important; /* Lite större text för tydlighet */
        text-transform: uppercase !important; /* Snyggare på knapp */
        letter-spacing: 1px !important;
    }

    /* SÖK-KNAPPEN (Nu 100% bredd och centrerad) */
    form[action="search.php"] input[type="submit"] {
        left: 0 !important;
        width: 100% !important; 
        background-color: #627157 !important; /* Din gröna färg */
        color: #fff !important;
        border: none !important;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.2) !important; /* Tydligare skugga uppåt */
        border-radius: 0 !important; /* Raka hörn */
    }

    /* RENSA-KNAPPEN (Döljs på mobil för att ge plats åt Sök) */
    form[action="search.php"] input[type="reset"] {
        display: none !important;
    }

    /* Extra utrymme längst ner på sidan så inget innehåll döljs bakom knappen */
    body {
        padding-bottom: 70px !important;
    }
}

/* =======================================================
   UNIVERSAL BILD-ZOOM (ALLA VARIANTER)
   ======================================================= */

/* 1. GRUNDLÄGGANDE STÄDNING */
.media-prev {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Lås upp behållare så bilder får plats att växa */
.notearea,
.tng-biography,
.databack {
    overflow: visible !important;
}

/* 2. MÅLTAVLOR - Här lägger vi till "Händelse-bilder" */
.inline-thumb,              
.inline-thumb img,
.notearea img,              
.coverimage img,            
.smallimage img,            
div[id^="thumb"] img,
.databack a img {           /* NYTT: Fångar bilder i händelse-listan */
    
    position: relative !important;
    display: inline-block !important; 
    vertical-align: top !important;
    max-width: 100%;
    height: auto;
    
    /* Undvik att zooma små system-ikoner (t.ex. PDF-ikoner) */
    min-width: 40px; 
    
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 1;
}

/* 3. DATOR - EFFEKTER (Mus) */
@media screen and (min-width: 801px) {

    .inline-thumb:hover, 
    .inline-thumb:hover img,
    .notearea img:hover,
    .coverimage img:hover,
    .smallimage img:hover,
    .databack a img:hover {
        
        transform: scale(1.15); 
        box-shadow: 0 5px 20px rgba(0,0,0,0.4); 
        z-index: 999; 
        cursor: pointer;
        background-color: #fff; 
        border-radius: 3px;
    }
}

/* 4. MOBIL - RENSA ALLT (Bara klickbart) */
@media screen and (max-width: 800px) {
    
    .inline-thumb, .inline-thumb img,
    .notearea img,
    .coverimage img,
    .databack a img {
        transform: none !important;
        box-shadow: none !important;
        margin: 0 5px 5px 0 !important;
        
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
    }

    *:after {
        content: none !important;
    }
}

/* --- LÄNKAR I BIOGRAFIER: DISKRET MEN SYNLIG --- */

.notearea a,
.notearea a:link,
.notearea a:visited {
    color: #1a1a1a !important;       /* Nästan svart, aningen mörkare än brödtexten */
    font-weight: normal !important;  /* Ingen fetstil, så texten flyter snyggt */
    text-decoration: underline !important; /* Understrykningen visar var man kan klicka */
}

/* Länkens utseende när man för musen över den */
.notearea a:hover {
    color: #627157 !important;       /* Din gröna temafärg när man pekar */
    text-decoration: none !important; /* Tar bort strecket vid hovring för snygg effekt */
    cursor: pointer;
}

/* =======================================================
   IKON-RÄDDNING: ÅTERSTÄLL SYSTEM-IKONER
   ======================================================= */

/* Detta skyddar förstoringsglas, redigera-pennor, pilar och småikoner */
.databack img[src*=".gif"],
.notearea img[src*=".gif"],
.tng-biography img[src*=".gif"],
img[src*="magnify"],
img[src*="find"],
img[src*="tng_"],
img[src*="arrow"] {
    
    /* 1. Tvinga dem att ligga på rad (inte block) */
    display: inline !important; 
    vertical-align: middle !important;
    
    /* 2. Återställ storlek */
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    
    /* 3. Ta bort all "fotostyling" */
    box-shadow: none !important;
    transform: none !important; /* Ingen zoom */
    background-color: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 2px !important; /* Litet mellanrum bara */
    padding: 0 !important;
}

/* Se till att de inte reagerar på "Hover" (mus-över) */
.databack img[src*=".gif"]:hover,
img[src*="magnify"]:hover {
    transform: none !important;
    box-shadow: none !important;
    z-index: auto !important;
}

/* =======================================================
   STYLING AV BILD-KORT (STRIKT VERSION FÖR ATT SKYDDA ANTAVLAN)
   ======================================================= */

/* 1. Grundinställning för tabellen (Gäller bara om bilden ligger FÖRST) */
table:has(td:first-child > a[href*="showmedia.php"]) {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* 2. Dölj innehållet i textrutan (beskrivningen) */
tr:has(td:first-child > a[href*="showmedia.php"]):not(:has(td:nth-child(3))) td:nth-child(2) * {
    display: none !important;
}

/* 3. Krymp textrutan men behåll linjen */
tr:has(td:first-child > a[href*="showmedia.php"]):not(:has(td:nth-child(3))) td:nth-child(2) {
    width: 0px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid #aaaaaa !important; 
}

/* 4. Bild-rutan (tar hela bredden)
   VIKTIGT: Selektorn 'td:first-child > a' säkerställer att vi inte 
   pajar Antavlan där länken ligger i andra kolumnen. */
tr:has(td:first-child > a[href*="showmedia.php"]):not(:has(td:nth-child(3))) td:first-child {
    width: 100% !important;
    background-color: #efefef !important;
    
    border: none !important;
    border-bottom: 1px solid #aaaaaa !important; /* Linjen i botten */
    
    display: table-cell !important;
    padding: 8px !important;
    text-align: left !important;
}

/* 5. FIX FÖR SAMMANFOGNING (KORT-DESIGN)
   Här kopplar vi ihop texten med bilderna, men utan att påverka andra sidor. */

/* Ta bort linjen under texten om det kommer bilder efteråt */
tr:has(td .notearea):has(+ tr td:first-child > a[href*="showmedia.php"]) td {
    border-bottom: none !important;
}

/* Ta bort linjen under rubriken/årtalet om det kommer text efteråt */
tr:has(+ tr td .notearea) td {
    border-bottom: none !important;
}

/* Ta bort topp-ramar för snyggare ihopflytning */
tr:has(td .notearea) td,
tr:has(td:first-child > a[href*="showmedia.php"]) td {
    border-top: none !important;
}

/* =======================================================
   KOMPLETT LÖSNING: HELVITT RUTNÄT (ÄVEN UNDER BILDER)
   ======================================================= */

/* 1. GRUNDINSTÄLLNING: Kollapsa tabellen för layoutens skull */
table:has(td:first-child > a[href*="showmedia.php"]) {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: none !important; 
}

/* 2. SKAPA DET VITA RUTNÄTET I FAKTA-DELEN (Namn, Född etc.) */
table:has(td:first-child > a[href*="showmedia.php"]) td.fieldnameback,
table:has(td:first-child > a[href*="showmedia.php"]) td.databack {
    border-bottom: 1px solid #ffffff !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important; 
}

/* Lägg till vertikal linje mellan rubrik och data */
table:has(td:first-child > a[href*="showmedia.php"]) td.fieldnameback {
    border-right: 1px solid #ffffff !important;
}

/* =======================================================
   3. MOBIL-ANPASSNING (LÖSNING MED "VIT TEJP")
   ======================================================= */
@media screen and (max-width: 800px) {

    /* --- A. TEXT-RADEN --- */
    #tpage tr:has(td .notearea):has(+ tr td:first-child > a[href*="showmedia.php"]) {
        background-color: #ffffff !important;
        border-bottom: none !important;
        margin-bottom: 0 !important;
        display: block !important;
    }
    
    #tpage tr:has(td .notearea):has(+ tr td:first-child > a[href*="showmedia.php"]) td {
        background-color: #ffffff !important;
        border-bottom: none !important;
        padding-bottom: 10px !important; /* Lite luft innan skarven */
        display: block !important;
    }

    /* --- B. BILD-RADEN --- */
    #tpage tr:has(td:first-child > a[href*="showmedia.php"]):not(:has(td:nth-child(3))) {
        background-color: #ffffff !important;
        border-top: none !important;
        margin-top: 0 !important;
        display: block !important;
        
        /* Avslutning nedåt (linje mot nästa händelse) */
        border-bottom: 1px solid #ccc !important;
        margin-bottom: 20px !important;
        
        /* VIKTIGT: Gör så att vi kan stapla saker ovanpå varandra */
        position: relative !important; 
        z-index: 5 !important;
    }

    /* --- C. BILD-RUTAN (Här sätter vi "tejpen") --- */
    #tpage tr:has(td:first-child > a[href*="showmedia.php"]):not(:has(td:nth-child(3))) td:first-child {
        display: block !important;
        width: 100% !important;
        background-color: #ffffff !important;
        padding-top: 10px !important; 
        padding-bottom: 15px !important;
        border: none !important;
        position: relative !important; /* Krävs för att placera tejpen */
    }

    /* --- D. "VIT TEJP"-ELEMENTET (The Magic Fix) --- */
    /* Detta skapar en vit rektangel som lägger sig OVANPÅ skarven */
    #tpage tr:has(td:first-child > a[href*="showmedia.php"]):not(:has(td:nth-child(3))) td:first-child::before {
        content: "";              /* Skapa ett tomt objekt */
        position: absolute;       /* Lossa det från layouten */
        top: -20px;               /* Flytta upp det 20px så det täcker glipan */
        left: 0;
        width: 100%;              /* Full bredd */
        height: 30px;             /* 30px högt (täcker både glipan och lite till) */
        background-color: #ffffff;/* VITT! */
        z-index: 100;             /* Lägg det överst */
        pointer-events: none;     /* Så man fortfarande kan klicka "genom" det om det behövs */
    }

    /* --- E. STÄDNING --- */
    #tpage tr:has(td:first-child > a[href*="showmedia.php"]):not(:has(td:nth-child(3))) td:nth-child(2) {
        display: none !important;
    }
    
    table:has(td:first-child > a[href*="showmedia.php"]) {
        border: none !important;
        background: transparent !important;
    }
}

/* =======================================================
   4. HOVER-EFFEKTER: TRANSPARANT RUTA & FÖRSTORINGSGLAS
   ======================================================= */

/* 1. Förstoringsglaset */
a[href*="showmedia.php"], 
a[href*="showmedia.php"] img {
    cursor: zoom-in !important;
}

/* 2. Gör länken till bas */
a[href*="showmedia.php"] {
    position: relative !important;
    display: inline-block !important; 
}

/* 3. Den transparenta rutan (ÄNDRAT TILL data-title) */
a[href*="showmedia.php"][data-title]:hover::after {
    content: attr(data-title); /* <--- Hämtar vår nya "dolda" titel */
    
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    
    white-space: normal;
    width: max-content;
    max-width: 250px;
    text-align: center;
    font-family: 'EB Garamond', Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.3;
    
    background-color: rgba(34, 34, 34, 0.85); 
    backdrop-filter: blur(2px); 
    color: #fff;
    
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 9999;
    pointer-events: none;
}

/* 4. Den lilla pilen (ÄNDRAT TILL data-title) */
a[href*="showmedia.php"][data-title]:hover::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -6px;
    margin-bottom: 2px;
    
    border-width: 6px;
    border-style: solid;
    border-color: rgba(34, 34, 34, 0.85) transparent transparent transparent;
    z-index: 9999;
}

/* Tvinga bort länkarna och radbrytningen i sidopanelens sök-ruta */
div.tsidesection a[href*="searchform"],
div.tsidesection a[href*="searchform"] + br,
div.tsidesection a[href*="surnames"] {
    display: none !important;
}

/* =======================================================
   KIRURGISK FOTNOT-FIX (Baserad på sidans HTML)
   ======================================================= */

/* 1. Kväv paragraferna som innehåller fotnot-länkarna */
p.smaller.center:has(a.footer) {
    font-size: 0 !important;
    color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

/* 2. Göm själva länkarna (Darrin och Kontakt) */
p.smaller.center:has(a.footer) * {
    display: none !important;
}

/* 3. Injicera din nya text ENDAST på raden "Underhålls av..." (förhindrar dubbletter) */
p.smaller.center:has(a[href*="suggest.php"])::after {
    content: "© 2026 Andreas Hallenberg. Allt innehåll är skyddat enligt upphovsrättslagen. Webbplatsen drivs med TNG.";
    
    /* Tvinga fram just denna text */
    display: block !important;
    visibility: visible !important;
    
    /* Din design */
    font-family: 'EB Garamond', serif !important;
    font-size: 15px !important;
    color: #627157 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    
    /* Avstånd så den sitter snyggt längst ner */
    padding: 30px 10px !important;
}

/* =======================================================
   GDPR POPUP FÖR NU LEVANDE PERSONER
   ======================================================= */
.gdpr-modal-overlay {
    display: none; /* Dold som standard */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Mörk halvgenomskinlig bakgrund */
    z-index: 10000; /* Ligger överst av allt */
    justify-content: center;
    align-items: center;
}

.gdpr-modal-content {
    background-color: #efefef;
    padding: 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    font-family: 'EB Garamond', Arial, sans-serif;
    position: relative;
    text-align: left;
    border-top: 5px solid #627157; /* Snygg grön accentkant på toppen */
}

.gdpr-modal-content h2 {
    color: #627157;
    margin-top: 0;
    font-size: 26px;
    font-family: 'EB Garamond', sans-serif;
}

.gdpr-modal-content p {
    font-size: 18px;
    line-height: 1.5;
    color: #222;
    font-family: 'EB Garamond', Arial, sans-serif;
}

.gdpr-modal-content strong {
    color: #627157;
}

.gdpr-btn {
    display: inline-block;
    background-color: #627157;
    color: #fff !important;
    padding: 12px 20px;
    text-decoration: none !important;
    border-radius: 4px;
    margin-top: 15px;
    font-weight: bold;
    font-size: 16px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.gdpr-btn:hover {
    background-color: #8da47f;
}

/* Stäng-krysset */
.gdpr-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #737770;
    cursor: pointer;
    line-height: 1;
}

.gdpr-close:hover {
    color: #222;
}