/*
Theme Name: Ink St PRO
Theme URI: https://localstarterthemes.com/theme/ink-st-pro/
Author: Local Starter Themes
Author URI: https://localstarterthemes.com
Description: A PRO edition of Ink St — a dark, moody block theme for tattoo studios, piercing parlours, and body-art collectives. Ships with six ready-made home page layouts (Classic Studio, Flash Shop, Fine Line Atelier, Blackwork Collective, Large Scale, Solo Artist), nine color styles, and 61 patterns: tattoo styles, artist rosters, portfolios, rate sheets and flash boards, booking process, aftercare, reviews, FAQ, journal, and booking / visit sections. Built 100% on native blocks — no page builder, no dependencies.
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ink-st-pro
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, wide-blocks, block-styles, portfolio
*/

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Keep anchored sections clear of the sticky header. */
main [id] {
    scroll-margin-top: 5rem;
}

.ink-st-pro-header {
    z-index: 20;
}

.ink-st-pro-header .wp-block-site-title,
.ink-st-pro-header .wp-block-button__link {
    white-space: nowrap;
}

/* Collapse the header menu into the overlay below 960px (core only does it below 600px). */
@media screen and (min-width: 600px) and (max-width: 959px) {
    .ink-st-pro-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }

    .ink-st-pro-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}

