/*
Theme Name: Pattrische Art (Salient Child)
Description: Child theme for Salient. Brand colours, icon menu, WooCommerce sticker shop layout, workshops with a coming-soon switch, and a YouTube-friendly blog for Pattrische Art. Salient updates won't overwrite anything in here.
Author: Pattrische Art
Template: salient
Version: 1.1.0
Text Domain: pattrische
*/

/* ---------- Brand colours (taken from the Pattrische Art logo) ---------- */
:root {
	--pa-lavender: #b89ac4;
	--pa-teal: #2c6a78;
	--pa-pink: #f09cbd;
	--pa-yellow: #fdd07e;
	--pa-mint: #a3d5c9;
	--pa-coral: #e56565;

	--pa-ink: #23444c;          /* body text: deep logo teal */
	--pa-muted: #5f7479;
	--pa-cream: #fff9f1;
	--pa-white: #ffffff;
	--pa-line: rgba(35, 68, 76, .1);

	/* soft tints for backgrounds and icon circles */
	--pa-lavender-soft: #efe6f3;
	--pa-pink-soft: #fde6ef;
	--pa-yellow-soft: #fff1d3;
	--pa-mint-soft: #e2f3ee;
	--pa-coral-soft: #fbe1e1;
	--pa-teal-soft: #dcebee;

	--pa-radius: 22px;
	--pa-shadow: 0 10px 28px rgba(35, 68, 76, .09);
	--pa-font-tag: "Quicksand", "Nunito", system-ui, sans-serif;
}

/* ---------- Helpers for WPBakery rows (Row → Extra class name) ---------- */
.pa-white { background-color: var(--pa-white) !important; }
.pa-cream { background-color: var(--pa-cream) !important; }
.pa-center { text-align: center; }
.pa-narrow { max-width: 680px; margin-left: auto !important; margin-right: auto !important; }
.pa-muted { color: var(--pa-muted); }
.pa-eyebrow { display: inline-block; font-family: var(--pa-font-tag); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pa-teal); margin-bottom: 8px; }
.pa-hearts { color: var(--pa-coral); }

/* ---------- Buttons ---------- */
a.pa-btn, .pa-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 13px 26px; margin: 6px 6px 6px 0;
	border-radius: 999px; border: 2px solid var(--pa-teal);
	background: var(--pa-teal); color: #fff !important;
	font-weight: 700; text-decoration: none !important; line-height: 1.2;
	transition: transform .15s ease, background .15s ease;
}
a.pa-btn:hover { transform: translateY(-2px); background: var(--pa-coral); border-color: var(--pa-coral); }
a.pa-btn--ghost { background: transparent; color: var(--pa-teal) !important; }
a.pa-btn--ghost:hover { background: var(--pa-teal); border-color: var(--pa-teal); color: #fff !important; }

/* ---------- Hero ---------- */
.pa-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem) !important; line-height: 1.1 !important; color: var(--pa-ink); }
.pa-hero p.pa-lead { font-size: 1.2rem; color: var(--pa-muted); max-width: 520px; }
.pa-hero .vc_single_image-wrapper img, .pa-hero img { border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; box-shadow: var(--pa-shadow); }

/* =========================================================================
   ICON MENU
   Icons are added automatically to top-level menu items (see functions.php).
   In the header only the icon shows, with the name as a tooltip.
   In the mobile slide-out menu the icon and the name both show.
   ====================================================================== */
.pa-menu-icon { width: 22px; height: 22px; flex: 0 0 auto; display: block; }
.pa-icon-link { --pa-ic: var(--pa-lavender-soft); }
.pa-icon-link--home     { --pa-ic: var(--pa-lavender-soft); }
.pa-icon-link--shop     { --pa-ic: var(--pa-pink-soft); }
.pa-icon-link--workshops{ --pa-ic: var(--pa-yellow-soft); }
.pa-icon-link--blog     { --pa-ic: var(--pa-mint-soft); }
.pa-icon-link--friends  { --pa-ic: var(--pa-teal-soft); }
.pa-icon-link--about    { --pa-ic: var(--pa-coral-soft); }
.pa-icon-link--contact  { --pa-ic: var(--pa-yellow-soft); }

