/* -------------------------------------------------------
	 Common CSS reset (start)
	 A lightweight, widely-compatible reset that normalizes
	 margins, paddings, box-sizing and media behavior.
/* -------------------------------------------------------
	 Common CSS reset (end)

/* NOTE: Reset has been moved to `reset.css`. Include it before this file in your HTML:
   <link rel="stylesheet" href="reset.css">
*/

/* Base styles for the wedding page */
:root{
	--accent:#cfae95; /* soft beige accent */
	--bg:#f7efe7; /* light beige background */
	--text:#1f1f1f;
	--muted:#6b6b6b;
	--card:#ffffff;
	--radius:14px;
}

html,body{height:100%;margin:0}
body{
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	color:var(--text);
	background:var(--bg);
	-webkit-font-smoothing:antialiased;
}

.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:4rem 1rem}

.hero{width:100%;max-width:980px;text-align:center;padding:3.5rem 1.25rem}
.hero-content{background:transparent}
.eyebrow{font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.names{font-family:'Great Vibes', cursive;font-size:4.2rem;margin:0;color:var(--text);line-height:1}
.names .amp{margin:0 .6rem;font-size:1.15rem;font-family: 'Montserrat', sans-serif}
.date{font-weight:500;margin-top:.6rem;color:var(--muted)}
.location{color:var(--muted);margin-top:.25rem}

.actions{margin-top:1rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1rem;border-radius:999px;background:transparent;border:1px solid rgba(0,0,0,0.06);text-decoration:none;color:var(--text);font-weight:600}
.btn-primary{background:var(--accent);color:#2b170f;border:none}

.btn .icon{width:18px;height:18px;flex:0 0 18px}
.btn.cal.google .icon{border-radius:3px}
.btn.cal.outlook .icon{border-radius:3px}
.btn.cal.apple .icon{border-radius:3px}
.btn.cal.google{background:#fff}
.btn.cal.outlook{background:#fff}
.btn.cal.apple{background:#fff}

/* Brand hover colors for calendar buttons */
.btn{transition:background .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease}
.btn:active{transform:translateY(1px)}

.btn.cal.google:hover, .btn.cal.google:focus-visible{background:#4285F4;color:#ffffff;border-color:rgba(0,0,0,0.06);box-shadow:0 6px 18px rgba(66,133,244,0.12)}
.btn.cal.google:hover svg rect, .btn.cal.google:focus-visible svg rect{fill:#ffffff}
.btn.cal.google:hover svg text, .btn.cal.google:focus-visible svg text{fill:#ffffff}

.btn.cal.outlook:hover, .btn.cal.outlook:focus-visible{background:#0072C6;color:#ffffff;box-shadow:0 6px 18px rgba(0,114,198,0.12)}
.btn.cal.outlook:hover svg rect, .btn.cal.outlook:focus-visible svg rect{fill:#ffffff}
.btn.cal.outlook:hover svg path, .btn.cal.outlook:focus-visible svg path{fill:#ffffff}

.btn.cal.apple:hover, .btn.cal.apple:focus-visible{background:#1d1d1f;color:#ffffff;box-shadow:0 6px 18px rgba(29,29,31,0.12)}
.btn.cal.apple:hover svg rect, .btn.cal.apple:focus-visible svg rect{fill:#ffffff}
.btn.cal.apple:hover svg path, .btn.cal.apple:focus-visible svg path{fill:#ffffff}

/* Ensure focus-visible is prominent and consistent */
.btn:focus-visible{outline:3px solid rgba(52,152,219,0.18);outline-offset:3px}

.content{width:100%;max-width:820px;margin-top:2rem;text-align:center;padding:0 1rem}
.lead{max-width:720px;margin:0 auto 1.25rem;color:var(--muted);line-height:1.6}

/* iframe card */
.iframe-card{background:var(--card);border-radius:var(--radius);box-shadow:0 6px 30px rgba(18,18,18,0.08);padding:1rem;border:1px solid rgba(0,0,0,0.04);max-width:820px;margin:0 auto}
.iframe-wrap{position:relative;padding-top:56.25%;overflow:hidden;border-radius:10px}
.iframe-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Responsive tweaks */
@media (max-width:720px){
	.names{font-size:3rem}
	.page{padding:2.5rem 1rem}
}

@media (max-width:420px){
	.names{font-size:2.4rem}
	.btn{padding:.48rem .8rem}
}