/*
 * Ely Arts Commons — Main Stylesheet
 * Ported from WordPress blankslate theme SCSS with pixel-level fidelity.
 *
 * Design tokens (from _globals.scss):
 *   $primary-color:       #1ab3ff  (darken(#66ccff, 15%))
 *   $secondary-color:     #23c7a7
 *   $nav-height:          85px
 *   $mobile-nav-height:   70px
 *   $max_container_width: 1200px
 *   $nav-font:            'Merienda', cursive
 *   $artsy-header-font:   'Fondamento', cursive
 *   $paragraph-font:      'Noto Serif SC', serif
 *   $fb-blue:             #3b5998
 *   $insta-purple:        #8a3ab9
 *
 * Breakpoints:
 *   $break-phone:             600px
 *   $break-phone-small:       400px
 *   $break-phone-horizontal:  800px
 *   $break-tablet:            1000px
 */

/* ============================================================
   RESET / BASE  (mirrors WP blankslate reset)
   ============================================================ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    font-size: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    vertical-align: baseline;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
*, *::before, *::after { box-sizing: border-box; }

.clear { clear: both; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; }

/* ---- Global body font ---- */
html body {
    font-family: 'Quote Fix', 'Noto Serif SC', serif;
    line-height: 1.4;
}

/* ---- Max-width utility ---- */
.max-width {
    max-width: 1200px;
    margin: auto;
}

/* ---- noselect utility ---- */
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ---- Global link ---- */
a { color: #1ab3ff; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }


/* ============================================================
   NAVIGATION  (mirrors _nav.scss)
   ============================================================ */
.site-header {
    background: #1ab3ff;
    position: relative;
    height: 85px;
}
@media screen and (max-width: 600px) {
    .site-header { height: 70px; }
}

.main-nav { height: 100%; }

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: relative;
}

/* Logo — absolutely positioned like WP .logo */
.nav-logo {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 20px;
    display: block;
    line-height: 0;
}
.nav-logo img {
    height: 85px;
}
@media screen and (max-width: 600px) {
    .nav-logo img { height: 70px; }
}