@media screen and (max-width: 959px) {
    .ink-st-pro-tagline {
        display: none;
    }

    .wp-block-navigation__responsive-container.is-menu-open {
        padding: 2rem !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container {
        align-items: center !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        gap: var(--wp--preset--spacing--40) !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        font-size: 1.125rem;
        letter-spacing: 0.25em;
    }
}

.is-style-no-wrap {
    white-space: nowrap;
}

.is-style-ink-stamp {
    display: inline-block;
    padding: 0.35em 0.75em;
    border: 1px solid currentColor;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 700;
}

.is-style-ink-outline {
    -webkit-text-stroke: 2px var(--wp--preset--color--primary, #e24b40);
    color: transparent !important;
}

/* Comment form fields on dark (and light) surfaces. */
.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments-form textarea {
    background-color: var(--wp--preset--color--surface-container, #171513);
    color: var(--wp--preset--color--on-surface, #ede6d3);
    border: 1px solid var(--wp--preset--color--outline-variant, #332f2c);
    border-radius: 0;
    padding: 0.75rem 1rem;
}

.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]):focus,
.wp-block-post-comments-form textarea:focus {
    outline: 2px solid var(--wp--preset--color--primary, #e24b40);
    outline-offset: 1px;
}

/* Ledger rows: the fixed-width index / label column never shrinks. */
.ink-st-pro-row > :first-child {
    flex-shrink: 0;
}

.ink-st-pro-row > .wp-block-group {
    min-width: 0;
}

.ink-st-pro-rate-row > p:last-child {
    flex-shrink: 0;
}

/* Small uppercase text links ("Portfolio →", "Full feed on Instagram →"). */
.ink-st-pro-link a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
}

.ink-st-pro-link a:hover,
.ink-st-pro-link a:focus-visible {
    color: var(--wp--preset--color--primary, #e24b40);
}

.wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--surface, #0c0a09) !important;
    color: var(--wp--preset--color--on-surface, #ede6d3) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item a {
    color: var(--wp--preset--color--on-surface-variant, #b5ad9a) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item a:hover {
    color: var(--wp--preset--color--primary, #e24b40) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close-button {
    color: var(--wp--preset--color--primary, #e24b40) !important;
}

@media screen and (max-width: 781px) {
    .ink-st-pro-hero-media .wp-block-cover {
        min-height: 75vh !important;
    }

    .ink-st-pro-artist-photo {
        max-width: 320px;
    }

    .ink-st-pro-rate-row .ink-st-pro-price {
        font-size: clamp(2rem, 9vw, 3rem) !important;
    }
}

@media screen and (max-width: 600px) {
    .ink-st-pro-header-inner {
        padding-left: var(--wp--preset--spacing--40) !important;
        padding-right: var(--wp--preset--spacing--40) !important;
    }

    /* Rate rows: index on the left, name + description + price stacked on the right. */
    .ink-st-pro-rate-row {
        display: grid !important;
        grid-template-columns: 2.75rem minmax(0, 1fr);
        column-gap: var(--wp--preset--spacing--30);
        row-gap: var(--wp--preset--spacing--20);
        align-items: start !important;
    }

    .ink-st-pro-rate-row > p:first-child {
        grid-row: 1 / span 2;
    }

    .ink-st-pro-rate-row > p:last-child {
        grid-column: 2;
        text-align: left !important;
    }
}

/* Home layout — Flash Shop. */
.ink-st-pro-flash-leader {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    min-width: 0;
}

.ink-st-pro-flash-leader::after {
    content: "";
    flex: 1 1 1.5rem;
    border-bottom: 2px dotted var(--wp--preset--color--outline, #878079);
}

.ink-st-pro-flash-rate > p:last-child {
    flex-shrink: 0;
}

.ink-st-pro-flash-nowrap {
    white-space: nowrap;
}

@media screen and (max-width: 600px) {
    .ink-st-pro-flash-star {
        display: none;
    }

    .ink-st-pro-flash-step > p:first-child {
        flex-basis: 3.25rem !important;
        font-size: 2.5rem !important;
    }

    .ink-st-pro-flash-card .is-style-no-wrap,
    .ink-st-pro-flash-card .is-style-ink-stamp {
        letter-spacing: 0.1em !important;
    }

    .ink-st-pro-flash-board {
        padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) !important;
    }
}


/* ---------- Layout: Fine Line Atelier ---------- */

/* Framed images: no extra space under the photo inside its passe-partout. */
.ink-st-pro-atelier-plate,
.ink-st-pro-atelier-plate img {
    display: block;
    width: 100%;
    margin: 0;
}

/* Portfolio: the middle piece sits a little lower on wide screens. */
@media screen and (min-width: 782px) {
    .ink-st-pro-atelier-offset { padding-top: var(--wp--preset--spacing--70); }
}

/* Process timeline: a small red marker on the hairline above each step. */
.ink-st-pro-atelier-step { position: relative; }

.ink-st-pro-atelier-step::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--wp--preset--color--primary, #e24b40);
}

/* Pricing: small "from" / "flat" label before the serif price. */
.ink-st-pro-atelier-from {
    margin-right: 0.4em;
    font-family: var(--wp--preset--font-family--headline);
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    vertical-align: middle;
    color: var(--wp--preset--color--on-surface-variant, #b5ad9a);
}

/* Inquiry checklist: hairline rows with a red dash instead of bullets. */
.ink-st-pro-atelier-list { list-style: none; padding-left: 0; margin: 0; }

.ink-st-pro-atelier-list li {
    padding: 0.7rem 0 0.7rem 1.75rem;
    border-bottom: 1px solid var(--wp--preset--color--outline-variant, #332f2c);
    text-indent: -1.75rem;
}

.ink-st-pro-atelier-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.ink-st-pro-atelier-list li::before {
    content: "\2014";
    display: inline-block;
    width: 1.75rem;
    text-indent: 0;
    color: var(--wp--preset--color--primary, #e24b40);
}

@media screen and (max-width: 781px) {
    .ink-st-pro-atelier-portrait { max-width: 420px; }
}

@media screen and (max-width: 600px) {
    /* The wide hero plate becomes a taller crop; long button labels stay on one line. */
    .ink-st-pro-atelier-hero .ink-st-pro-atelier-plate img { aspect-ratio: 4 / 3 !important; }

    .ink-st-pro-atelier-hero .wp-block-button__link,
    .ink-st-pro-atelier-inquiry .wp-block-button__link {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        letter-spacing: 0.18em;
        white-space: nowrap;
    }
}

/* Solo Artist layout. */
.ink-st-pro-solo-name {
	overflow-wrap: normal;
	word-break: normal;
}

/* Flash cards: equal height inside a row, price + Claim pinned to the bottom. */
.ink-st-pro-solo-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.ink-st-pro-solo-card > .ink-st-pro-solo-card-foot {
	margin-top: auto !important;
}

.ink-st-pro-solo-card > p:last-of-type {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Books calendar rows: month + note on the left, status stamp never shrinks. */
.ink-st-pro-solo-month > p:last-child {
	flex-shrink: 0;
}

@media screen and (max-width: 781px) {
	/* Staggered portfolio columns line up once they stack. */
	.ink-st-pro-solo-offset {
		padding-top: 0 !important;
	}
}

/* Large Scale layout: journey timeline markers, sticky journey photo, mobile tightening. */
.ink-st-pro-largescale-step {
    position: relative;
}

.ink-st-pro-largescale-step::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: calc(-1 * var(--wp--preset--spacing--50) - 5px);
    width: 9px;
    height: 9px;
    background: var(--wp--preset--color--primary, #e24b40);
}

@media screen and (min-width: 782px) {
    .ink-st-pro-largescale-sticky {
        position: sticky;
        top: 6rem;
    }
}

@media screen and (max-width: 600px) {
    .ink-st-pro-largescale-step {
        padding-bottom: var(--wp--preset--spacing--50) !important;
    }

    .ink-st-pro-largescale-spine {
        padding-right: var(--wp--preset--spacing--20) !important;
    }
}

/* Home layout: Blackwork Collective. Work grid: the two small cells fill the height of the large one. */
.ink-st-pro-collective-stack {
    display: flex;
    flex-direction: column;
}

.ink-st-pro-collective-stack > .wp-block-group {
    flex: 1 1 auto;
}

.ink-st-pro-collective-grid .wp-block-image img {
    width: 100%;
}

@media screen and (max-width: 781px) {
    .ink-st-pro-collective-ticker {
        justify-content: center !important;
    }

    /* Roster row: thumbnail on the left, index, name, books and link stacked beside it. */
    .ink-st-pro-collective-row.wp-block-columns {
        display: grid !important;
        grid-template-columns: 5.5rem minmax(0, 1fr);
        grid-template-areas: "thumb num" "thumb name" "thumb books" "thumb link";
        column-gap: var(--wp--preset--spacing--40);
        row-gap: var(--wp--preset--spacing--20);
    }

    .ink-st-pro-collective-row > .wp-block-column {
        align-self: start !important;
    }

    .ink-st-pro-collective-row > :nth-child(1) { grid-area: num; }
    .ink-st-pro-collective-row > :nth-child(2) { grid-area: thumb; }
    .ink-st-pro-collective-row > :nth-child(3) { grid-area: name; }
    .ink-st-pro-collective-row > :nth-child(4) { grid-area: books; }
    .ink-st-pro-collective-row > :nth-child(5) { grid-area: link; }

    .ink-st-pro-collective-row > :nth-child(5) p {
        text-align: left !important;
    }

    /* Guest row: dates + status on one line, artist and city below. */
    .ink-st-pro-collective-guest.wp-block-columns {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "date status" "name name" "city city";
        row-gap: var(--wp--preset--spacing--20);
        align-items: center !important;
    }

    .ink-st-pro-collective-guest > :nth-child(1) { grid-area: date; }
    .ink-st-pro-collective-guest > :nth-child(2) { grid-area: name; }
    .ink-st-pro-collective-guest > :nth-child(3) { grid-area: city; }
    .ink-st-pro-collective-guest > :nth-child(4) { grid-area: status; }

    .ink-st-pro-collective-rates > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ink-st-pro-collective-rates > .wp-block-column + .wp-block-column {
        border-left: 0 !important;
        border-top: 1px solid var(--wp--preset--color--outline-variant, #332f2c) !important;
    }
}

@media screen and (min-width: 782px) {
    .ink-st-pro-collective-wordmark {
        font-size: min(18vw, 18rem) !important;
    }
}

/* Hero meta labels: left-aligned on phones. */
@media screen and (max-width: 600px) {
    .ink-st-pro-collective-meta { align-items: flex-start !important; }
    .ink-st-pro-collective-meta p { text-align: left !important; }
}