/* poppsee-brand.css
 * Sitewide brand typography + CTAs.
 *
 * One source of truth for the look-and-feel of every redesigned section:
 *   - Home (front_page_template.php)
 *   - Shop (page-shop_template.php)
 *   - Wall Art (inc/wall-art-redesign.php)
 *   - Studio sidebar (inc/studio-other-products-sidebar.php)
 *   - Create landing (template_create_landing.php + css/create_landing.css)
 *
 * Loaded via functions.php → poppsee_enqueue_brand_css(), runs on every page.
 * Heavy bold sans-serif headlines + mismatched green/black colors used in
 * earlier banner work are intentionally overridden here so the whole site
 * speaks in one voice: Playfair Display display copy + Quicksand body +
 * teal #a2d8d6 pill CTAs.
*/

:root {
	--pop-teal:           #a2d8d6;
	--pop-teal-hover:     #84c1bf;
	--pop-cream:          #f4ede4;
	--pop-cream-soft:     #faf3e7;
	--pop-tan:            #e7d9c8;
	--pop-ink:            #1c3a39;
	--pop-ink-soft:       #2d4f4e;
	--pop-muted:          #666;
	--pop-radius-pill:    24px;
}

/* ============================================================ */
/* 1. Universal section / banner titles                          */
/*    Anywhere we have a hero/banner/section heading in a        */
/*    redesigned section, render Playfair Display 400 in dark    */
/*    teal at a responsive size. Black-or-green Quicksand-700    */
/*    headlines from earlier banner work are overridden.         */
/* ============================================================ */

/* Scope: ONLY the /create/ banners that were rendering as heavy
 * Quicksand-700 in green/black AND aren't intentionally green per mock.
 * The Design Decor hero (.create-hero__*) keeps its green per the
 * Design_Decor_That_Fits_Your_Style.png mock — only typography is
 * lightened (Quicksand-700 → Playfair Display 400). Color stays green.
 */
.poppsee-banner-title,
.create-landing .create-hero__title,
.create-landing .create-gallery-wall__title,
.create-landing .create-design-elements__title,
.create-landing .create-section-title {
	font-family: 'Playfair Display', Georgia, serif !important;
	font-weight: 400 !important;
	line-height: 1.1;
	letter-spacing: 0;
}

/* Color per mock. Gallery wall = white (over photo scrim); design
 * elements + section titles = dark teal; hero title = green. */
