/*
Theme Name: society
Theme URI: https://3108society.com/
Author: 3108 Society
Description: Custom classic theme for 3108 Society. Native PHP, HTML, CSS and JavaScript.
Version: 1.0.10
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: society
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
/* Shared typography for current and future site components. */
:root { color-scheme: light; --society-font-size: 15px; --society-font-family: sans-serif; --society-font-weight: 100; --society-header-offset: 70px; --society-button-hover: #620f0f; }
body { margin: 0; background: #fff; color: #10171c; font-size: var(--society-font-size); font-family: var(--society-font-family); font-weight: var(--society-font-weight); line-height: 1.5; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
.society-main { max-width: 1200px; margin: 0 auto; padding: 48px 24px; min-height: 60vh; }
.society-main > article { margin-bottom: 48px; }
.society-main h1 { font-size: clamp(28px, 4vw, 48px); line-height: 1.15; font-weight: var(--society-font-weight); }
.society-content { overflow-wrap: break-word; }
.society-content::after { content: ''; display: table; clear: both; }
.society-content > .alignwide { width: 100%; }
.society-footer { padding: 32px 24px; border-top: 1px solid #eee; text-align: center; font-size: var(--society-font-size); }
.society-skip { position: fixed; top: -100px; left: 16px; z-index: 10001; padding: 12px; background: white; color: black; }
.society-skip:focus { top: 16px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

button, input, select, textarea { font: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--society-font-family); font-weight: var(--society-font-weight); }

/* Keep the footer below the content, including on short pages. */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body.admin-bar { --society-header-offset: 102px; min-height: calc(100svh - 32px); }
body > .s3108-shell { flex: 0 0 auto; }
body > main { flex: 1 0 auto; box-sizing: border-box; width: 100%; }
.society-footer { margin-top: auto; position: relative; z-index: 1; background: #fff; flex-shrink: 0; }

/* Home — the hero clips a viewport-fixed image; white content scrolls over it.
   Edit the hero height and image object-position to adjust the framing. */
.society-home { width: 100%; }
.society-home-hero { position: relative; isolation: isolate; clip-path: inset(0); width: 100%; height: calc(100vh - var(--society-header-offset)); height: calc(100dvh - var(--society-header-offset)); background: #fafafa; }
.society-home-hero-image { position: fixed; top: var(--society-header-offset); left: 0; display: block; width: 100%; height: calc(100vh - var(--society-header-offset)); height: calc(100dvh - var(--society-header-offset)); max-width: none; object-fit: cover; object-position: center 33%; z-index: -1; }
.society-home-action { position: absolute; inset: auto 24px 32px; text-align: center; }
.society-home-button { display: inline-block; padding: 12px 24px; border: 1px solid currentColor; text-decoration: none; }
.society-home-action .society-home-button { background: rgba(255,255,255,.9); }
.society-home-button:hover { background: var(--society-button-hover); border-color: var(--society-button-hover); color: #fff; }
.society-home-button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.society-home-body { position: relative; z-index: 1; background: #fff; }
.society-home-intro { text-align: center; padding: 48px 24px; }
.society-home-intro p { max-width: 1200px; margin: 0 auto; font: inherit; }
.society-home-journal h2 { margin: 0; padding: 28px 24px; text-align: center; font-size: var(--society-font-size); font-weight: var(--society-font-weight); }
.society-journal-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; }
.society-journal-tile { display: block; overflow: hidden; }
.society-journal-tile img { display: block; width: 100%; height: auto; aspect-ratio: 736/438; object-fit: cover; }
.society-journal-tile:focus-visible { outline: 2px solid #10171c; outline-offset: -4px; }
.society-journal-cta { display: grid; place-items: center; padding: 24px; background: #fff; }
@media (max-width: 782px) {
    body.admin-bar { --society-header-offset: 116px; min-height: calc(100svh - 46px); }
}
@media (max-width: 600px) {
    .society-home-hero-image { object-position: 62% center; }
    .society-home-intro { padding: 36px 16px; }
    .society-journal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .society-journal-cta { grid-column: 1/-1; min-height: 160px; }
}

/* Shared text-link underline: grows from left to right.
   Reuse society-underline on future text links. Image links and buttons are excluded. */
:where(main a:not(.society-home-button):not(.button):not(:has(img)), .society-footer a, .society-underline),
.s3108-nav > a, .s3108-journal, .s3108-categories a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 1px;
    transition: background-size .3s ease;
}
:where(main a:not(.society-home-button):not(.button):not(:has(img)), .society-footer a, .society-underline):is(:hover,:focus-visible),
.s3108-nav > a:is(:hover,:focus-visible), .s3108-journal:is(:hover,:focus-visible),
.s3108-categories a:is(:hover,:focus-visible,[aria-current]) {
    background-size: 100% 1px;
}

/* The image zooms inside its frame; labels and layout stay in place. */
.society-journal-tile img, .s3108-visual img {
    transform: scale(1);
    transform-origin: center;
    transition: transform .6s ease;
}
@media (hover: hover) {
    .society-journal-tile:hover img, .s3108-card > a:hover .s3108-visual img { transform: scale(1.04); }
}
.society-journal-tile:focus-visible img, .s3108-card > a:focus-visible .s3108-visual img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
    :where(main a, .society-footer a, .society-underline), .s3108-nav > a, .s3108-journal, .s3108-categories a,
    .society-journal-tile img, .s3108-visual img { transition: none; }
    .society-journal-tile:is(:hover,:focus-visible) img,
    .s3108-card > a:is(:hover,:focus-visible) .s3108-visual img { transform: none; }
}

/* One hover color for theme, WordPress and WooCommerce buttons. */
body main :is(button, input[type="submit"], input[type="button"], input[type="reset"], .button, .wp-element-button, .wp-block-button__link):hover,
body footer :is(button, .button, .wp-element-button, .wp-block-button__link):hover,
body .woocommerce :is(a.button, button.button, input.button):hover {
    background: var(--society-button-hover);
    border-color: var(--society-button-hover);
    color: #fff;
}
/* Header controls keep their transparent backgrounds. */
.s3108-shell button:hover, .s3108-shell .s3108-tools a:hover {
    color: var(--society-button-hover);
}
.s3108-search button:hover {
    background: var(--society-button-hover);
    color: #fff;
}

/* Clickable text uses the shared burgundy hover color across the site.
   Image cards and filled buttons retain their existing visual treatment. */
body a:not(.society-home-button):not(.button):not(.wp-element-button):not(.wp-block-button__link):not(:has(img)):hover,
.s3108-shell a:not(:has(img)):hover,
.s3108-shell .s3108-journal:hover {
    color: var(--society-button-hover);
}