#header-outer nav > ul > li > a.pa-icon-link,
#header-outer .sf-menu > li > a.pa-icon-link { position: relative; }
#header-outer a.pa-icon-link .menu-title-text,
#header-outer a.pa-icon-link .pa-menu-title { display: inline-flex; }
#header-outer a.pa-icon-link .pa-menu-icon {
	width: 44px; height: 44px; padding: 10px; border-radius: 50%;
	background: var(--pa-ic); color: var(--pa-teal);
	transition: transform .15s ease, background .15s ease;
}
#header-outer a.pa-icon-link:hover .pa-menu-icon,
#header-outer a.pa-icon-link:focus-visible .pa-menu-icon,
#header-outer li.current-menu-item > a.pa-icon-link .pa-menu-icon { transform: translateY(-2px); background: var(--pa-teal); color: #fff; }

/* Hide the words in the header (still read out by screen readers) */
#header-outer a.pa-icon-link .pa-menu-label {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
/* Tooltip */
#header-outer a.pa-icon-link::after {
	content: attr(data-label);
	position: absolute; left: 50%; top: calc(100% - 4px); transform: translate(-50%, 4px);
	background: var(--pa-teal); color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
	padding: 7px 10px; border-radius: 999px; white-space: nowrap;
	opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 20;
}
#header-outer a.pa-icon-link:hover::after,
#header-outer a.pa-icon-link:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* Mobile slide-out menu: icon + words */
#slide-out-widget-area a.pa-icon-link,
.off-canvas-menu-container a.pa-icon-link { display: inline-flex !important; align-items: center; gap: 12px; }
#slide-out-widget-area a.pa-icon-link .pa-menu-icon,
.off-canvas-menu-container a.pa-icon-link .pa-menu-icon { width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: var(--pa-ic); color: var(--pa-teal); }
#slide-out-widget-area a.pa-icon-link .pa-menu-label { position: static; width: auto; height: auto; clip: auto; }
#slide-out-widget-area a.pa-icon-link::after { display: none; }

/* =========================================================================
   SHOP
   ====================================================================== */

/* Category tiles on the homepage: [pa_shop_categories] */
.pa-cat-tiles { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-top: 28px; }
.pa-cat-tile { display: flex; flex-direction: column; text-decoration: none !important; color: var(--pa-ink) !important; border-radius: var(--pa-radius); overflow: hidden; background: var(--pa-white); box-shadow: var(--pa-shadow); transition: transform .2s ease; }
.pa-cat-tile:hover { transform: translateY(-4px); }
.pa-cat-tile__img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; display: block; margin: 0 !important; background: var(--pa-tile, var(--pa-pink-soft)); }
.pa-cat-tile__body { padding: 12px 16px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pa-cat-tile__body strong { font-size: 1.02rem; }
.pa-cat-tile__body span { color: var(--pa-muted); font-size: .85rem; white-space: nowrap; }

/* Category tabs above the shop grid */
.pa-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 26px; padding: 0; list-style: none; }
.pa-pills a { display: inline-block; padding: 9px 18px; border-radius: 999px; background: var(--pa-white); border: 2px solid var(--pa-line); color: var(--pa-ink) !important; font-weight: 700; font-size: .95rem; text-decoration: none !important; line-height: 1.2; }
.pa-pills a:hover { border-color: var(--pa-teal); }
.pa-pills a.is-active { background: var(--pa-teal); border-color: var(--pa-teal); color: #fff !important; }
.pa-pills a small { opacity: .7; font-weight: 700; margin-left: 4px; }

.pa-shop-intro { text-align: center; max-width: 720px; margin: 0 auto 22px; }
.pa-shop-intro p { color: var(--pa-muted); }
.pa-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; list-style: none; margin: 0 auto 26px !important; padding: 12px 20px !important; background: var(--pa-mint-soft); border-radius: 999px; font-size: .93rem; max-width: 760px; }
.pa-trust li { margin: 0 !important; list-style: none !important; }
.pa-trust li::before { content: "♥"; color: var(--pa-coral); margin-right: 6px; }
.single-product .pa-trust { justify-content: flex-start; border-radius: 16px; margin: 18px 0 0 !important; }

