/*
Theme Name: Choir
Theme URI: https://gitlab.com/choir-website/choir-wordpress-theme
Author: Reidar Cederqvist + Claude
Description: A clean, re-brandable classic theme for a choir website. Reproduces a simple header + horizontal menu, an optional front-page hero, a centred content column and a persistent widget sidebar. Branding (name, logo, accent colour, social + newsletter links) is set in the WordPress Customizer, so a rename needs no code changes. Pairs with the Choir Events and Choir Members plugins.
Version: 1.13
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: choir
GitLab Theme URI: https://gitlab.com/choir-website/choir-wordpress-theme
Primary Branch: main
*/

/* ---- Design tokens (accent is overridden inline from the Customizer) ---- */
:root {
    --choir-accent: #7b2233;
    --choir-accent-contrast: #ffffff;
    --choir-primary: #2f3a44;
    --choir-on-primary: #ffffff;
    --choir-footer-link: var(--choir-accent);
    --choir-text: #1d1d1d;
    --choir-muted: #666;
    --choir-bg: rgb(250, 251, 252);
    --choir-line: #e4e4e4;
    --choir-max: 1240px;
    --choir-content: 790px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--choir-text);
    background: var(--choir-bg);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.6;
}

a { color: var(--choir-accent); }
img { max-width: 100%; height: auto; }

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; line-height: 1.2; }

.choir-container {
    max-width: var(--choir-max);
    margin: 0 auto;
    padding: 0 clamp(1em, 4vw, 3em);
}

/* ---- Header ---- */
.site-header {
    border-bottom: 1px solid var(--choir-line);
}
/* When a hero/banner sits directly below the header, drop the divider between them. */
.choir-flush-header .site-header { border-bottom: none; }
.site-header__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.4em 0;
    text-align: center;
}
.site-branding {
    display: inline-flex;
    flex-direction: column;      /* default: logo above the title */
    align-items: center;
    gap: .35em;
    text-align: center;
}
.site-branding--bottom { flex-direction: column-reverse; }
.site-branding--left   { flex-direction: row; gap: 1em; }        /* logo left, title right */
.site-branding--right  { flex-direction: row-reverse; gap: 1em; } /* logo right, title left */
.site-branding__text { min-width: 0; }
.site-branding .custom-logo { max-height: 72px; width: auto; }
.site-title {
    margin: 0;
    font-size: 1.6rem;
}
.site-title a { color: inherit; text-decoration: none; }
.site-description { margin: .2em 0 0; color: var(--choir-muted); font-size: .95rem; }

.site-search form { display: flex; }
.site-search input[type="search"] {
    font: inherit; padding: .4em .6em; border: 1px solid var(--choir-line); border-radius: 4px;
}

/* ---- Primary navigation ---- */
.main-nav { border-top: 1px solid var(--choir-line); }
.main-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1em 2em; flex-wrap: wrap; }
.main-nav ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .2em 1.4em;
}
.main-nav li { margin: 0; }
.main-nav__menu a {
    display: block;
    padding: .8em 0;
    color: var(--choir-text);
    text-decoration: none;
    border-bottom: 3px solid transparent;
}
.main-nav__menu a:hover,
.main-nav__menu .current-menu-item > a {
    color: var(--choir-accent);
    border-bottom-color: var(--choir-accent);
}

/* Hamburger toggle — hidden on desktop, shown below the mobile breakpoint. */
.main-nav__toggle { display: none; background: none; border: 0; padding: .3em; cursor: pointer; color: inherit; line-height: 0; }
.main-nav__toggle:hover { color: var(--choir-accent); }
.main-nav__toggle .choir-icon { width: 26px; height: 26px; }
.main-nav__toggle-close { display: none; }

/* Nav utilities: social icons + search toggle (right of the menu) */
.main-nav__utils { display: flex; align-items: center; gap: 1em; }
.choir-social-nav { display: inline-flex; align-items: center; gap: .7em; }
.choir-social-nav a,
.choir-search-toggle { color: inherit; display: inline-flex; line-height: 0; }
.choir-social-nav a:hover,
.choir-search-toggle:hover { color: var(--choir-accent); }
.choir-search-toggle { background: none; border: 0; padding: .3em; cursor: pointer; }
.choir-icon { width: 20px; height: 20px; }