/* Nav menu — right-aligned, Merienda 22px white */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    margin-left: auto;
}
.nav-menu li a {
    display: block;
    padding: 0 20px;
    line-height: 85px;
    color: white;
    font-family: 'Merienda', cursive;
    font-size: 22px;
    text-decoration: none;
    background: #1ab3ff;
    transition: background 0.15s;
}
@media screen and (max-width: 600px) {
    .nav-menu li a { line-height: 70px; }
}
.nav-menu li a:hover {
    background: #0099e6;
    text-decoration: none;
}
.nav-menu li form { margin: 0; }
.nav-menu li button {
    display: block;
    padding: 0 20px;
    line-height: 85px;
    border: 0;
    margin: 0;
    cursor: pointer;
    color: white;
    font-family: 'Merienda', cursive;
    font-size: 22px;
    background: #1ab3ff;
    transition: background 0.15s;
}
@media screen and (max-width: 600px) {
    .nav-menu li button { line-height: 70px; }
}
.nav-menu li button:hover { background: #0099e6; }
.nav-menu li.active a {
    background: #0088cc;
}

/* Hamburger toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 20px 0 0;
    line-height: 85px;
    font-size: 24px;
    font-family: 'Merienda', cursive;
    color: white;
    margin-left: auto;
}
.nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: #fff;
    margin: 5px 0;
}
@media screen and (max-width: 600px) {
    .nav-toggle { display: flex; flex-direction: column; justify-content: center; line-height: normal; height: 70px; }
    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: #1ab3ff;
        padding: 0;
        z-index: 100;
    }
    .nav-menu.open { display: flex; }
    .nav-menu li button {
        width: 100%;
        text-align: left;
        line-height: 50px;
        padding: 0 20px;
        border-top: 1px solid rgba(255,255,255,0.2);
    }
    .nav-menu li a {
        line-height: 50px;
        padding: 0 20px;
        border-top: 1px solid rgba(255,255,255,0.2);
    }
}

/* ---- Main content area ---- */
.site-main { min-height: calc(100vh - 85px - 200px); }

/* ---- Messages ---- */
.messages { max-width: 1200px; margin: 16px auto; padding: 0 20px; }
.message { padding: 12px 16px; border-radius: 4px; margin-bottom: 8px; }
.message--success { background: #d4edda; color: #155724; }
.message--error { background: #f8d7da; color: #721c24; }
.message--warning { background: #fff3cd; color: #856404; }


/* ============================================================
   FOOTER  (mirrors _footer.scss)
   ============================================================ */
.site-footer {
    background: #1ab3ff;
    margin-top: 70px;
}
.footer-inner {
    max-width: 1100px;
    margin: auto;
    padding: 16px 0;
    /* inline-block columns like WP */
    font-size: 0; /* collapse inline-block whitespace */
}
.footer-credit {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 20px;
    text-align: center;
    font-size: 14px;
    color: white;
}
.footer-credit a {
    color: white;
    text-decoration: underline;
}
.footer-col {
    display: inline-block;
    vertical-align: top;
    width: 33%;
    font-size: 16px; /* restore font-size */
}
@media screen and (max-width: 1000px) {
    .footer-col { width: 49%; }
}
@media screen and (max-width: 600px) {
    .footer-col { width: 100%; }
}

.footer-col-header {
    font-size: 32px;
    font-family: 'Merienda', cursive;
    color: white;
    padding-top: 10px;
    text-align: center;
    margin-top: 20px;
}

/* Social column */
.footer-social {
    text-align: center;
}
.footer-social .icon-links {
    margin-top: 8px;
}
.footer-social .icon-links a {
    display: inline-block;
    text-decoration: none;
}
.footer-social i {
    font-size: 56px;
    padding: 0 4px;
}
.footer-social i.fa-facebook-square {
    color: #3b5998;
}
.footer-social i.fa-instagram {
    color: #8a3ab9;
}

/* Mailing address (hidden by default like WP) */
.footer-contact {
    margin-top: 40px;
    display: none;
}
@media screen and (max-width: 600px) {
    .footer-contact { margin-top: 20px; }
}
.footer-contact .address {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    color: white;
    border: 1px solid;
    border-radius: 6px;
    padding: 7px 20px;
}

/* Mailing list form column */
.footer-mailing-list-wrap {
    max-width: 300px;
    display: table;
    margin: auto;
}
.footer-mailing-list-wrap p {
    color: white;
    font-family: 'Merienda', cursive;
    font-size: 14px;
    margin-top: 8px;
}
.mailing-list-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.mailing-list-form input[type="email"],
.mailing-list-form input[type="text"] {
    width: 100%;
    border: none;
    font-family: 'Noto Serif SC', serif;
    padding: 6px 8px;
    margin: 0;
    font-size: 14px;
}
.mailing-list-form button,
.mailing-list-form input[type="submit"] {
    width: 100%;
    font-size: 20px;
    padding: 7px 0;
    background: #23c7a7;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px dashed #55e1c6;
    transition: 0.25s all ease-in-out;
    cursor: pointer;
    font-family: 'Noto Serif SC', serif;
    -webkit-appearance: none;
    margin-top: 4px;
}
.mailing-list-form button:hover,
.mailing-list-form input[type="submit"]:hover {
    background: #1fb195;
}

/* Logo column */
.footer-logo-wrap {
    padding: 20px;
    text-align: center;
}
.footer-logo-wrap img {
    max-width: 100%;
}


/* ============================================================
   HOME PAGE  (mirrors _home.scss)
   ============================================================ */
.home-page .main-content {
    padding: 10px;
}

.home-page .main-content > .header {
    text-align: center;
    margin-top: 30px;
    font-size: 54px;
    font-family: 'Fondamento', cursive;
    padding-left: 20px;
    padding-right: 20px;
}
@media screen and (max-width: 600px) {
    .home-page .main-content > .header { font-size: 36px; }
}
@media screen and (max-width: 400px) {
    .home-page .main-content > .header { font-size: 30px; }
}

.home-page .main-content > .sub-header {
    text-align: center;
    font-size: 20px;
    margin-top: 16px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 600px) {
    .home-page .main-content > .sub-header {
        padding: 0 24px;
        font-size: 14px;
    }
}

.home-page .main-content .submit-listing .button {
    text-align: center;
    background: #0099e6;
    color: white;
    display: table;
    margin: 16px auto 0 auto;
    border-radius: 4px;
    padding: 8px 26px;
    font-size: 21px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.25s all ease-in-out;
    border: 2px solid transparent;
}
@media screen and (max-width: 600px) {
    .home-page .main-content .submit-listing .button { font-size: 18px; }
}
.home-page .main-content .submit-listing .button:hover {
    background: #006699;
    border: 2px dashed #66ccff;
    text-decoration: none;
}

.home-page .main-content .submit-listing .free-note {
    text-align: center;
    margin: 10px 0 0 0;
    font-size: 15px;
}

.home-page .main-content .categories {
    margin-top: 30px;
    min-height: 500px;
    /* inline-block layout like WP */
    font-size: 0;
}

.home-page .main-content .categories .category {
    display: inline-block;
    width: 33.333%;
    vertical-align: bottom;
    font-size: 16px;
    cursor: pointer;
}
@media screen and (max-width: 1000px) {
    .home-page .main-content .categories .category { width: 50%; }
}
@media screen and (max-width: 600px) {
    .home-page .main-content .categories .category { width: 100%; }
}

.home-page .main-content .categories .category .wrap {
    margin: 5px;
    position: relative;
    overflow: hidden;
}
.home-page .main-content .categories .category .wrap .bg-wrap {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 260px;
    transition: 0.25s all ease-in-out;
}
.home-page .main-content .categories .category .wrap:hover {
    cursor: pointer;
}
.home-page .main-content .categories .category .wrap:hover .bg-wrap {
    transform: scale(1.02);
}
.home-page .main-content .categories .category .wrap .title {
    text-align: center;
    background: rgba(60, 60, 60, 0.7);
    font-size: 20px;
    align-self: end;
    width: 100%;
    color: white;
    position: absolute;
    bottom: 0;
    padding: 8px 0;
    font-family: 'Noto Serif SC', serif;
}


/* ============================================================
   DIRECTORY PAGE  (mirrors _directory.scss)
   ============================================================ */
.directory-page .main-content {
    padding: 0 10px;
    min-height: 800px;
}

.directory-page .main-content > .header {
    text-align: center;
    margin-top: 30px;
    font-size: 54px;
    font-family: 'Fondamento', cursive;
    padding-left: 20px;
    padding-right: 20px;
}
@media screen and (max-width: 600px) {
    .directory-page .main-content > .header { font-size: 36px; }
}

/* ---- Search ---- */
.directory-page .main-content .directory-search {
    display: table;
    margin: 20px auto 0 auto;
    width: 300px;
    max-width: 100%;
}
.directory-page .main-content .directory-search input[type="search"] {
    box-sizing: border-box;
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    font-size: 16px;
    border: 1px solid #aaa;
    border-radius: 4px;
}
.directory-page .main-content .directory-search .result-count {
    margin-top: 4px;
    min-height: 18px;
    font-size: 13px;
    color: #555;
}

/* ---- Infinite scroll ---- */
.directory-page .main-content .profiles .load-more-sentinel {
    text-align: center;
    padding: 20px 0;
}
.directory-page .main-content .profiles .load-more-sentinel .load-more-spinner {
    width: 40px;
    height: 40px;
}
.directory-page .main-content .profiles .load-more-btn {
    background: none;
    border: 1px solid #1ab3ff;
    color: #1ab3ff;
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 15px;
    cursor: pointer;
}
.directory-page .main-content .profiles .load-more-btn:hover { color: #0099e6; border-color: #0099e6; }

/* ---- Filter ---- */
.directory-page .main-content .filter {
    display: table;
    margin: 20px auto 20px auto;
}
.directory-page .main-content .filter .category-label {
    font-family: 'Noto Serif SC', serif;
    font-size: 16px;
    margin-bottom: 4px;
}
.directory-page .main-content .filter .category-select select {
    width: 240px;
    font-size: 18px;
}
.directory-page .main-content .filter .subcategory-label {
    margin-top: 15px;
    font-family: 'Noto Serif SC', serif;
    font-size: 16px;
}
@media screen and (max-width: 800px) {
    .directory-page .main-content .filter .subcategory-label { display: block; }
}
.directory-page .main-content .filter .subcategory-select {
    margin-top: 4px;
}
.directory-page .main-content .filter .subcategory-select select {
    font-size: 16px;
}
.directory-page .main-content .filter .subcategory-select .clear-all {
    margin-top: 5px;
}
.directory-page .main-content .filter .subcategory-select .clear-all .wrap {
    display: inline-block;
    float: right;
    color: #1ab3ff;
    cursor: pointer;
    border: 1px solid;
    font-size: 14px;
    border-radius: 4px;
    padding: 0 4px;
}
.directory-page .main-content .filter .subcategory-select .clear-all .wrap:hover {
    color: #0099e6;
}

/* ---- Profiles container ---- */
.directory-page .main-content .profiles {
    display: table;
    margin: 40px auto;
}
.directory-page .main-content .profiles .lds-spin {
    display: table;
    margin: auto;
}

/* ---- Profile card ---- */
.directory-page .main-content .profiles .profile {
    margin-bottom: 30px;
}
@media screen and (max-width: 600px) {
    .directory-page .main-content .profiles .profile { margin-bottom: 40px; }
}

/* Profile picture — framed box with inner bg-div */
.directory-page .main-content .profiles .profile .profile-picture {
    display: inline-block;
    vertical-align: top;
    box-shadow: 1px 1px 7px silver;
}
@media screen and (max-width: 600px) {
    .directory-page .main-content .profiles .profile .profile-picture {
        display: table;
        margin: 0 auto;
    }
}
.directory-page .main-content .profiles .profile .profile-picture .wrap {
    padding: 5px;
    border: 1px solid #d9d9d9;
}
.directory-page .main-content .profiles .profile .profile-picture .wrap .wrap {
    width: 200px;
    height: 200px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 100%;
}
@media screen and (max-width: 800px) {
    .directory-page .main-content .profiles .profile .profile-picture .wrap .wrap {
        width: 150px;
        height: 150px;
    }
}
@media screen and (max-width: 600px) {
    .directory-page .main-content .profiles .profile .profile-picture .wrap .wrap {
        width: 300px;
        height: 300px;
        background-position: center top;
    }
}
@media screen and (max-width: 330px) {
    .directory-page .main-content .profiles .profile .profile-picture .wrap .wrap {
        width: 260px;
        height: 260px;
        background-position: center top;
    }
}

/* Profile body */
.directory-page .main-content .profiles .profile .body {
    display: inline-block;
    vertical-align: top;
    width: 700px;
}
@media screen and (max-width: 1000px) {
    .directory-page .main-content .profiles .profile .body { width: 500px; }
}
@media screen and (max-width: 800px) {
    .directory-page .main-content .profiles .profile .body { width: 350px; }
}
@media screen and (max-width: 600px) {
    .directory-page .main-content .profiles .profile .body {
        display: block;
        width: 100%;
    }
}

.directory-page .main-content .profiles .profile .body > .wrap {
    padding-left: 30px;
}
@media screen and (max-width: 600px) {
    .directory-page .main-content .profiles .profile .body > .wrap {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.directory-page .main-content .profiles .profile .body > .wrap .profile-name {
    font-size: 24px;
    padding-top: 5px;
    font-weight: bold;
    padding-bottom: 6px;
}
.directory-page .main-content .profiles .profile .body > .wrap .profile-name a {
    color: #333;
    text-decoration: none;
}
.directory-page .main-content .profiles .profile .body > .wrap .profile-name a:hover {
    text-decoration: underline;
}

.directory-page .main-content .profiles .profile .body > .wrap .categories {
    padding-bottom: 8px;
    font-size: 12px;
}
.directory-page .main-content .profiles .profile .body > .wrap .categories .bold {
    font-weight: bold;
}
.directory-page .main-content .profiles .profile .body > .wrap .categories .subcats .highlight {
    background: #acf0e3;
    border-radius: 4px;
    padding: 1px 3px;
}

.directory-page .main-content .profiles .profile .body > .wrap .excerpt {
    font-size: 15px;
}

/* Contact info (hidden until toggled) */
.directory-page .main-content .profiles .profile .body > .wrap .excerpt .contact-info {
    display: none;
    margin-top: 10px;
}
.directory-page .main-content .profiles .profile .body > .wrap .excerpt .contact-info .contact-method {
    display: inline-block;
    width: 50%;
    margin: 10px auto;
    position: relative;
}
@media screen and (max-width: 800px) {
    .directory-page .main-content .profiles .profile .body > .wrap .excerpt .contact-info .contact-method {
        width: 100%;
        display: block;
    }
}
.directory-page .main-content .profiles .profile .body > .wrap .excerpt .contact-info .contact-method i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    color: #23c7a7;
}
.directory-page .main-content .profiles .profile .body > .wrap .excerpt .contact-info .contact-method .info {
    padding-left: 40px;
}
.directory-page .main-content .profiles .profile .body > .wrap .excerpt .contact-info .contact-method .info .label {
    font-size: 16px;
    color: #727272;
}
.directory-page .main-content .profiles .profile .body > .wrap .excerpt .contact-info .contact-method .info a {
    color: #2476e0;
    text-decoration: none;
}
.directory-page .main-content .profiles .profile .body > .wrap .excerpt .contact-info .contact-method .info a:hover {
    text-decoration: underline;
}

/* Show contact button */
.directory-page .main-content .profiles .profile .body > .wrap .excerpt .show-contact .wrap {
    color: #23c7a7;
    cursor: pointer;
    font-size: 15px;
    border: 1px solid;
    border-radius: 6px;
    padding: 2px 6px;
    display: inline-block;
    transition: all 0.1s ease-in-out;
    margin-top: 12px;
}
@media screen and (max-width: 600px) {
    .directory-page .main-content .profiles .profile .body > .wrap .excerpt .show-contact .wrap {
        display: table;
        margin: 14px auto 0 auto;
        font-size: 20px;
        padding: 3px 9px;
    }
}
.directory-page .main-content .profiles .profile .body > .wrap .excerpt .show-contact .wrap.open {
    color: #33bbff;
}
.directory-page .main-content .profiles .profile .body > .wrap .excerpt .show-contact .wrap.open:hover {
    background: #33bbff;
    color: white;
}
.directory-page .main-content .profiles .profile .body > .wrap .excerpt .show-contact .wrap:hover {
    background: #23c7a7;
    color: white;
}

/* Loading spinner */
.loading-spinner {
    display: table;
    margin: auto;
    padding: 40px;
    text-align: center;
}

/* No profiles message */
.no-profiles {
    font-size: 16px;
    color: #555;
    padding: 20px 0;
}


/* ============================================================
   DEFAULT PAGE  (mirrors _default-page.scss)
   ============================================================ */
.default-page #container {
    max-width: 1200px;
    margin: auto;
    font-size: 20px;
    padding: 0 16px;
}
@media screen and (max-width: 400px) {
    .default-page #container { font-size: 18px; }
}
.default-page #container h1,
.default-page #container h2,
.default-page #container h3,
.default-page #container h4,
.default-page #container h5,
.default-page #container h6 {
    font-family: 'Fondamento', cursive;
}
.default-page #container h1 { font-size: 2em; }
.default-page #container h2 { font-size: 1.5em; }
.default-page #container h3 { font-size: 1.17em; }
.default-page #container h4 { font-size: 1.12em; }
.default-page #container h5 { font-size: 0.83em; }
.default-page #container h6 { font-size: 0.75em; }
.default-page #container p { margin-bottom: 24px; }
.default-page #container ul {
    list-style-type: disc;
    list-style-position: inside;
    padding-left: 20px;
    margin: 0;
}
.default-page #container ol {
    list-style-type: decimal;
    list-style-position: inside;
    padding-left: 20px;
    margin: 0;
}
.default-page #container ul ul,
.default-page #container ol ul { list-style-type: circle; list-style-position: inside; }
.default-page #container ol ol,
.default-page #container ul ol { list-style-type: lower-latin; list-style-position: inside; }
.default-page #container a {
    text-decoration: none;
    color: #1ab3ff;
}


/* ============================================================
   PROFILE DETAIL PAGE
   ============================================================ */
.profile-detail-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}
.profile-detail-header {
    display: flex;
    gap: 32px;
    margin-bottom: 32px;
    align-items: flex-start;
}
@media screen and (max-width: 600px) {
    .profile-detail-header { flex-direction: column; }
}
.profile-detail-photo .profile-picture-frame {
    padding: 5px;
    border: 1px solid #d9d9d9;
    box-shadow: 1px 1px 7px silver;
    display: inline-block;
}
.profile-detail-photo .profile-picture-frame .profile-picture-bg {
    width: 200px;
    height: 200px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
@media screen and (max-width: 600px) {
    .profile-detail-photo .profile-picture-frame .profile-picture-bg {
        width: 300px;
        height: 300px;
    }
}
.profile-detail-info h1 {
    font-family: 'Fondamento', cursive;
    font-size: 36px;
    margin: 0 0 8px;
}
.profile-detail-info .profile-type {
    color: #727272;
    font-size: 14px;
    margin-bottom: 12px;
    text-transform: capitalize;
}
.profile-detail-info .profile-categories {
    font-size: 13px;
}
.profile-detail-info .category-group {
    margin-bottom: 6px;
}
.profile-detail-description {
    margin-bottom: 32px;
    line-height: 1.7;
    font-size: 16px;
}
.profile-detail-contact h2 {
    font-family: 'Fondamento', cursive;
    font-size: 28px;
    margin-bottom: 16px;
}
/* Contact methods on detail page — full width */
.profile-detail-contact .contact-method {
    display: block;
    width: 100%;
    margin: 10px 0;
    position: relative;
}
.profile-detail-contact .contact-method i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    color: #23c7a7;
}
.profile-detail-contact .contact-method .info {
    padding-left: 40px;
}
.profile-detail-contact .contact-method .info .label {
    font-size: 16px;
    color: #727272;
}
.profile-detail-contact .contact-method .info a {
    color: #2476e0;
    text-decoration: none;
}
.profile-detail-contact .contact-method .info a:hover {
    text-decoration: underline;
}


