/* PAGE: style.css */

/* SECTION: Theme Info */
/*
Theme Name: Pedernales Recording Studio
Theme URI:  http://pedernalesrecording.com
Author:      WebberSites
Author URI:  http://www.webbersites.com
Description: A custom WordPress theme created for Pedernales Recording Studio.
Version:     1.0
Text Domain: super-default
*/

/* SECTION: Reset CSS */
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, font, 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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section {
  display: block;
}
body {
  line-height: 1; 
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
font-size:0;
}

body {background-color:#000;}

div {font-size:14px;}

/* Use your Typekit fonts */

body {font-family: droid-serif, serif; margin-top:135px;}

h1, h2 {font-family: cheddar-gothic-slab, sans-serif; font-weight:normal}
h3, h4 {font-family: din-condensed, sans-serif; font-weight:normal}

h1 {font-size:3vw; line-height:3.5vw; color:#b58e33}

p, li {font-size:1.4vw; line-height:2vw; margin-bottom:1.2vw;}

.site-footer {font-family: din-condensed, sans-serif; font-weight:normal}
.site-footer p {font-size:18px; line-height:22px;}


.menu-item, .contact-button {
  font-family: "cheddar-gothic-serif", sans-serif;  font-weight:normal !important; font-size:2vw; line-height:1.5vw;
	
	/* WebKit-based browsers (Chrome, Safari) */
-webkit-font-smoothing: antialiased;  /* Options: none, antialiased, subpixel-antialiased */

/* macOS Firefox */
-moz-osx-font-smoothing: grayscale;  /* Options: auto, grayscale */

/* Experimental */
font-smooth: always; /* Not well-supported */
	

}

.site-header {position:fixed; top:0; width:100%; left:0; right:0; z-index:999;}

.menu-item a {color:#e8d29f;}

/* Top black bar */
.header-top-black {
  background-color: #000;
  height: 30px; /* Adjust as desired */
  width: 100%;
}

/* Main header area with wood texture */
.header-wood {
  background: url("images/wood-texture.png") center center no-repeat;
  background-size: auto 55%;
	background-position: top center;
  position: relative;
  padding: 0 2rem; /* Adjust for your layout */
  display: flex;
 
  justify-content: space-between;
}

/* Logo dips over the bottom (if desired) */
.logo-container {
  position: relative;
	margin-top:-20px;
  z-index: 10;
}

.site-logo {
  max-width: 250px; /* Adjust as desired */
  display: block;
}

/* Navigation */
.primary-nav {
  flex: 1;
  text-align: right; /* or center, depending on your layout */
}
.primary-menu {
  list-style: none;
  margin: 0;
  padding: 0;
	margin-top:35px;
}
.primary-menu li {
  display: inline-block;
  margin-left: 1rem;
}
.primary-menu li a {
  text-decoration: none;
  color: #e8d29f; /* Contrasting color for wood background */
	text-shadow: 0 0 5px #000;
 margin-right:5vw;
}

/* Contact button styling */
.contact-button-container {
  margin-left: 2rem;
}






.contact-button {margin-top:37px;}
.contact-button:hover {
  background-color: #ffb600; /* Hover color */
}


.site-footer {background-color:#000; color:#b58e33; text-align:center; padding:30px }
.site-footer a {color:#b58e33; text-decoration: none;}

.single-recording h1 {text-align:center; padding:2vw;}



    .slideshow-container {
        position: relative;
        max-width: 100%;
        overflow: hidden;
    }
    .slide {
        display: none;
        width: 100%;
    }
    .slide img {
        width: 100%;
        height: 45vw;
        object-fit: cover;
    }
    .caption {
        position: absolute;
        top: 30px;
        right: 30px;
       
        color: white;
        padding: 15px;
        max-width: 40%; 
		text-align:right;
    }

.caption p {padding-left:30%; color:#e8d29f; margin-top:15px;}

    .fade {
        animation: fadeEffect 2s;
    }
    @keyframes fadeEffect {
        from { opacity: 0.4; }
        to { opacity: 1; }
    }



.recordings-section {
  padding: 2rem 1rem;
  color: #000; /* text color that’s visible over the wood background */
  position: relative;
  text-align: center;
	margin-top:-3px;
	background-image:url(images/wood-background.jpg); 
	background-position: center center;
}

.recordings-title {
  margin-bottom: 1.5rem;
  color: #b58e33; /* example color */
  
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.recordings-carousel {
  /* center the carousel in container */
  margin: 0 auto;
  max-width: 95%;
}

/* Each Flickity slide */
.carousel-cell {
  width: 200px; /* adjust so multiple slides appear at once */
  margin-right: 20px;
  background: #f5e1c5; /* example background color for the card */
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  overflow: hidden;
  text-align: center;
}

.recording-image img {
  display: block;
  width: 100%;
  height: auto;
}

.recording-info {
  padding: 1rem;
}

.recording-info h3 {
  margin: 0.5rem 0 0;
  font-size: 1rem;
}

.recording-info .artist {
  margin: 0.3rem 0 0;
  font-style: italic;
}

.recording-info .year {
  margin: 0.3rem 0 0;
}

/* "View More" button styles */
.view-more-wrapper {
  margin-top: 2rem;
}

.view-more-button {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background: #c39f5e;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.view-more-button:hover {
  background: #b38f53;
}




.studio-feedback-section {
  padding: 3rem 1rem;
  color: #fff; /* Adjust for visibility on dark wood */
  position: relative;
	background-image:url(images/dark-wood-background.jpg);
  /* The background image is already inlined as style="" above. */
}

.studio-feedback-title {
  margin-bottom: 2rem;
  color: #b58e33; 
  font-size: 2rem;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
}

.studio-feedback-grid {
  display: grid;
  gap: 20px;
  /* 3 columns on large screens */
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  max-width: 1200px; /* optional, for overall content width */
}

/* Down to 2 columns for tablets */
@media (max-width: 992px) {
  .studio-feedback-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Down to 1 column for phones */
@media (max-width: 600px) {
  .studio-feedback-grid {
    grid-template-columns: 1fr;
  }
}
/* Each post card */
.studio-feedback-item {
  background-color: rgba(255, 255, 255, 0.05); /* Slight overlay on dark BG, or remove if you want. */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s ease;
}
.studio-feedback-item:hover {
  transform: scale(1.01);
}

/* The image wrapper */
.studio-feedback-image img {
  width: 100%;
 
  display: block;
	 object-fit: cover;
	height:250px;
}

/* Info container */
.studio-feedback-info {
  padding: 1rem;
}

.studio-feedback-source {
  margin: 0.5rem 0 0;
  color: #b58e33; /* or #b58e33, etc. */
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Additional text (excerpt, etc.) */
.studio-feedback-excerpt {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* If no posts found */
.no-feedback-posts {
  text-align: center;
  margin: 2rem 0;
  color: #ffbcbc;
  font-style: italic;
}



.homepage-bio {
    background-color: #e8d6a5;
    padding: 60px 20px;
    text-align: center;
}

.homepage-bio p {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #222;
    font-weight: 600;
}


/* ===========================
   NEW MEDIA QUERIES
   =========================== */

/* 1) Mobile Menu at 1100px */
@media screen and (max-width: 1100px) {

  /* Hide normal horizontal menu, show “hamburger” toggle */
  .primary-nav {
    display: none;
  }
	
	

  .mobile-menu-toggle {
    display: block;
    cursor: pointer;
    color: #e8d29f; /* your brand color */
    font-size: 2rem;
    margin: 1rem;
  }

  /* Adjust the header layout if desired */
  .header-wood {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

}








/* ===========================
   PAGE-HISTORY TEMPLATE STYLES
   =========================== */


.page-template-page-history article.hentry { background-color:#b58e33;}

.page-template-page-history h1 {text-align:center; color:#000; padding:2vw;}

.page-template-page-contact h1 {text-align:center; padding:2vw; color:#f2e2c2;}

.page-template-page-credits h1 {text-align:center; padding:2vw; color:#000;}

.single-recording {background-color:#e8d29f;}

.single-recording h1 {color:#000;}

.page-template-page-credits {background-color:#f5e1c5;}

/* Scope to “History” page template (page-history.php) */
.page-template-page-history .history-section {
  position: relative;
  /* Dark brown fallback */
  background-color: #3B2F2F;
  /* Wood background */
  background: url("images/wood-background.jpg") center center no-repeat;
  background-size: cover;

  padding: 4rem 2rem;
  color: #fff;
}

/* Optional overlay layer */
.page-template-page-history .history-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.3); /* adjust overlay darkness */
  z-index: 1;
  pointer-events: none;
}

/* Ensure content is above the overlay */
.page-template-page-history .history-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;

  margin: 0 auto;
}

/* Main text column */
.page-template-page-history .history-content {
  flex: 1 1 40%;
  font-size: 1rem;
  line-height: 1.6;
}

/* Timeline column */
.page-template-page-history .history-timeline {
  flex: 1 45%;

}

/* === TIMELINE STYLES (to keep year and details on the same line) === */
.page-template-page-history .history-timeline ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each timeline entry as a 2-column grid:
   1) Fixed-width (year)  2) Flexible (details) */
.page-template-page-history .history-timeline li {
  display: grid;
  grid-template-columns: 120px 1fr; /* adjust 120px as needed */
  column-gap: 1rem;                /* space between year & details */
  margin-bottom: 1.5rem;
}

/* Year: right-aligned */
.page-template-page-history .timeline-year {
  text-align: right;
  font-size: 1.5vw;
  font-weight: bold;
  color: #b58e33;
}



/* Details: left-aligned (by default) */
.page-template-page-history .timeline-details {
  color: #fff;
  line-height: 1.4;
}

/* Keep them side-by-side on smaller screens. No wrap needed:
   If you DO want them to stack, you can add a media query. */

/* Optional section title styling */
.page-template-page-history .history-title {
  font-family: cheddar-gothic-slab, sans-serif;
  font-size: 3rem;
  color: #b58e33;
  margin-bottom: 2rem;
  text-align: center;
}


.page-template-page-photos h1 {text-align:center; padding:2vw;}

.page-template-page-photos {background-color:#000;}

/* -------------------------------
   Photos Masonry Grid & Modal
   ------------------------------- */

/* Masonry via CSS columns */
.photo-grid {
  padding: 2vw;
  column-gap: 1.5rem;
  column-count: 4; /* default to 4 columns */
}

@media (max-width: 1200px) {
  .photo-grid { column-count: 3; }
}
@media (max-width: 768px) {
  .photo-grid { column-count: 2; }
}
@media (max-width: 480px) {
  .photo-grid { column-count: 1; }
}

/* Ensure each item breaks properly */
.photo-item {
  display: inline-block;
  width: 100%;
  background: #f2e2c2;
  padding: 1rem;
  border-radius: 4px;
  text-align: center;
  margin-bottom: 1.5rem;
  break-inside: avoid;
}

/* Image styling */
.photo-img {
  width: 100%;
  height: auto;
  cursor: pointer; /* indicate clickable */
}

/* Caption & artists */
.photo-caption {
  font-style: italic;
  margin: 0.5rem 0;
}
.photo-artists {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

/* ------ Modal Styles ------ */
.photo-modal-overlay {
  display: none; /* hidden by default */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.photo-modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.photo-modal-content img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Close button */
.photo-modal-close {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #f2e2c2;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}


/* Container for Notable Recordings (Credits Version) */
.recordings-section {
  padding: 2rem 1rem;
  color: #000; /* text color that’s visible over the wood background */
  position: relative;
  text-align: center;
  margin-top: -3px;
  background-image: url(images/wood-background.jpg);
  background-position: center center;
  background-size: cover;
}

/* Section Title */
.recordings-title {
  margin-bottom: 1.5rem;
  color: #b58e33; /* example accent color */
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Instead of a carousel, use a grid (rows) */
.recordings-grid {
  max-width: 95%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Each recording item as a row-style card */
.recording-item {
  display: flex;
  background: #f5e1c5; /* matching card background color */
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  text-align: left;
}

/* Image container on the left */
.recording-image {
  flex: 0 0 200px; /* fixed width for images */
}
.recording-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Recording info container on the right */
.recording-info {
  padding: 1rem;
  flex: 1;
  text-align: left;
}
.recording-info h3 {
  margin: 0.5rem 0 0;
  font-size: 1rem;
}
.recording-info .artist {
  margin: 0.3rem 0 0;
  font-style: italic;
}
.recording-info .year {
  margin: 0.3rem 0 0;
}

.recordings-section {
  padding: 2rem 1rem;
  color: #000; /* text color that’s visible over the wood background */
  position: relative;
  text-align: center;
  margin-top: -3px;
  background-image: url("images/wood-background.jpg");
  background-position: center center;
  background-size: cover;
}

/* Section Title */
.recordings-title {
  margin-bottom: 1.5rem;
  color: #b58e33; /* example color */
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* The grid container for recording items */
.recordings-grid {
  /* Center the grid in the container */
  margin: 0 auto;
  /* Create a responsive grid */
  display: grid;
  grid-gap: 20px; /* space between items */
  
  /* By default, fill available space with columns no smaller than 150px */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 
}

/* Force up to 6 columns at larger breakpoints */
@media (min-width: 1400px) {
  .recordings-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* At ~1024px or so, reduce columns if desired */
@media (max-width: 1024px) {
  .recordings-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* At smaller screens (~768px), maybe go to 3 or 2 columns */
@media (max-width: 768px) {
  .recordings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Each recording “card” */
.recording-item {
  background: #f5e1c5; /* example card background color */
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  overflow: hidden;
  text-align: center;
  display: flex;        /* If you want vertical alignment or flexible layouts inside */
  flex-direction: column;
}

/* Image wrapper */
.recording-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Info area */
.recording-info {
  padding: 1rem;
}

.recording-info h3 {
  margin: 0.5rem 0 0;
  font-size: 1rem;
}

.recording-info h3 a {color:#000; font-size:1.4vw; text-decoration:none;}

.recording-info .artist {
  margin: 0.3rem 0 0;
  font-style: italic;
}

.recording-info .year {
  margin: 0.3rem 0 0;
}

/* ============================
   CONTACT SECTION STYLES
   ============================ */

.contact-section p, .contact-section h2, .contact-section h3 {font-family: din-condensed, sans-serif !important; font-weight:normal;}

.contact-section {
	
  position: relative;
  background: #575757; /* Fallback dark color */
  background-image: url("images/contact-background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 4rem 2rem;
  color: #e8d29f;
}

.contact-inner {
  
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

/* Each column */
.contact-col {
  flex: 1 1 20%;
 
}

/* Optional vertical divider */
.vertical-divider {
 /* width: 1px;
  background-color: #666;*/
  margin: 0 1rem;
}

.wpcf7-form textarea {height:9vw;}

/* Headings */
.contact-col h2 {
  font-family: din-condensed, sans-serif; font-weight:normal;
  font-size: 1.6vw;
  color: #b58e33;
  margin-bottom: 1.5rem;
}

.contact-col h3 {
  font-family: din-condensed, sans-serif; font-weight:normal;
  font-size: 1.2rem;
  margin: 1rem 0 0.5rem;
  color: #b58e33;
}

.contact-col p,
.contact-col a {
   font-size: 1.6vw;
  
  color: #e8d29f;
  text-decoration: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .contact-inner {
    flex-direction: column;
  }
  .vertical-divider {
    display: none;
  }
  .contact-col {
    flex: 1 1 100%;
    max-width: 100%;
  }
}







/* ============================
   CONTACT FORM 7 STYLES
   ============================ */

/* Wrap the entire form in a column layout (optional).
   If you want to keep it simple, you can remove display:flex. */
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;          /* spacing between fields */
  margin: 0;            /* adjust if needed for layout */
}

.wpcf7-form p {margin-bottom:0;}

/* LABELS */
.wpcf7-form label {
  display: block;       /* ensure each label is on its own line */

  font-size: 1rem;
  color: #e8d29f;       /* gold-ish text color */
  margin-bottom: 0.3rem;
}

/* INPUT FIELDS (text, email, tel, textarea) */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  padding: 0.7rem;
  border: none;
  border-radius: 3px;
  background-color: #d2b777; /* light gold background for fields */
  color: #000;              /* black text */
  font-family: droid-serif, serif;
  font-size: 1rem;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s ease;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
  background-color: #e8d29f; /* slightly lighter gold on focus */
}

/* SUBMIT BUTTON */
.wpcf7-form input[type="submit"] {
  display: inline-block;
  background-color: #b58e33;  /* gold color from your palette */
  color: #000;
  border: none;
  border-radius: 3px;
  padding: 0.7rem 1.2rem;
  font-size: 1rem;
  font-family: din-condensed, sans-serif; font-weight:normal;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #ffb600;  /* brighter gold on hover */
}

/* OPTIONAL: If you want placeholders styled (like "Name", "Email" placeholders) */
::placeholder {
  color: #666;  /* darker placeholder text */
  opacity: 1;   /* ensure it’s fully opaque on some browsers */
}

/* OPTIONAL: Style CF7 validation errors (e.g. required fields left blank) */
.wpcf7-form .wpcf7-not-valid-tip {
  color: #ff6666;       /* highlight errors in red or your brand color */
  font-size: 0.9rem;
  margin-top: 0.2rem;
  display: block;
}


/* ============================
   Credits Section: Artists
   ============================ */
.credits-artists-section{
  background:url('images/dark-wood-background.jpg') center/cover no-repeat;
  padding:40px 5vw;
  color:#fff;
}

.credits-artists-inner{margin:0 auto;}

.credits-artists-inner a{
  color:#b58e33;
  text-decoration:none;
}

.credits-artists-inner h2{
  text-align:center;
  font-size:2.5rem;
  margin-bottom:20px;
  color:#b58e33;
}

.credits-artists-list{
  list-style:none;
  padding:0;
  margin:0;

  /* Grid layout — grows to 6 columns */
  display:grid;
  grid-template-columns:repeat(1,1fr);      /* default (very small) */
  gap:.4rem;
  font-family:din-condensed,sans-serif!important;
}

@media (min-width:480px){
  .credits-artists-list{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:640px){
  .credits-artists-list{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:768px){
  .credits-artists-list{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1100px){
  .credits-artists-list{grid-template-columns:repeat(6,1fr);}
}

.credits-artist-item{
  /* centring keeps names nicely aligned */
  display:flex;
  justify-content:center;
  margin:0;            /* override default <li> spacing */
}

/* Optional: subtle hover effect */
.credits-artist-item a:hover{
  text-decoration:underline;
}

.credits-artists-section p{text-align:center;}


/* 2) Single-column layout after 768px. 
   Example for .studio-feedback-grid or any other. */
@media screen and (max-width: 768px) {
  
  /* If you want single column for the studio feedback grid at 768px */
  .studio-feedback-grid {
    grid-template-columns: 1fr;
  }

  /* If you have a second grid you want to be single column at 768px */
  /* .some-other-grid {
    grid-template-columns: 1fr !important;
  } */
}

/* Optional: Tweak an intermediate breakpoint if desired, e.g. 992px -> 2 columns, etc. */
@media screen and (max-width: 992px) and (min-width: 769px) {
  .studio-feedback-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}







/* =========================
   SINGLE RECORDING 5-COLUMN
   ========================= */

/* TABS at top: flush right on desktop, center on mobile */
.recording-tabs {
  margin-bottom: 0;
  text-align: right;  /* flush right on desktop */
	padding-right:2vw;
}
.recording-tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex; /* keep tabs side-by-side */
  gap: 1rem;
}
.recording-tabs .tab {
  background: #f5e1c5;
  color: #fff;
  padding: 10px 15px;
  border-radius: 0;
  font-family: cheddar-gothic-slab, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom:0;
}
.recording-tabs .tab a {
  color: #fff;
  text-decoration: none;
}
.recording-tabs .tab span, .recording-tabs .black-tab {
  color: #000;
	
	font-size:3vw; line-height:3vw;
}


.recording-tabs .black-tab {background-color:#000; color:#b58e33; }

.recording-tabs .black-tab a {color:#b58e33;}

/* Example: .active tab if you want a different color 
.recording-tabs .tab.active {
  background: #f5e1c5;
  color: #000;
}
*/

.recording-grid h4, .recording-grid h3 {font-size:1.5vw;}

/* On mobile, center the tabs */
@media (max-width: 768px) {
  .recording-tabs {
    text-align: center;
  }
  .recording-tabs ul {
    justify-content: center; /* center the inline-flex */
  }
}

/* 5-COLUMN GRID */
.recording-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 equal columns */
  gap: 20px;

  margin: 0 auto;
  padding: 1rem;
	background: #f5e1c5; 
	
}

/* Each column */
.recording-grid .column {
  /* sample background color */
  padding: 1rem;

  box-sizing: border-box;
}

/* If you prefer no background on columns 2, 3, etc., remove it or style individually:
.recording-grid .col2,
.recording-grid .col3,
.recording-grid .col4,
.recording-grid .col5 {
  background: none;
}
*/

/* HEADINGS / TEXT STYLES */
.recording-artist {
  font-family: cheddar-gothic-slab, sans-serif;
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
}
.recording-title {
  font-family: cheddar-gothic-slab, sans-serif;
  font-size: 1.2rem;
  margin: 0 0 0.3rem;
}
.recording-year {
  font-family: cheddar-gothic-slab, sans-serif;
  font-size: 1rem;
  margin: 0 0 1rem;
}
.recording-description {
  font-family: droid-serif, serif;
  font-size: 0.95rem;
  line-height: 1.4;
}



/* Track listing, credits, etc. */
.track-listing,
.recording-credits {
  margin-top: 1rem;
  font-family: droid-serif, serif;
  font-size: 1vw;
 line-height:1.2vw;
  
}

/* Cover image */
.recording-cover img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1rem;
}

/* Streaming links */
.streaming-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
	
}
.streaming-links li {
  margin-bottom: 0.5rem;
	display:inline-block;
}

.streaming-links a {display:inline-block; border:2px solid black; border-radius:4; padding:5px 10px; margin-right:5px; font-size:1vw; line-height:1vw; color:#000; text-decoration:none; font-family: din-condensed, sans-serif; }

h3.recording-title, .recording-grid h4, .recording-grid h3 {font-family: din-condensed, sans-serif}

.track-listing li, .recording-credits li, .col5 li { margin-bottom:0 !important; } 
.track-listing, .recording-credits, .col5 { margin-bottom:0 !important; } 

/* MOBILE: SINGLE COLUMN */
@media (max-width: 768px) {
  .recording-grid {
    grid-template-columns: 1fr; /* collapse to 1 column */
  }
  .recording-grid .column {
    margin-bottom: 1rem;
  }
}




/* ==========================
   OTHER RECORDINGS GRID
   ========================== */
.other-recordings-section {
  background: #f5e1c5; /* or your choice */
  padding: 2rem 1rem;
  text-align: center;
}

.other-recordings-section h2 {
  font-family: cheddar-gothic-slab, sans-serif;
  font-size: 2rem;
  color: #b58e33;
  margin-bottom: 1.5rem;
}

/* The grid container */
.other-recordings-grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
}

/* Force up to 6 columns on large screens */
@media (min-width: 1400px) {
  .other-recordings-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* The individual “card” */
.recording-card {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  overflow: hidden;
  padding: 1rem;
  text-align: center;
}

.recording-card img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.5rem;
}

.recording-card h3 {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  color: #000;
  font-family: cheddar-gothic-slab, sans-serif;
}

.recording-card .year {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: #666;
}

/* Adjust columns on smaller screens */
@media (max-width: 768px) {
  .other-recordings-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}






/* ========================================
   MOBILE MENU: OFF-CANVAS LEFT SLIDE
   ======================================== */

/* At screens below 1100px, hide the normal horizontal nav and use off-canvas */
@media screen and (max-width: 1100px) {

  /* 1) Hide the normal horizontal menu layout. */
  .primary-menu {
    display: block; /* We'll manually control with .is-open */
  }
	
	.logo-container {margin:0 auto;}
	.site-logo {
  max-width: 150px; /* Adjust as desired */
  display: inline-block;
		text-align:center;
		
}

	
	

  /* 2) Primary Nav: off-canvas panel on the left */
  .primary-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;            /* full viewport height */
    width: 100%;               /* or 80%, or a fixed width like 300px */
  
    background-color: #000;   /* black background to match your theme */
    transform: translateX(-100%); 
    transition: transform 0.3s ease;
    overflow-y: auto;         /* scroll if menu is tall */
    z-index: 9999;            /* on top of other elements */
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* left-align items inside */
    padding: 2rem 1rem;
  }

  /* When toggled open, the panel slides in */
  .primary-nav.is-open {
    transform: translateX(0);
  }

  /* Large fonts for the menu links */
  .primary-menu li {
    margin: 1rem 0;
	  width:100%;
  }
  .primary-menu li a {
    font-size: 2rem;      /* Large text */
    color: #e8d29f;       /* Matches your brand color? */
    text-decoration: none;
  }
	
	li#menu-item-116 a {padding:3vw;}

  /* Hide contact button or place it inside the off‐canvas nav? 
     If you want it hidden, do this: */

  /* The hamburger icon (mobile-menu-toggle) is visible; place or style as needed */
  .mobile-menu-toggle {
    display: block;
    position: absolute;    /* example, if you want to place it top-left */
    top: 0;
    left: 10px;
    font-size: 2rem;
    color: #e8d29f;
    cursor: pointer;
    z-index: 10000;        /* above the nav panel */
  }
	
	
	body {font-family: droid-serif, serif; margin-top:67px;}
	
	
	
.slide img {
        width: 100%;
        height: 100vw;
        object-fit: cover;
    }
	
	
	
	p, li {font-size:4vw; line-height:5vw;}
	
	.header-top-black {height:0;}
	
	.caption {top:auto; bottom:0; max-width: 100%; background-color:hsla(0,0%,0%,0.76); text-align:center; right:0;}
	
	.caption h1 {font-size:6vw; line-height:6.5vw;}
	
	
	
	h1 {font-size:7vw; line-height:8vw;}
	
	.caption p {padding-left:0;}
	
	.recording-info h3 a {font-size:4vw; line-height:5vw;}
	.recording-info h3 {margin-top:0; padding-top:0;}
	
	.single-recording h1 {padding-top:24vw;}
	
	.recording-tabs .tab span, .recording-tabs .black-tab, #notes-button {letter-spacing:normal; font-size:5vw !important; line-height:5vw;} 
	
	.recording-artist {text-align:center; margin-top:2vw;}
	
	h3.recording-title, .recording-grid h4, .recording-grid h3, .streaming-links a, .track-listing, .recording-credits {font-size:4vw; line-height:5vw;}
	
	.recording-grid .column {margin-bottom: 0;}
	
	.recording-grid h3, .recording-grid h4 {font-size:6vw;}
	
	.recording-grid h4 {margin-bottom:2vw;}
	
	.homepage-bio p {font-size:4.4vw; line-height:6vw; text-align:left;}
	
	.site-footer p {font-size:4vw; line-height:5vw;}
	
	.recording-grid .column {padding-bottom:0;}
	
	.recording-artist {font-size:8vw; line-height:7vw;}
	
	.credits-artists-inner {padding:2vw;}
	
	.page-template-page-credits h1 {
padding-top: 24vw;
}
	
	.page-template-page-history h1, .page-template-page-photos h1 {padding-top: 24vw;}
	
	.credits-artists-list li, .page-template-page-history .timeline-year, .contact-col h2 {font-size:5vw !important; line-height:6vw;}
	
	.contact-col p, .contact-col a {font-size:5vw !important; line-height:6vw;}
	
	.history-content p {margin-bottom:4vw;}
	
	.page-template-page-contact h1 {padding-top:10vw;}
		li#menu-item-116 a {
padding: 0;
}
	
}



@media screen and (min-width: 1735px) {
	
	.header-wood {
background: url("images/wood-texture.png") center center no-repeat;
background-size: 100% 55%;
		background-position: top center;
	}
		
}




@media screen and (min-width: 1100px) {
	li#menu-item-116 a  {
	text-shadow: none;
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #b58e33; /* Example gold-ish color */
  color: #000; 
  text-decoration: none;

  border-radius: 4px;
  transition: background-color 0.2s ease;

}
	

	
}