/* File: wp-content/themes/log-core/assets/css/log-contact-hero.css */
/* Source: contact_us_4.html — .sc-wrap / .sc-grid / .sc-form-col */
/* Depends on: log-contact.css (inherits tokens, keyframes) */
/* Prefix: .log-co- */

/* Blocksy's [data-vertical-spacing*="top"] attribute selector adds its own
   padding-top to .ct-container ahead of the hero (same fix applied on
   shop/category/delivery-proof/faq/about pages). */
body.log-contact-page [class*="ct-container"][data-vertical-spacing] {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════
   BANNER HERO — reference gradient-hero pattern
   (overrides the dark .log-co-cthero block in log-contact.css:
   this file loads after it, so equal-specificity rules here win).
   Was a dark plum banner with low-contrast light text — switched to
   the site's light cream→gold diagonal gradient like shipping-policy/
   about-us so the kicker + h1 have real contrast against the background.
   ═══════════════════════════════════════════════════ */
.log-co-cthero {
	height: auto;
	min-height: 320px;
	padding: 52px 24px 44px;
	background: linear-gradient(115deg, var(--paper-50) 0%, var(--paper) 32%, var(--blush-100) 62%, var(--sage-400) 100%);
}

.log-co-cthero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at var(--mx, 50%) var(--my, 15%), rgba(255, 255, 255, .45), transparent 45%);
	pointer-events: none;
}

.log-co-cthero-illustration svg { opacity: .28; }

.log-co-cthero-overlay {
	background: linear-gradient(115deg, rgba(251, 248, 243, .5) 0%, rgba(244, 239, 234, .4) 32%, rgba(234, 228, 220, .4) 62%, rgba(88, 133, 174, .3) 100%);
}

.log-co-hero-leaf {
	position: absolute;
	color: var(--sage-700);
	opacity: 0;
	animation: coLeafDrift 7s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

.log-co-hero-leaf .log-co-icon { width: 14px; height: 14px; }
.log-co-hero-leaf.alt { animation-name: coLeafDriftAlt; color: var(--plum-600); }
.log-co-hero-leaf.sm .log-co-icon { width: 10px; height: 10px; }

@keyframes coLeafDrift {
	0%   { opacity: 0; transform: translateY(0) translateX(0) rotate(0deg); }
	12%  { opacity: .5; }
	50%  { opacity: .32; transform: translateY(-90px) translateX(12px) rotate(130deg); }
	100% { opacity: 0; transform: translateY(-150px) translateX(20px) rotate(230deg); }
}

@keyframes coLeafDriftAlt {
	0%   { opacity: 0; transform: translateY(0) translateX(0) rotate(0deg); }
	12%  { opacity: .45; }
	50%  { opacity: .28; transform: translateY(-100px) translateX(-16px) rotate(-120deg); }
	100% { opacity: 0; transform: translateY(-160px) translateX(-26px) rotate(-220deg); }
}

@media(max-width:640px) { .log-co-hero-leaf { display: none; } }

.log-co-hero-badge {
	position: absolute;
	pointer-events: none;
	opacity: .94;
	animation: coOrbitMove 10s ease-in-out infinite;
	z-index: 1;
}

.log-co-hero-badge.p2 { opacity: .85; animation: coOrbitMoveRev 13s ease-in-out infinite; }

@keyframes coOrbitMove {
	0%   { transform: translate(0, 0); }
	25%  { transform: translate(30px, -20px); }
	50%  { transform: translate(0, -34px); }
	75%  { transform: translate(-30px, -20px); }
	100% { transform: translate(0, 0); }
}

@keyframes coOrbitMoveRev {
	0%   { transform: translate(0, 0); }
	25%  { transform: translate(-22px, -16px); }
	50%  { transform: translate(0, -26px); }
	75%  { transform: translate(22px, -16px); }
	100% { transform: translate(0, 0); }
}

.log-co-hero-badge-circle {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--sage-500), var(--plum-700));
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 16px 34px -8px rgba(34, 4, 10, .42);
	border: 3px solid rgba(255, 255, 255, .65);
	animation: coSpinBadge 8s linear infinite;
}

.log-co-hero-badge.p2 .log-co-hero-badge-circle { animation: coSpinBadge 6s linear infinite reverse; }

@keyframes coSpinBadge { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.log-co-hero-badge-circle .log-co-icon { color: #fff; stroke-width: 1.8; }

@media(max-width:900px) { .log-co-hero-badge { display: none; } }

.log-co-cthero-kicker {
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(123, 89, 2, .35);
	color: var(--sage-700);
	opacity: 0;
	animation: coHeroIn .7s var(--ease) forwards;
}

@keyframes coHeroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.log-co-cthero-inner h1 {
	color: var(--ink-900);
	opacity: 0;
	animation: coHeroIn .7s var(--ease) .08s forwards;
}

.log-co-cthero-inner h1 em {
	font-style: italic;
	font-weight: 600;
	background: linear-gradient(100deg, var(--sage-700) 30%, var(--plum-500) 50%, var(--sage-700) 70%);
	background-size: 240% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: coShimmerText 6s linear infinite;
}

@keyframes coShimmerText { 0% { background-position: 0% 50%; } 100% { background-position: -240% 50%; } }

.log-co-cthero-lede {
	margin: 12px auto 0;
	max-width: 480px;
	color: var(--ink-700);
	font-size: 14px;
	line-height: 1.65;
	opacity: 0;
	animation: coHeroIn .7s var(--ease) .16s forwards;
}

.log-co-cthero-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
	margin-top: 18px;
	opacity: 0;
	animation: coHeroIn .7s var(--ease) .24s forwards;
}

.log-co-cthero-pill {
	display: flex;
	align-items: center;
	gap: 7px;
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(34, 4, 10, .14);
	color: var(--ink-900);
	padding: 8px 14px;
	border-radius: var(--r-pill);
	font-size: 11.5px;
	font-weight: 600;
	transition: transform .25s var(--ease), background .25s var(--ease);
}

.log-co-cthero-pill:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .85); }
.log-co-cthero-pill .log-co-icon { width: 13px; height: 13px; color: var(--sage-700); }

.log-co-cthero-btns {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	opacity: 0;
	animation: coHeroIn .7s var(--ease) .32s forwards;
}

.log-co-cthero-btn-primary {
	background: var(--sage-700);
	color: var(--paper);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .03em;
	padding: 13px 24px;
	border-radius: var(--r-pill);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}

.log-co-cthero-btn-primary:hover { background: var(--sage-500); box-shadow: 0 14px 30px rgba(34, 4, 10, .3); color: var(--paper); }
.log-co-cthero-btn-primary .log-co-icon { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════
   CONTACT GRID WRAPPER
   ═══════════════════════════════════════════════════ */
.log-co-contact-wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 56px 24px 20px;
}

.log-co-contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: start;
}

@media (max-width: 900px) {
    .log-co-contact-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ═══════════════════════════════════════════════════
   FORM COLUMN (left)
   ═══════════════════════════════════════════════════ */
.log-co-form-col h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.1;
    color: var(--ink-900);
}

.log-co-form-col h2 em { font-style: italic; color: var(--plum-700); }

.log-co-form-note {
    font-size: 12.5px;
    color: var(--gray-600);
    line-height: 1.6;
    margin-top: 10px;
    max-width: 440px;
}

.log-co-form-embed { margin-top: 18px; }