/*********************************************/
/* DAIM.CSS                                  */
/* For Diagnostic Artifacts web site         */
/* Greg Brown                                */
/* June 8, 2026                              */
/*********************************************/

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,600,700,800,900");
@import url("https://fonts.googleapis.com/css?family=Cinzel:400,400i,600,700,800,900");
@import url("https://fonts.googleapis.com/css?family=Cinzel+Decorative:400,400i,600,700,800,900");

/***** BASE CSS *****/
body {
    --bg-main-content: #91a9c7; /* medium blue */
    --bg-sidebar: #91a9c7; /* medium blue */
    --bg-bar-container: #91a9c7; /* medium blue */
    --bg-essay-card-container: #91a9c7; /* medium blue */
    --bg-headings: #214168; /* dark blue */
    --bg-header: white;
    --bg-nav: black;
    --bg-footer: black;
    --bg-button: #214168; /* dark blue */
    background-color: #f8f9fa; /* mostly white */
    font-family: 'Montserrat';
    border-color: #FDEAC4; /* light orange */
    background: #FDEAC4; /* light orange */
    text-decoration: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/***** PAGE LAYOUT *****/
.gridarea-head {
    grid-area: header;
}
.gridarea-nav {
    grid-area: nav;
}
.gridarea-side {
    grid-area: sidebar;
}
.gridarea-content {
    grid-area: content;
}
.gridarea-footer {
    grid-area: footer;
}

.wrapper {
    display: grid;
    grid-template-areas: 
        "header"
        "nav"
        "content" 
        "sidebar"
        "footer";
}
@media(min-width: 500px) {
    .wrapper {
        grid-template-columns: 300px 1fr;
        grid-template-areas:
            "header header"
            "nav nav"
            "sidebar content"
            "footer footer";
    }
}
@media print {
    .wrapper {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "nav"
            "content"
            "footer";
    }
}

/***** SECTIONS *****/
header {
    --bg-image: url('../photos/banner.jpg');
    --bg-image-opacity: 0.25;
    background-color: #ab6e0a; /* dark orange */
    background-color: #ddd; /* gray */
    background-color: var(--bg-header);
    margin: 0;
    display: grid;
    place-content: left;
    text-align: left;
    min-height: 100px;
    position: relative;
    isolation: isolate;
    opacity: 1;
}

header::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    opacity: var(--bg-image-opacity);
}

nav {
    background-color: black;
    color: white;
    display: flex;
}

aside {
    background: #ab6e0a;
    background: #FDEAC4;
    background: #80b0cd; /* medium blue */
    background: var(--bg-sidebar);
    color: white;
    color: black;
    padding: 20px;
    box-sizing: border-box;
}

footer {
    background: black;
    color: white;
    padding: 10px;
}

main {
    box-sizing: border-box;
    background: #FDEAC4; /* light yellow */
    background: white;
    padding: 20px;
    padding: 1rem 10% 1rem 2rem;
    padding-bottom: 500px;
}

/***** MAIN *****/
.breadcrumbs {
    font-size: 80%;
}

/***** HEADER *****/
header h1 {
    color: black;
    opacity: 1;
    z-index: 3;
    /*text-shadow: 2px 2px #000;*/
    font-size: 3rem;
    text-align: left;
    margin: 0;
    padding: 4rem 2rem;
    padding: 2rem 2rem 0 2rem;
}

header h2 {
    color: black;
    opacity: 1;
    z-index: 3;
    font-size: 1rem;
    text-align: left;
    margin: 0;
    margin-left: 2rem;
    padding: 0 2rem 2rem 2rem;
}

header a:link,
header a:visited,
header a:hover,
header a:active {
    text-decoration: none;
    color: black;
}

/***** NAV *****/
nav ul {
    padding: 10px 0;
    margin: 0;
}

nav li {
    display: inline;
    padding: 0px 10px;
}

nav li a:link,
nav li a:visited,
nav li a:hover,
nav li a:active {
    text-shadow: none;
    color: white;
    font-weight: bold;
    padding: 0.5rem 0.5rem;
    text-decoration: none;
}

nav li a:hover {
    background: blue;
}

/***** ASIDE (SIDEBAR) *****/
aside h1 {
    font-size: 120%;
    color: black;
    margin: 0;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid black;
}

aside h4 {
    font-weight: normal;
    font-size: 100%;
     font-size: 80%;
}

aside ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

aside ul ul {
    padding: 0;
    margin: 0 0 0 1rem;
    list-style: none;
}

aside li {
    list-style: none;
    color: black;
    margin-left: 1rem;
    text-indent: -1rem;
}

