/*==============================================================
Theme Name: ObsidianOne
Description: Minimalist Custom WordPress Theme
Author: Serge Bourgouin
Author URI: https://sergebourgouin.com/obsidian-one/
Version: 1.0
==============================================================*/

/*--------------------------------------------------------------
 UNIVERSAL BOX-SIZING RULE
--------------------------------------------------------------*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
 SMOOTH SCROLL FOR IN-PAGE LINKS
--------------------------------------------------------------*/
/* Smooth scroll - JS code overwrites this for back to top */
html {
  scroll-behavior: smooth;
  overflow-y: scroll;   /* prevents content from shifting when page is short and no scrollbar appears */
}

/*--------------------------------------------------------------
 BASE STYLES
--------------------------------------------------------------*/

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  margin: 0;
  line-height: 1.4;
  background-image: url('images/background-ninth-75.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
}

/*--------------------------------------------------------------
 SITE WRAPPER
--------------------------------------------------------------*/

.site-wrapper {
  background-color: #ffffff;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.site-banner {
  max-width: 1000px;
  margin: 0 auto;
}

.site-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/*--------------------------------------------------------------
 .SITE-CONTAINER
--------------------------------------------------------------*/

.site-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;   /* Spacing between <main> and <aside> (sidebar) */
  padding: 2rem 0;
}

.site-container main {
  flex: 3;
  padding: 0 1rem;
}

.site-container main {
  font-size: 0.9rem;   /* Make text smaller in <p> elements in <main> */
}

.site-container aside.sidebar {
  flex: 1;
}

.site-container main,
.site-container aside.sidebar {
  margin: 0;
}

.site-container aside.sidebar > *:first-child {
  margin-top: .25rem;   /* Because first <p> and sidebar <img> didn't align */
}

.site-container main p:first-child {
  margin-top: 0;   /* Remove default top margin on the first <p>  */
}

.intro-paragraph {
  margin: 0 0 2rem 0;   /* Bottom margin for first <p> of home and videos pages */
}

/*--------------------------------------------------------------
 SIDEBAR STYLES
--------------------------------------------------------------*/

.sidebar {
  max-width: 130px;
  width: 100%;
}

.sidebar-title {
  font-weight: 700;
  font-size: 1em;
  margin: 0 0 0.5rem 0;   /* Add spacing under 'OBSIDIAN ONE' */
}

.sidebar-links {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.sidebar-links li {
  margin-bottom: 0.5rem;   /* Space between links on sidebar */
}

.sidebar-thumbnail {
  width: 100%;
  cursor: pointer;
  display: block;
  margin-bottom: 1rem;
}

/*--------------------------------------------------------------
 LINK STYLES
--------------------------------------------------------------*/

.intro-paragraph a,
.sidebar-links a,
.album-description a,
.back-to-top a,
.album-flex .album-title,
.site-footer a {
  color: #458bda;
  text-decoration: none;   /* Remove default underline of links */
  font-weight: bold;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.intro-paragraph a:hover,
.sidebar-links a:hover,
.album-description a:hover,
.back-to-top a:hover,
.album-flex a:hover .album-title,
.site-footer a:hover {
  color: #0f0f0f;
  text-decoration: underline;
}

/*--------------------------------------------------------------
 FAVICON STYLES
--------------------------------------------------------------*/

.sidebar-links li a {
  position: relative;
  display: inline-block;
  padding-left: 32px; /* space for icon */
  line-height: 24px;
  height: 24px;
  vertical-align: middle;
}

.sidebar-links li a::before {
  content: "";
  position: absolute;
  left: 0;
  /*top: 0;*/
  top: 50%;   /* center vertically relative to text */
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url('images/sprite.png');
  background-repeat: no-repeat;
  background-size: 96px 24px;   /* scale sprite to 4 icons at 24px each */
}

/*--------------------------------------------------------------
 FAVICON BACKGROUND POSITIONS
--------------------------------------------------------------*/

.sidebar-links li:nth-child(1) a::before { /* Bandcamp */
  background-position: 0 0;
}

.sidebar-links li:nth-child(2) a::before { /* YouTube */
  background-position: -24px 0;
}

.sidebar-links li:nth-child(3) a::before { /* Donate */
  background-position: -48px 0;
}

.sidebar-links li:nth-child(4) a::before { /* Contact */
  background-position: -72px 0;
}

/*--------------------------------------------------------------
 (via Bandcamp) TEXT STYLE
--------------------------------------------------------------*/
.sidebar-links li .via-bandcamp {
  display: block;
  font-size: 0.75em;
  color: #888888;
  margin-top: -0.2em;
  letter-spacing: 0.03em;
}

/*--------------------------------------------------------------
 HEADING STYLES
--------------------------------------------------------------*/

h1 {
  margin-top: 0rem;  
}

h2 {
  margin-top: 2.5rem;   
  margin-bottom: 1rem; 
}

/*--------------------------------------------------------------
 SIDEBAR MODAL IMAGE
--------------------------------------------------------------*/

.sidebar-image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 15, 15, 0.9);
  justify-content: center;
  align-items: center;
  overflow: auto;
  padding: 1rem;
  box-sizing: border-box;
}

