/*
Theme Name: Summer Romantica
Theme URI: https://summerromantica.com/
Description: The first theme version for 'Summer Romantica' website.
Version: 1.0 
Author: Niya Dobazova
Author URI: https://web-designs-by-niya.uk
*/

/* RESETS based on
http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
** thank you, Eric :-)
---------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font: inherit;	
	text-rendering: optimizeLegibility;			
}

/* HTML5 reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/*-----------------------------------------------------
END OF RESET 
-----------------------------------------------------*/

/*-----------------------------------------------------
MY STYLING RULES 
-----------------------------------------------------*/
:root{
  --background-primary: #F7F4F4;
  --turquoise: #0EDEE8;
  --dark-blue: #000099;
  --text-primary: #011502;
  --text-secondary: #FBFBF2;
  --drop-shadow: #DEDEDE;
}
body{
  color: var(--text-primary);
  background-color: var(--background-primary);
}
body, label, ul li, #wpbs-form-submit-1{
  font-family: 'Montserrat', Arial, Helvetica, Verdana, sans-serif;
  font-size: 1.1rem;
  font-size: clamp(1.1rem, 1.06rem + 0.19999999999999996vw, 1.3rem);
}
#content{
	width: 90%;
  margin: 0 auto;
	padding: 0 0 3em;
  line-height: 1.6em;
}
/*========== HEADER STYLES ==========*/
header{
  padding: 0.5em 0 0.4em;
}
header p{
  text-align: center;
}
header ul, header li{
  display: block;
}
/*========== MAIN STYLES ==========*/
main{
  width: 95vw;
  margin: 0 auto;
}
h1, h2, h3, h4, h5, h6, .wp-block-search__label, .wpbs-form-field-label{
  font-family: 'Alegreya SC', Georgia, 'Times New Roman', Times, serif;
  line-height: 1.2em;
  text-wrap: balance;
}
h1{
  font-size: 2.5rem;
  font-size: clamp(2.5rem, 1.9rem + 3vw, 5.5rem);
  padding: 0.3em 0;
  text-align: center;
}
h2{
  font-size: 2rem;
  font-size: clamp(2rem, 1.7rem + 1.5vw, 3.5rem);
  padding: 0.2em 0;
  text-align: center;
}
h3{
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
  padding: 0.5em 0 0.2em;
}
h4{
  font-size: 1.25rem;
  font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
  padding: 1em 0 0.5em;
}
h1 a:link, h1 a:visited, h1 a:link, h1 a:active, h2 a:link, h2 a:visited, h2 a:link, h2 a:active, h3 a:link, h3 a:visited, h3 a:link, h3 a:active, h4 a:link, h4 a:visited, h4 a:link, h4 a:active{
  color: var(--text-primary);
  text-decoration: none;
}
main{
  padding: 1.5em 0 4em 0;
}
p{
  padding: 0.2em 0 0.3em 0;
}
p a:link, p a:visited{
  color:var(--text-primary);
  font-weight: 600;
  text-decoration: none;
}
p a:hover, p li a:active, p li a:focus{
  text-decoration: underline 2px solid;
  text-underline-offset: 5px;
}
ul li{
  list-style: disclosure-closed;
}
/*========== MENU STYLES ==========*/
/*Menu*/
.sitenav{
  border-block-start: 3px solid var(--turquoise);
  border-block-end: 3px solid var(--turquoise);
  margin: 0 0 0.5em;
}
nav #menu-toggle{
  opacity: 0;
  position: absolute;
}
/*label as toggle*/
nav .toggle{
  display: block; 
  padding: .3em 6vw;
  font-size: 1.2em;
  font-weight: 400; 
  color: var(--text-primary);
}
nav .toggle:before{
  content: ' + ';
  font-weight: 600;
  margin: 0 0.4em 0 0.6em;
  display: block;
  float: left; 
  transform: rotate(0deg);
  transition: all 0.25s ease-out;
  padding: 0 3px;
}
nav #menu-toggle:checked + .toggle::before{
  content: '‒';
}
nav .toggle:hover, nav .toggle:active, nav .toggle:focus-visible{
  color: var(--text-secondary);
  background-color: var(--turquoise);
  cursor: pointer;
}
nav #menu-toggle:checked + .toggle + ul{
  display: block;
}
/*Add focus when keyboard navigation is used*/
input[type="checkbox"]#menu-toggle:focus-visible + label.toggle::before{
  border: 2.5px solid var(--turquoise);
}
/*menu links styling*/
nav ul{
  list-style: none;
  margin: 0;
  display: none; 
}
nav ul li{
	margin: 0;
  display: block;
}
nav ul li a{
	font-size: 1.2em;
	display: block;
	padding: .2em 10vw;
	text-decoration: none;
	border: 0;
	color: var(--text-secondary);
	transition: all .3s ease-in-out;
}
/*Previous-Next navigation*/
.nav-previous, .nav-next{
  padding: 1em 0;
}
strong{
  font-weight: 500;
}
/*Latest posts block*/
.wp-block-latest-posts__list{
  margin: 1em 0;
}
.dropshadow-border, .wp-block-latest-posts__list li{
  padding: 0.7em 1em;
  background: var(--background-primary);
  border: 3px solid var(--turquoise);
  filter: drop-shadow(-6px 6px var(--drop-shadow));
  max-width: 1100px;
  margin: 0.5em 0 1.5em;
}
.wp-block-latest-posts__list li{
  max-width: 350px;
  list-style: none;
}
body .is-layout-flex{
  margin: 1em 0; 
  align-items: normal;
}
.wp-block-latest-posts__post-title{
  font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
}
/*Lists site wide*/
.wp-block-list{
  padding: 0 1em;
}
/* Page break styles */
hr{
  margin: 3em 0 2em;
  height: 4px;
}
/*========== IMAGES STYLES ==========*/
img{
  max-width: 400px;
  height: auto;
}
header p img{
  display: inline;
  max-width: 300px;
  height: auto;
}
/*Images in post title*/
.attachment-post-thumbnail{
  width: 55px;
  height: auto;
  margin-right: 0.2em
}
/*========== WIDGETS STYLES ==========*/
/* 'Book now' widget*/
.book-widget{
  text-align: center;
  background-color: #9CFA73;
  margin: 3em 0 2em;
}
.book-widget div{
  display: block ruby;
}
/* GTranslate widget */
.gt_switcher-popup{
  font-size: 1em;
}
/*========== BOOKING CALENDAR & FORM STYLES ==========*/
.wpbs-prev, .wpbs-next{
  background-color: var(--turquoise) !important; 
}
.wpbs-select-container select{
  font-size: 1rem !important;
  border: 2px solid var(--turquoise) !important;
  background-color: var(--background-primary) !important;
}
#wpbs-form-submit-1{
  font-weight: 500;
  padding: 10px;
  width: 100%;
  border: none;
  border-radius: 10px;
  color: var(--text-secondary);
  background-color: #39AA30;
}
sup{
  color:red;
}
.wpbs-form-field-input input{
  font-size: 1rem;
  padding: 5px;
}
.wpbs-form-field-label{
  font-weight: 500px;
  font-size: 1.25rem;
  font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
}
/*========== LINK STYLES ==========*/
/*Website title*/
header a:link, header a:visited, header a:focus, header a:hover, header a:active{
  color: var(--text-primary);
	text-decoration: none;
  text-align: center;
}
/*general for all links*/
#content li a:link, #content li a:visited{
  color:var(--text-primary);
  text-decoration: underline 1.5px var(--text-primary);
}
#content li a:hover, #content li a:active, #content li a:focus{
  text-underline-offset: 4px;
}
/*menu links styles*/
nav ul li a:link, nav ul li a:visited, nav ul li a:active{
	background: none;
	color: var(--text-primary);
  border: 2px solid transparent;
  filter: drop-shadow(-5px 5px transparent);
  transition: all .1s ease-in-out;
}
nav ul li a:hover, nav ul li a:active, nav ul li a:focus {
	background: var(--background-primary);
  border: 2px solid var(--turquoise);
  filter: drop-shadow(-5px 5px var(--drop-shadow));
}
/*previous and next links on posts*/
.nav-next a:link, .nav-next a:active, .nav-next a:visited, .nav-previous a:link, .nav-previous a:active, .nav-previous a:visited{
  color: var(--text-primary);
  text-decoration: none;
}
.nav-next a:hover, .nav-next a:focus, .nav-previous a:hover, .nav-previous a:focus{
  text-decoration: underline 2px var(--text-primary);
  text-underline-offset: 4px;
}
/*Skip to content link*/
.skip-to-content{
  font-size: 1.5rem;
  color: var(--text-primary);
  background-color: var(--background-primary);
  height: 1.2em;
	line-height: 1.2em;
  padding: 0 8px;
  position: absolute;
  transform: translateY(-150%);
  transition: transform 0.3s;
}
.skip-to-content:focus{
  transform: translateY(50%);
}
/*Images caption*/
figcaption{
  font-size: 0.8rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  font-weight: 500;
}
figcaption a:link, figcaption a:active, figcaption a:visited{
  color: var(--text-primary);
  text-decoration: underline;
}
figcaption a:hover, figcaption a:focus{
  text-underline-offset: 4px;
}
/*========== CALENDAR STYLES ==========*/
.wpsbc-prev, .wpsbc-next{
  background-color: var(--turquoise);
}
.wpsbc-select-container select{
  border-color: var(--turquoise);
  border-style: solid;
  background-color: var(--background-primary);
}
/*========== FOOTER STYLES ==========*/
footer{
  width: 100vw;
  overflow-x: hidden;
  /* color: var(--text-secondary); */
  background-color: var(--turquoise);
  padding: 1em;
}
footer p, footer ul{
  text-align: center;
  padding: 0.5em 0;
}
footer ul li{
  list-style: none;
  padding: 0.3em
}
#menu-footer-nav-in-english li, #menu-footer-nav-in-bulgarian li{
  display: inline;
  padding: 0 5px;
  line-height: 1.5;
}
/*footer links*/
footer ul li a:link, footer ul li a:visited{
  color:var(--text-primary);
  text-decoration: underline 1.5px var(--text-primary);
}
footer ul li a:hover, footer ul li a:active, footer ul li a:focus{
  text-underline-offset: 4px;
}
/*========== SEARCH // site-wide ==========*/
header form{
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0%, 0%);
  width: 50px;
  height: 50px;
  background: var(--turquoise);
  box-sizing: border-box;
  border-radius: 0 25px;
  border: 4px solid var(--turquoise);
  padding: 5px;
  transition: width .3s ease-in-out, border-color .3s ease-in-out, border-radius .3s ease-in-out;
}
/* -- Search Bar -- */
/*styling for the wrapper around all search elements*/
.wp-block-search__button-outside, .wp-block-search__text-button, .wp-block-search{
  padding: 1em 0;
}
/*styling for the wrapper around text input box and search button*/
.wp-block-search__inside-wrapper{
  padding: 0.5em 0;
}
.wp-block-search__label{
  font-weight: 500; 
}
.wp-block-search__label, .wp-block-search__button, #s, #searchsubmit{
  font-size: 1rem;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
}
.wp-block-search__button, #searchsubmit{
  color: var(--text-secondary);
  background-color: var(--turquoise);
  border-color: var(--turquoise);
}
.wp-block-search__input, #searchform{
  border-color: var(--turquoise);
  background-color: var(--background-primary);
  max-width: 75%;
}
#searchform{
  padding: 0.5em 0;
  display: flex;
  flex: auto;
  flex-wrap: nowrap;
  max-width: 100%;
}
#s{
  appearance: none;
  border: 1px solid #949494;
  flex-grow: 1;
  min-width: 3rem;
  padding: 8px;
  text-decoration: unset !important;
  max-width: 75%;
}
#searchsubmit{
  cursor: pointer;
  margin-left: 10px;
  word-break: normal;
  padding: 6px 10px;
}
/* show input on hover + focus */
header form:hover input#s, header form:focus-within input#s{
  display: block;
}
/* icon change on on hover + focus  */
header form:hover input#searchsubmit, header form:focus-within input#searchsubmit{
  background: transparent url(images/search-icon-orange.svg) no-repeat;
  background-size: contain;
}
/*========== RESPONSIVE STYLES ==========*/
@media (min-width: 520px){
  nav #menu-toggle, nav #menu-toggle:checked, nav .toggle{
		display: none;
	}
	nav #menu-toggle + .toggle + ul, nav #menu-toggle:checked + .toggle + ul{
		display: block;
	}
	nav{
		margin: 0 0 3em 0;
		text-align: center;
	}
	nav ul{
    width: 100%;
		max-width: 60em;
		text-align: center;
		overflow: hidden;
		margin: 0 auto;
	}
	nav ul li{
		display: inline;
		margin: 0;
    padding: 0.5em 0.8em;
	}
	nav ul li a{
		display: inline-block;
		margin: 0;
		padding: .2em .4em;
	}
	nav ul li a:link{
		margin: 0;
    padding: 5px;
		display: inline-block;
		text-align: center;
		position: relative;
	}
}
@media(min-width: 600px){
  nav .toggle{
		display: none;
	}	
	nav ul{
		display: block;
	}
	nav ul li{
		display: inline-block;
	}
}
@media(min-width: 800px){
  .single-p-img-grid div{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-gap: 2em;
    grid-template-areas:
      "p p img";
  }
  .single-p-img-grid p{
    grid-area: p;
  }
  .single-p-img-grid figure{
    grid-area: img; 
  }
  .gallery-img-grid div{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-gap: 2em;
    grid-template-areas:
      "ul img img";
  }
  .gallery-img-grid ul{
    grid-area: ul;
  }
  .gallery-img-grid figure{
    grid-area: img; 
  }
  .nav-links{
    display: flex;
    justify-content: space-between;
  }
}
@media(min-width: 1080px){
  #content{
    width: 70%
  }
  main{
    width: 90vw;
  }
  .card{
    width: 60vw;
    height: 580px;
  }
  .image{
    max-width: 400px;
    height: auto;
  }
  .wp-container-core-group-is-layout-baef362d{
    grid-gap: 3rem;
  }
}
@media(min-width: 1300px){
  main{
    width: 80vw;
  }
  .card{
    width: 65vw;
    height: 530px;
  }
}
@media(min-width: 1450px){
  main{
    width: 70vw;
  }
}