/* Search modal (opened by the search icon) */
.choir-search-modal[hidden] { display: none; }
.choir-search-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; }
.choir-search-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.choir-search-modal__box { position: relative; background: #fff; margin-top: 12vh; padding: 2em; border-radius: 10px; width: min(92%, 560px); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.choir-search-modal__box form { display: flex; gap: .5em; }
.choir-search-modal__box input[type="search"] { flex: 1; font: inherit; padding: .6em .8em; border: 1px solid var(--choir-line); border-radius: 6px; }
.choir-search-modal__close { position: absolute; top: .1em; right: .45em; background: none; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--choir-muted); }

/* ---- Hero: a wide, rounded, slightly-inset image with page title over/under it ---- */
.choir-hero { margin: 0 0 clamp(2em, 5vw, 3.5em); }
.choir-hero__frame {
    background: #222 center/cover no-repeat;
    min-height: clamp(360px, 42vw, 560px);
    margin: 0 clamp(.8em, 2.5vw, 2em);          /* small gutters on the x-axis */
    border-radius: clamp(10px, 2vw, 20px);
    overflow: hidden;                            /* clip the photo to the rounded corners */
}
.choir-hero h1 { margin: 0 0 .3em; font-size: clamp(2rem, 6vw, 3.4rem); }
.choir-hero p  { margin: 0; font-size: 1.2rem; }
.choir-hero__cta { margin-top: 1.4em; }

/* Overlay: title/excerpt laid over the photo, bottom-left, aligned to the content column. */
.choir-hero--overlay .choir-hero__frame { position: relative; display: flex; align-items: flex-end; color: #fff; }
.choir-hero--overlay .choir-hero__frame::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(rgba(0, 0, 0, .05), rgba(0, 0, 0, .55));
}
.choir-hero--overlay .choir-container { position: relative; z-index: 1; width: 100%; }
.choir-hero--overlay .choir-hero__inner { padding: 2.5em 0; }
.choir-hero--overlay p { max-width: 40ch; }

/* Card: light card that straddles the bottom edge of the photo (pulled up to overlap). */
.choir-hero--card { margin-bottom: clamp(.8em, 2vw, 1.4em); }   /* card adds its own visual mass */
.choir-hero--card .choir-hero__inner {
    max-width: 620px;
    margin: clamp(-6rem, -8vw, -3.5rem) auto 0; /* overlap the photo's base, then sit below it */
    position: relative;
    z-index: 1;
    padding: clamp(1.6em, 4vw, 2.6em);
    background: var(--choir-bg);
    color: var(--choir-text);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
    text-align: center;
}

/* ---- Page-title banner (pages without a hero image): full-bleed colour band ---- */
.choir-page-banner {
    margin: 0;                                   /* full-bleed; gap below comes from .site-main */
    padding: clamp(1.1em, 2.8vw, 1.9em) 0;
    background: linear-gradient(rgba(255, 255, 255, .05), rgba(0, 0, 0, .14)), var(--choir-primary);
    color: var(--choir-on-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);   /* subtle lift instead of an underline */
}
.choir-page-banner__title { margin: 0; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.15; }

/* ---- Layout: content + sidebar ---- */
.site-main { padding: 2.5em 0; }
.choir-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(1.5em, 4vw, 3.5em);
    align-items: start;
}
.choir-layout--full { display: block; }
.content-area { min-width: 0; }
.content-area > article,
.content-area > .page-content { max-width: var(--choir-content); }

