/* ================================================================
   Scripto Custom Styles — Foundation Seafoam Theme Integration
   Aligns Scripto visually with the Omeka S Foundation/Seafoam theme.
   ================================================================ */

/* Typography — match Seafoam's Source Sans Pro */
body {
    font-family: 'Source Sans Pro', sans-serif;
    color: #0a0a0a;
}

h1, h2, h3, h4, h5, h6 {
    color: #0a0a0a;
}

/* Links — teal to match Seafoam primary */
a {
    color: #007a76;
}

a:visited {
    color: #007a76;
}

a:hover {
    color: #005c59;
    text-decoration: underline;
}

/* Buttons */
button,
.button,
input[type="submit"] {
    background-color: #007a76;
    color: #fefefe;
    border: 1px solid #007a76;
}

/* <a class="button"> visited-state fix: a:visited (0-1-1) would otherwise
   beat .button (0-1-0), making teal text invisible on a teal background. */
a.button,
a.button:visited {
    color: #fefefe;
}

button:hover,
.button:hover,
input[type="submit"]:hover {
    background-color: #005c59;
    border-color: #005c59;
    color: #fefefe;
}

button:disabled,
button.inactive,
.button:disabled,
.button.inactive,
input[type="submit"]:disabled {
    background-color: #e6e6e6;
    border: 1px solid #cacaca;
    color: #8a8a8a;
    cursor: default;
}

/* Watchlist button */
.watchlist.button {
    background-color: #007a76;
    border: 1px solid #007a76;
    color: #fefefe;
}

.watchlist.button:hover {
    background-color: #005c59;
    border-color: #005c59;
    color: #fefefe;
}

/* ================================================================
   Site Header — teal background matching Seafoam's top-bar
   ================================================================ */
.site-header {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #007a76;
    border-top: none;
    border-bottom: none;
    color: #fefefe;
}

.site-header a {
    color: #fefefe;
    background-color: transparent;
    text-decoration: none;
}

.site-header a:hover {
    color: #c5f4f2;
    text-decoration: none;
}

.site-title,
.site-title:visited {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 900;
    color: #fefefe;
}

/* ================================================================
   Top navigation links
   ================================================================ */
.site-nav {
    color: #fefefe;
}

.top-nav .page-link {
    color: #fefefe;
}

.top-nav .page-link:hover {
    color: #c5f4f2;
    text-decoration: underline;
}

/* User toggle button — give both logged-in and logged-out states
   enough room so the text/icon isn't squashed */
.user-toggle,
.user-toggle:visited {
    color: #fefefe;
}

.logged-in .user-toggle {
    width: auto;
    min-width: 37.5px;
    padding: 0 12px;
}

.logged-out .user-toggle {
    padding: 0 12px;
}

/* When dropdown is open, the :before pseudo-element paints a white
   background behind the toggle button — change the caret to teal
   so it stays visible against that white "tab". */
.user.open .user-toggle,
.user.open .user-toggle:after {
    color: #007a76;
}

/* User dropdown — white background, so links must be dark.
   Override the site-header-wide white-link rule here.
   min-width prevents the panel from being cramped. */
.user-menu {
    color: #0a0a0a;
    min-width: 220px;
}

.user-menu a,
.user-menu a:visited {
    color: #0a0a0a;
}

.user-menu a:hover {
    color: #007a76;
    text-decoration: underline;
}

/* "Archive" back-link — matches the other .page-link nav items */
.back-to-archive,
.back-to-archive:visited {
    color: #fefefe;
}

.back-to-archive:hover {
    color: #c5f4f2;
    text-decoration: underline;
}

/* ================================================================
   Project navigation bar — darker teal sub-header
   ================================================================ */
.project-nav {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    background-color: #005c59;
    color: #fefefe;
    border-top: none;
    padding: 6px 30px;
    margin: 0 -30px;
    width: calc(100% + 60px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-nav h2 {
    margin: 0 auto 0 0;
    color: #fefefe;
    font-size: 1rem;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
}

.project-nav a,
.project-nav a:visited {
    color: #fefefe;
    text-decoration: none;
}

.project-nav a:hover {
    color: #c5f4f2;
    text-decoration: underline;
}

.project-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
}

.project-nav li {
    margin-left: 30px;
}

/* Search form inside project nav */
#scripto-search input[type="text"] {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.15);
    color: #fefefe;
}

#scripto-search input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

#scripto-search button {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-left: none;
    color: #fefefe;
}

#scripto-search button:hover {
    background-color: rgba(0, 0, 0, 0.35);
}

/* ================================================================
   Page content
   ================================================================ */
.post-title {
    font-family: 'Source Sans Pro', sans-serif;
    text-align: left;
    text-decoration: none;
}

/* Section nav active tab — use Seafoam secondary as highlight */
.section-nav a.active {
    background-color: #c5f4f2;
    color: #007a76;
    border-radius: 20px;
}

/* Completion bar at 100% */
.completion[style="width: 100%"] {
    background-color: #007a76;
}

/* Resource metadata labels */
.resource-metadata .property dt {
    font-weight: 700;
    font-size: 1rem;
}