/*
Theme Name: Wilkinson Goldsmiths 2025
Theme URI: 
Author: Arch Creative
Author URI: 
Description: 
Version: 2.0
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
Tags: black, blue, white, light, one-column, fluid-layout, responsive-layout, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Text Domain: wilkinsons

*/

@font-face {   font-family: 'Gabriela'; src: url('/wp-content/themes/wilkinsons/fonts/Gabriela-Regular.woff2') format('woff2'), url('/wp-content/themes/wilkinsons/fonts/Gabriela-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap;  }
@font-face {   font-family: 'Gabriela'; src: url('/wp-content/themes/wilkinsons/fonts/Gabriela-Medium.woff2') format('woff2'), url('/wp-content/themes/wilkinsons/fonts/Gabriela-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap;  }
 

:root {  
	 --plyr-color-main: var(--gold);
	 --gold:#ab8746;
	 --blue:#082d12;
	 --grey:#2c3336;
	 --light-grey:#f0f0f0;
   }


* {  box-sizing: border-box; }

html, body {  background:var(--light-grey); width:100%;font-family: "proxima-nova", sans-serif; color: #2c3336; font-weight: 300;margin:0;padding:0;  }

.container {   max-width: 1400px;margin:0 auto;background: #fff;padding:0 2rem;  }
.inner-container {   max-width:1200px; width:100%; margin:0 auto;padding:0 2rem; }
 
/* -------------------- typography -------------------- */
span {   color:  var(--gold);  }
 
h1, h2, h3, h4, h5, h6 {  font-family:Gabriela, serif; color:   var(--gold); font-weight: 300;  }
h1 {   font-size: clamp(2rem,5vw,3rem);  }
h2 {   font-size: 2.2rem;  }
h3 {   font-size:1.6rem;  }
h4 {   font-size: 1.2rem;  }
h5 {   font-size: 1.2rem; }
h6 {   font-size: 1.2rem;  }

p {  font-weight: 400; font-size: 0.9rem;line-height:150%; }
p.large-text { font-size:1.2rem; }

ul, ol {   margin: 0 0 20px 0; padding: 0 0 0 20px;  }
ul li, ol li {   margin: 0 0 10px 0;  }
 
small {   font-size: 11px;  }
b, strong {   font-weight: 700;   }
strong{   color: #000;  }

img {  display:block; }
 

/* -------------------- anchor -------------------- */
a {   color: #000;-webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out;  } 
a:hover, a:active {  color: var(--gold);  }

a.button { background:var(--gold);border:none;text-decoration: none;color:#fff;font-size:1rem;display:inline-block;padding:0.5rem 1rem;
}.button:hover { background:var(--grey); }
}
 
.social-media a {  border:none; }


/*/* ---------- header-nav ---------- */
#header-nav {   margin: 0 auto; background: #fff;  }
 
a#logo {   -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; border:none;  }
#header-nav #logo {   display: block; width: 240px; margin: 0 auto; padding:1.5rem 0;  }
#header-nav #logo img {   width: 100%; height: auto;  }
#header-nav .nav {   background:  var(--blue); margin: 0px 0 0;  } 
#header-nav .nav ul {   padding: 0px; margin-bottom:0px;  }
#header-nav .nav ul li {   padding: 0px; margin: 0px auto; width: auto; text-align:center;  }
#header-nav .nav ul li a {  color:#fff;text-decoration:none; }
#header-nav .nav ul li a:hover {  color:var(--gold); }
#header-nav .nav ul li a{   letter-spacing: 0.2em; border:none;  }
 
.menu-main-navigation-container {  text-align:center; }
ul.menu {  display:inline-block;width:auto;margin:0 auto;list-style:none;padding:0; }
ul.menu li {  display:inline-block;width:auto; }
ul.menu li a {  width:100%;padding:15px 20px;display:inline-block;text-transform: uppercase;font-size:11px; }
 

/* ---------- nav-toggle ---------- */
.nav-toggle {   position: absolute; top: 15px; right: 15px; padding: 10px; background-color:  var(--gold); height: 40px; border:none;  }
.nav-toggle:hover { background-color:var(--grey); }
.nav-toggle .icon-bar {   display: block; width: 20px; height: 2px; background: #fff;  }
.nav-toggle .icon-bar + .icon-bar {   margin-top: 6px;  }
.nav-toggle { display:none;
}
 

/* ---------- sm ---------- */
.sm {   margin: 10px 20px;	  }
.sm h3 {   line-height: 30px; margin: 0;  }
.sm .btn {   display: block; height: 30px;  }
.sm ul li {   display: block; float: left; line-height: 30px; margin: 0 0 0 20px;  }
.sm ul li:first-child{   margin-left:0px;  }
.sm ul li a {   padding-top:5px;border-radius:100%;background:var(--blue);display: block; height: 30px;width:30px; white-space: nowrap; overflow: hidden;  }
#footer .sm ul li a:hover { background:var(--gold);opacity:1; }


.sm a svg { width:20px;height:20px; }
.sm a svg path { fill:#fff; }

/* -------------------- footer -------------------- */
#footer .sm{   text-align:center;  }
#footer .social-media {  display:inline-block;padding:10px 15px;text-align:center;margin:0 auto; }
#footer p {   text-align: center; color: #ffffff; text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; padding:0 15px;  }
#footer p a {   color:var(--grey); text-decoration: none; letter-spacing: 0.1em;font-size: 14px; letter-spacing: 0em;  }
#footer .bg-blue a { color:#fff; }
#footer a:hover{   opacity:0.4;  }

.logo-carousel { width:100%;padding:1.5rem 0 1.5rem; }
.logo-carousel img { width:auto !important;max-width:140px;height:50px;object-fit:contain; }
.logo-carousel .slick-slide > div { padding:0 2rem; }

.bg-blue { background:var(--blue); }
.bg-grey { background:var(--grey); }
.bg-grey-light { background:var(--light-grey); }
.bg-white { background:#fff; }

.banner { position:relative;height:50vh;max-height:500px; }
.banner > img { position:absolute;top:0;right:0;width:100%;height:100%;object-fit:cover; }
.banner-text { position:relative;z-index:2;height:100%;position:relative;display:flex;align-items:flex-end;padding-bottom:2rem; }
.banner::after { opacity:0.8;position:absolute;display:block;width:100%;content:"";bottom:0;left:0;height:100%;background:linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); }

.module { padding:3rem 0 }
.two-column { display:flex;flex-wrap:wrap;gap:2rem; }
.text-column { flex:1 1 330px; }
.image-column { flex:1 1 270px; }
.img-left .image-column { order:-1; }
.divider { width:150px;height:1px;background:var(--grey); }

.full_width_image { width:100%;max-height:500px;object-fit:cover; }

.news-grid { display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-around; }
.news-grid > div { flex:1 1 320px;background:var(--grey); } 
.image-holder { position:relative; }
.image-holder:after { box-shadow: inset 0 0 0 5px var(--grey);position:absolute;top:0;left:0;height:100%;width:100%;content:"";display:block; }
.news-grid img { transition:opacity 0.3s ease-in-out;width:100%;aspect-ratio:14/11;object-fit:cover;object-position:center; }
.news-grid a { text-decoration:none; }
.news-grid a:hover img { opacity:0.7 }
.news-grid .title-holder { background:var(--grey);color:#fff;display:inline-block;width:100%;padding:1rem 1rem; }


.blog-header { width:100%;aspect-ratio:14/11;object-fit:cover; }
.breadcrumbs { background:var(--grey);color:#fff;font-size:0.8rem;padding:0.5rem 1rem;text-align:center; }
.breadcrumbs a { color:#fff;text-decoration:none; }
.blog-text { width:100%;max-width:800px;margin:0 auto; }
.blog-text h1 { font-size:2rem; }
.pagination { text-align:center;padding:2rem 1rem 0; }
.pagination a { text-decoration:none;color:#fff;background:var(--gold);padding:0.5rem 1rem;margin:0 1rem;display:inline-block; }
.pagination a:hover { background:var(--grey); }


.gallery { display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-around; }
.gallery > a { background:var(--grey);display:inline-block;flex:1 1 150px;position:relative; }
.gallery > a::after { box-shadow: inset 0 0 0 1px var(--grey);position:absolute;top:0;left:0;height:100%;width:100%;content:"";display:block; }
.gallery > a img { width:100%;transition:opacity 0.4s ease-in-out; }
.gallery > a:hover img { opacity:0.6; }


.lb-container { position:relative; }
.lb-info { line-height:100%;position:static;bottom:0;left:0;background:rgba(255,255,255,1);width:100%;display:block;padding:1rem; }
.lb-caption { display:block; }
.lb-description { color:#000; }
.lb-description p { width:100%;margin:1rem auto 0;max-width:760px; }
/*.lightbox .lb-image { border-bottom:100px solid #fff; }*/

.slick-track {
    margin:auto;
}



/* ===== base reset for the lightbox ===== */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1200;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* visible state */
.lightbox[aria-hidden="false"] { display: flex; }

/* backdrop */
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

/* wrap centers the white box */
.lightbox__wrap {
  position: relative;
  max-width: 1100px;
  width: min(94vw, 1100px);
  max-height: calc(100vh - 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  pointer-events: none;
}

/* white box containing everything */
.lightbox__content {
  width: 100%;
  background: #ffffff;
  color: #111;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 100%;
}

/* close button */
.lightbox__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  background: transparent;
  color: #111;
  border: 0;
  padding: 6px 10px;
  font-size: 24px;
  cursor: pointer;
}

/* figure holds image on top and caption below */
.lightbox__figure {
  margin: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

/* image: we will set max-height in JS to guarantee fit */
.lightbox__img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

/* caption is always under the image and scrolls internally only if absolutely necessary */
.lightbox__caption {
  width: 100%;
  padding: 8px 4px 18px 4px;
  box-sizing: border-box;
  text-align: left;
  overflow: auto;
  max-height: 40vh; /* safe cap, JS will ensure whole lightbox fits in viewport */
}

/* caption typography */
.lightbox__title {
  margin: 0 0 8px 0;
  text-align:center;
}
.lightbox__description {
  margin: 0;
  text-align:center;
}

/* controls row */
.lightbox__controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.lightbox__prev,
.lightbox__next {
  background: var(--gold);
  color: #fff;
  border: 0;
  padding: 8px 35px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
}
.lightbox__close { display:none; }

/* responsive: smaller paddings and font sizes */
@media (max-width: 520px) {
  .lightbox__figure { padding: 12px; }
  .lightbox__caption { padding: 6px 2px 12px 2px; }
  .lightbox__title { font-size: 1rem; }
  .lightbox__description { font-size: 0.92rem; }
  .lightbox__prev, .lightbox__next { padding: 8px 10px; font-size: 16px; }
}