/*
Theme Name: Artisan Integration
Theme URI: https://artisanintegration.com
Description: Child theme for the Artisan Integration website. Copper-and-steel palette, inline vector logo, photo galleries with a lightbox, one gallery template shared by every work page, and a reserved Shop template. Source of truth is the Git repository Prandtl-Glauert/artisan-website.
Author: Artisan Integration LLC
Template: twentytwentyfive
Version: 0.2.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: artisan
*/

/* Most styling lives in theme.json. This file holds what theme.json cannot express:
   the inline logo, the photo hero, the photo grids and lightbox, and small utilities. */

/* Header, main and footer sit flush; each band sets its own spacing. */
.wp-site-blocks > * {
    margin-block-start: 0;
}
/* The home page is a stack of full-width bands; they sit flush too, and their
   paragraphs keep a readable line length inside the wide bands. */
.artisan-bands > * {
    margin-block: 0;
}
.artisan-bands .wp-block-group > p:not(.has-text-align-center) {
    margin-left: max(0px, calc((100% - 1200px) / 2)) !important;
    max-width: 720px;
}

/* Grids made of blocks: the flow layout's top margin on every child after the
   first would push those children out of line. */
.artisan-work-tiles > *,
.artisan-pairs > * {
    margin-block: 0;
}

/* Inline vector logo: the SVG uses currentColor, so it takes the text colour of
   whatever it sits in. */
.artisan-logo svg {
    display: block;
    height: auto;
    width: 100%;
}
.artisan-logo--header svg {
    width: clamp(140px, 22vw, 220px);
}
.artisan-logo--hero svg {
    margin-inline: auto;
    width: min(80vw, 460px);
}
.artisan-logo--footer svg {
    width: 120px;
}
.artisan-logo a {
    color: inherit;
    display: inline-block;
    line-height: 0;
}
.artisan-logo a:hover,
.artisan-logo a:focus-visible {
    color: var(--wp--preset--color--accent-1);
}

/* Header: keep the logo and the navigation on one line, collapse cleanly. */
.artisan-header {
    align-items: center;
    column-gap: var(--wp--preset--spacing--30);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: var(--wp--preset--spacing--40);
}
.artisan-header .wp-block-navigation a:hover,
.artisan-header .wp-block-navigation a:focus-visible,
.artisan-header .wp-block-navigation .current-menu-item > a {
    color: var(--wp--preset--color--accent-2);
}

/* Instagram: WordPress's Social Icons block, symbol only, beside the menu and in the
   footer. On hover it turns tan like the links around it. */
.artisan-social.wp-block-social-links .wp-social-link .wp-block-social-link-anchor:hover,
.artisan-social.wp-block-social-links .wp-social-link .wp-block-social-link-anchor:focus-visible {
    color: var(--wp--preset--color--accent-2);
}
.artisan-social.wp-block-social-links.is-style-logos-only .wp-social-link svg {
    height: 22px;
    width: 22px;
}
/* The menu and the symbol share a row. If the menu wraps on a narrow tablet, the
   symbol stays on its last line instead of floating between the two. */
.artisan-header .artisan-header__end {
    align-items: flex-end;
    gap: 0.75rem;
}
/* Below wide-desktop widths the menu items sit a little closer, so the menu and the
   symbol still fit beside the logo in a 1024-pixel window. */
@media (max-width: 1100px) {
    .artisan-header .wp-block-navigation {
        column-gap: 0.875rem;
    }
}
/* On phones the menu folds into a button; keep that button at the far right. */
@media (max-width: 599px) {
    .artisan-header__end .artisan-social {
        order: -1;
    }
}

/* Dark bands. */
.artisan-hero {
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--accent-6);
}
.artisan-hero h1,
.artisan-hero h2,
.artisan-hero h3 {
    color: var(--wp--preset--color--accent-6);
}
.artisan-hero a:not(.wp-element-button) {
    color: var(--wp--preset--color--accent-2);
}

/* Home hero: the logo and headline over a darkened shop photo. */
.artisan-hero--photo {
    background:
        linear-gradient(180deg, rgba(20, 20, 20, 0.86) 0%, rgba(20, 20, 20, 0.58) 48%, rgba(20, 20, 20, 0.94) 100%),
        url("assets/portfolio/home-hero-2400.jpg") center 55% / cover no-repeat,
        var(--wp--preset--color--contrast);
}
@media (max-width: 900px) {
    .artisan-hero--photo {
        background:
            linear-gradient(180deg, rgba(20, 20, 20, 0.86) 0%, rgba(20, 20, 20, 0.6) 48%, rgba(20, 20, 20, 0.94) 100%),
            url("assets/portfolio/home-hero-1400.jpg") center 55% / cover no-repeat,
            var(--wp--preset--color--contrast);
    }
}
.artisan-hero--photo h1 {
    letter-spacing: 0.02em;
    margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
    text-transform: none;
}
.artisan-lede {
    color: var(--wp--preset--color--accent-5);
}