/* ============================================================
   AUTH PAGES (login, password reset, dashboard)
   ============================================================ */
.auth-container {
    max-width: 480px;
    margin: 60px auto;
    padding: 0 20px;
}
.auth-container h1 {
    font-family: 'Fondamento', cursive;
    font-size: 36px;
    margin-bottom: 16px;
}
.auth-form p { margin-bottom: 16px; }
.auth-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 14px;
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Noto Serif SC', serif;
    margin-bottom: 12px;
}
.auth-links { margin-top: 16px; font-size: 14px; }
.auth-links a { color: #1ab3ff; }

/* Dashboard */
.dashboard-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}
.dashboard-container h1 {
    font-family: 'Fondamento', cursive;
    font-size: 36px;
    margin-bottom: 24px;
}
.dashboard-container h2 {
    font-family: 'Fondamento', cursive;
    font-size: 24px;
    margin-bottom: 12px;
}
.status-published { color: #2e7d32; font-weight: bold; }
.status-pending { color: #e65100; font-weight: bold; }


/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 4px;
    font-family: 'Merienda', cursive;
    font-size: 16px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: 0.2s all ease-in-out;
}
.btn-primary { background: #1ab3ff; color: #fff; }
.btn-primary:hover { background: #0099e6; text-decoration: none; color: #fff; }
.btn-secondary { background: #23c7a7; color: #fff; }
.btn-secondary:hover { background: #1aa08a; text-decoration: none; color: #fff; }


/* ============================================================
   MAILING LIST FORM (footer / standalone)
   ============================================================ */
/* Already defined in footer section above */
.mailing-list-form-message {
    font-size: 13px;
    margin-top: 6px;
    min-height: 16px;
}
.mailing-list-form-message.success {
    color: #b7f5e6;
}
.mailing-list-form-message.error {
    color: #ffd6d6;
}


/* ============================================================
   CHOSEN.JS OVERRIDES
   (Chosen renders its own dropdown; these ensure it fits the filter UI)
   ============================================================ */
.chosen-container {
    font-family: 'Noto Serif SC', serif;
    font-size: 16px;
}
.chosen-container-single .chosen-single {
    border-radius: 0;
    background: #fff;
    border: 1px solid #aaa;
    padding: 4px 8px;
    height: auto;
    line-height: 1.4;
}
.chosen-container-multi .chosen-choices {
    border-radius: 0;
    border: 1px solid #aaa;
    background: #fff;
}
.chosen-container .chosen-drop {
    border-radius: 0;
}


/* ============================================================
   PHASE 5 — AUTH FORMS (login, register, password reset)
   ============================================================ */

/* Shared auth container */
.auth-container {
    max-width: 560px;
    margin: 48px auto;
    padding: 0 20px 40px;
}
.auth-container h1 {
    font-family: 'Fondamento', cursive;
    font-size: 36px;
    margin-bottom: 12px;
    color: #222;
}
.auth-intro {
    font-size: 15px;
    color: #555;
    margin-bottom: 24px;
    line-height: 1.6;
}

/* Auth form fields */
.auth-form .form-group,
.registration-form .form-group {
    margin-bottom: 18px;
}
.auth-form label,
.registration-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 14px;
    color: #333;
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.registration-form input[type="text"],
.registration-form input[type="email"],
.registration-form input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    font-family: 'Noto Serif SC', serif;
    box-sizing: border-box;
}
.auth-form input:focus,
.registration-form input:focus {
    outline: none;
    border-color: #1ab3ff;
    box-shadow: 0 0 0 2px rgba(26, 179, 255, 0.2);
}

/* Auth links row */
.auth-links {
    margin-top: 20px;
    font-size: 14px;
    color: #555;
}
.auth-links a { color: #1ab3ff; }
.auth-links-sep { margin: 0 8px; color: #bbb; }

/* Form section headings (registration) */
.form-section {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eee;
}
.form-section:last-of-type { border-bottom: none; }
.form-section-title {
    font-family: 'Fondamento', cursive;
    font-size: 22px;
    color: #1ab3ff;
    margin-bottom: 16px;
}

/* Two-column form row */
.form-row--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-row--three-col {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
}
@media screen and (max-width: 600px) {
    .form-row--two-col,
    .form-row--three-col { grid-template-columns: 1fr; }
}

/* Field help text */
.field-help {
    font-size: 12px;
    color: #777;
    margin-top: 4px;
    line-height: 1.4;
}

/* Field errors */
.field-errors {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}
.field-errors li {
    font-size: 13px;
    color: #c62828;
}
.form-errors {
    background: #fff3f3;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 20px;
}
.form-error {
    color: #c62828;
    font-size: 14px;
    margin: 0;
}

/* Large button variant */
.btn-large {
    padding: 12px 32px;
    font-size: 18px;
    width: 100%;
    text-align: center;
    margin-top: 8px;
}
.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

/* Registration success page */
.auth-container--success {
    text-align: center;
}
.success-icon {
    font-size: 64px;
    color: #2e7d32;
    margin-bottom: 16px;
}
.auth-container--success h1 {
    margin-bottom: 16px;
}
.auth-container--success p {
    font-size: 16px;
    color: #444;
    margin-bottom: 12px;
    line-height: 1.6;
}
.success-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 28px;
    flex-wrap: wrap;
}


/* ============================================================
   PHASE 5 — DASHBOARD
   ============================================================ */

.dashboard-container {
    max-width: 860px;
    margin: 40px auto;
    padding: 0 20px 60px;
}
.dashboard-container > h1 {
    font-family: 'Fondamento', cursive;
    font-size: 36px;
    margin-bottom: 28px;
    color: #222;
}

/* Profile card */
.dashboard-profile-card {
    display: flex;
    gap: 28px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 24px;
    margin-bottom: 32px;
    align-items: flex-start;
}
@media screen and (max-width: 600px) {
    .dashboard-profile-card { flex-direction: column; }
}
.dashboard-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid #ddd;
    flex-shrink: 0;
}
.dashboard-profile-info h2 {
    font-family: 'Fondamento', cursive;
    font-size: 26px;
    margin-bottom: 4px;
    color: #222;
}
.profile-type-label {
    font-size: 13px;
    color: #888;
    text-transform: capitalize;
    margin-bottom: 12px;
}
.profile-status-row {
    margin-bottom: 8px;
    font-size: 14px;
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: bold;
    margin-left: 6px;
}
.status-badge--published {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.status-badge--pending {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

/* Pending note */
.pending-note {
    font-size: 13px;
    color: #777;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Dashboard action buttons */
.dashboard-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* Category tags on dashboard */
.dashboard-categories {
    margin-bottom: 32px;
}
.dashboard-categories h3 {
    font-family: 'Fondamento', cursive;
    font-size: 20px;
    margin-bottom: 12px;
    color: #333;
}
.category-tags { display: flex; flex-direction: column; gap: 8px; }
.category-tag-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cat-name { font-weight: bold; font-size: 13px; color: #555; }
.subcat-tag {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 12px;
}

/* No-profile state */
.dashboard-no-profile {
    text-align: center;
    padding: 48px 20px;
    color: #888;
}
.dashboard-no-profile-icon {
    font-size: 64px;
    color: #ccc;
    display: block;
    margin-bottom: 16px;
}
.dashboard-no-profile p { font-size: 16px; margin-bottom: 8px; }

/* Account links section */
.dashboard-account-section {
    border-top: 1px solid #eee;
    padding-top: 24px;
    margin-top: 8px;
}
.dashboard-account-section h3 {
    font-family: 'Fondamento', cursive;
    font-size: 20px;
    margin-bottom: 12px;
    color: #333;
}
.dashboard-account-links { list-style: none; padding: 0; margin: 0; }
.dashboard-account-links li { margin-bottom: 8px; }
.dashboard-account-links a { font-size: 15px; color: #1ab3ff; }
.dashboard-account-links a i { margin-right: 6px; }
.dashboard-account-links .link-form { margin: 0; }
.dashboard-account-links .link-button { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: #1ab3ff; cursor: pointer; }
.dashboard-account-links .link-button:hover { text-decoration: underline; }
.dashboard-account-links .link-button i { margin-right: 6px; }


/* ============================================================
   PHASE 5 — PROFILE EDIT FORM
   ============================================================ */

.profile-edit-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px 60px;
}

/* Edit page header */
.profile-edit-header {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 2px solid #1ab3ff;
}
.profile-edit-header h1 {
    font-family: 'Fondamento', cursive;
    font-size: 36px;
    color: #222;
    margin: 0;
    flex: 1;
}
.profile-edit-status { font-size: 14px; }

/* Profile edit form fields */
.profile-edit-form .form-group {
    margin-bottom: 20px;
}
.profile-edit-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 14px;
    color: #333;
}
.profile-edit-form input[type="text"],
.profile-edit-form input[type="email"],
.profile-edit-form input[type="url"],
.profile-edit-form input[type="tel"],
.profile-edit-form select,
.profile-edit-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    font-family: 'Noto Serif SC', serif;
    box-sizing: border-box;
}
.profile-edit-form input:focus,
.profile-edit-form select:focus,
.profile-edit-form textarea:focus {
    outline: none;
    border-color: #1ab3ff;
    box-shadow: 0 0 0 2px rgba(26, 179, 255, 0.2);
}
.profile-edit-form textarea { resize: vertical; }

/* Profile picture upload */
.profile-picture-group {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.profile-picture-preview {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid #ddd;
}
.picture-upload { flex: 1; }
.picture-upload label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
}

/* Category grid (2×2 or 4-col) */
.category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media screen and (max-width: 800px) {
    .category-grid { grid-template-columns: 1fr; }
}
.category-label {
    display: block;
    font-family: 'Merienda', cursive;
    font-size: 15px;
    color: #1ab3ff;
    margin-bottom: 8px;
    font-weight: bold;
}

/* Checkbox list styling */
.form-group--checkboxes ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.form-group--checkboxes ul li {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.form-group--checkboxes ul li label {
    font-weight: normal;
    margin: 0;
    cursor: pointer;
}
.form-group--checkboxes ul li input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #1ab3ff;
    flex-shrink: 0;
}

/* Section help text */
.section-help {
    font-size: 13px;
    color: #777;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Optional label */
.optional-label {
    font-size: 14px;
    color: #aaa;
    font-family: 'Noto Serif SC', serif;
    font-weight: normal;
}

/* Form actions row */
.form-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 32px;
    flex-wrap: wrap;
}
.form-actions .btn-large {
    width: auto;
    flex: 0 0 auto;
}

/* Form note (below submit) */
.form-note {
    font-size: 13px;
    color: #888;
    margin-top: 16px;
    line-height: 1.5;
}
.form-note i { color: #1ab3ff; margin-right: 4px; }

/* ============================================================
   STAFF / MODERATOR UI  (Phase 6)
   ============================================================ */

.staff-page .site-main {
    background: #f5f7fa;
    min-height: calc(100vh - 85px - 200px);
}

.staff-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* Breadcrumb */
.staff-breadcrumb {
    margin-bottom: 16px;
    font-size: 14px;
}
.staff-breadcrumb a {
    color: #1ab3ff;
    text-decoration: none;
}
.staff-breadcrumb a:hover { text-decoration: underline; }

/* Header row */
.staff-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.staff-header h1 {
    font-family: 'Merienda', cursive;
    font-size: 28px;
    color: #1ab3ff;
    margin: 0;
}
.staff-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.staff-header-note {
    font-size: 14px;
    color: #666;
    margin: 4px 0 0;
    flex-basis: 100%;
}

/* Stats pills */
.staff-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s, border-color 0.15s;
}
.stat-pill:hover { background: #e8f5fe; border-color: #1ab3ff; }
.stat-pill.active { background: #1ab3ff; color: #fff; border-color: #1ab3ff; }
.stat-pill.active .stat-count { background: rgba(255,255,255,0.3); }
.stat-count {
    background: #eee;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: bold;
}

/* Search bar */
.staff-search {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.staff-search-input {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Noto Serif SC', serif;
}
.staff-search-input:focus {
    outline: none;
    border-color: #1ab3ff;
    box-shadow: 0 0 0 2px rgba(26,179,255,0.15);
}

/* Table */
.staff-table-wrap {
    overflow-x: auto;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}
.staff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.staff-table th {
    background: #f0f4f8;
    padding: 10px 14px;
    text-align: left;
    font-weight: bold;
    color: #444;
    border-bottom: 2px solid #dde3ea;
    white-space: nowrap;
}
.staff-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #eef0f3;
    vertical-align: middle;
    color: #333;
}
.staff-table tr:last-child td { border-bottom: none; }
.staff-table tr:hover td { background: #f8fbff; }
.staff-table tr.row-pending td { background: #fffde7; }
.staff-table tr.row-pending:hover td { background: #fff9c4; }
.staff-table a { color: #1ab3ff; text-decoration: none; }
.staff-table a:hover { text-decoration: underline; }
.staff-actions-cell { white-space: nowrap; }

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}
.status-badge--published { background: #e8f5e9; color: #2e7d32; }
.status-badge--pending   { background: #fff8e1; color: #f57f17; }

/* Group badges */
.group-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: #e3f2fd;
    color: #1565c0;
    font-size: 11px;
    font-weight: bold;
    margin-right: 3px;
}
.group-badge--admin { background: #fce4ec; color: #880e4f; }

/* Status banner on edit page */
.staff-status-banner {
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 24px;
    line-height: 1.6;
}
.banner-published { background: #e8f5e9; color: #2e7d32; border-left: 4px solid #43a047; }
.banner-pending   { background: #fff8e1; color: #f57f17; border-left: 4px solid #ffc107; }

/* Staff form */
.staff-form { max-width: 900px; }
.form-section {
    background: #fff;
    border: 1px solid #e0e4ea;
    border-radius: 6px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.form-section legend {
    font-family: 'Merienda', cursive;
    font-size: 16px;
    color: #1ab3ff;
    padding: 0 8px;
    font-weight: bold;
}
.form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.form-row .form-group { flex: 1; min-width: 180px; }
.form-row .form-group--sm { flex: 0 0 120px; min-width: 80px; }
.form-group { margin-bottom: 14px; }
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #444;
    margin-bottom: 4px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Noto Serif SC', serif;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #1ab3ff;
    box-shadow: 0 0 0 2px rgba(26,179,255,0.12);
}
.form-group--checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
}
.form-group--checkbox input[type="checkbox"] {
    margin-top: 3px;
    width: auto;
    flex-shrink: 0;
}
.form-group--checkbox label { font-weight: normal; margin-bottom: 0; }
.form-row--categories { align-items: flex-start; }
.form-row--categories .form-group { min-width: 160px; }
.help-text { font-size: 12px; color: #888; margin-top: 3px; line-height: 1.4; }
.field-error { font-size: 12px; color: #c62828; margin-top: 3px; }
.form-errors { background: #ffebee; border: 1px solid #ef9a9a; border-radius: 4px; padding: 12px 16px; margin-bottom: 16px; }
.form-errors .error { color: #c62828; font-size: 14px; }
.required { color: #c62828; }
.form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
}
.form-info-box {
    background: #e3f2fd;
    border-left: 4px solid #1ab3ff;
    padding: 12px 16px;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    color: #1565c0;
    margin-bottom: 20px;
}
.form-info-box i { margin-right: 6px; }

/* Current photo thumbnail */
.current-photo { margin-bottom: 8px; }
.staff-profile-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
    display: block;
    margin-bottom: 4px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Noto Serif SC', serif;
    font-weight: bold;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background 0.15s, opacity 0.15s;
    white-space: nowrap;
}
.btn-primary   { background: #1ab3ff; color: #fff; }
.btn-primary:hover { background: #0099e6; }
.btn-secondary { background: #23c7a7; color: #fff; }
.btn-secondary:hover { background: #1aad90; }
.btn-success   { background: #43a047; color: #fff; }
.btn-success:hover { background: #2e7d32; }
.btn-warning   { background: #ffa726; color: #fff; }
.btn-warning:hover { background: #e65100; }
.btn-text      { background: transparent; color: #1ab3ff; padding: 9px 8px; }
.btn-text:hover { text-decoration: underline; }
.btn-sm        { padding: 5px 10px; font-size: 12px; }

/* Empty state */
.staff-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}
.staff-empty-icon { font-size: 48px; margin-bottom: 16px; display: block; }
.staff-empty p { font-size: 16px; margin-bottom: 16px; }

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}
.page-info { font-size: 14px; color: #666; }

/* Staff nav links (bottom of page) */
.staff-nav-links {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #e0e4ea;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.staff-nav-links a {
    color: #1ab3ff;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.staff-nav-links a:hover { text-decoration: underline; }

/* Text utilities */
.text-muted { color: #999; font-style: italic; }

/* Staff nav link in main nav */
.nav-menu .staff-link a {
    color: #ffc107 !important;
    font-weight: bold;
}


/* ============================================================
   SHOPS (public shop front, category pages, product cards)
   ============================================================ */
.shop-container { max-width: 1200px; margin: 40px auto; padding: 0 20px; }
.shop-index-title, .shop-header h1 { font-family: 'Fondamento', cursive; font-size: 36px; margin: 0 0 8px; }
.shop-header h1 a { color: inherit; text-decoration: none; }
.shop-tagline { color: #727272; margin-bottom: 6px; }
.shop-by { font-size: 14px; margin-bottom: 16px; }
.shop-banner { display: block; width: 100%; max-height: 260px; object-fit: cover; margin-bottom: 16px; }
.shop-breadcrumbs { font-size: 13px; color: #727272; margin-bottom: 16px; }
.shop-description { line-height: 1.7; margin-bottom: 24px; max-width: 800px; }
.shop-preview-banner { background: #fff3cd; color: #856404; padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; }
.shop-categories ul, .shop-subcategories { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.shop-categories a, .shop-subcategories a { display: inline-block; padding: 6px 14px; border: 1px solid #1ab3ff; border-radius: 20px; text-decoration: none; font-size: 14px; }
.shop-categories a[aria-current], .shop-categories a:hover, .shop-subcategories a:hover { background: #1ab3ff; color: #fff; }
.shop-policy-links { margin: 32px 0 8px; padding-top: 16px; border-top: 1px solid #ddd; font-size: 14px; }
.shop-policy-body { max-width: 720px; }

.shop-category-title, .shop-featured h2, .shop-container > h2 { font-family: 'Fondamento', cursive; font-size: 28px; margin: 16px 0; }
.shop-sort { margin-bottom: 16px; font-size: 14px; }
.shop-sort select { margin-left: 8px; padding: 4px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; margin-bottom: 32px; }
.product-card { border: 1px solid #d9d9d9; box-shadow: 1px 1px 7px silver; background: #fff; }
.product-card-image { position: relative; aspect-ratio: 1 / 1; background: #f3f3f3; }
.product-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card-noimage { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 40px; color: #bbb; }
.product-card-body { padding: 12px; }
.product-card-title { font-size: 16px; margin: 0 0 6px; }
.product-card-price { font-size: 15px; }
.product-card-price del { color: #999; margin-right: 6px; }
.product-card-price ins { text-decoration: none; font-weight: bold; color: #c0392b; }
.product-badge { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 3px; }
.product-badge--out { position: absolute; top: 8px; left: 8px; background: #721c24; color: #fff; }
.product-badge--sale { background: #c0392b; color: #fff; margin-left: 6px; }
.shop-pagination { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 24px 0; }
.shop-empty { color: #727272; font-style: italic; margin: 32px 0; }
.shop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; margin: 24px 0; }
.shop-list-item { border: 1px solid #d9d9d9; box-shadow: 1px 1px 7px silver; padding: 12px; }
.shop-list-item img { width: 100%; height: 160px; object-fit: cover; display: block; margin-bottom: 8px; }
.shop-list-name { font-weight: bold; }
.profile-detail-shop-link { margin-bottom: 24px; }
.shop-button { display: inline-block; padding: 10px 20px; background: #23c7a7; color: #fff; border-radius: 4px; text-decoration: none; }
.shop-button:hover { background: #1ab3ff; }

/* ---- Product detail page ---- */
.product-card-link { display: block; color: inherit; text-decoration: none; }
.product-card-link:hover .product-card-title, .product-card-link:focus .product-card-title { text-decoration: underline; }
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 24px 0 32px; }
@media screen and (max-width: 800px) { .product-detail { grid-template-columns: 1fr; } }
.product-gallery-main { border: 1px solid #d9d9d9; box-shadow: 1px 1px 7px silver; background: #f3f3f3; }
.product-gallery-main img { display: block; width: 100%; height: auto; }
.product-gallery-main.product-card-noimage { aspect-ratio: 1 / 1; }
.product-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.product-gallery-thumb { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; width: 72px; height: 72px; }
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery-thumb[aria-current] { border-color: #1ab3ff; }
.product-gallery-thumb:focus-visible, .shop-button:focus-visible { outline: 3px solid #23c7a7; outline-offset: 2px; }
.product-title { font-family: 'Fondamento', cursive; font-size: 32px; margin-bottom: 12px; }
.product-price { font-size: 24px; margin-bottom: 16px; }
.product-price del { color: #999; margin-right: 6px; }
.product-price ins { text-decoration: none; font-weight: bold; color: #c0392b; }
.product-short-description { line-height: 1.6; margin-bottom: 16px; }
.product-variations { margin-bottom: 16px; }
.product-variations label { display: block; font-weight: bold; margin-bottom: 4px; }
.product-variations select { padding: 6px; min-width: 200px; }
.product-meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin-bottom: 20px; font-size: 14px; }
.product-meta dt { font-weight: bold; }
.product-meta dd[data-status="outofstock"] { color: #721c24; }
.purchase-actions { border-top: 1px solid #d9d9d9; padding-top: 16px; }
.purchase-quantity { margin-bottom: 12px; }
.purchase-quantity input { width: 70px; padding: 6px; }
.purchase-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.shop-button--disabled, .shop-button:disabled { background: #bbb; cursor: not-allowed; border: 0; font: inherit; }
.purchase-note { font-size: 13px; color: #727272; }
.product-description, .product-seller, .shop-related { margin-bottom: 32px; }
.product-description { line-height: 1.7; max-width: 800px; }
.product-description h2, .product-seller h2, .shop-related h2 { font-family: 'Fondamento', cursive; font-size: 24px; margin-bottom: 12px; }

/* ---- Shop management (artist self-service) ---- */
.manage-container { max-width: 1000px; margin: 40px auto; padding: 0 20px; }
.manage-container--narrow { max-width: 640px; }
.manage-container h1 { font-family: 'Fondamento', cursive; font-size: 32px; margin-bottom: 16px; }
.manage-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; border-bottom: 2px solid #eee; margin-bottom: 24px; padding-bottom: 8px; }
.manage-nav a { text-decoration: none; padding: 4px 0; border-bottom: 3px solid transparent; }
.manage-nav a[aria-current] { border-bottom-color: #1ab3ff; font-weight: bold; }
.manage-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.manage-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.manage-toolbar h2 { font-family: 'Fondamento', cursive; font-size: 24px; }
.manage-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; font-size: 14px; }
.manage-filters select { padding: 4px 8px; }
.manage-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.manage-table th, .manage-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #eee; vertical-align: middle; }
.manage-table th { background: #f7f7f7; }
.manage-actions { white-space: nowrap; }
.manage-actions > * { margin-right: 10px; }
.manage-inline-form { display: inline; margin: 0; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: #1ab3ff; cursor: pointer; text-decoration: underline; }
.manage-thumb { max-width: 160px; height: auto; display: block; margin-bottom: 8px; border: 1px solid #d9d9d9; }
.manage-thumb--wide { max-width: 100%; max-height: 160px; object-fit: cover; }
.manage-thumb--small { width: 40px; height: 40px; object-fit: cover; display: inline-block; vertical-align: middle; margin: 0 8px 0 0; }
.formset-row { border: 1px solid #ddd; border-radius: 4px; padding: 12px 16px; margin-bottom: 16px; }
.formset-row legend { font-weight: bold; padding: 0 6px; }
.form-group--inline label { display: flex; align-items: center; gap: 8px; font-weight: normal; }
.required-mark { color: #c62828; }
.manage-container .form-group--checkboxes ul { columns: 2; }
.dashboard-shop-card { margin: 24px 0; padding: 20px; border: 1px solid #d9d9d9; border-radius: 4px; box-shadow: 1px 1px 7px silver; }
.dashboard-shop-card h3 { font-family: 'Fondamento', cursive; font-size: 24px; margin-bottom: 10px; }
.dashboard-shop-card p { margin-bottom: 12px; }

/* ---- Skip link: hidden until it receives keyboard focus ---- */
.skip-link { position: absolute; left: 8px; top: -100px; z-index: 1000; padding: 10px 16px; background: #fff; color: #000; border: 2px solid #23c7a7; border-radius: 4px; }
.skip-link:focus { top: 8px; }
.site-main:focus { outline: none; }

/* ---- Shop responsive adjustments ---- */
.field-help { font-size: 13px; color: #595959; }
@media screen and (max-width: 800px) {
    .shop-container, .manage-container { margin: 24px auto; }
    .shop-index-title, .shop-header h1 { font-size: 30px; }
    .product-title { font-size: 26px; }
    .manage-container .form-group--checkboxes ul { columns: 1; }
}
@media screen and (max-width: 600px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .shop-list { grid-template-columns: 1fr; }
    .shop-categories ul, .shop-subcategories { gap: 6px; }
    .shop-categories a, .shop-subcategories a { padding: 8px 14px; }
    .shop-pagination { flex-wrap: wrap; gap: 8px 16px; }
    .manage-toolbar { flex-direction: column; align-items: flex-start; gap: 8px; }
    .manage-table, .staff-table { display: block; overflow-x: auto; }
    .product-variations select { width: 100%; min-width: 0; }
    .product-gallery-thumb { width: 56px; height: 56px; }
}
@media screen and (max-width: 360px) {
    .product-grid { grid-template-columns: 1fr; }
}

/* Shop custom domains (CUSTOM_DOMAIN_PLAN.md): shop-only header and footer */
.shop-site-header { border-bottom: 1px solid #e3e3e3; background: #fff; }
.shop-site-header-inner { max-width: 1100px; margin: 0 auto; padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.shop-site-name { font-size: 1.5rem; font-weight: 700; color: inherit; text-decoration: none; }
.shop-site-parent { font-size: 13px; color: #727272; }
.shop-site-footer { border-top: 1px solid #e3e3e3; margin-top: 40px; padding: 24px 20px; text-align: center; font-size: 14px; }
.shop-site-footer-links { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.shop-site-footer-manage { margin: 0; font-size: 12px; color: #727272; }
.custom-domain-shop .shop-header h1 { font-size: 1.4rem; }

/* ---- Cart (Phase 8B) ---- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.shop-cart-link { margin: 4px 0 0; font-weight: bold; }
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.cart-table th, .cart-table td { padding: 10px 8px; border-bottom: 1px solid #e3e3e3; text-align: left; vertical-align: middle; }
.cart-line-item { font-weight: normal; }
.cart-line-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; margin-right: 12px; vertical-align: middle; }
.cart-line-item > span { display: inline-block; vertical-align: middle; }
.cart-line--problem { background: #fff3cd; }
.cart-problem { color: #721c24; }
.cart-note { color: #856404; font-size: 13px; }
.cart-qty-form { display: flex; gap: 6px; align-items: center; }
.cart-qty-form input[type=number] { width: 64px; padding: 6px; }
.shop-button--small { padding: 6px 12px; font: inherit; font-size: 14px; border: 0; cursor: pointer; }
button.shop-button { border: 0; font: inherit; cursor: pointer; }
.cart-table tfoot th, .cart-table tfoot td { font-weight: bold; border-bottom: 0; }
@media (max-width: 640px) {
  .cart-table thead { position: absolute; left: -9999px; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td, .cart-table th { display: block; width: 100%; }
  .cart-table tr { margin-bottom: 12px; border-bottom: 1px solid #e3e3e3; }
}
/* ============================================================
   HOME PAGE v2: search, grouped link tiles, featured cards
   ============================================================ */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.home-page .home-hero { text-align: center; padding: 10px 10px 0; }
.home-page .home-hero .header { margin: 30px 0 0; font-weight: normal; }
.home-page .home-hero .sub-header { margin: 16px auto 0; max-width: 650px; font-size: 20px; }
@media screen and (max-width: 600px) { .home-page .home-hero .sub-header { font-size: 15px; } }
.home-page .home-hero .free-note, .home-page .home-for-artists .free-note { margin: 12px 0 0; font-size: 15px; }

.home-search { display: flex; max-width: 560px; margin: 22px auto 0; gap: 8px; }
.home-search input[type=search] { flex: 1; min-width: 0; padding: 12px 14px; font-size: 18px; border: 2px solid #1ab3ff; border-radius: 4px; }
.home-page .home-search .button, .home-page .home-for-artists .button {
    background: #0099e6; color: #fff; border: 2px solid transparent; border-radius: 4px;
    padding: 10px 24px; font-size: 18px; font-weight: bold; text-decoration: none; cursor: pointer; display: inline-block;
}
.home-page .home-search .button:hover, .home-page .home-for-artists .button:hover { background: #006699; border: 2px dashed #66ccff; }

.home-section { margin-top: 44px; }
.home-section-title { text-align: center; font-family: 'Fondamento', cursive; font-size: 32px; font-weight: normal; margin: 0 0 16px; }
.category-group-title { text-align: center; font-family: 'Noto Serif SC', serif; font-size: 18px; font-weight: 400; color: #555; margin: 24px 0 4px; text-transform: uppercase; letter-spacing: 1px; }

.home-page .main-content .categories { min-height: 0; margin-top: 10px; }
.home-page .main-content .categories a.category { text-decoration: none; color: inherit; }
.home-page .main-content .categories a.category:focus-visible .wrap { outline: 3px solid #1ab3ff; outline-offset: 2px; }
.home-page .main-content .categories .category .wrap .bg-wrap { background-color: #cfe9f7; height: 200px; }
.home-page .main-content .categories .category .wrap .title { color: #fff; }
.home-page .main-content .categories .category { width: 25%; }
@media screen and (max-width: 1000px) { .home-page .main-content .categories .category { width: 50%; } }
@media screen and (max-width: 600px) { .home-page .main-content .categories .category { width: 100%; } }

.home-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.home-card a { display: block; text-decoration: none; color: inherit; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; background: #fff; height: 100%; }
.home-card a:hover, .home-card a:focus-visible { border-color: #1ab3ff; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.home-card-image { display: block; height: 180px; background-size: cover; background-position: center; background-color: #cfe9f7; }
.home-card-name { display: block; padding: 10px 12px 2px; font-weight: bold; font-size: 17px; }
.home-card-meta { display: block; padding: 0 12px 12px; font-size: 14px; color: #666; }
.home-more { text-align: center; margin: 16px 0 0; }

.home-for-artists { text-align: center; background: #eef8fd; border-radius: 6px; padding: 28px 16px; margin-bottom: 30px; }
.home-benefits { list-style: none; margin: 0 auto 18px; padding: 0; max-width: 520px; text-align: left; }
.home-benefits li { margin: 8px 0; font-size: 17px; }

/* Nav: Get Listed as a call-to-action button */
.nav-menu li.nav-cta a { background: #23c7a7; }
.nav-menu li.nav-cta a:hover { background: #1ab394; }

/* Directory cards: quick links */
.profile-quick-links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 14px; font-size: 15px; }

/* Profile page: related categories */
.profile-detail-related { margin-top: 30px; }
.profile-detail-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.profile-detail-related a { display: inline-block; padding: 6px 12px; border: 1px solid #1ab3ff; border-radius: 20px; text-decoration: none; }
.profile-detail-related a:hover { background: #1ab3ff; color: #fff; }

/* ============================================================
   Curly-quote spacing fix.
   Noto Serif SC (a CJK font) draws U+2018-201D as full-width (1em) glyphs,
   leaving a big gap after apostrophes in text we don't control (e.g. Django's
   password help text). These two tiny subsets of Noto Serif (OFL licence) hold
   only those four quote glyphs and cover that range. Own family name,
   listed first in the body font stack, so it only supplies those characters.
   ============================================================ */
@font-face {
    font-family: 'Quote Fix';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/noto-serif-quotes-400.37684c56f13f.ttf") format('truetype');
    unicode-range: U+2018-201D;
}
@font-face {
    font-family: 'Quote Fix';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/noto-serif-quotes-700.855603589e26.ttf") format('truetype');
    unicode-range: U+2018-201D;
}