aside li ul li {
    list-style: none;
    color: black;
}

aside li a:link,
aside li a:visited,
aside li a:hover,
aside li a:active {
    text-decoration: none;
    color: black;
    font-weight: 400;
}

aside li a:hover {
    text-decoration: underline;
}

aside a {
    color: black;
}

aside select {
    margin: 0;
    height: 25px;
    height: 2rem;
}

aside input {
    margin: 0;
    height: 20px;
}

aside p {
    margin: 0;
    margin-top: 10px;
}

/***** SIDEBAR SUMMARY/DETAILS *****/
details summary {
    font-size: 120%;
    color: black;
    margin: 0;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid black;
    font-family: Cinzel;
    color: var(--bg-headings);
    color: black;
    font-weight: 600;
    line-height: 1.2;
}

/***** FOOTER *****/
footer ul {
    list-style: none;
    float: right;
    margin-right: 20px;
}

footer ul li {
    display: inline-block;
    color: white;
    margin-right: 5px;
}

footer ul li a {
    color: white;
    text-decoration: none;
}

footer a:link,
footer a:visited,
footer a:hover,
footer a:active {
    color: white;
    text-decoration: none;
}

footer a:hover {
    color: white;
    text-decoration: underline;
}

/***** TYPOGRAPHY AND SPECIAL CLASSES *****/
h1 {
    font-family: Cinzel;
    color: var(--bg-headings);
    font-size: 3rem;
    line-height: 1.2;
}

h1 small {
    font-size: 60%;
    font-weight: bold;
}

h2 {
    font-family: Cinzel;
    color: var(--bg-headings);
    font-size: 2rem;
    margin-bottom: 1rem;
    margin-bottom: 0.5rem;
}

h3 {
    font-family: Cinzel;
    color: var(--bg-headings);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

p {
    line-height: 1.6;
    font-size: 90%;
}

hr {
    background-color: #ccc; /* gray */
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

.text-muted {
    font-size: 70%;
    color: black !important;
}

ul > li {
    line-height: 1.6;
    font-size: 90%;
}

a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    color: blue;
    color: var(--bg-button);
    font-weight: 700;
}

a:hover {
    text-decoration: underline;
}

/***** ESSAYS SPECIAL CLASSES *****/
.media-heading {
    text-align: left;
}

h1.withbyline {
    margin-bottom:0;
}

h1.withbyline small {
    line-height: 1.4;
}

.ssbyline {
    font-style: italic;
}

.author {
    font-style: italic;
}

.clearfix {
    clear: both;
}
/* how to cite */
p.examples {
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
}

.todo {
    font-size: 2rem;
    color: red;
}

.stilltodo {
    font-size: 150%;
    color: red;
}

/* glossary heading, term, and definition */
.glossaryhead {
    display: none;
}

.glossaryletter {
    font-weight: bold;
    font-size: 160%;
    font-style: italic;
    display: none;
}

dt,
p.dt {
    font-weight: bold;
    margin-bottom: 0;
}

dd,
p.dd {
    margin-left: 20px;
    margin-top: auto;
}

/* references */
.bibauthor {
    margin-bottom: 0;
}

.bibtext {
    margin-top: 0;
    margin-left: 40px;
    text-indent: -20px;
}

.h2-with-backlink {
    display: grid;
    grid-template-columns: 1fr 100px;
    width: 100%;
}

    .h2-with-backlink h2 {
        margin-top: 0;
    }

    .h2-with-backlink div {
        text-align: right;
    }

.card-block small {
    font-size: 75%;
    font-weight: normal;
    display: block;
}

h3.card-title {
    margin-top: 0;
}

.tagIcons small {
    font-size: 75%;
    font-weight: normal;
    display: block;
}

.tagIcons {
    padding-top: 5px;
}

/***** IMAGES *****/
img {
    height: auto;        /* Make sure images are scaled correctly. */
    max-width: 100%;     /* Adhere to container width. */
}

figure {
    margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */
}

.img,
.i450right img,
.i450center img,
.i300right img,
.i200right img,
.i100right img,
.i600center img,
.i900center img,
.i300left img,
.media-image img {
    width: 100%;
    border-radius: 1rem;
}

.i100right img {
    float: right;
    margin-left: 2rem;
    width: 100px;
    border-radius: 1rem;
}

.i450right {
    display: block;
    float: none;
    width: min(450px, 100%);
}

.i300right {
    display: block;
    float: none;
    width: min(300px, 100%);
    width: 300px;
}

.i200right {
    display: block;
    float: none;
    width: min(200px, 100%);
}

.i100right img {
    float: right;
    margin-left: 2rem;
    width: 100px;
    border-radius: 1rem;
}

.i300left {
    width: min(300px, 50%);
}

.i450center {
    display: block;
    float: none;
    width: 100%;
}

.i600center {
    display: block;
    float: none;
    width: 100%;
}

.i900center {
    display: block;
    float: none;
    width: 100%;
}

@media (min-width: 500px) {
    .i450right {
        float: right;
        margin-left: 2rem;
        width: min(450px, 50%);
    }

    .i300right {
        float: right;
        margin-left: 2rem;
        width: min(300px, 50%);
    }

    .i200right {
        float: right;
        margin-left: 2rem;
        width: min(200px, 33%);
    }

    .i450left {
        float: left;
        margin-left: 2rem;
        width: min(450px, 50%);
    }

    .i300left {
        float: left;
        margin-left: 2rem;
        width: min(300px, 50%);
    }

    .i450center {
        display: block;
        width: min(450px, 50%);
    }

    .i600center {
        display: block;
        width: min(600px, 67%);
    }

    .i900center {
        display: block;
        width: min(900px, 100%);
    }
}

.imageleft {
    float: left;
    margin-left: 10px;
    width: 200px;
}

.imageright {
    float: right;
    margin-left: 10px;
    width: 200px;
}

.imagecenter {
    margin-left: 10px;
    width: auto;
}

.caption,
.hidden-caption {
    font-size: 80%;
    font-style: italic;
    display: block;
    width: 100%;
    margin-left: 0.5rem;
    margin-bottom: 1rem;
}

figcaption {
    font-size: 75%;
    line-height: 1.3;
    margin-bottom: 1rem;
}

/***** IMAGE GALLERY *****/
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-template-columns: repeat(auto-fit, 180px);
    grid-gap: 1rem;
    grid-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    margin-bottom: 1rem;
}