/* Outline buttons read on dark backgrounds. */
.artisan-hero .wp-block-button.is-style-outline > .wp-block-button__link {
    background: transparent;
    border: 2px solid var(--wp--preset--color--accent-2);
    color: var(--wp--preset--color--accent-6);
}
.artisan-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
    background: var(--wp--preset--color--accent-2);
    color: var(--wp--preset--color--contrast);
}

/* Section kicker: a small copper label above a heading. */
.artisan-kicker {
    color: var(--wp--preset--color--accent-1);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 0;
    text-transform: uppercase;
}

/* Work tiles on the home page: a photo card per work page. */
.artisan-work-tiles {
    display: grid;
    gap: var(--wp--preset--spacing--40);
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.artisan-work-tile {
    background: var(--wp--preset--color--accent-6);
    border-top: 3px solid var(--wp--preset--color--accent-1);
    box-shadow: 0 1px 2px rgba(20, 20, 20, 0.08);
    color: var(--wp--preset--color--contrast);
    display: block;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.3s ease;
}
.artisan-work-tile:hover,
.artisan-work-tile:focus-visible {
    box-shadow: 0 10px 28px rgba(20, 20, 20, 0.16);
}
.artisan-work-tile__image {
    aspect-ratio: 4 / 3;
    background: var(--wp--preset--color--accent-3);
    display: block;
    overflow: hidden;
}
.artisan-work-tile__image img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    width: 100%;
}
.artisan-work-tile:hover .artisan-work-tile__image img,
.artisan-work-tile:focus-visible .artisan-work-tile__image img {
    transform: scale(1.04);
}
.artisan-work-tile__body {
    display: block;
    padding: var(--wp--preset--spacing--40);
}
.artisan-work-tile__title {
    display: block;
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.artisan-work-tile:hover .artisan-work-tile__title,
.artisan-work-tile:focus-visible .artisan-work-tile__title {
    color: var(--wp--preset--color--accent-1);
}
.artisan-work-tile__text {
    color: var(--wp--preset--color--accent-3);
    display: block;
    margin-top: 0.4rem;
}

/* Photo grids on the work pages. */
/* Three columns on a desktop, two on a tablet, one on a phone. Empty columns are
   kept (auto-fill), so a gallery of one or two pictures does not stretch small
   originals past their own size. */
.artisan-gallery-grid {
    display: grid;
    gap: var(--wp--preset--spacing--30);
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
/* A gallery of exactly three photos stays one row wherever the grid would otherwise
   show two with the third left alone on the next row. */
@media (min-width: 660px) {
    .artisan-gallery-grid:has(> :nth-child(3):last-child) {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Room above each section and project heading in page content. */
.wp-block-post-content > h2.wp-block-heading {
    margin-top: var(--wp--preset--spacing--70);
}
.wp-block-post-content > h3.wp-block-heading {
    margin-top: var(--wp--preset--spacing--60);
}
.artisan-photo {
    margin: 0;
}
.artisan-photo__link {
    background: var(--wp--preset--color--accent-5);
    display: block;
    overflow: hidden;
}
.artisan-photo img {
    display: block;
    height: auto;
    transition: transform 0.4s ease;
    width: 100%;
}
.artisan-photo.is-frame-4x3 .artisan-photo__link {
    aspect-ratio: 4 / 3;
}
.artisan-photo.is-frame-portrait .artisan-photo__link {
    aspect-ratio: 4 / 5;
}
.artisan-photo.is-frame-square .artisan-photo__link {
    aspect-ratio: 1;
}
.artisan-photo:not(.is-frame-natural) img {
    height: 100%;
    object-fit: cover;
}
.artisan-photo.is-fit-contain .artisan-photo__link,
.artisan-photo.is-fit-contain img {
    background: var(--wp--preset--color--accent-6);
    object-fit: contain;
}
.artisan-photo__link:hover img,
.artisan-photo__link:focus-visible img {
    transform: scale(1.03);
}
.artisan-photo figcaption {
    color: var(--wp--preset--color--accent-4);
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.4;
    margin-top: 0.5rem;
}
.artisan-hero .artisan-photo figcaption {
    color: var(--wp--preset--color--accent-5);
}

/* A drawing and the finished part, side by side. */
.artisan-pairs {
    display: grid;
    gap: var(--wp--preset--spacing--50);
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.artisan-pair {
    align-items: center;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: 1fr auto 1fr;
    margin: 0;
}
.artisan-pair__arrow {
    color: var(--wp--preset--color--accent-1);
    font-size: 1.75rem;
    font-weight: 700;
}
.artisan-pair > figcaption {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    grid-column: 1 / -1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Portraits on the home and About pages. */
.artisan-person .artisan-photo {
    margin-bottom: var(--wp--preset--spacing--30);
    max-width: 320px;
}
.artisan-role {
    color: var(--wp--preset--color--accent-1);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-top: 0;
    text-transform: uppercase;
}
.artisan-hero .artisan-role {
    color: var(--wp--preset--color--accent-2);
}

/* Contact address set large. */
.artisan-email--large {
    display: block;
    font-size: clamp(1.1rem, 5vw, 2.25rem);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-decoration: none;
}

/* Placeholder frames used until photos are supplied. */
.artisan-placeholder {
    align-items: center;
    aspect-ratio: 4 / 3;
    background:
        repeating-linear-gradient(45deg, transparent 0 14px, rgba(0, 0, 0, 0.04) 14px 28px),
        var(--wp--preset--color--accent-5);
    border: 1px dashed var(--wp--preset--color--accent-4);
    color: var(--wp--preset--color--accent-3);
    display: flex;
    font-size: var(--wp--preset--font-size--small);
    justify-content: center;
    letter-spacing: 0.08em;
    padding: 1rem;
    text-align: center;
    text-transform: uppercase;
}

/* Copper rule used as a section divider. */
/* The rule keeps the full content width so WordPress's layout centring leaves it
   aligned with the text, and draws only a short copper line at its left edge. */
hr.wp-block-separator.artisan-rule:not(.is-style-wide) {
    background: linear-gradient(to right, var(--wp--preset--color--accent-1) 0 4rem, transparent 4rem);
    border: 0;
    height: 2px;
    margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
    opacity: 1;
    width: 100%;
}

/* Phone slot renders nothing until a number is configured. */
.artisan-phone:empty {
    display: none;
}

/* Lightbox. */
.artisan-lightbox {
    background: transparent;
    border: 0;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    padding: 0;
    width: 100%;
}
.artisan-lightbox[open] {
    align-items: center;
    display: flex;
    justify-content: center;
}
.artisan-lightbox::backdrop {
    background: rgba(12, 12, 12, 0.94);
}
.artisan-lightbox__figure {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0;
    max-width: 92vw;
}
.artisan-lightbox__figure img {
    max-height: 82vh;
    max-width: 92vw;
    object-fit: contain;
}
.artisan-lightbox__figure figcaption {
    color: #e6e6e6;
    font-size: var(--wp--preset--font-size--small);
    margin-top: 0.75rem;
    max-width: 60ch;
    text-align: center;
}
.artisan-lightbox button {
    background: rgba(20, 20, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 1.6rem;
    height: 48px;
    line-height: 1;
    position: absolute;
    width: 48px;
}
.artisan-lightbox button:hover,
.artisan-lightbox button:focus-visible {
    background: var(--wp--preset--color--accent-1);
}
.artisan-lightbox__close {
    right: 1rem;
    top: 1rem;
}
.artisan-lightbox__prev,
.artisan-lightbox__next {
    top: 50%;
    transform: translateY(-50%);
}
.artisan-lightbox__prev {
    left: 1rem;
}
.artisan-lightbox__next {
    right: 1rem;
}
.artisan-lightbox.is-single .artisan-lightbox__prev,
.artisan-lightbox.is-single .artisan-lightbox__next {
    display: none;
}

/* Footer links. */
.artisan-footer a {
    color: var(--wp--preset--color--accent-5);
}
.artisan-footer a:hover,
.artisan-footer a:focus-visible {
    color: var(--wp--preset--color--accent-2);
}

@media (prefers-reduced-motion: reduce) {
    .artisan-work-tile,
    .artisan-work-tile__image img,
    .artisan-photo img {
        transition: none;
    }
    .artisan-work-tile:hover .artisan-work-tile__image img,
    .artisan-photo__link:hover img {
        transform: none;
    }
}