.sidebar-image-modal .modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.sidebar-image-modal .modal-content img {
  max-width: 80vh;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  padding: 0 0.25rem;
  background: rgba(0, 0, 0, 0.3);
  line-height: 1;
  user-select: none;
  z-index: 10000;
}

/*--------------------------------------------------------------
 PRIMARY MENU (TOP MENU)
--------------------------------------------------------------*/

.primary-menu {
  margin: 0 -1.25rem;   /* stretch top menu bar across full width */
}

.primary-menu .menu {
  display: flex;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f2f2f2;
  padding: 0 1.25rem;   /* shift menu items into alignment with <p> below */
}

.primary-menu .menu li {
  margin: 0;
  padding: 0;
  color: #458bda;
  font-weight: bold;
  transition: color 0.3s ease;
}

.primary-menu .menu li a {
  text-decoration: none;
  color: #458bda;
  padding: 0.5rem 1rem;   /* add thickness to top menu bar */
  display: block;         /* ensures padding works vertically */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.primary-menu .menu li a:hover {
  background-color: #0f0f0f;
  color: #f1f1f1;
}

.primary-menu .menu .current-menu-item a {
  background-color: #0f0f0f;
  color: #ffffff;
}

/*--------------------------------------------------------------
 ALBUM SECTION (HOME PAGE)
--------------------------------------------------------------*/

section.album,
section.video {
  margin-bottom: 5rem;   /* Add margin on bottom of "album" & "video" sections */
}

section.album:last-of-type,
section.video:last-of-type {
  margin-bottom: 1rem;   /* No bottom margin for last "album" & "video" section */
}

.album-layout {
  display: flex;
  flex-direction: column-reverse;   /* Image shows first, embed second */
}

.album-embed,
.album-cover {
  flex: 1 1 50%;
}

.album-embed iframe {
  aspect-ratio: 1 / 1;   /* Maintains square layout */
  width: 100%;
  border: none;
  display: block;
  position: relative;
  z-index: 1;
}

.album-cover img {
  width: 100%;
  height: auto;
  display: block;
}

.album-description {
  border-left: 1px solid #ddd;   /* Match iframe's native border */
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 1.5rem 1.25rem 1rem 1.25rem;
  background-color: #ffffff;
  position: relative;
  top: -2px;     /* Slides box up by 2 pixels to hide bottom border of iframe embed */
  z-index: 10;   /* Higher than 1, to safely sit above neighboring elements */
  margin-top: 0; /* Recommended when adding in white space below embed on mobile */
}

.album-description p:last-child {
  margin-bottom: 0;
}

section.video .album-description {
  top: -7px;   /* Removes -2px used on the home page to hide border of iframe embed */
  border-bottom: 1px solid #ddd;    /* Adds the missing bottom border on Videos page */
  border-top: 0;   /* Remove top border positioned on bottom border of YouTube embed */
}

.album-links {
  text-align: center;
  margin-top: 1.5rem;
}

.album-links a {
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 1rem;
  background-color: #f2f2f2;
  color: #458bda;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.album-links a:hover {
  background-color: #0f0f0f;
  color: #ffffff;
}

/*--------------------------------------------------------------
 ALBUM FLEX GRID (DESKTOP 4-COLUMN FLEX - HOME PAGE
--------------------------------------------------------------*/
.album-flex {
  display: flex;           
  flex-wrap: wrap;       /* allow items to flow onto new rows */
  gap: 3%;               /* horizontal & vertical spacing between items */
  margin-bottom: 2.5rem; /* gap below flex grid */
}

.album-flex a {
  flex: 0 0 22.75%;      /* 4 columns: slightly less than 25% to account for gap */
  display: block;
  text-decoration: none;
  margin-bottom: 1rem;   /* vertical spacing */
}

.album-flex img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.25rem; /* adds space between image and title text */
}

