/*
 * Peppermint — effects layer.
 * Only what Elementor global classes/variables cannot express. Everything
 * else (colours, type, spacing, radii) lives in Elementor. The --pm-* custom
 * properties are Elementor global variables, printed on :root by the kit.
 */

/* ---------- Base ---------- */
body {
	background: var(--pm-paper, #FAFAF7);
	color: var(--pm-ink, #0D0D0D);
	font-family: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 1.125rem;
	line-height: 1.55;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pm-mint, #7ABBA4); outline-offset: 2px; }

/*
 * Inline accents inside atomic headings/paragraphs. Elementor keeps <span>, <s>
 * and <strong> but strips attributes, so the colour comes from a global class on
 * the widget (pm-accent-*, pm-marker) that sets --pm-accent / --pm-marker.
 */
:where(.e-heading-base, .e-paragraph-base) span { color: var(--pm-accent, inherit); background-color: var(--pm-marker, transparent); }
:where(.e-paragraph-base) a:not([class]) { text-decoration: underline; }
/* A dynamic featured image with no image set renders a bare <img>: hide it (and its link). */
.e-image-base:not([src]) { display: none; }
:where(.e-heading-base, .e-paragraph-base) s { text-decoration-color: #E35DA5; text-decoration-thickness: 0.09em; opacity: var(--pm-strike-opacity, 1); }

/* ---------- Header (Theme Builder) ---------- */
/* Sticky must sit on the location wrapper: the header element is its only child. */
.elementor-location-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px; } }

/* Nav Menu widget (no atomic menu with current-item + mobile toggle yet). */
.pm-nav .elementor-nav-menu--main .elementor-item {
	font-family: var(--pm-font-mono), monospace; font-size: .875rem; font-weight: 400; line-height: 1.55;
	letter-spacing: .12em; text-transform: uppercase; color: var(--pm-ink);
	padding: 0 0 8px; margin: 0;
}
.pm-nav .elementor-nav-menu--main > .elementor-nav-menu > li + li { margin-left: 36px; }
.pm-nav .elementor-nav-menu--main .elementor-item:hover,
.pm-nav .elementor-nav-menu--main .elementor-item:focus { color: var(--pm-magenta); }
.pm-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--pm-ink);
	background: linear-gradient(90deg, #7ABBA4 0% 42%, #4C428F 42% 59%, #C73883 59% 76%, #F0E458 76% 93%, #0D0D0D 93% 100%) left bottom / 100% 4px no-repeat;
}
.pm-nav .elementor-item::before, .pm-nav .elementor-item::after { display: none; }
/* Mobile: full-width mint panel with big italic links, like the original overlay. */
.pm-nav .elementor-menu-toggle { background: transparent; color: var(--pm-ink); font-size: 26px; }
.pm-nav .elementor-nav-menu--dropdown { background: var(--pm-mint); padding: 2rem var(--pm-gutter); }
.pm-nav .elementor-nav-menu--dropdown .elementor-item {
	font-family: "Archivo", sans-serif; font-size: 2.75rem; font-weight: 800; font-style: italic;
	letter-spacing: -0.02em; text-transform: none; color: var(--pm-ink); background: transparent; padding: .25rem 0;
}

/* ---------- Footer ---------- */
.pm-footer a { color: var(--pm-paper); text-decoration: none; }
.pm-footer a:hover { color: var(--pm-mint); }
.pm-footer .pm-legal a { color: var(--pm-grey); }

/* ---------- Hero ---------- */
/* Scribble under the headline draws itself in (path ships inside scribble.svg). */
.pm-scribble .pm-draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: pm-draw 1.1s .5s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes pm-draw { to { stroke-dashoffset: 0; } }
.pm-scribble svg { width: 100%; height: 100%; overflow: visible; display: block; }
.pm-badge__svg svg { width: 100%; height: 100%; display: block; }

/* Photo fan spreads out when the whole fan is hovered (parent-hover: not expressible per element). */
@media (min-width: 768px) {
	.pm-fan:hover .pm-fan__a { transform: rotate(-14deg) translate(-36px, -6px); }
	.pm-fan:hover .pm-fan__b { transform: rotate(0deg) translateY(-22px) scale(1.04); }
	.pm-fan:hover .pm-fan__c { transform: rotate(15deg) translate(40px, -4px); }
}

/* ---------- Term pills ([pm_terms] shortcode output; Elementor strips its classes, so style by structure) ---------- */
.pm-terms > span { display: flex; flex-wrap: wrap; }
.pm-terms a {
	display: inline-block; padding: .45rem .9rem; margin: 0 .3rem .3rem 0;
	font-family: var(--pm-font-mono), monospace; font-size: .75rem; font-style: normal; font-weight: 400; line-height: 1.55;
	letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
	border-radius: 999px; background: var(--pm-ink); color: var(--pm-paper) !important; transform: rotate(-2deg);
}

/* ---------- Work bento (home) — position-based spans the loop cannot set per item ---------- */
@media (min-width: 768px) {
	.pm-work-bento > [role="listitem"] { grid-column: span 2; }
	.pm-work-bento > [role="listitem"]:first-child { grid-column: span 4; }
	.pm-work-bento > [role="listitem"]:first-child .pm-work-card__img { aspect-ratio: 4 / 3; }
	.pm-work-bento > [role="listitem"]:nth-child(2) .pm-work-card__img { aspect-ratio: 2 / 3; }
	.pm-work-bento > [role="listitem"]:first-child .pm-work-card__title { font-size: clamp(2.25rem, 3.6vw, 3.5rem); }
}
.pm-work-bento > [role="listitem"]:nth-child(odd):hover .pm-work-card__img { transform: rotate(-1.5deg) scale(1.02); }
.pm-work-bento > [role="listitem"]:nth-child(even):hover .pm-work-card__img { transform: rotate(1.5deg) scale(1.02); }

/* ---------- Client tapes — marquee (Elementor drops animation-*) ---------- */
.pm-track { animation: pm-scroll 40s linear infinite; }
.pm-track--black { animation-direction: reverse; animation-duration: 52s; }
.pm-tapes:hover .pm-track { animation-play-state: paused; }
.pm-track--black > span:nth-child(4n+2) { color: var(--pm-magenta); }
.pm-track--black > span:nth-child(4n) { color: var(--pm-yellow); }
@keyframes pm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Services accordion ---------- */
.pm-svc > summary, .pm-faq > summary { list-style: none; }
.pm-svc > summary::-webkit-details-marker, .pm-faq > summary::-webkit-details-marker { display: none; }
.pm-svc__head:hover .pm-svc__name-text { font-stretch: 125%; }
/* "+" becomes "−" when open, instead of Elementor's default icon rotation. */
.pm-svc[open] .pm-svc__icon, .pm-faq[open] .pm-faq__icon { transform: none; }
.pm-svc[open] .pm-plus-v, .pm-faq[open] .pm-plus-v { opacity: 0; }

/* ---------- Work index (archive) — alternate sides, tilt on hover ---------- */
.pm-work-list > [role="listitem"]:nth-child(even) .pm-work-row { flex-direction: row-reverse; }
/* A linked e-image renders <a><img></a>: the link is the flex item, so it takes the image's sizing. */
.pm-work-row > .e-image-link-base { display: block; flex: 1.4 1 480px; min-width: 0; }
.pm-work-list > [role="listitem"]:hover .pm-work-row__img { transform: rotate(-1.5deg) scale(1.02); }

/* ---------- Previous / next ([pm_post_nav] shortcode output) ---------- */
.pm-postnav > span { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.pm-postnav a { font-weight: 800; font-style: italic; font-size: 1.5rem; text-decoration: none; }
.pm-postnav a:hover { color: var(--pm-magenta); }

/* ---------- Single post body (Gutenberg content rendered by Post Content) ---------- */
.pm-article-body .elementor-widget-theme-post-content > *,
.pm-article-body .elementor-widget-theme-post-content > .elementor-widget-container > * { max-width: 46rem; margin-left: auto; margin-right: auto; }
.pm-article-body .elementor-widget-theme-post-content .alignwide,
.pm-article-body .elementor-widget-theme-post-content .alignfull { max-width: none; }

/* ---------- Process sticky notes — the strip of tape on top ---------- */
.pm-note::before { content: ""; position: absolute; left: 50%; top: -14px; width: 96px; height: 28px; margin-left: -48px; background: rgba(217, 220, 218, .85); transform: rotate(-4deg); }

/* ---------- Testimonials ---------- */
.pm-quote__cite strong { font-weight: 800; font-style: italic; }

/* ---------- Insight cards — alternating tilt by position ---------- */
.pm-cards > [role="listitem"]:nth-child(3n+1) .pm-card__img { transform: rotate(-1.5deg); }
.pm-cards > [role="listitem"]:nth-child(3n+2) .pm-card__img { transform: rotate(1.5deg); }
.pm-cards > [role="listitem"]:nth-child(3n) .pm-card__img { transform: rotate(-1deg); }
.pm-cards > [role="listitem"]:hover .pm-card__img { transform: rotate(0) scale(1.02); }

@media (prefers-reduced-motion: reduce) {
	.pm-scribble .pm-draw { stroke-dashoffset: 0; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}