@charset "UTF-8";
/* CSS Document */


/******************/
/* SPECIAL FONTS */
/******************/
@font-face { font-family: "TrajanPro-Regular"; src: url("fonts/TrajanPro-Regular.woff2"); format("woff2"); }
@font-face { font-family: "HelveticaNeue-Light"; src: url("fonts/HelveticaNeue-Light.woff2"); format("woff2"); font-weight:normal; }
@font-face { font-family: "HelveticaNeue-Medium"; src: url("fonts/HelveticaNeue-Medium.woff2"); format("woff2"); font-weight:bold; }


/******************/
/* GENERIC STYLES */
/******************/

/* elementi standard */
* { box-sizing:border-box; margin: 0; padding: 0;}
b, strong { font-weight:bold; }
i, em { font-style:italic; }
a { text-decoration:none; color:var(--gold); }
	a:hover { text-decoration:underline; }
ol li { list-style-type:decimal; }
.cursor { cursor:pointer; }
.rounded { border-radius: 10px; }
.block { display:block; }

/* posizionamenti */		
.clear { clear:both; }
.left { float: left; }
.right { float: right; }
.aligncenter { text-align:center; }
.alignright { text-align:right; }
.alignleft { text-align:left; }
.alignmiddle { align-items:center; }
.border_zero { border:0 !important; }
.fullwidth { width:100%; }

/* spaziature */
.vspaced { padding-top:50px; padding-bottom:50px; }
.hspaced { padding-left:10%; padding-right:10%; }
.topspaced { padding-top:60px; }
.bottomspaced { padding-bottom:60px; }

/* colori */
:root {
    --gold: #be8d25;
    --dark-gold: #8e6f32;
    --bg-white: #fdfcf9;
    --text-color: #654904;
}
.bgwhite{ background:#fff; }
.bggold { background: var(--gold)!important; color:#fff; }
.semitrans { opacity:0.6; }



/* display */
.mobile { display:none; }
.desktop { display:block; }

/* colonne 
.flexcontainer { display:flex; justify-content:space-between; flex-flow:row wrap; }
.cols { display:flex; justify-content:space-between; flex-flow: row nowrap; align-items:flex-start; }
	.two>* { width:48%; }
	.split-two>* { width:50%; }
	.three>* { width:32%; }
		.three .main { width:58%; }
	.split-three { width:33.3%; }
	.four>* { width:22%; }
	.center { justify-content:center; }*/


/******************************/
/*    STILI PER IL LAYOUT    */
/****************************/

.mobile { display:none!important; }
.desktop { display:block!important; }

body { font-family: 'HelveticaNeue-Light', sans-serif; line-height: 1.6; letter-spacing:0.1em; color: var(--text-color); background-color: var(--bg-white); }

/* HEADER*/
header nav { z-index:100; position:absolute; top:20px; right:50px; }

header { height: 70vh; background: url('/img/photos/background.webp') no-repeat center center/cover; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; color: white; }
    header .overlay { background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
        header .overlay .monogram { border: 2px solid white; width: 120px; height: 120px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
            header .overlay .monogram img { height:120px; }

/* MAIN */

h1, h2, h3 { font-family: 'TrajanPro-Regular', serif; letter-spacing: 2px; font-weight:normal; }
h1 { font-size: 2.5rem; }

/* Contenuto Principale */
main { max-width: 800px; margin: -50px auto 0; padding: 20px; position: relative; z-index: 10; }
    main .details-section { background: white; padding: 40px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 30px; }
        main .details-section h2.name { margin-bottom:30px; }
    main .divider { width: 50px; height: 2px; background: var(--gold); margin: 20px auto; border: none; }
    main .bggold .divider { background: #fff;}

/* Form RSVP Card */
.card { background: white; padding: 40px; border-top: 5px solid var(--gold); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
    .card h2 { text-align: center; margin-bottom: 10px; }
    .card p { text-align: center; font-size: 0.9rem; color: var(--text-color); }

form { margin-top:30px; }
form .form-group { margin-bottom: 20px; }
    form label { display: block; font-family: 'HelveticaNeue-Medium', sans-serif; margin-bottom: 8px; font-size: 0.9rem; }
    form input, select, textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-family: inherit; }

/*feedback*/
main .feedback { padding:20px; margin:20px 0; text-align: center; }
	main .feedback h2 { text-transform:uppercase; font-size:20px; font-weight:bold; margin:0 0 10px 0; color:#49463f; font-family: 'Montserrat', sans-serif; }
	main  .feedback p { margin-bottom:0; }
	main  .feedback a { display:block; margin-top: 10px; text-decoration: underline; }
	main .error{ background-color:#f7d4d7; border:2px dashed #C00; color:#C00; }
		main  .error h2 { color:#C00; }
	main  .sent{ background-color:#e3f3d5; border:2px dashed #6ba639; color:#6ba639; margin-bottom:40px; }
		main .sent h2 { color:#6ba639; }
		main .sent a  { margin-top:0; color:#6ba639; }

.button, button { display: block; width: 100%; background-color: var(--gold); color: white; border: none; padding: 15px; font-size: 1rem; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: background 0.3s ease; margin-bottom:30px; }
    .button:hover { background-color: var(--dark-gold); }
    .button.secondary { display:inline-block; width:auto; margin-top:30px; }

.gallery { margin:40px 0;}
.gallery img { width:100%; margin:10px 0;}

.iframe { width:100%; height:300px; }

.deco { text-align:center; margin-top:20px; }
    .deco img { height:80px; }

/* FOOTER*/
footer { text-align: center; padding: 40px; font-size: 0.8rem; color: #999; }


/******************************/
/*    STILI PER SMARTPHONE    */
/******************************/

/* Media Query per Mobile */
@media (max-width: 600px) { 
h1 { font-size: 1.8rem; }
.container { margin-top: 0; }
}