/* ---- Sidebar ---- */
.widget-area { position: sticky; top: 1.5em; }
.widget-area .widget {
    background: #fff;
    border: 1px solid var(--choir-line);
    border-radius: 10px;
    padding: 1.2em 1.4em;
    margin: 0 0 1.4em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.widget-area .widget-title { margin: 0 0 .6em; font-size: 1.15rem; }

/* ---- Entry content ---- */
.entry-title { margin: 0 0 .3em; }
.entry-meta { color: var(--choir-muted); margin-bottom: 1em; }
.entry-content > * + * { margin-top: 1em; }

/* ---- Footer: distinct primary-colour band, 3 columns on wide screens ---- */
.site-footer {
    /* mirror of the banner gradient: darkest edge at the top, next to the content */
    background: linear-gradient(rgba(0, 0, 0, .14), rgba(255, 255, 255, .05)), var(--choir-primary);
    color: var(--choir-on-primary);
    padding: clamp(1.1em, 2.4vw, 1.6em) 0;
    margin-top: 2.5em;
}
.site-footer a { color: var(--choir-footer-link); }
.site-footer .choir-social-nav a { color: var(--choir-on-primary); }   /* icons follow the text colour */
.site-footer__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 1em 2em; }
.site-footer__col { flex: 1 1 0; min-width: 0; }
.site-footer__col--left   { text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1em; }
.site-footer__col--center { text-align: center; }
.site-footer__col--right  { text-align: right; }
.site-footer__copy { margin: 0; }
.site-footer .choir-social-nav { justify-content: flex-start; }
.site-footer__menu {
    list-style: none; margin: .4em 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .3em 1em; justify-content: flex-end;
    font-size: .85rem;
}
.site-footer__menu a { text-decoration: none; }
.site-footer .button { background: var(--choir-accent); color: var(--choir-accent-contrast); }
@media (max-width: 640px) {
    .site-footer__inner { flex-direction: column; gap: .8em; }
    .site-footer__col { flex: 0 0 auto; text-align: center; }
    .site-footer .choir-social-nav { justify-content: center; }
    .site-footer__col--left { justify-content: center; }
    .site-footer__menu { justify-content: center; }
}

/* Floating back-to-top: appears after scrolling past the first viewport height. */
.choir-to-top {
    position: fixed; right: clamp(1em, 3vw, 2em); bottom: clamp(1em, 3vw, 2em);
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--choir-accent); color: var(--choir-accent-contrast);
    border: 0; border-radius: 10px; cursor: pointer; z-index: 900;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.choir-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.choir-to-top .choir-icon { width: 22px; height: 22px; }

/* ---- Buttons / forms (login + submission) ---- */
/* Only elements with .button get the accent style — never generic <button>s
   (that would clobber the TinyMCE toolbar and the Visual/Code tabs). */
.button {
    display: inline-block;
    background: var(--choir-accent);
    color: var(--choir-accent-contrast);
    border: 0; border-radius: 4px;
    padding: .6em 1.2em;
    font: inherit; cursor: pointer; text-decoration: none;
}
.button:hover { color: var(--choir-accent-contrast); }

/* Secondary (outlined) button — same accent colour, just a border. */
.button--secondary {
    background: transparent;
    color: var(--choir-accent);
    border: 1px solid var(--choir-accent);
}
.button--secondary:hover { color: var(--choir-accent); background: rgba(0, 0, 0, .03); }

