/*
Theme Name: FrieslandCampina Event
Author: Edison Dairo Jimenez / QNY Creative
Author URI: http://qnycreative.com
Version: 1.0
*/

/*
Design: design/261012_RSVP_Netherlands_editable.ai (A4, 595pt wide).
Desktop scale is 1.6px per design pt — every size below is pt x 1.6.
*/

/* Fonts — Liberation Serif/Sans, SIL OFL (fonts/LICENSE-Liberation.txt),
   subset to Latin + Latin Extended-A */
@font-face{font-family:'Liberation Serif'; src:url(fonts/LiberationSerif-Regular.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:'Liberation Sans'; src:url(fonts/LiberationSans-Regular.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:swap}

:root{
	--navy:#1c2a3b;        /* heading, button */
	--text:#354255;        /* labels, body */
	--gold:#bc9b61;        /* card border, asterisks, radios, icon */
	--card:#fcfaf8;
	--field:#fdfcfb;
	--field-border:#d3d2d0;
	--panel:#f3f1ee;
	--error:#b3261e;
	--font-serif:'Liberation Serif', 'Times New Roman', Times, serif;
	--font-sans:'Liberation Sans', Arial, Helvetica, sans-serif;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:#dfe9f3; color:var(--text); font-family:var(--font-sans); font-size:16px; line-height:1.4; -webkit-font-smoothing:antialiased; text-wrap:pretty}
img,svg{display:block; max-width:100%; height:auto}
h1,h2,p{margin:0}
button,input,textarea{font:inherit; color:inherit}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}
.skipLink:focus{clip:auto; width:auto; height:auto; top:8px; left:8px; z-index:100; padding:8px 12px; background:#fff; color:var(--navy)}
.msg.warning{padding:20px; background:#fff3cd; color:#664d03}

/* ------------------------------------------------------------ page */
.rsvpSection{min-height:100vh; padding:69px 0 69px; background:#dfe9f3 var(--bg-desktop) center/cover no-repeat}

.rsvpCard{width:685px; margin:0 auto; background:var(--card); border:1px solid var(--gold); border-radius:9px; overflow:hidden}

.rsvpCard-banner{height:213px}
.rsvpCard-banner img{width:100%; height:100%; object-fit:cover; object-position:center}

.rsvpCard-body{padding:21px 39px 37px}

.rsvpCard-icon{display:block; width:78px; height:auto; margin:0 auto}
.rsvpCard-rule{display:block; width:43px; height:1px; margin:12px auto 0; background:var(--gold)}

.rsvpCard-heading{margin-top:0; font-family:var(--font-serif); font-weight:400; font-size:50px; line-height:1.15; color:var(--navy); text-align:center}
.rsvpCard-intro{max-width:410px; margin:8px auto 0; font-size:16px; line-height:1.6; letter-spacing:.06em; text-align:center}

/* ------------------------------------------------------------ form */
.rsvpForm{margin-top:22px}

.rsvpGrid{display:grid; grid-template-columns:1fr 1fr; column-gap:25px; row-gap:18px}

.formRow{display:flex; flex-direction:column}
.formLabel{display:block; font-size:14.7px; line-height:1.2; margin-bottom:12px}
.formLabel .req{color:var(--gold)}

.rsvpForm input[type=text],
.rsvpForm input[type=email],
.rsvpForm textarea{width:100%; height:48px; padding:0 14px; background:var(--field); border:1px solid var(--field-border); border-radius:3px; font-size:16px; color:var(--navy); outline:none}
.rsvpForm textarea{height:88px; padding:12px 14px; resize:none; display:block}
.rsvpForm input:focus,.rsvpForm textarea:focus{border-color:var(--gold)}

.rsvpAttend{margin:23px 0 0; padding:0; border:0}
.rsvpAttend legend{padding:0}
.rsvpOptions{display:grid; grid-template-columns:repeat(3,1fr); column-gap:14px}
.rsvpOption{position:relative; display:flex; align-items:center; gap:11px; min-height:67px; padding:0 14px 0 18px; background:var(--field); border:1px solid var(--field-border); border-radius:3px; font-size:14.4px; line-height:1.33; cursor:pointer}
.rsvpOption-text{max-width:100px; text-wrap:balance}
.rsvpOption input{position:absolute; opacity:0; width:1px; height:1px}
.rsvpOption-dot{flex:0 0 19px; width:19px; height:19px; border:1px solid var(--gold); border-radius:50%; position:relative}
.rsvpOption-dot::after{content:''; position:absolute; inset:4px; border-radius:50%; background:var(--gold); transform:scale(0); transition:transform .15s}
.rsvpOption input:checked + .rsvpOption-dot::after{transform:scale(1)}
.rsvpOption input:checked ~ .rsvpOption-text{color:var(--navy)}
.rsvpOption:has(input:checked){border-color:var(--gold)}
.rsvpOption input:focus-visible + .rsvpOption-dot{outline:2px solid var(--gold); outline-offset:2px}

.rsvpPanel{margin-top:27px; padding:19px 18px 19px; background:var(--panel); transition:margin-top .4s ease}
.rsvpReveal.is-open + .rsvpPanel{margin-top:24px}
.rsvpPanel .formLabel,.rsvpAttend .formLabel{margin-bottom:16px}
/* "why unable" panel: slides open for No. 0fr -> 1fr animates to the panel's real height;
   the margin sits inside the clipped inner box so it opens with the panel */
.rsvpReveal{display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden; transition:grid-template-rows .4s ease, opacity .3s ease, visibility 0s linear .4s}
.rsvpReveal.is-open{grid-template-rows:1fr; opacity:1; visibility:visible; transition:grid-template-rows .4s ease, opacity .3s ease .1s, visibility 0s}
.rsvpReveal-inner{min-height:0; overflow:hidden}
@media (prefers-reduced-motion:reduce){
	.rsvpReveal,.rsvpReveal.is-open,.rsvpPanel{transition:none}
}

.formError{margin-top:20px; color:var(--error); font-size:14.4px; text-align:center}
.formError[hidden]{display:none}
.formFieldError{display:block; margin-top:6px; color:var(--error); font-size:13px}
.formRow.is-invalid input,.formRow.is-invalid textarea,.is-invalid .rsvpOption{border-color:var(--error)}

.formCaptcha{display:flex; flex-direction:column; align-items:center; margin-top:26px}
.formCaptcha .formFieldError{margin-top:8px; text-align:center}

.btnSubmit{display:flex; align-items:center; justify-content:center; gap:18px; width:374px; height:58px; margin:26px auto 0; padding:0; background:var(--navy); color:#fff; border:0; border-radius:4px; font-size:15.4px; letter-spacing:.25em; text-transform:uppercase; cursor:pointer; transition:background .2s}
.btnSubmit svg{width:22px; height:auto; flex:0 0 22px}
.btnSubmit:hover{background:#2d3e55}
.btnSubmit:disabled{opacity:.6; cursor:default}

.fcHp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.rsvpThanks{margin-top:30px; padding:30px; background:var(--panel); font-size:16px; line-height:1.6; text-align:center}
.rsvpThanks-heading{font-family:var(--font-serif); font-weight:400; font-size:30px; line-height:1.2; color:var(--navy); margin-bottom:10px}

/* ------------------------------------------------------------ phone (<768): body 375, card 345 */
@media (max-width:767px){
	body{min-width:375px}

	.rsvpSection{padding:15px 0 30px; background-image:var(--bg-phone)}
	.rsvpCard{width:345px}
	.rsvpCard-banner{height:107px}
	.rsvpCard-body{padding:18px 18px 26px}

	.rsvpCard-icon{width:60px}
	.rsvpCard-rule{margin-top:10px; width:36px}
	.rsvpCard-heading{font-size:34px; margin-top:2px}
	.rsvpCard-intro{max-width:none; margin-top:8px; font-size:15px; letter-spacing:.04em}

	.rsvpForm{margin-top:20px}
	.rsvpGrid{grid-template-columns:1fr; row-gap:16px}
	.formLabel{margin-bottom:10px}

	.rsvpAttend{margin-top:20px}
	.rsvpOptions{grid-template-columns:1fr; row-gap:10px}
	.rsvpOption{min-height:52px}
	.rsvpOption-text{max-width:none}

	.rsvpPanel{margin-top:22px; padding:16px 14px}
	.rsvpReveal.is-open + .rsvpPanel{margin-top:18px}
	.rsvpPanel .formLabel,.rsvpAttend .formLabel{margin-bottom:12px}
	.rsvpPanel .formLabel{text-wrap:balance}

	.formCaptcha{margin-top:22px}
	.btnSubmit{width:100%; height:54px; margin-top:22px; font-size:14px; letter-spacing:.2em; gap:14px}
}