.create-landing .create-gallery-wall__title,
.create-landing .create-design-elements__title,
.create-landing .create-section-title {
	color: var(--pop-ink) !important;
}
.create-landing .create-hero__title {
	color: var(--cl-green, #5b8b54) !important;
}

.create-landing .create-hero__title,
.create-landing .create-gallery-wall__title,
.create-landing .create-design-elements__title {
	font-size: clamp(26px, 3.6vw, 44px) !important;
}
.create-landing .create-hero__subtitle {
	color: var(--cl-green, #5b8b54) !important;
	font-family: Quicksand, sans-serif;
	font-weight: 400;
	font-size: 16px;
}
.create-landing .create-design-elements__subtitle {
	color: var(--pop-ink-soft) !important;
	font-family: Quicksand, sans-serif;
	font-weight: 400;
}

/* Section eyebrows (small uppercase label above grids) */
.poppsee-section-label,
.shop-redesign .shop-by-product h2 {
	font-family: Quicksand, sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--pop-muted) !important;
}

/* ============================================================ */
/* 2. Unified CTA — teal pill                                    */
/*    Replaces:                                                  */
/*      .create-btn--light (white pill, green text, underlined)  */
/*      .create-btn--teal  (saturated teal, white text, sharp)   */
/*      .create-gallery-wall__cta (plain underlined link)        */
/*    With a single pill style.                                  */
/* ============================================================ */

/* Primary teal pill — used by gallery wall + design elements + utility */
.poppsee-cta,
.create-landing .create-btn--teal,
.create-landing .create-gallery-wall__cta {
	display: inline-block !important;
	background: var(--pop-teal) !important;
	color: var(--pop-ink) !important;
	border: 0 !important;
	border-radius: var(--pop-radius-pill) !important;
	padding: 11px 26px !important;
	font-family: Quicksand, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-decoration: none !important;
	text-transform: none !important;
	transition: background .2s ease, transform .15s ease !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
	cursor: pointer;
}

.poppsee-cta:hover,
.create-landing .create-btn--teal:hover,
.create-landing .create-gallery-wall__cta:hover {
	background: var(--pop-teal-hover) !important;
	color: var(--pop-ink) !important;
	transform: translateY(-1px);
	opacity: 1 !important;
}

/* Hero CTA — per Design_Decor_That_Fits_Your_Style.png mock: white pill
 * with green border + green text. Keeps the hero on its own color
 * track so it doesn't fight the green headline. */
.create-landing .create-btn--light {
	display: inline-block !important;
	background: #ffffff !important;
	color: var(--cl-green, #5b8b54) !important;
	border: 1.5px solid var(--cl-green, #5b8b54) !important;
	border-radius: var(--pop-radius-pill) !important;
	padding: 11px 26px !important;
	font-family: Quicksand, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-decoration: none !important;
	text-transform: none !important;
	transition: background .2s ease, color .2s ease, transform .15s ease !important;
	cursor: pointer;
}
.create-landing .create-btn--light:hover {
	background: var(--cl-green, #5b8b54) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

/* Outline variant (transparent bg, teal border) — for two-CTA contexts */
.poppsee-cta--outline {
	background: transparent !important;
	color: var(--pop-ink) !important;
	border: 1.5px solid var(--pop-ink) !important;
	box-shadow: none;
}
.poppsee-cta--outline:hover {
	background: var(--pop-ink) !important;
	color: #fff !important;
}

/* ============================================================ */
/* 3. Banner background tuning                                   */
/*    The create-hero used a saturated green palette that fought */
/*    the brand cream. Lighten the green refine title too.       */
/* ============================================================ */

.create-landing .create-refine__title { color: var(--pop-ink) !important; }
.create-landing .create-refine__heading { color: var(--pop-ink) !important; }

/* Gallery wall banner over a photo — scrim + white headline so copy reads
 * on any background photo. */
.create-landing .create-gallery-wall {
	position: relative;
}
.create-landing .create-gallery-wall::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(28,58,57,0.55) 0%, rgba(28,58,57,0.25) 45%, rgba(28,58,57,0) 75%);
	pointer-events: none;
}
.create-landing .create-gallery-wall__inner {
	position: relative;
	z-index: 2;
}
.create-landing .create-gallery-wall__title {
	color: #fff !important;
	text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* ============================================================ */
/* 4. Header CTAs (already updated in CU-2) — keep brand pill    */
/*    style intact even if a future stylesheet touches them.     */
/* ============================================================ */

header .botarea .blokone .rightarea .btn_shop a {
	font-family: Quicksand, sans-serif;
	/* the buttons are stretched to the header-row height; centre the
	 * label so it sits mid-box instead of riding the top edge. */
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* ============================================================ */
/* 5. Full-width banners — content ALWAYS vertically centered    */
/*    Design rule: any edge-to-edge banner keeps its headline /  */
/*    copy / CTA block dead-center vertically — never top- or    */
/*    bottom-weighted. The banner itself becomes a flex container */
/*    so the inner content centers regardless of the banner's    */
/*    resolved height (art PNGs with transparent padding, theme  */
/*    height quirks, etc. can't throw the copy off-center).      */
/*                                                                */
/*    Add the .poppsee-banner class to any future full-width     */
/*    banner to get this behavior for free.                      */
/* ============================================================ */

.poppsee-banner,
.create-landing .create-hero,
.create-landing .create-gallery-wall,
.create-landing .create-design-elements {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}

/* The single content wrapper inside each banner spans the banner
 * width (its own max-width + margin:auto still handle the inner
 * column sizing). Scoped to the known wrappers so position:absolute
 * decorations (e.g. create-design-elements art) are left alone. */
.create-landing .create-hero > .create-hero__inner,
.create-landing .create-gallery-wall > .create-gallery-wall__inner,
.create-landing .create-design-elements > .create-design-elements__inner {
	width: 100%;
}

/* ============================================================ */
/* 6. Newsletter band (.mid11 in footer.php) — calm cream        */
/*    "subscribe" band per the Home Page (5).png mockup.         */
/*    The MC4WP form 590 carries the offer copy in its email     */
/*    placeholder; this restyles the band surface, input and     */
/*    button away from the old red-headline + tan-button look.   */
/* ============================================================ */

.mid11 {
	background: #f1e9e3 !important;
	padding: 34px 0 !important;
}
.mid11 .container { min-height: 0 !important; }
.mid11 .container .midarea {
	margin: 0 auto !important;
	max-width: 720px !important;
	width: 100% !important;
}
.mid11 .mc4wp-form-fields {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
}
.mid11 .container .midarea input[type="email"] {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	height: 52px !important;
	margin: 0 !important;
	background: #ffffff !important;
	border: 1px solid #e2d8ca !important;
	border-radius: 8px !important;
	padding: 0 18px !important;
	font-family: Quicksand, sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #1c3a39 !important;
}
.mid11 .container .midarea input[type="email"]::placeholder {
	font-size: 14px !important;
	color: #8a8378 !important;
}
.mid11 .container .midarea input[type="submit"] {
	flex: 0 0 auto !important;
	width: auto !important;
	height: 52px !important;
	background: #c1d6d5 !important;
	color: #1c3a39 !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 0 32px !important;
	font-family: Quicksand, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	transition: background .2s ease !important;
}
.mid11 .container .midarea input[type="submit"]:hover {
	background: #aac6c4 !important;
	letter-spacing: 0.06em !important;
}
.mid11 .mc4wp-response { text-align: center; margin-top: 10px; }

@media (max-width: 560px) {
	.mid11 .mc4wp-form-fields { flex-direction: column !important; }
	.mid11 .container .midarea input[type="email"],
	.mid11 .container .midarea input[type="submit"] { width: 100% !important; }
}