/* =====================================================================
   SCC Comunità — tema Coppermine di SanCostantinoCalabro.net.
   Stessi colori e caratteri del tema WordPress "scc-comunita".
   Si carica dopo style.css (ereditato da "curve") e ne prevale.
   ===================================================================== */

@font-face { font-family: "Literata"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/Literata72pt-Regular.woff2) format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/Literata72pt-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/Literata72pt-Bold.woff2) format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/FiraSans-Regular.woff2) format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/FiraSans-Medium.woff2) format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/FiraSans-SemiBold.woff2) format("woff2"); }

:root {
    --scc-pietra: #F6F2EA;
    --scc-bianco: #FFFDF9;
    --scc-inchiostro: #2B2A28;
    --scc-terracotta: #B4472F;
    --scc-blu: #1F3A52;
    --scc-grigio: #6B665E;
    --scc-sabbia: #E6DCCB;
    --scc-titoli: "Literata", Georgia, serif;
    --scc-testo: "Fira Sans", system-ui, sans-serif;
}

body.scc {
    background: var(--scc-pietra);
    color: var(--scc-inchiostro);
    font-family: var(--scc-testo);
    font-size: 16px;
    line-height: 1.55;
    padding: 0;
    margin: 0;
}
.scc-contenitore { max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

.scc h1, .scc h2, .scc h3 { font-family: var(--scc-titoli); color: var(--scc-blu); font-weight: 600; }
/* "curve" imposta Verdana/Arial su molti elementi: si torna al carattere del sito */
.scc table, .scc td, .scc th, .scc p, .scc input, .scc select, .scc textarea, .scc .textinput, .scc .listbox { font-family: var(--scc-testo); }
.scc a:link, .scc a:visited { color: var(--scc-terracotta); text-decoration: none; }
.scc a:hover, .scc a:focus { color: var(--scc-blu); text-decoration: underline; }

/* Intestazione (uguale al sito principale) */
.scc-intestazione { background: var(--scc-blu); border-bottom: 4px solid var(--scc-terracotta); color: var(--scc-bianco); }
.scc-intestazione__riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-top: 18px; padding-bottom: 18px; }
.scc-marchio { display: flex; flex-direction: column; }
.scc .scc-marchio__nome:link, .scc .scc-marchio__nome:visited { font-family: var(--scc-titoli); font-weight: 700; font-size: 1.75rem; color: var(--scc-bianco); line-height: 1.2; text-decoration: none; }
.scc-marchio__motto { color: #C9D6E3; font-size: 0.875rem; }
.scc-menu { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.scc .scc-menu a:link, .scc .scc-menu a:visited { color: var(--scc-bianco); font-weight: 500; font-size: 1.05rem; padding: 4px 0; border-bottom: 2px solid transparent; text-decoration: none; }
.scc .scc-menu a:hover, .scc .scc-menu a.scc-menu__attivo { border-bottom-color: var(--scc-terracotta); color: var(--scc-bianco); text-decoration: none; }

/* Barra della gallery: titolo e menu di Coppermine */
.scc-barra-gallery { background: var(--scc-bianco); border-bottom: 1px solid var(--scc-sabbia); padding: 20px 0 12px; }
.scc-barra-gallery__titolo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 8px; }
.scc .scc-barra-gallery__titolo a:link, .scc .scc-barra-gallery__titolo a:visited { font-family: var(--scc-titoli); font-size: 1.6rem; font-weight: 600; color: var(--scc-blu); text-decoration: none; }
.scc-barra-gallery__titolo span { color: var(--scc-grigio); }
.scc #main_menu { padding: 0; margin: 0; display: flow-root; }
.scc-barra-gallery .scc-contenitore { display: flow-root; }
.scc .menuheight { display: none; }
.scc .dropmenu li a.firstlevel, .scc .dropmenu li a.firstlevel span.firstlevel,
.scc .dropmenu li a.firstlevel:hover, .scc .dropmenu li a.firstlevel:hover span.firstlevel,
.scc .dropmenu li a.active, .scc .dropmenu li a.active span.firstlevel {
    background: none;
    height: auto;
    line-height: 1.4;
}
.scc .dropmenu li a.firstlevel { border-radius: 4px; margin-right: 6px; padding: 0; }
.scc .dropmenu li a.firstlevel span.firstlevel { padding: 6px 12px; color: var(--scc-blu); font-family: var(--scc-testo); font-size: 0.95rem; font-weight: 500; }
.scc .dropmenu li a.firstlevel:hover { background: var(--scc-pietra); text-decoration: none; }
.scc .dropmenu li a.firstlevel span.firstlevel img { vertical-align: -3px; margin-right: 4px; opacity: 0.8; }
.scc .dropmenu li ul { background: var(--scc-bianco); border: 1px solid var(--scc-sabbia); border-radius: 4px; box-shadow: 0 6px 18px rgba(31, 58, 82, 0.12); }
.scc .dropmenu li li a { color: var(--scc-blu); background: none; }
.scc .dropmenu li li a:hover { background: var(--scc-pietra); color: var(--scc-terracotta); }

/* Contenuto */
.scc-principale { padding-top: 28px; padding-bottom: 24px; }
.scc .maintable { background: var(--scc-bianco); border: 1px solid var(--scc-sabbia); border-radius: 6px; border-collapse: separate; border-spacing: 0; overflow: hidden; margin-bottom: 24px; }
.scc .cpg_starttable_outer, .scc .cpg_starttable_outer div.cpg_starttable_inner { background: none; padding: 0; }
.scc .tableh1, .scc .tableh1 a:link, .scc .tableh1 a:visited {
    background: var(--scc-blu);
    color: var(--scc-bianco);
    font-family: var(--scc-testo);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 0;
}
.scc .tableh1 { padding: 10px 14px; }
.scc .tableh2 { background: var(--scc-sabbia); color: var(--scc-inchiostro); border: 0; padding: 8px 14px; }
.scc .tableb, .scc .tableb_alternate { background: var(--scc-bianco); color: var(--scc-inchiostro); border-color: var(--scc-sabbia); padding: 10px 14px; }
.scc .tableb_alternate { background: #FBF8F2; }
.scc .tablef { background: var(--scc-pietra); border: 0; padding: 10px 14px; }
.scc .catrow, .scc .catrow_noalb { background: var(--scc-bianco); border-bottom: 1px solid var(--scc-sabbia); padding: 14px; }
.scc .catrow a:link, .scc .catrow a:visited, .scc .catrow_noalb a:link, .scc .catrow_noalb a:visited { font-family: var(--scc-titoli); font-size: 1.2rem; font-weight: 600; color: var(--scc-blu); }
.scc .alblink a:link, .scc .alblink a:visited { font-family: var(--scc-titoli); font-size: 1.1rem; font-weight: 600; color: var(--scc-blu); text-decoration: none; }
.scc .alblink a:hover { color: var(--scc-terracotta); }
.scc .album_stat { color: var(--scc-grigio); font-size: 0.85rem; }
/* Ordinamento delle miniature: in "curve" le etichette erano bianche su una barra scura */
.scc .sortorder_options { color: var(--scc-grigio); font-size: 0.8rem; font-weight: 500; }
.scc .sortorder_cell img { vertical-align: -2px; }
.scc .thumb_title, .scc .thumb_caption, .scc .thumb_filename { font-family: var(--scc-testo); color: var(--scc-inchiostro); }

/* Celle delle miniature: niente grigio di "curve" */
.scc .thumbnails, .scc .navmenu, .scc .imageborder { background: var(--scc-bianco); }
.scc .tableb .thumbnails, .scc .tableb_alternate .thumbnails { background: transparent; }
.scc td.tableb.tableb_alternate { background: var(--scc-bianco); }

/* Miniature come piccole schede */
/* solo le miniature <img>: nella pagina della foto ".image" è una cella con la foto come sfondo */
.scc img.image, .scc a:link img.image, .scc a:visited img.image {
    border: 1px solid var(--scc-sabbia);
    border-radius: 4px;
    background: var(--scc-bianco);
    padding: 4px;
    margin: 4px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.scc a:hover img.image, .scc a:focus img.image { border-color: var(--scc-terracotta); box-shadow: 0 6px 18px rgba(31, 58, 82, 0.15); transform: translateY(-2px); }
.scc .imageborder { border: 1px solid var(--scc-sabbia); background: var(--scc-bianco); }

/* Navigazione tra pagine, pulsanti, campi */
.scc .navmenu { background: none; border: 0; color: var(--scc-blu); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; }
.scc .button, .scc .admin_menu, .scc a.button, .scc a.admin_menu {
    background: var(--scc-terracotta);
    color: var(--scc-bianco);
    border: 0;
    border-radius: 4px;
    font-family: var(--scc-testo);
    font-weight: 600;
    padding: 6px 12px;
}
.scc a:hover.button, .scc a:hover.admin_menu { background: var(--scc-blu); color: var(--scc-bianco); text-decoration: none; }
.scc .textinput, .scc .listbox { border: 1px solid var(--scc-sabbia); border-radius: 4px; padding: 6px 8px; font-family: var(--scc-testo); }

/* Pagina della singola foto */
.scc .display_media { background: var(--scc-bianco); }
.scc .img_caption_table th { background: var(--scc-sabbia); color: var(--scc-inchiostro); }
.scc .img_caption_table td { background: var(--scc-bianco); }
.scc .pic_title { font-family: var(--scc-titoli); color: var(--scc-blu); }
.scc .filmstrip_background { background: var(--scc-pietra); }

/* Piè di pagina (uguale al sito principale) */
.scc-piede { background: var(--scc-blu); border-top: 4px solid var(--scc-terracotta); color: var(--scc-bianco); margin-top: 40px; padding: 40px 0 24px; font-size: 0.95rem; }
.scc-piede__colonne { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.scc-piede p { margin: 0 0 8px; color: #C9D6E3; }
.scc .scc-piede__nome { font-family: var(--scc-titoli); font-weight: 700; font-size: 1.4rem; color: var(--scc-bianco); }
.scc .scc-piede__titolo { font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; color: var(--scc-bianco); }
.scc-piede ul { list-style: none; margin: 0; padding: 0; }
.scc-piede li { padding: 2px 0; }
.scc .scc-piede a:link, .scc .scc-piede a:visited { color: var(--scc-bianco); }
.scc-piede__fondo { border-top: 1px solid #3A5670; margin-top: 24px; padding-top: 16px; font-size: 0.85rem; }
.scc .scc-piede__crediti, .scc .scc-piede__crediti a:link, .scc .scc-piede__crediti a:visited, .scc .footer, .scc .footer a:link, .scc .footer a:visited { color: #9FB3C6; font-size: 0.8rem; }

/* Schermi stretti */
@media (max-width: 720px) {
    .scc-piede__colonne { grid-template-columns: 1fr; }
    .scc-menu { gap: 4px 16px; }
    .scc .scc-menu a:link, .scc .scc-menu a:visited { font-size: 0.95rem; }
    .scc .maintable { display: block; overflow-x: auto; }
    .scc .scc-marchio__nome:link, .scc .scc-marchio__nome:visited { font-size: 1.35rem; }
    .scc .scc-barra-gallery__titolo a:link, .scc .scc-barra-gallery__titolo a:visited { font-size: 1.3rem; }
    .scc-contenitore { padding: 0 16px; }
}