/* Neat, even product grid: every photo is shown as a square, whatever size you upload */
.woocommerce ul.products,
.pa-products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px; margin: 0 !important; padding: 0 !important;
}
.woocommerce ul.products::before, .woocommerce ul.products::after,
.pa-products ul.products::before, .pa-products ul.products::after { display: none !important; }
.woocommerce ul.products li.product,
.pa-products ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
	position: relative; background: var(--pa-white); border-radius: var(--pa-radius);
	padding: 12px 12px 18px !important; box-shadow: var(--pa-shadow);
	display: flex; flex-direction: column;
}
.woocommerce ul.products li.product img,
.pa-products ul.products li.product img {
	aspect-ratio: 1 / 1; width: 100% !important; height: auto; object-fit: cover; border-radius: 14px; margin: 0 0 10px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-weight: 800; font-size: 1rem !important; line-height: 1.3; padding: 0 4px !important; }
.woocommerce ul.products li.product .price { padding: 0 4px; color: var(--pa-muted) !important; font-variant-numeric: tabular-nums; }
.woocommerce ul.products li.product .button { margin-top: auto; align-self: flex-start; }
@media (max-width: 1000px) { .woocommerce ul.products, .pa-products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 690px)  { .woocommerce ul.products, .pa-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* Badges */
.pa-badge { position: absolute; top: 20px; left: 20px; z-index: 3; padding: 5px 12px; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
.pa-badge--new { background: var(--pa-yellow); color: var(--pa-ink); }
.pa-badge--sold { background: var(--pa-ink); color: #fff; }
.woocommerce ul.products li.product.outofstock img { opacity: .55; }
.woocommerce span.onsale { background: var(--pa-coral) !important; color: #fff !important; }

/* Buttons inside WooCommerce */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
	background: var(--pa-teal) !important; color: #fff !important; border-radius: 999px !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--pa-coral) !important; }

/* =========================================================================
   WORKSHOPS: [pa_workshops]
   ====================================================================== */
.pa-cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-top: 30px; }
.pa-card { position: relative; background: var(--pa-cream); border-radius: var(--pa-radius); overflow: hidden; box-shadow: var(--pa-shadow); display: flex; flex-direction: column; text-decoration: none !important; color: var(--pa-ink) !important; }
.pa-card__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; margin: 0 !important; background: var(--pa-tile, var(--pa-yellow-soft)); }
.pa-card__body { padding: 16px 20px 20px; }
.pa-card__body h3 { margin: 0 0 4px !important; font-size: 1.15rem !important; }
.pa-card__body p { margin: 0 !important; padding: 0 !important; color: var(--pa-muted); }
.pa-card.is-soon .pa-card__img { filter: saturate(.75); }
.pa-soon-badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--pa-coral); color: #fff; font-weight: 800; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; box-shadow: 0 4px 10px rgba(229, 101, 101, .3); }
.pa-soon-note { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: center; margin-top: 30px; text-align: center; }
.pa-soon-note p { margin: 0 !important; padding: 0 !important; color: var(--pa-muted); }

/* =========================================================================
   BLOG & VIDEOS: [pa_videos] and [pa_blog_grid]
   ====================================================================== */
.pa-block { padding: clamp(50px, 7vw, 80px) 0; }
.pa-posts { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); margin-top: 26px; }
.pa-post { display: flex; flex-direction: column; background: var(--pa-white); border-radius: var(--pa-radius); overflow: hidden; box-shadow: var(--pa-shadow); text-decoration: none !important; color: var(--pa-ink) !important; transition: transform .2s ease; }
.pa-post:hover { transform: translateY(-4px); }
.pa-post__media { position: relative; aspect-ratio: 16 / 9; background: var(--pa-tile, var(--pa-mint-soft)); overflow: hidden; }
.pa-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; }
.pa-post__letter { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; font-weight: 800; color: var(--pa-teal); opacity: .5; }
.pa-play { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: var(--pa-coral); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.2); transition: transform .2s ease; }
.pa-play::before { content: ""; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; margin-left: 5px; }
.pa-post:hover .pa-play { transform: scale(1.08); }
.pa-post__dur { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.65); color: #fff; font-size: .75rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.pa-post__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pa-post__meta { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pa-teal); }
.pa-post__body h3 { margin: 0 !important; font-size: 1.15rem !important; line-height: 1.3 !important; }
.pa-post__body p { margin: 0 !important; padding: 0 !important; color: var(--pa-muted); font-size: .95rem; }
.pa-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 36px; }
.pa-pagination a, .pa-pagination span { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 999px; background: var(--pa-white); border: 2px solid var(--pa-line); font-weight: 700; text-decoration: none !important; color: var(--pa-ink) !important; padding: 0 12px; }
.pa-pagination span { background: var(--pa-teal); border-color: var(--pa-teal); color: #fff !important; }

/* =========================================================================
   EVENTS, TESTIMONIALS, FAQ, SIGNUP, NOTICE
   ====================================================================== */
.pa-events { display: grid; gap: 14px; max-width: 820px; margin: 24px auto 0; }
.pa-event { display: flex; gap: 20px; align-items: center; background: #fff; border-radius: var(--pa-radius); padding: 16px 22px; box-shadow: var(--pa-shadow); text-decoration: none !important; color: var(--pa-ink) !important; }
.pa-event__date { flex: 0 0 70px; height: 70px; border-radius: 18px; background: var(--pa-yellow); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; line-height: 1.05; }
.pa-event__date small { font-size: .78rem; text-transform: uppercase; }
.pa-event__date strong { font-size: 1.6rem; }
.pa-event h3 { margin: 0 0 2px !important; font-size: 1.15rem !important; }
.pa-event p { margin: 0 !important; padding: 0 !important; color: var(--pa-muted); font-size: .95rem; }

.pa-quotes { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 28px; }
.pa-quote { background: var(--pa-cream); border-radius: var(--pa-radius); padding: 26px; margin: 0; }
.pa-quote blockquote { margin: 0 0 12px; border: 0; padding: 0; font-size: 1.05rem; }
.pa-quote figcaption { font-weight: 800; }
.pa-quote figcaption span { display: block; font-weight: 400; color: var(--pa-muted); font-size: .9rem; }

.pa-faq { max-width: 780px; margin: 24px auto 0; display: grid; gap: 12px; }
.pa-faq details { background: var(--pa-cream); border-radius: 18px; padding: 2px 22px; }
.pa-faq summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.pa-faq summary::-webkit-details-marker { display: none; }
.pa-faq summary::after { content: "+"; font-size: 1.4rem; color: var(--pa-coral); }
.pa-faq details[open] summary::after { content: "–"; }
.pa-faq details p { color: var(--pa-muted); padding-bottom: 14px !important; }

.pa-newsletter { background: var(--pa-teal); color: #fff; border-radius: 32px; padding: clamp(36px, 6vw, 64px); text-align: center; position: relative; overflow: hidden; }
.pa-newsletter h2, .pa-newsletter p { color: #fff !important; }
.pa-newsletter p { max-width: 560px; margin: 0 auto 22px !important; }
.pa-signup { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pa-signup input[type="text"], .pa-signup input[type="email"] { padding: 13px 18px !important; border-radius: 999px !important; border: 2px solid var(--pa-line) !important; min-width: 0; flex: 1 1 200px; max-width: 260px; font-size: 1rem; background: #fff !important; color: var(--pa-ink) !important; }
.pa-signup button { padding: 13px 26px; border-radius: 999px; border: 0; background: var(--pa-coral); color: #fff; font-weight: 700; cursor: pointer; }
.pa-signup button:hover { background: var(--pa-ink); }

.pa-notice { background: #fff; border: 2px dashed var(--pa-lavender); border-radius: var(--pa-radius); padding: 34px; text-align: center; max-width: 720px; margin: 24px auto 0; }

/* Hide the header cart while the shop has no products (class added in functions.php). */
body.pa-shop-closed #header-outer .cart-outer,
body.pa-shop-closed #header-outer .cart-menu-wrap,
body.pa-shop-closed #header-outer .nectar-woo-cart { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	a.pa-btn, .pa-card, .pa-post, .pa-cat-tile, .pa-play, #header-outer a.pa-icon-link .pa-menu-icon { transition: none !important; }
	a.pa-btn:hover, .pa-post:hover, .pa-cat-tile:hover { transform: none; }
}