.image-card {
    max-width: 180px;
    margin-bottom: 0.5rem;
}

.image-card h3 {
    font-size: 50%;
    display:none;
}

.image-card img {
    width: 100%;
}

/* PC ceramics image rows */
.three-column-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-template-columns: repeat(auto-fit, 300px);
    grid-gap: 1rem;
    margin-bottom:2rem;
}
.three-column-gallery img {
    width: 100%;
}
.three-column-gallery-two-across {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    margin-bottom: 2rem;
}
.three-column-gallery img {
    width: 100%;
}

/* right justified card */
.right-div-card .card {
    display: block;
    width: min(200px, 100%);
    border: none;
}

@media (min-width: 500px) {
    .right-div-card .card {
        float: right;
        width: min(200px, 100%);
        margin-left: 1rem;
        border:none;
    }
}

.right-div-card img {
    width: 100%;
}

.right-div-card .card-body {
    color: white;
    color: black;
    background-color: #0072c6;
    background-color: white;
}

.right-div-card a {
    color: white;
    color: black;
}

.right-div-card .card-body a:hover {
    color: white !important;
    color: black !important;
    text-decoration: underline !important;
}

.right-div-card h5.card-title {
    color: white;
    color: black;
    font-size: 100%;
    font-weight: bold;
}

.card-wide {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    flex-basis: 90%;
    background: #ccc;
    background: var(--bg-bar-container);
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
}

.essay-card-container .card-wide hr {
    border-top: 1px solid black;
    height: 5px;
    margin: 0 10px 0 20px;
    padding: 0;
}

.essay-card-container .card-wide {
    font-size: 85%;
}

.map-card h4.card-title {
    padding-top: 0.25rem;
    font-size: 100%;
    text-align: center;
}

/***** ESSAY CARDS *****/
/* Used for style gallery on pages */
.essay-card-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.essay-card-container .card {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    flex-basis: 200px;
    background: #ccc;
    background: var(--bg-bar-container);
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
}

.essay-card-container h3.card-title,
.essay-card-container h3.media-heading {
    margin-bottom: 0;
    font-size: 120%;
    font-size: 110%;
    padding-top: 0.5rem;
}

.essay-card-container h4.card-title {
    margin-bottom: 0;
}

.essay-card-container .card img,
.essay-card-container .card-wide img {
    width: 100%;
}

.essay-card-container .card a {
    text-decoration: none;
    color: #111; /* dark gray */
    font-weight: bold;
}

.essay-card-container .card a:hover {
    text-decoration: underline;
}

.essay-card-container .card p a {
    color: blue;
}

.essay-card-container .card-links {
    font-weight: bold;
    float: right;
    font-size: 90%;
}

.card-back > div:has(div.data > span:empty) {
    display: none;
}