/* ---- Front-end login form ([choir_login]) ---- */
.choir-login {
    max-width: 420px;
    padding: clamp(1.4em, 3vw, 2em);
    background: #fff;
    border: 1px solid var(--choir-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.choir-login p { margin: 0 0 1em; }
.choir-login label { display: block; font-size: .95rem; }
.choir-login input.input {
    display: block; width: 100%; font: inherit; margin-top: .35em;
    padding: .55em .7em; border: 1px solid var(--choir-line); border-radius: 6px;
}
.choir-login .login-remember label { display: flex; align-items: center; gap: .45em; }
.choir-login .login-remember input { width: auto; margin: 0; }
.choir-login .login-submit { margin-bottom: 0; }
.choir-login input[type="submit"] { width: 100%; }

.choir-submit-form label { display: inline-block; margin: 0 1em .8em 0; font-size: .95rem; }
.choir-submit-form input[type="text"],
.choir-submit-form input[type="date"],
.choir-submit-form input[type="time"],
.choir-submit-form textarea {
    font: inherit; padding: .45em .6em; border: 1px solid var(--choir-line); border-radius: 4px;
}
.choir-submit-form input[type="text"],
.choir-submit-form textarea { width: 100%; }

/* Full-width single fields (title) + block field labels. */
.choir-submit-form .choir-field-title label { display: block; margin: 0 0 .8em; }
.choir-submit-form .choir-field-label { display: block; margin: 0 0 .3em; font-size: .95rem; }

/* Occurrence row: date/time shrink to content, Plats grows to fill the rest. */
.choir-occurrence-row { display: flex; flex-wrap: wrap; gap: .8em 1em; align-items: flex-end; }
.choir-occurrence-row label { margin: 0; }
.choir-submit-form .choir-field--grow { flex: 1 1 14em; }

/* Featured-image field (media library): preview + choose/remove buttons. */
.choir-image-field { margin: 0 0 1.2em; }
.choir-image-preview[hidden] { display: none; }
.choir-image-preview img {
    display: block; max-width: 260px; height: auto;
    border: 1px solid var(--choir-line); border-radius: 6px; margin-bottom: .6em;
}
.choir-image-buttons { display: flex; flex-wrap: wrap; gap: .6em; margin: 0; }
.choir-image-buttons [hidden] { display: none; }

/* Action row (submit + cancel). */
.choir-form-actions { display: flex; flex-wrap: wrap; gap: .8em; align-items: center; margin-top: 1.4em; }

.choir-submit-form fieldset {
    border: 1px solid var(--choir-line); border-radius: 6px; margin: 0 0 1.2em; padding: 1em;
}
.choir-submit-form legend { padding: 0 .4em; font-weight: bold; }
.choir-extra-row {
    display: flex; flex-wrap: wrap; gap: .8em; align-items: flex-end;
    margin: .6em 0; padding: .7em; border: 1px solid var(--choir-line); border-radius: 4px;
}
.choir-remove-row { background: none; border: 0; color: #b32d2e; cursor: pointer; font: inherit; }
.choir-notice { padding: .8em 1.2em; border-radius: 4px; margin: 0 0 1.2em; }
.choir-notice--ok { background: #e6f4ea; border: 1px solid #94d3a2; }
.choir-notice--error { background: #fce8e6; border: 1px solid #e6a5a0; }

/* ---- Member dashboard (manage list + pagination) ---- */
.choir-manage-list { list-style: none; margin: 1.5em 0; padding: 0; }
.choir-manage-item {
    padding: 1em 0;
    border-bottom: 1px solid var(--choir-line);
}
.choir-manage-title { font-size: 1.15rem; }
.choir-manage-item .choir-event-date { margin: .2em 0 .6em; font-weight: 400; color: var(--choir-muted); }
.choir-pagination { margin: 1.5em 0; display: flex; flex-wrap: wrap; gap: .4em; }
.choir-pagination .page-numbers {
    padding: .4em .8em; border: 1px solid var(--choir-line); border-radius: 4px; text-decoration: none;
}
.choir-pagination .page-numbers.current { background: var(--choir-accent); color: var(--choir-accent-contrast); border-color: var(--choir-accent); }
.choir-image-field img { border: 1px solid var(--choir-line); border-radius: 4px; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .choir-layout { grid-template-columns: 1fr; }
    .widget-area { position: static; border-top: 1px solid var(--choir-line); padding-top: 1.5em; }
}

/* Collapse the menu into a hamburger before it would wrap onto a second line. */
@media (max-width: 760px) {
    .main-nav__toggle { display: inline-flex; order: 1; }
    .main-nav__utils   { order: 2; }
    .main-nav__menu    { order: 3; flex-basis: 100%; display: none; }
    .main-nav__menu.is-open { display: block; padding-bottom: .6em; }
    .main-nav__menu ul { flex-direction: column; gap: 0; }
    .main-nav__menu li { border-top: 1px solid var(--choir-line); }
    .main-nav__menu a  { padding: .8em .2em; border-bottom: 0; }
    .main-nav__menu .current-menu-item > a { border-bottom: 0; box-shadow: inset 3px 0 0 var(--choir-accent); padding-left: .8em; }
    /* swap the hamburger glyph for a close (X) when the menu is open */
    .main-nav__toggle[aria-expanded="true"] .main-nav__toggle-open { display: none; }
    .main-nav__toggle[aria-expanded="true"] .main-nav__toggle-close { display: inline-flex; }
}