/*
Theme Name: Village
Theme URI: http://www.peek-design-swansea.co.uk
Description: A premium theme by Chris Thomas
Version: 1.0
Author: Chris Thomas
Author URI: http://www.peek-design-swansea.co.uk
*/

* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { height: 100%; font-family: "Lexend", serif; line-height: 1.2; background-color: #f7f6ef; color: var(--primary-color);}


body {font-size: 0.8vw}

@media (max-width:  1366px) {body {font-size: 1.2vw}}

@media (max-width: 480px) {
body {font-size: 4vw}
}


a, .read-more {transition: all 0.3s ease; color: var(--primary-color); text-decoration: none}

a:not(.read-more):hover {text-decoration: underline;}


.wp-block-button__link {font-size: 90% !important}

:root {
  --primary-color: #2B2B2B;
	--dark-grey: #707070;
	--light-grey: #c1c1c1
}

.scroll-snap, .home, .page-id-12 {
    scroll-snap-type: y mandatory;
    overflow: hidden;
}


.section {
    min-height: 100vh;
    margin-right: 12%; 
}

@media (max-width:  1366px) {
.section {margin-right: 5%; }
}




p {line-height: 2}

.int-section {width: 64% !important;}

@media (max-width:  1366px) {
	.section {width: 75% !important;}
}



.home-section {margin-right: 0; width: 100% !important; }

img {width: 100%; height: auto}

.background {
position: relative;
width: 100%;
height: 100vh;
background: url(/wp-content/themes/village/images/temp01.jpg) no-repeat center center/cover;
}


.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
background: white;
padding: 0;
transition: transform 1s ease-in-out;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
width: 12%; 
}

.home .sidebar {transition-delay: 6s; transform: translateX(-100%);}

@media (max-width: 1200px) {
	.sidebar {width: 15%; }
}


@media (min-width: 769px) {
.sidebar.show {transform: translateX(0);}
}


@media (max-width: 480px) {
.sidebar {transform: translateX(-100%); transition-delay: 0s !important; width: 100%}
.sidebar.show {transform: translateX(0);}
.hamburger {display: flex !important;}
}


.hamburger.d-flex {
position: fixed;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
display: none !important;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 10;
}

@media (max-width: 480px) {
.hamburger.d-flex {display: flex !important;}
}
		
		
.hamburger div {
width: 30px;
height: 3px;
background: black;
margin: 3px 0;}
		
.home .lazy-load, .wp-singular .lazy-load  {opacity: 0; transition: opacity 1s ease-in-out;}
.sidebar .lazy-load	{opacity: 1;}
.lazy-load.loaded {opacity: 1;}
		
.lazy-load.loaded .fade-in {
animation: fadein 1s 0s ease;
-webkit-animation: fadein 1s 0s ease;
animation-delay: 0s;
animation-fill-mode: forwards;
opacity: 0;
}