span:has(> a.tag-pill) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.25rem;
}
a.tag-pill {
    padding: 3px 5px;
    background: #ccc;
    border-radius: 100vmax;
    border-radius: 0.25rem;
}
a.tag-pill:empty {
    display:none;
}

/* Dates at bottom of thumbnails */
.date-footer {
    background-color: black;
    color: white;
    font-size: 60%;
    font-style: italic;
    padding: 0.5rem 1rem;
}

.label {
    float: none;
}

div.data-line:has(div.data > span:empty) {
    outline: 1px solid yellow;
    display: none;
}

h6 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0;
}

.backlink {
    font-weight: bold;
    text-align: right;
}

.btn {
    font-size: 90%;
}

/***** TABLES *****/
table {
    margin: 0 0 1.5em;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8em;
}

.table-title {
    font-size: 110%;
    font-weight: bold;
    margin-bottom: 5px;
}

table th {
    text-align: left;
    padding-left: 0.5rem;
    padding-bottom: 5px;
    background-color: rgb(84, 64, 31); /* dark brown */
    background: var(--bg-bar-container);
    color: white;
}

table.standard thead th {
    font-size: 120%;
}

table td {
    padding: 2px 5px;
    border: 1px solid #ccc;
    vertical-align: top;
}

tr.subhead td {
    padding-bottom: 5px;
    background-color: #dec59b; /* medium brown */
}

tr.subsubhead td {
    padding-bottom: 5px;
    background-color: #dec59b; /* medium brown */
}

tr.subsubsubhead td {
    padding-bottom: 5px;
    background-color: #dec59b; /* medium brown */
}

tfoot td {
    border: none;
    border-top: 1px solid black;
    padding-bottom: 5px;
    font-size: 100%;
    padding-top: 10px;
    font-weight: bold;
}

table.standard td p {
    font-size: 100%;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

table.tblSites th,
table.tblSites td {
    border: 1px solid black;
}

.tblSites td,
.tblSites th {
    padding-block: 5px;
    border: none;
}

table.tblSites th,
table.tblSites td {
    border: none;
}

.tblSites tr:nth-child(2n+1) td {
    background-color: #ddd;
}

.ceramictypes td li {
    font-size: 100%;
}

/***** CSS NOT USED, TO CHECK *****/
.date-footer {
    display:none;
}

.highlight {
    background-color: yellow;
}

.outside-link {
    position: relative;
}

a:has(.outside-link):hover {
    position: relative;
    text-decoration: none;
}

.outside-link:before {
    content: '\f03e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    margin-right: 0.5rem;
}

.imgintable img {
    width: 200px;
}

.photo-instructions {
    font-size: 50%;
    margin-top: 0.25rem;
}

.ExampleLink::after {
    content: ' \2197';
}

.GalleryLink {
    float: right;
    font-size: 80%;
}

.GalleryLink::after {
    content: ' \2197';
}

.hilite {
    color: crimson;
    font-weight: 900;
}

/*****  Site summaries, gallery at bottom    *****/
.site-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 1rem;
}

.site-gallery div {
    background: #ccc;
    padding: 10px;
    padding-block: 2rem;
}

.site-gallery div p {
    margin: 0;
    padding: 10px;
    display: block;
    line-height: 1.2;
}

.site-gallery div p.site-number {
    margin-block: 0;
    text-align: center;
    padding-block: 0;
    font-size: 70%;
    font-weight: bold;
}

.site-gallery div p.site-name {
    margin-block: 0;
    text-align: center;
    padding-block: 0;
}

.site-gallery div p.site-date {
    margin-block: 0;
    text-align: center;
    padding-block: 0;
    font-size: 70%;
}

.with-captions .media-heading {
    display: block;
}

.image-gallery.with-captions {


}

.image-gallery.with-captions .image-card h3 {
    font-size: 80%;
    font-style: italic;
    display: block;
    width: 100%;
    margin-left: 0.5rem;
    margin-bottom: 1rem;

}

.image-gallery.with-captions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-template-columns: repeat(auto-fit, 180px);
    grid-template-columns: repeat(auto-fit, 250px);
    grid-gap: 1rem;
    grid-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    margin-bottom: 1rem;
}

.image-gallery.with-captions .image-card {
    max-width: 180px;
    max-width: 250px;
    margin-bottom: 0.5rem;
}

.image-gallery.with-captions .image-card h3 {
    font-size: 100%;
}

.image-gallery.with-captions .image-card img {
    width: 100%;
}


.image-gallery.with-captions h3 {


}

.td-photo {
    width: 150px;
}