/*--------------------------------------------------------------
 SITE FOOTER
--------------------------------------------------------------*/
.site-footer {
  background-color: #f2f2f2; /* same light grey as top menu and album links */
  text-align: center;        
  color: #0f0f0f;            /* same dark text used elsewhere */
  font-size: 0.9rem;         /* matches main content text size */
  margin: 0 -1.25rem;        /* stretch footer to edges of site-wrapper */
  padding: 0.5rem 1.25rem;     /* top/bottom padding + align with main content horizontally */
}

/*--------------------------------------------------------------
 'VIDEOS' PAGE (EMBEDDED YOUTUBE VIDEOS)
--------------------------------------------------------------*/
.video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/*--------------------------------------------------------------
 CONTACT FORM
--------------------------------------------------------------*/
.antispam {
  display: none;
}

.contact-form {
  width: 100%;
  max-width: 100%;
  margin: 0 0 2rem 0;
  font-size: 1rem;
}

.contact-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form input[type="submit"] {
  width: 100%;
  padding: 0.35rem 0.6rem;
  margin-bottom: 1rem;
  border: 1px solid #333;
  background: #fff;
  color: #000;
  font-size: 1rem;
  line-height: 1.2;
  box-sizing: border-box; /* prevents padding from breaking layout */
}

.contact-form input[type="submit"] {
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 0.6rem 1rem;  /* Keep submit button slightly taller for accessibility */
}

.contact-form input[type="submit"]:hover {
  background: #444;
}

/*--------------------------------------------------------------
 RESPONSIVE LAYOUT
--------------------------------------------------------------*/

/* Remove horizontal padding on screens <= 450px */
@media (max-width: 450px) {
  .site-container main,
  .site-container aside {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Align top menu 'Home' with 'intro-paragraph' on screens <= 450px */
@media (max-width: 450px) {
  .primary-menu .menu {
    padding-left: 0.3rem;   /* adjust until Home lines up perfectly */
    padding-right: 0;       /* keep right padding normal */
  }
}

/* Remove left padding on <ol> in "album-description" on screens <= 450px */
@media (max-width: 450px) {
  .album-description ol {
    padding-left: 1.25rem;
  }
}

/*  3 columns instead of 4 for "album-flex" section on screens <= 450px */
@media (max-width: 450px) {
  .album-flex a {
    flex: 0 0 31%;       /* 3 columns, gap handles spacing */
    display: block;
    margin-bottom: 1rem; /* same vertical spacing as desktop */
  }
}

/* TEMPORARY FIX: TOP MENU DISPLAYS ON 2 ROWS FOR VERY SMALL SCREENS. REPLACE WITH HAMBURGER MENU WHEN NEEDED */
@media (max-width: 450px) {
  .primary-menu .menu {
    flex-wrap: wrap;
  }
}

/* Reduce left padding for bullet lists in intro-paragraph on small screens */
@media (max-width: 450px) {
  .intro-paragraph ul {
    padding-left: 1rem; 
  }
}

/* Display "album-embed" and "album-cover" side-by-side on screens >= 730px */
@media (min-width: 730px) {
  .album-layout {
    flex-direction: row;
  }
}

/* Increase margin of the <p> inside "album-description" on screens >= 730px */
@media (min-width: 730px) {
  .album-description {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Stack <aside> below <main> on screens <= 919px */
@media (max-width: 919px) {
  .site-container {
    flex-direction: column;
  }

  .sidebar {
    padding: 0 1rem;
    max-width: none;
  }

  .sidebar-thumbnail {
    pointer-events: none;
    cursor: default;
  }
}

/* Display <main> and <aside> side-by-side on screens >= 920px */
@media (min-width: 920px) {
  .site-container {
    display: flex;
    flex-direction: row;
    padding-right: 1rem;
  }

  .site-container main {
    padding-left: 1rem;
  }
}