.home-h1-holder h1, .home-h1-holder h2  {font-size: 100% !important; font-weight: normal; margin-bottom: 0; letter-spacing: 5px}
.gem {width: 100%; height: auto; opacity: 0}
.gem .st0 {fill:#FFFFFF;}



.home-h1-holder {
  position: relative; margin-left: 24%;
}

.home-h1-holder h1,
.home-h1-holder h2 {
  transition: transform 1s ease-in-out 2s;
}

.home-h1-holder .gem {
  opacity: 0;
  height: 0;
  display: block;
  margin: 0 auto; /* Center the image */
  transition: opacity 1s ease-in-out 3s, height 1s ease-in-out 3s;

}

.home-h1-holder h1 {transform: translateY(+5.83vw);}

/* When the section loads */
.home-h1-holder.loaded h1 {
  transform: translateY(0px);
}

.home-h1-holder.loaded img {
  opacity: 1;
  height: auto; 
}

.home-h1-holder h2 {
  transform: translateY(-5.83vw);
}
.home-h1-holder.loaded h2 {
  transform: translateY(0px);
}

@keyframes fadein {0% { opacity: 0; } 100% { opacity: 1; }}
@keyframes fadein03 {0% { opacity: 0; } 100% { opacity: 0.3; }}

.logoload path {opacity: 1}
#village {opacity: 0.3}
.home .logoload path, .home #village {opacity: 0}

.home .sidebar-content.loaded .logoload path, .home .sidebar-content.loaded .menu-list li  {animation: fadein 1s 0s ease; animation-fill-mode: forwards;}
.home .sidebar-content.loaded #village {animation: fadein03 1s 0s ease; animation-fill-mode: forwards;}


.lazy-load.loaded .fade-in {
  animation: fadein 1s 0s ease;
  -webkit-animation: fadein 1s 0s ease;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  opacity: 0;  /* Set opacity to 0 only for the parent */
}

.lazy-load.loaded .fade-in > *,
.lazy-load.loaded .fade-in li {
  animation: fadein 1s ease forwards;
  opacity: 0;
}


#bg {opacity:0; transition: opacity 1s ease-in-out; }
.lazy-load.loaded #bg {opacity:0.3; }

#sidebar #svg-logo .st1{fill:#010101;}
#svg-logo .st2{fill:none;}
.home-section #svg-logo .st1, .home-section #landimore path, .home-section #cheriton path, .home-section .cwymivy path, .home-section #bg, .home-section #village path {fill:#fff;}

.home-section hr {color: var(--light-grey)}
.sidebar-content {padding: 10%}

.pad-ri-5 {padding-right: 5vw}

.text-content p {line-height: 2}

.cheriton-landimore-side {
  display: flex;
  width: 50%;
  padding: 0;
  margin-left: -6.5%;
  margin-top: 3rem;
}

.cheriton-landimore-side .sidebar-content {width: 50%; padding: 2%}

.cheriton-landimore-side .loaded {transition-delay: 10s;}

.menu-list { list-style: none; padding: 16%; margin: 0;}

@media (max-width: 1366px) {
.menu-list {padding: 0; margin: 0;}
}


.menu-list li {opacity: 1}
.home .menu-list li {opacity: 0}

.menu-list li a {
  border-bottom: 1px solid var(--light-grey);
  text-decoration: none;
  display: block;
  color: var(--primary-color);
  margin-bottom: 10%;
  padding: 3%;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.menu-list li a:hover, .current-menu-item a {
  border-bottom: 1px solid #000 !important;
  color: #000 !important; text-decoration: none;
}

.margin-left24 {margin-left: 24%}
@media (max-width:  1366px) {
.margin-left24 {margin-left: 20%}	
}

.section {min-height: 100%}

.explore-box {background-color: #fff; flex-direction: row !important; display: flex;}
.explore-box img {width: 57%; aspect-ratio: 4 / 3;}
.explore-box-text {width: 43%; padding: 6%}
.advert20 {background-color: #fff; background-image: url(https://llanmadocvillage.co.uk/wp-content/themes/village/images/advertising-space-vert.png); background-size: cover;}
.stretch {align-items: stretch !important;}
.explore-box-holder {margin-bottom: 2.5%}

.h2underline {
  font-size: 135%;
  text-transform: uppercase;
  border-bottom: 1px solid var(--dark-grey);
  display: block;
  letter-spacing: 4px;
  padding-bottom: 5%;
  margin-bottom: 5%;
}

.h2underline100 {
  font-size: 100%;
  text-transform: uppercase;
  border-bottom: 1px solid var(--dark-grey);
  display: block;
  letter-spacing: 4px;
  padding-bottom: 2.5%;
  margin-bottom: 5%;
}

.read-more {
  border: 1px solid var(--dark-grey);
  border-radius: 100px;
  opacity: 1;
  text-align: center;
  letter-spacing: 4px;
  color: var(--primary-color);
  text-transform: uppercase;
  padding: 1.25rem 3rem;
  line-height: 1;
  text-decoration: none;
  font-size: 100%;
  display: inline-block;
}

@media (max-width:  1366px) {
	.read-more {padding: 1em 2em; letter-spacing: 2px}	
}

.read-more.block {display: block}

.explore-box .read-more {margin-top: 20%}
.explore-box P {line-height: 1.5}

.h2smallfeat {font-size: 70%; border-bottom: 1px solid var(--primary-color); display: inline-block; letter-spacing: 4px;}

.h3svg {width: 150%; z-index: 99; position: relative}

#scroll-arrow {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  animation: bounce 2s infinite;
  z-index: 1000;
}

@media (max-width:  1366px) {
	#scroll-arrow {left: 57.5%;}
}

#scroll-arrow svg {
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  transition: opacity 0.3s ease; fill: #fff;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

#scroll-arrow.loaded {transition-delay: 10s;}

.width75 {flex: 0 0 auto; width: 75%}
.pad-ri-10p {margin-right: 10%}
.pad-ri-5p {margin-right: 5%}
.width20 {flex: 0 0 auto; width: 20%}

.footer {font-size: 82%; color: #000}


.footer a {
  color: #000 ; /* Set your link color */
}

/**/
.pub-filters {
  font-size: 100%;
}

/* Reset UL spacing */
.pub-filters ul {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Top-level <li>s (accordion blocks, search input, buttons) */
.pub-filters ul > li {
  display: inline-block;
  vertical-align: top;
  width: 18%;
  line-height: 1.4;
}

/* Last item spacing fix */
.pub-filters ul > li:last-of-type {
  margin-right: 0;
}

/* Mobile stacking */
@media (max-width: 480px) {
  .pub-filters ul > li {
    width: 100%;
    font-size: 5vw;
  }
}

/* Nested term list items */
.pub-filters ul li ul li {
  width: 100%;
  font-size: 75%;
  list-style: none;
  margin-bottom: 0;
}

/* Text input */
.pub-filters input[type="text"] {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #f0f0f0;
  color: #000;
  border: none;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 1vw;
  margin-bottom: 10px;
  outline: none;
}

@media (max-width: 810px) {
  .pub-filters input[type="text"] {
    margin-bottom: 0;
  }
}

.pub-filters input[type="text"]::placeholder {
  font-size: 0.9vw;
  color: #000;
  opacity: 1;
  font-family: "Open Sans", sans-serif;
}

@media (max-width: 480px) {
  .pub-filters input[type="text"]::placeholder {
    font-size: 3.5vw;
  }
}

/* Accordion button */
.pub-filters .accordion {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 75%;
  background: #f0f0f0 url(images/accor01.png) no-repeat right center !important;
  border: 0;
  border-radius: 6px;
  cursor: pointer; color: #000;
}

.filter-clear-holder {width: auto !important}

.filter-clear {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 75%;
  border: 0;
  border-radius: 6px;
  cursor: pointer; background-color: #000; color: #fff;
}

.clear {background: #f0f0f0 !important; color: #000 !important;}

.pub-filters .accordion:hover {
  cursor: pointer;
}


.pub-filters .active {
  background-image: url(images/accor02.png) !important;
}

/* Checkbox label */
.pub-filters label {
  display: block;
  margin-bottom: 5px;
  margin-left: 20px;
}

.pub-filters label input[type='checkbox'] {
  margin-left: -20px;
}

/* Inner UL */
.pub-filters ul li ul {
  background-color: #fbfbfb;
  margin: -10px 0 10px 0;
  padding: 3%;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  display: none;
  box-sizing: border-box; font-size: 80%;
}

/* Child level */
.term-level-child {
  display: block !important;
  padding-left: 20px !important;
  border: none !important;
}

/* Buttons */
.pub-filters input[type="submit"],
.resetfilters {
  background-color: #3ab763 !important;
  color: #fff;
  border: 0;
  padding: 10px 15px;
  border-radius: 6px;
  box-sizing: border-box;
  line-height: 1;
  font-size: 75%;
  text-align: center;
  font-family: 'Roboto', sans-serif !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in;
  width: 6.2vw;
  -webkit-appearance: none;
}

.pub-filters input[type="submit"]:hover,
.resetfilters:hover {
  background-color: #d50057 !important;
  cursor: pointer;
}

@media (max-width: 480px) {
  .pub-filters input[type="submit"],
  .resetfilters {
    font-size: 3.5vw !important;
    width: 20vw !important;
    display: inline-block;
  }

  .resetfilters {
    position: relative;
  }
}

.resetfilters {
  position: absolute;
  top: 0;
  right: 0;
}

.d-arch-bus-text {width: 85%}
.d-arch-bus-img {
    width: 10%;
    border: 2px solid #f0f0f0;;
}

.directory-arch-bus {
	font-size: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse; border-bottom: 2px solid #000;
}
.directory-arch-bus p {font-size: 80%; margin-bottom: 1rem;}
.directory-arch-bus h2 {font-size: 100%; margin-bottom: 1rem;}
.directory-arch-bus .bus-descr {font-size: 60%; margin-bottom: 1rem;}



.phonerev {padding: 0;
  border: none;
  border-radius: 0px; display: inline-block; margin-bottom: 0}



.phonerev:hover {cursor: pointer}
.phonerev a i {pointer-events: none;}
#phone-number2 {margin-left:0.75vw}
#phone-number2 i {font-size: 150%; margin-right:0.75vw}

.reveal-phone.btn {font-size: 100% !important; padding: 0}
.phone-number span {font-size: 80% !important}

.d-arch-bus-text ul {
  list-style: none; /* Remove bullets */
  padding: 0;
  margin: 1em 0;
  display: flex;
  gap: 1em; /* Add space between items */
  flex-wrap: wrap; /* Allow wrapping if needed */
  align-items: center;
}

.d-arch-bus-text ul li {
  margin: 0;
}

.d-arch-bus-text ul li a,
.d-arch-bus-text .phonerev {
  display: flex;
  align-items: center;
  justify-content: center;
}

.d-arch-bus-text ul li a {text-decoration: none; color: #000}
.d-arch-bus-text ul li a:hover {color: #999;}

iframe {width: 100%;}

/* visit*/

.page-id-12 .flex-column {overflow: visible}

.page-id-12 .wp-block-columns .wp-block-column:last-of-type  {
display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
    }

.wp-block-button {display: inline-block}

@font-face {
    font-family: 'quentinregular';
    src: url('webfontkit/quentin-webfont.woff2') format('woff2'),
         url('webfontkit/quentin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.page-id-12 h2 {font-family: 'quentinregular'; width: 200%;
  z-index: 99;
  position: relative;
  font-size: 450%;
}

@media (max-width:  1366px) {
.page-id-12 h2 {
  font-size: 380%;}
}

.image-container {
  position: relative;
}

.whiteoverlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0));
  pointer-events: none; /* keeps the overlay non-blocking */
  z-index: 2;
}

/**/
#bbpress-forums {width: 100%;}
.bbpress a {color: #000}

/* Increase font size for bbPress content */
.bbp-reply-content,
.bbp-topic-content,
.bbp-body,
.bbp-forum-content,
.bbp-pagination,
.bbp-meta {
  font-size: 16px;
  line-height: 1.6;
font-family: "Lexend", serif; 
}

/* Optional: Make form inputs more readable too */
.bbp-form input,
.bbp-form textarea {
  font-size: 16px;
	font-family: "Lexend", serif; 
}

/**/
.twofive {width: 25%}
.sevenfive {width: 75% !important}

.screen4 h2, .screen5 h2, .screen6 h2 {
  font-family: 'quentinregular';
  width: 200%;
  z-index: 99;
  position: relative;
  font-size: 800%;
}

.screen4 p {line-height: 2;}

.screen4 h3 {width:26%; text-transform: uppercase; font-size: 135%; letter-spacing: 4px; line-height: 1.5; margin-top: 0.25%; padding-right: 2.5%;}
@media (max-width:  1366px) {
	.screen4 h3 {letter-spacing: 2px;}	
}

.screen4 .news-desc {width: 44%}
.screen4 .news-readmore {width: 30%; text-align: right; text-transform: uppercase;letter-spacing: 4px;line-height: 2}
.screen4 .news-readmore a {text-decoration: none; color: var(--primary-color)}
.screen4 .arrow-right {margin-left: 10%; margin-bottom: 1%;}
.screen4 .explore-box-holder {border-top: 1px solid var(--dark-grey); padding-top: 2.5%; padding-bottom: 2.5%;}
.screen4 .explore-box-holder:last-of-type {border-bottom: 1px solid var(--dark-grey);}
.screen4 .explore-box-holder:first-of-type {border: none !important;}

.screen5 {min-height: auto}
.screen5 h2, .screen5 .travel-buttons {width: 50%}
.screen5 .travel-buttons a:first-of-type {margin-right: 2rem;}
.read-more:hover {background-color:  var(--dark-grey) !important; color: #fff !important}

.home .iframe-wrap {
  width: calc(100vw - 12vw);
  position: relative;
  margin-left: 12vw;
  padding-top: 30%;
}

.home .iframe-wrap iframe {position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: 100%}

.contact-details {padding: 6%;}
.contact-row {margin-bottom: 2.5%}
.contact-row span:first-of-type {display: inline-block; width: 35%}
.contact-row span:last-of-type {display: inline-block; width: 50%}


/* Wrapper background */
.custom-contact-form {
  background-color: #f7f6ef;
  padding: 0;
}

/* Input and textarea styling */
.custom-contact-form .read-more {background-color: #f7f6ef; margin-top: 5%}
.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form textarea {
  background-color: #f7f6ef;
  border: none;
  border-bottom: 1px solid #2B2B2B;
  width: 100%;
  padding: 0.5em 0;
  font-size: 1rem;
  color: #2B2B2B;
  box-shadow: none;
  outline: none;
}
.wpcf7-list-item {margin: 0 !important}
.custom-contact-form textarea {
  resize: none; height: 10vw;
}

.custom-contact-form input:focus::placeholder,
.custom-contact-form textarea:focus::placeholder {
  color: transparent;
}


/* Placeholder styling */
.custom-contact-form ::placeholder {
  color: #2B2B2B;
  opacity: 1;
}

/* Checkbox styling */
.custom-contact-form label {
  display: flex;
  align-items: center;
  margin-top: 1em;
  font-size: 0.95rem;
  color: #2B2B2B;
}

.custom-contact-form input[type="checkbox"] {
  margin-right: 0.5em;
}

/* Submit button inherits .read-more styling */