/* ============================================================
   TEAL THEME — Image Magic Digital Studios
   This file provides ONLY color and theme overrides.
   Layout, spacing, and structure are in style.css.
============================================================ */

/* ------------------------------------------------------------
   GLOBAL ACCENTS
------------------------------------------------------------ */
body {
    --teal: #0097a7;
    --teal-dark: #007c8a;
    --teal-light: #33b5c4;
    --text-dark: #222;
    --text-light: #fff;
}

/* Links */
a {
    color: var(--teal);
}
a:hover {
    color: var(--teal-dark);
}

/* ------------------------------------------------------------
   H1 for Modal
   These match the colored ribbons on each tile.
------------------------------------------------------------ */

/* Modal H1 color override for teal theme */
.lb-article .lb-title {
    color: var(--teal);
}
/* ------------------------------------------------------------
   TILE CATEGORY LABELS
   These match the colored ribbons on each tile.
------------------------------------------------------------ */
.tile-cat.teal {
    background: var(--teal);
    color: var(--text-light);
}

.tile-cat.dark-blue {
    background: #003f63;
    color: var(--text-light);
}

.tile-cat.red {
    background: #b71c1c;
    color: var(--text-light);
}

.tile-cat.black {
    background: #111;
    color: var(--text-light);
}

/* ------------------------------------------------------------
   MODAL CATEGORY LABELS
------------------------------------------------------------ */
.postcat.tealtxt,
.projectcat.tealtxt {
    color: var(--teal);
}

/* ------------------------------------------------------------
   BUTTONS (exp-button)
------------------------------------------------------------ */
.exp-button {
    display: inline-block;
    padding: 8px 14px;
    background: var(--teal);
    color: var(--text-light);
    text-decoration: none;
    border-radius: 3px;
    transition: background 0.25s ease-in-out;
}
.exp-button:hover {
    background: var(--teal-dark);
}

/* ------------------------------------------------------------
   HIGHLIGHT BLOCKS
------------------------------------------------------------ */
#highlights .tile-cat.teal {
    background: var(--teal);
}
#highlights .tile-cat.dark-blue {
    background: #003f63;
}
#highlights .tile-cat.red {
    background: #b71c1c;
}

/* ------------------------------------------------------------
   HEADER ACCENTS (optional)
------------------------------------------------------------ */
#nav li.current a span {
    color: var(--teal);
}

/* ------------------------------------------------------------
   FOOTER LINKS
------------------------------------------------------------ */
#footer a {
    color: var(--teal-light);
}
#footer a:hover {
    color: var(--teal);
}