/* =============================================================================
   MiraChlor Homepage — design CSS
   Converted from the design handoff (MiraChlor Main Page.dc.html).

   - The original prototype kept ALL layout styles inline on each element; those
     remain inline in front-page.php (highest specificity, faithful to design).
   - This file carries only what inline styles can't express:
       1. Base resets + page background + fonts (SCOPED so they don't leak).
       2. Keyframe animations.
       3. :hover / :focus states (the prototype used runtime "style-hover" /
          "style-focus" attributes; here they become real CSS).
   - Everything is scoped under .mc-home (or body.mc-home-page) so it cannot
     affect Flatsome or the rest of the site.
   ============================================================================= */

/* ---- Base / reset (scoped to the homepage wrapper) ---- */
.mc-home, .mc-home * { box-sizing: border-box; }
.mc-home *           { margin: 0; padding: 0; }

body.mc-home-page {
	background: #F5F8FC;
	color: #0E1B33;
	font-family: 'Hanken Grotesk', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
	scroll-behavior: smooth;
}
html { scroll-behavior: smooth; }

.mc-home a { text-decoration: none; color: inherit; }
.mc-home img { max-width: 100%; }

.mc-home ::selection { background: #E8521F; color: #fff; }

/* ---- Keyframes (from the design) ---- */
@keyframes mcUp   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mcPulse{ 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .9; transform: scale(1.25); } }

/* =============================================================================
   :hover / :focus states
   (each class is applied to the matching element in front-page.php)
   ============================================================================= */

/* Nav text links */
.mc-navlink:hover { color: #E8521F; }

/* Nav "Shop Now" pill  (orig style-hover: background:#cf451457;transform:translateY(-1px)) */
.mc-btn-shop-nav:hover { background: #cf4514; transform: translateY(-1px); }

/* Hero primary "Shop MiraChlor" */
.mc-btn-shop-hero:hover { background: #ff6336; transform: translateY(-2px); }

/* Hero outline "Explore Applications" */
.mc-btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* Application link cards (Wound Care / Dental) */
.mc-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 44px rgba(16,27,51,.12);
	border-color: #CFE0F2;
}

/* Shop CTA panel white button */
.mc-btn-cta:hover { transform: translateY(-2px); background: #0B1D3A; color: #fff; }

/* Contact email link */
.mc-email:hover { color: #E8521F; }
.mc-email:hover .mc-email-val { color: #E8521F; }

/* Contact form fields (orig style-focus) */
.mc-input:focus {
	border-color: #2E6FB0;
	box-shadow: 0 0 0 3px rgba(46,111,176,.15);
}

/* Contact submit button */
.mc-btn-submit:hover { background: #ff6336; transform: translateY(-1px); }

/* Footer link list */
.mc-foot-link:hover { color: #fff; }

/* Footer "Shop Now" pill */
.mc-btn-shop-foot:hover { background: #ff6336; }

/* ============================================================
   Contact Form 7 — light card styling (homepage contact section)
   Scoped to .mc-home-cf7 so it matches the homepage form card and
   does not affect CF7 forms elsewhere on the site.
   ============================================================ */
.mc-home-cf7 .wpcf7-form p{margin:0 0 16px}
.mc-home-cf7 label{display:block;font-weight:700;font-size:13.5px;color:#33415C;margin-bottom:16px}
.mc-home-cf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.mc-home-cf7 textarea,
.mc-home-cf7 select{
	width:100%;margin-top:8px;font-family:inherit;font-size:15.5px;color:#0E1B33;
	padding:13px 15px;border:1.5px solid #DDE4EE;border-radius:12px;background:#fff;outline:none;
	transition:border-color .2s,box-shadow .2s;
}
.mc-home-cf7 input:focus,.mc-home-cf7 textarea:focus,.mc-home-cf7 select:focus{
	border-color:#2E6FB0;box-shadow:0 0 0 3px rgba(46,111,176,.15);
}
.mc-home-cf7 textarea{min-height:120px;resize:vertical}
.mc-home-cf7 .wpcf7-submit{
	display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
	background:#E8521F;color:#fff;padding:15px 28px;border:none;border-radius:999px;
	font-family:inherit;font-weight:700;font-size:16px;box-shadow:0 10px 26px rgba(232,82,31,.3);
	transition:background .2s,transform .15s;
}
.mc-home-cf7 .wpcf7-submit:hover{background:#ff6336;transform:translateY(-1px)}

/* ============================================================
   HERO — mobile (portrait phones, e.g. iPhone 15 Pro Max)
   Layout: text on top, product photo (3 bottles) shown smaller
   at the bottom-right so it is no longer zoomed/cropped by `cover`.
   Desktop (>700px) is untouched.
   Fine-tune: --mc-hero-img-size (zoom) and padding-bottom (band height).
   ============================================================ */
@media (max-width:700px){
	#top.mc-hero{
		align-items:flex-start !important;  /* push content to the top */
		min-height:auto !important;
		padding-bottom:73vw;                /* reserve space for the product band */
		/* swap the wide desktop photo for a tight crop of the 3 bottles
		   (!important needed: the header sets these inline) */
		background-image:url(../images/mirachlor-hero-mobile.jpg) !important;
		background-size:100% auto !important;       /* bottles span full width */
		background-position:center bottom !important;/* product band at the bottom */
	}
	/* CTA buttons: keep them side-by-side on one row, more compact */
	#top.mc-hero .mc-hero-cta{
		flex-wrap:nowrap !important;
		gap:10px !important;
		margin-bottom:30px !important;
	}
	#top.mc-hero .mc-btn-shop-hero,
	#top.mc-hero .mc-btn-outline{
		padding:14px 18px !important;
		font-size:15px !important;
		white-space:nowrap;
	}
	/* trust badges: compact rounded chips that sit in a tidy row,
	   instead of three full-width stacked lines */
	#top.mc-hero .mc-hero-divider{display:none}
	#top.mc-hero .mc-hero-trust{
		flex-direction:row !important;
		flex-wrap:nowrap;
		align-items:center;
		gap:6px;
	}
	#top.mc-hero .mc-hero-trust > div:not(.mc-hero-divider){
		gap:5px !important;
		padding:6px 9px;
		border:1px solid rgba(255,255,255,.18);
		border-radius:999px;
		background:rgba(255,255,255,.05);
		white-space:nowrap;
	}
	#top.mc-hero .mc-hero-trust span{font-size:11px !important;white-space:nowrap}
	#top.mc-hero .mc-hero-trust svg{width:12px;height:12px;flex-shrink:0}
	/* vertical overlay: dark at top for readable text, clears at the
	   bottom so the bottles stay visible */
	#top.mc-hero .mc-hero-overlay{
		background:linear-gradient(180deg,
			rgba(7,20,42,.97) 0%,
			rgba(7,20,42,.94) 28%,
			rgba(7,20,42,.6) 50%,
			rgba(7,20,42,.2) 72%,
			rgba(7,20,42,0) 100%) !important;
	}
	#top.mc-hero .mc-hero-inner{
		padding-top:clamp(40px,13vw,72px);
		padding-bottom:0;
	}
}
.mc-home-cf7 .wpcf7-response-output{border-radius:10px;font-size:14px;margin:16px 0 0}