/* Version 2025.07.16.2 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* White background/black text */
:root {
    --background-color:rgb(247, 246, 241);
    --text-color:black;
    --chidlow-text-color: #d01616;
    --stene-text-color: rgb(27, 27, 133);
    --search-text: rgb(150, 10, 90);
 --search-text: #d01616;
 
    --toggle-bg: #94a3b8;
    --toggle-circle: #ffffff;
}

/* Black background/white text */
/* :root  */

:has(#dark-mode-toggle:checked) {    
    --background-color:rgb(43, 48, 55);
    --text-color:white;
    --chidlow-text-color: aqua;
    --stene-text-color: rgb(118, 190, 249);
    /* --search-text: yellow; */
    --search-text: aqua;

    --toggle-bg: #475569;
    --toggle-circle: #0f172a;
}

body {

    background-color: var(--background-color);
    color:var(--text-color);
    padding: 14px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 14px; /* between children of body */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

header {
    display: flex; 
    align-items: center;
    justify-content: space-between;
}

#dark-mode-toggle {
    display: none;
}

.toggle {
    display: inline-block;
    width: 60px;
    height: 30px;
    background: var(--toggle-bg);
    border-radius: 30px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
}

.toggle::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: var(--toggle-circle);
    border-radius: 50%;
    transition: transform 0.3s;
}

#dark-mode-toggle:checked + .toggle::before {
    transform: translateX(30px);
}

nav,
section {
    display: flex;
    align-items: center;
    gap: 20px;
    /* color: white; */
}

.whiteLink {
    /* color: white; */
    color: var(--text-color);

}

.greyLink {
    /* color: lightgray; */
    color: var(--text-color); 
}

a {
    text-decoration: unset;
    color: var(--text-color);
}

.comingSoon {
    color:rgb(7, 126, 126);
    font-family: cursive;

}

.content {
  width: 92%;
  margin:auto;
    background-color: rgba(245, 245, 126, 0.841);
    color: black;
    padding: 4%;
    border-radius: 10px;
    max-width: 1080px;
    justify-content: center;

}

/* For list of names, spouses and children */
.container {
    display: grid;
    /* grid-template-rows: repeat(26,25px); */
    
    grid-template-columns: repeat(minmax(0px, 1fr));
    column-gap: 1rem;
    /* grid-template-rows: 3; */
    grid-auto-rows: auto;
}

.container-family {
  display: grid;
    /* row-gap: 1rem; */
    column-gap: 0.5rem;
    padding: 5px;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    /* grid-template-rows: repeat(1,minmax(auto, max-content)); */
    /* grid-template-rows: auto; */
    grid-auto-rows: auto;
}

.container-Stene {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: auto;
}

.container-Stene .name {
    grid-column: 1;
    text-align: left;
}

.container-Stene .spouse {
    grid-column: 2;
    text-align: left;
}

.container-Stene .child {
    grid-column: 3;
    font-size: medium;
}

.fam {
    border: 2px solid black;
    background-color: beige;
    display: grid;
    padding: 5px;
    /* grid-template-columns: repeat(auto-fit,minmax(200px, 1fr)); */
    /* grid-template-rows: 50px 50px 50px; */
    /* grid-auto-rows: 1fr; */
    /* align-content: start; */
    justify-items: center;
    grid-template-rows: subgrid;
    grid-row: span 13;
}

.surname {
    font-size: 1.25rem;
    padding:5px;
    border:solid 1px black;
    border-radius: 25px;
}

.name {
    padding: 5px;
    font-size: 1rem;
    font-style: italic;
    font-weight: bold;
    color: red;
    text-align: center;
}

.dates {
    font-size: 0.5rem;
    margin-bottom: 5px;
}

.spouse {
    font-size: 1rem;
    padding: 5px;
    /* margin-bottom: 10px; */
    text-align: center;
}

.child {
    font-size: 0.75rem;
    padding-bottom: 5px;
}

a:hover {
    text-decoration: underline;
    color: var(--text-color);
}

main{
flex: 1;      /*  pushes header section to top and footer to bottom */
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    text-align: center;
    gap: 24px;
}

.horizontal_line {
width: 100%;
border-top: solid 2px;
padding:5px;
margin-top:20px;
}

.horizontal_line_1 {
width: 90%;
border-top: solid 1px;
padding:5px;
margin-top:5px;
}

.headerText1a {
    font-size: 1.5rem;
    color: var(--chidlow-text-color);
}
 
.headerText1b {
    font-size: 1.5rem;
    color: var(--stene-text-color);
}

.headerText3 {
    font-size: 0.5em;
    font-weight: lighter;
}

.familyInfo-container {
    display: grid;
    grid-template-columns: repeat(3,minmax(120px,1fr));
    justify-content: center;
    width: 50%;
}

.familyInfo {
    border-radius: 8px;
    font-style: oblique;
    color: #6b0707;
    margin: 10px;
    padding: 10px;
    background-image: radial-gradient(rgb(242, 99, 99), rgb(126, 240, 147));
    border: solid 2px black;
}

.familyInfo-container a:hover {
    font-size: 1.0rem;

}

.search {
    border: solid 2px black;
    border-color:  var(--text-color);
    border-radius: 10px;
    padding: 10px;
}

.searchBar {
    display: flex;
    width: 100%;
    gap: 14px;
    border: 1px solid grey;
    padding: 14px;
    border-radius: 24px;
    color: var(--search-text);
    font-weight: bold;
    align-items: center;
}

.searchBar {
    margin-top: 15px;
    margin-bottom: 5px;
}

.searchBar:hover {
    border-color: transparent;
    background: darkgray;
    cursor: pointer;
}

input {
    background: transparent;
     background-color: var(--background-color);
    outline: none;
    border: unset;
    border-radius: 5px;
    font-size: 1rem;
    color: var(--text-color);
}

input[type=radio] {
margin-right: 10px;
}

.search p {
    padding: 10px;
    color: var(--search-text);
    font-size: 1.25rem;
    font-weight: bold
}

label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 5px;
}

input[type=submit] {
    background-color: red;
    color: white;
    font-size: 1.0rem;
    padding: 8px 10px;
    border-radius: 10px;
    margin-top: 5px;
}

.docCount {
    display: flex;
    flex-direction: row;
    font-size: 0.75rem;
    gap: 10px;
}

.lastNameDesc {
    width: 90%;
    text-align: center;
}

.lastNameContainer {
    max-width: 800px;
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr)); /*keeps cols same width if content overflow */
    grid-template-rows: auto auto;
    border-radius: 5%;
    padding: 5px;
    align-items: stretch;
    gap: 10px;  /*between cols */
 }

.lastNames {
    padding: 10px;
    font-size: 0.75rem;
    font-weight: lighter;
    color: var(--search-text);
}

.familyGroup {
    font-size: 1rem;
    font-weight: bold;
    font-style: oblique;
    padding: 5px;
    margin-bottom: 0px;  /* this does not work */
    justify-self: left;
    color: rgb(124, 202, 8);
}

.lastNames:nth-last-child(1) {  
border-left: var(--text-color) solid 1px;
color: var(--stene-text-color);
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-radius: 5px;
    padding: 5px;
}

.footerLink {
    border: 10px;
/* Tried border, padding to make narrower on phone - nothing works     */
    font-size: 1rem;
    display: flex;
    justify-content:center;
    gap: 14px;
    color: var(--text-color);
}

.wrap {
    float:left;
    margin-right: 20px;
}

@media screen and (max-width:800px)  {
    section > div {display: none;}    
    .lastNameContainer {display: none;}
    .lastNameDesc {display: none;}
    .whiteLink {display: none;}
}