@charset "UTF-8";
/*!
Theme Name: BMM Base S
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bmm_base_s
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

BMM Base S is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

*/

/* Variables
--------------------------------------------- */

html {
  scroll-behavior: smooth;
}

:root {
  --color-main: #FE0100;
  --color-light: #861C0E; 
  --color-accent-1: #6A3D2A;
  --color-accent-2: #E8DBC7;
  --color-white: #fff;
  --color-black: #222;

  --color-background: #FFFDF8;
  --color-text: #4A4A4A;

  --font-heading: "IBM Plex Sans", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-display: "IBM Plex Sans", sans-serif;
  --font-writing: "Protest Riot", cursive;

  --max-width: 1300px;
  --padding: 40px;

  --font-size-h1: calc(8px * 12);
  --font-size-h2: calc(8px * 8);
  --font-size-h3: calc(8px * 4.5);
  --font-size-h4: calc(8px * 3);
  --font-size-h5: calc(8px * 2.25);
  --font-size-h6: calc(8px * 2);

  --font-weight-extra-bold: 800;
  --font-weight-bold: 600;
  --font-weight-normal: 400;

  /* Line Heights */
  --line-height-tight: 0.9em;
  --line-height-medium: 1.2em;
  --line-height-normal: 1.6em;

  /* Spacing System */
	--spacing-xs: 0.25rem;    /* 4px */
	--spacing-sm: 0.5rem;     /* 8px */
	--spacing-md: 1rem;       /* 16px */
	--spacing-lg: 1.5rem;     /* 24px */
	--spacing-xl: 2rem;       /* 32px */
	--spacing-2xl: 3rem;      /* 48px */
	--spacing-3xl: 4rem;      /* 64px */
	--spacing-4xl: 5rem;      /* 80px */
	--spacing-5xl: 6rem;      /* 96px */
	
  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.01em;

  --light-border: 1px solid var(--color-accent-2);
  --brown-border: 1px solid var(--color-accent-1);

  --light-glow: drop-shadow(-5px 5px 5px rgba(0, 0, 0, 0.5)) 
                drop-shadow(0 0 20px var(--color-accent-2));
  --blue-glow: drop-shadow(0 0 20px rgba(0, 255, 255, 1));
  --button-box-shadow-normal: 3px 3px 0 #3b2e1c;
  --button-box-shadow-active: 2px 2px 0 #3b2e1c;
  --button-box-shadow-hover: 4px 4px 0 #3b2e1c;

}



/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
  color: var(--color-text);
  font-family: var(--font-body), sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-family: var(--font-heading), sans-serif;
  margin: 0 0 calc(var(--padding)/2) 0;
  font-weight: var(--font-weight-normal);
  color: var(--color-accent-1);
}

h1 {
  font-family: var(--font-heading), sans-serif;
  font-size: var(--font-size-h1);
  line-height: var(--line-height-tight);
  /* text-transform: uppercase; */
  font-weight: var(--font-weight-extra-bold);
  letter-spacing: var(--letter-spacing-tight);
  /* letter-spacing: -0.01em; */
}

.huge {
  font-family: var(--font-display), sans-serif;
  display: inline-block;
  transform: translateY(-0.1em) rotate(-5deg);
  /* font-size: 0.8em; */
  letter-spacing: normal;
  font-weight: var(--font-weight-normal);
}

h2 {
  /* text-transform: uppercase; */
  font-size: var(--font-size-h2);
  /* font-weight: 400; */
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  /* margin-bottom: 0.3em; */
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-medium);
  letter-spacing: var(--letter-spacing-tight);
}

h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-medium);
}

h5 {
  font-size: var(--font-size-h5);
  /* margin-bottom: 0; */
}

h6 {
  /* font-family: var(--font-body); */
  font-size: var(--font-size-h6);
  /* font-weight: 300; */
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-normal);
  /* color: var(--color-accent-1); */
}

p {
  margin-top: 0;
  margin-bottom: calc(var(--padding) / 2);
  /* margin-bottom: 1em; */
  line-height: 1.7em;
}

p:last-child {
  margin-bottom: 0;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: var(--line-height-normal);
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

a {
  /* text-decoration: none; */
}

.underline {
  position: relative;
  display: inline-block;
}

.highlight {
  color: var(--color-accent-1);
  /* font-weight: 600; */
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: 200;
  font-style: normal;
  font-size: 70px;
  line-height: 1;
  display: inline-block;
  text-decoration: inherit;
  text-transform: none;
  color: var(--color-accent-1);
  /* vertical-align: -0.125em; */
}

/* Elements
--------------------------------------------- */

body {
  background-color: var(--color-background);
  color: var(--color-text);
  /* font-size: 18px; */
  overflow-x: hidden;
}

hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

.timeline-description hr {
  margin: 0.5em 0;
}

ul,
ol {
  margin: 0 0 0 0;
  padding-left: 0;

  & li {
    margin-bottom: 0.5em;
  }

  & li::marker {
    color: var(--color-accent-2);
  }
}

ul {
  list-style: square;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/* Links
--------------------------------------------- */
a {
  color: var(--color-main);
  text-decoration: none;
  /* font-weight: 800; */
}
a:hover,
a:focus,
a:active {
  color: inherit;
  text-decoration: unset;
}
a:focus {
  outline: unset;
}
a:hover,
a:active {
  outline: unset;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  /* border: 1px solid; */
  /* border-color: #ccc #ccc #bbb; */
  /* border-radius: 3px; */
  /* background: #e6e6e6; */
  /* color: rgba(0, 0, 0, 0.8); */
  /* line-height: 1; */
  /* padding: 0.6em 1em 0.4em; */
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  /* border-color: #ccc #bbb #aaa; */
}
button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
  border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: var(--color-black);
  border: 1px solid var(--color-main);
  border-radius: 0px;
  padding: 15px 20px;
  line-height: 1em;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #111;
}

select {
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
}

div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form textarea {
  border: unset !important;
  border-radius: !important;
}
div.wpforms-container-full .wpforms-form label.wpforms-error {
  color: #fff !important;
}
div.wpforms-container-full .wpforms-form .button {
  border: 1px solid !important;
  padding: 10px 30px !important;
  font-size: 20px !important;
  text-decoration: unset !important;
  color: #fff !important;
  background: unset !important;
  transition: 0.3s;
}
div.wpforms-container-full .wpforms-form .button:hover {
  background: #fff !important;
  color: var(--color-main) !important;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* Navigation
--------------------------------------------- */
.main-navigation,
ul.left-menu,
ul.right-menu {
  margin: 0;
  padding: 0;
}
.main-navigation li a,
ul.left-menu li a,
ul.right-menu li a {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
  letter-spacing: 0.02em;
}
.main-navigation li:hover > a,
ul.left-menu li:hover > a,
ul.right-menu li:hover > a {
  color: var(--color-accent-1);
}
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a,
ul.left-menu li.current-menu-item > a,
ul.left-menu li.current_page_item > a,
ul.right-menu li.current-menu-item > a,
ul.right-menu li.current_page_item > a {
  font-weight: 800;
  color: var(--color-accent-1);
}
.main-navigation li.menu-item-has-children > a:after,
ul.left-menu li.menu-item-has-children > a:after,
ul.right-menu li.menu-item-has-children > a:after {
  content: " ▼";
  font-size: 0.7em;
}
.main-navigation ul.sub-menu,
ul.left-menu ul.sub-menu,
ul.right-menu ul.sub-menu {
  pointer-events: none;
  opacity: 0;
  transition: 0.3s;
  list-style: none;
  margin: 0;
  padding-left: 0;
  width: 150px;
  text-align: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  padding-top: 15px;
}
.main-navigation ul.sub-menu:before,
ul.left-menu ul.sub-menu:before,
ul.right-menu ul.sub-menu:before {
  content: "▼";
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(180deg);
  transform: translateX(-50%) rotate(180deg);
  top: 0px;
  color: var(--color-main);
}
.main-navigation ul.sub-menu li,
ul.left-menu ul.sub-menu li,
ul.right-menu ul.sub-menu li {
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--color-main);
}
.main-navigation ul.sub-menu li:hover,
ul.left-menu ul.sub-menu li:hover,
ul.right-menu ul.sub-menu li:hover {
  background: var(--color-light);
}
.main-navigation ul.sub-menu li,
ul.left-menu ul.sub-menu li,
ul.right-menu ul.sub-menu li {
  margin: -1px !important;
}
.main-navigation ul.sub-menu a,
ul.left-menu ul.sub-menu a,
ul.right-menu ul.sub-menu a {
  font-size: 16px;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.2em;
}
.main-navigation li,
ul.left-menu li,
ul.right-menu li {
  position: relative;
  list-style: none;
  margin-bottom: 0px;
}
.main-navigation li:hover > ul.sub-menu,
ul.left-menu li:hover > ul.sub-menu,
ul.right-menu li:hover > ul.sub-menu {
  display: block;
  pointer-events: all;
  opacity: 1;
  transition: 0.3s;
}
.main-navigation a,
ul.left-menu a,
ul.right-menu a {
  display: block;
  text-decoration: none;
  padding: 0 15px;
}
/* .taptap-by-bonfire .sub-menu a {
  padding: 3px 0;
} */


/* Menu Layout Styles
--------------------------------------------- */

/* Left Menu Layout */
.menu-layout-left .menu-left-layout {
  display: flex;
  align-items: center;
  padding: 15px 0;
  width: 100%;
  position: relative;
}

.menu-layout-left .menu-left-layout .site-branding {
  margin-left: 20px;
  margin-right: auto;
  flex-shrink: 0;
}

.menu-layout-left .menu-left-layout .site-branding img {
  max-height: 70px !important;
  width: auto !important;
  padding: 0 !important;
  max-width: none !important;
}

.menu-layout-left .menu-left-layout .main-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.menu-layout-left .menu-left-layout .main-menu li {
  position: relative;
}

.menu-layout-left .menu-left-layout .main-menu a {
  display: block;
  text-decoration: none;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: calc(8px * 3);
  letter-spacing: 0.02em;
  padding: 12px 20px;
  transition: all 0.3s ease;
  /* border-radius: 4px; */
}

.menu-layout-left .menu-left-layout .main-menu a:hover {
  color: var(--color-accent-2);
}

/* Sub-menu styles for left layout */
.menu-layout-left .menu-left-layout .main-menu ul.sub-menu {
  pointer-events: none;
  opacity: 0;
  transition: 0.3s;
  list-style: none;
  margin: 0;
  padding-left: 0;
  width: 150px;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 15px;
}

.menu-layout-left .menu-left-layout .main-menu ul.sub-menu:before {
  content: "▼";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  top: 0px;
  color: var(--color-light);
}

.menu-layout-left .menu-left-layout .main-menu ul.sub-menu li {
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--color-light);
  margin-right: 0;
}

.menu-layout-left .menu-left-layout .main-menu ul.sub-menu li:hover {
  background: var(--color-main);
}

.menu-layout-left .menu-left-layout .main-menu ul.sub-menu a {
  font-size: 16px;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.2em;
}

.menu-layout-left .menu-left-layout .main-menu li:hover > ul.sub-menu {
  display: block;
  pointer-events: all;
  opacity: 1;
  transition: 0.3s;
}

/* Hide default menu bar when left layout is active */
.menu-layout-left .menu-bar:not(.menu-left-layout):not(.menu-mobile) {
  display: none;
}

/* Hide left layout when middle layout is active */
.menu-layout-middle-with-centered-logo .menu-left-layout {
  display: none;
}


.menu-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* flex: auto; */
  max-width: var(--max-width);
  margin: var(--padding) auto;
  /* padding-bottom: var(--padding); */
  /* border-bottom: 1px solid var(--color-white); */
}
.menu-bar span {
  padding: 0 15px;
  font-size: 18px;
}
.menu-bar span svg {
  height: 30px;
  position: absolute;
  margin-left: 10px;
  margin-top: -3px;
}
.menu-bar .menu-left-menu-container,
.menu-bar .menu-right-menu-container {
  /* margin-top: 25px; */
  padding: 0;
  flex: 3;
  width: 100%;
  margin: auto;
}
.menu-bar .left-menu,
.menu-bar .right-menu {
  display: flex;
}
.menu-bar .left-menu {
  justify-content: flex-end;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

.site-main .comment-navigation,


/* Pagination Styles*/
.pagination {
  text-align: center;
  margin-top: 60px;
}

.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pagination .page-numbers {
  display: inline-block;
  min-width: 45px;
  height: auto;
  line-height: 45px;
  padding: 0 calc(var(--padding)/2);
  background: var(--color-white);
  border: 2px solid var(--color-accent-1);
  color: var(--color-accent-1);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  transition: all 0.3s ease;
  text-align: center;
}

.pagination .page-numbers:hover {
  background: var(--color-accent-1);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.pagination .page-numbers.current {
  background: var(--color-accent-1);
  color: var(--color-white);
  border-color: var(--color-accent-1);
  cursor: default;
}

.pagination .page-numbers.dots {
  border: none;
  background: none;
  cursor: default;
  color: var(--color-text);
}

.pagination .page-numbers.dots:hover {
  transform: none;
  box-shadow: none;
  background: none;
}

/* Previous/Next buttons */
.pagination .prev,
.pagination .next {
  font-weight: 700;
}

/* Old navigation fallback */
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}


/* Posts and pages
--------------------------------------------- */

.sticky {
  display: block;
}

.post,
.page {
  margin: 0;
  position: relative;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

.site-header {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: end;
  width: 100%;
}

.header-category a {
  color: var(--color-accent-2);
  text-decoration: none;

  &:hover {
    color: var(--color-white);
  }
}


button,
.button {
  display: inline-block;
  border: 1px solid;
  padding: 15px 30px;
  font-family: var(--font-heading);
  /* font-size: 20px; */
  line-height: 1.3em;
  text-decoration: unset;
  color: var(--color-white) !important;
  background: var(--color-main);
  /* font-weight: 500; */
  /* border-radius: 8px; */
  /* margin-top: 1rem; */
  font-size: 1.1em;
  /* font-weight: 900; */
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: 0.3s;

  &:hover {
    background: var(--color-light);
    color: var(--color-white) !important;
  }
}

.button-alt {
  color: var(--color-white) !important;
  background: unset;

  &:hover {
    background: var(--color-white);
    border: 1px solid var(--color-white);
    color: var(--color-main) !important;
    transition: 0.3s;
  }
}

/* Utility Classes */

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;
  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;
  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
} 

.bold {
  font-weight: var(--font-weight-bold);
}

.wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding);
}

.content {
  padding: var(--padding);
  text-wrap: balance;
}

.content .button {
  display: inline-block;
  width: auto;
}

.button-content{
  padding: 0 var(--padding) var(--padding) var(--padding);
  text-align: center;
}

.content .button {
  display: inline-block !important;
  width: auto !important;
}

.button-content .contact-envelope-wrapper{
margin-top: 0;
}

.page-bg {
  position: absolute;
  top: 80px;
  left: -50vw;
  width: 100vw;
  height: 100vh;
  z-index: -1;

  & img {
    max-width: unset;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(1) opacity(0.2);
  }

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    opacity: 1;
  }
}

.site-branding {
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-branding img {
  height: auto;
  width: 300px;
  max-width: unset;
  /* padding: calc(var(--padding)/2); */
}

.menu-mobile {
  display: none;
}

.vertical {
  pointer-events: none;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: hidden;
}
.vertical h1 {
  opacity: 0.05;
  white-space: nowrap;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  position: absolute;
  top: -100px;
  left: -30px;
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
  z-index: 50;
  font-size: 200px;
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
/* Accessibility
--------------------------------------------- */
/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  /* border-radius: 3px; */
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}


/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}
.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: block;
  line-height: 0;
}

.custom-logo {
  display: block;
}




/* Hero and Top Section
--------------------------------------------- */

.top {
  /* max-width: 1300px; */
  padding: var(--padding) 0px 0px 0px;
  margin: 0 auto;
  margin-top: 0 !important;
  /* color: var(--color-text); */
  position: relative;
  /* overflow: hidden; */

  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: var(--color-light); */
    z-index: 1;
    opacity: 0.4;
  }
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 3;
  }
  .huge {
    font-size: 18vw;
    position: absolute;
    z-index: 4;
    /* top: 50%; */
    /* left: 50%; */
    transform: translate(-50%, 0%) rotate(-5deg);
    opacity: 0.7;
    text-transform: unset;
    color: var(--color-white);
    font-weight: 400;
    font-optical-sizing: auto;
    letter-spacing: -0.02em;
    z-index: -1;
    /* mix-blend-mode: difference; */
  }
  & img.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1) contrast(1.5) grayscale(1);
    /* mix-blend-mode: exclusion; */
    mix-blend-mode: multiply;
  }

  .content {
    margin: 0 auto;
    /* padding-bottom: calc(var(--padding)/5) !important; */
    position: relative;
    z-index: 4;
    color: var(--color-white);
    text-align: center;
    /* max-width: 700px; */
    max-width: var(--max-width);
    display: flex;
    align-items: flex-start;
    /* gap: 4rem; */
    padding: 0 var(--padding);

    & h1 {
      /* text-transform: lowercase; */
      font-weight: 400;
      margin-bottom: 2rem;
      /* color: var(--color-accent-1); */
    }

    /* & h5 {
      max-width: 400px;
      margin-top: 2rem;
    } */
  }

  .hero-left {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .hero-left h1 {
    margin-bottom: 0;
    letter-spacing: -0.03em;
  }

  .hero-left h3.subtitle {
    margin: 0;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-h3);
    line-height: var(--line-height-medium);
    opacity: 0.9;
  }

  .hero-left h5.intro {
    margin: 0;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-h5);
    line-height: var(--line-height-normal);
    opacity: 0.85;
    max-width: 500px;
  }

  .hero-left .button,
  .hero-left a.button {
    background: var(--color-accent-1);
    border-color: var(--color-accent-1);
    color: var(--color-white) !important;
    /* margin-top: 2rem; */
    padding: calc(var(--padding)/2) var(--padding);
    font-size: var(--font-size-h5);
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    white-space: nowrap;
    width: auto;
  }

  .hero-left .button:hover,
  .hero-left a.button:hover {
    background: var(--color-background);
    border-color: var(--color-background);
    /* color: var(--color-accent-1) !important; */
    transform: translateY(-2px);
  }

  .hero-right {
    flex: 1;
    display: flex;
    justify-content: right;
        /* justify-content: center; */
    align-items: flex-start;
  }

  /* No Hero Image - Single Column Layout */
  &.no-hero-image .content {
    flex-direction: column;
    /* text-align: center;
    align-items: center; */
  }

  &.no-hero-image .hero-left {
    /* text-align: center;
    align-items: center; */
    max-width: var(--max-width);
  }

  &.no-hero-image .hero-right {
    display: none;
  }

  .hero-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: auto;
    aspect-ratio: 1 / 1;
    /* transform: translate(0px, -30px); */
  }

  .hero-image-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
  }

  .hero-image-wrapper.has-frame {
    padding: 60px;
    box-sizing: border-box;
  }

  .hero-image-wrapper.has-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .hero-image-wrapper.has-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;
  }

  .hero-image-wrapper.frame-1::before {
    background-image: url('images/frame1.png');
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  }

  .hero-image-wrapper.frame-2::before {
    background-image: url('images/frame2.png');
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  }

  .hero-image-wrapper.frame-3::before {
    background-image: url('images/frame3.png');
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  }

    .hero-image-wrapper.frame-4::before {
    background-image: url('images/frame4.png');
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  }

    .hero-image-wrapper.frame-5::before {
    background-image: url('images/frame5.png');
  }
    .hero-image-wrapper.frame-6::before {
    background-image: url('images/frame6.png');
  }
    .hero-image-wrapper.frame-7::before {
    background-image: url('images/frame7.png');
  }
    .hero-image-wrapper.frame-8::before {
    background-image: url('images/frame8.png');
  }

      .hero-image-wrapper.frame-9::before {
    background-image: url('images/frame9.png');
  }
}

/* Full hero - has bottom padding (when it has an image) */
.top:not(.simple-hero):not(.no-hero-image):has(.hero-image-wrapper) {
  padding-bottom: var(--padding);
}

.home .top {
  padding: var(--padding) 0 0 0;
  text-align: center;

  .content {
    max-width: var(--max-width);
    padding: 0;

    & h1 {
      /* font-weight: 100; */
      color: var(--color-accent-1);
      padding-top: 0em;
      padding-bottom: 0rem;
      border-top: unset;
      border-bottom: unset;
      font-size: calc(8px * 15);
    }

    & h6 {
      color: var(--color-accent-1);
      font-size: var(--font-size-h6);
    }
  }
}

/* Simple Hero - left aligned single column */
.top.simple-hero {
  padding: var(--padding) 0px 0px 0px; /*var(--padding) 0px 0px 0px;*/

  .content {
    display: flex;
    max-width: var(--max-width);
    padding: 0 var(--padding);
    text-align: left;

    h1 {
      color: var(--color-accent-1);
      line-height: var(--line-height-tight);
    }

    .subtitle {
      font-size: var(--font-size-h3);
      color: var(--color-accent-1);
      margin: 0;
      line-height: var(--line-height-medium);
    }

    .hero-left {
      flex: 1;
    }

    .hero-right {
      display: none;
    }
  }
}

.below-top {
  margin-top: calc(var(--padding) * -2);

  .two-columns {
    align-items: start;
    padding: 0 var(--padding);

    .left-column {
      background: var(--color-main);
      color: var(--color-white);
      padding: calc(var(--padding));
    }
  }
  .right-column {
    & img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }
  }
}

.home-hero{
margin: 0 auto; 
max-width: var(--max-width);
padding-bottom: 0px;
text-align: center;
}

.section-title{
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-items-section .section-title{
font-weight: var(--font-weight-normal);
}

.featured-items-section .cards-section{
  padding: 0;
}

.section-title-music{
  margin-bottom: var(--padding);
}

.section-title-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--padding)/2);
  margin-bottom: calc(var(--padding)*2);
}

.section-title-writing{
  text-align: center;
  margin-bottom: 0;
  color: var(--color-black);
  font-family: var(--font-writing);
}

.section-title-arrow {
  width: 80px;
  height: auto;
  display: block;
  transform: rotate(10deg) scaleX(-1);
}

.video-container {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;

  & iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
}

.cards-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--padding) / 2);
  padding:0 var(--padding) 0 var(--padding);
  margin-top: calc(var(--padding) / 2);
}
  .cards-section .card {
    position: relative;
    padding: calc(var(--padding) / 2);
    border: 1px solid var(--color-accent-1);
    /* border-top-width: 5px; */
    transition: 0.3s;
    width: 100%;
    min-width: 0;
    overflow: hidden;

    &:hover {
      background: #eee;
      transform: translateY(-2px);

      .card-link {
        color: var(--color-accent-1);
      }
    }

    .card-link {
      color: var(--color-main);
      text-decoration: unset;
      font-weight: var(--font-weight-bold);
      transition: color 0.3s;
      /* float: right; */
    }
  }

  .news-card .card-img {
    width: calc(100% + var(--padding));
    max-width: calc(100% + var(--padding));
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
    transform: translate(calc(var(--padding) / -2), calc(var(--padding) / -2));
  }

  .cards-section .card-img {
    width: calc(100% + var(--padding));
    max-width: calc(100% + var(--padding));
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
    transform: translate(calc(var(--padding) / -2), calc(var(--padding) / -2));
    display: block;
    pointer-events: none;
  }

.cards-section:has(.news-card) {
  grid-template-columns: repeat(3, 1fr);
}

/* News card clickable wrapper */
.news-card .card-link-wrapper {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.news-card .card-link-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.news-card .card-link-wrapper:hover,
.news-card .card-link-wrapper:focus {
  text-decoration: none;
  color: inherit;
}

/* 
.news-card .card-link-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
} */

/* Ensure card content stays within bounds */
.news-card {
  display: flex;
  flex-direction: column;
}

/* Card categories */
.card-categories {
  display: flex;
  flex-wrap: wrap;
  margin: 0px 12px 8px 0px;
  align-items: center;
}

.card-category-link {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background-color: var(--color-accent-2);
  color: var(--color-accent-1);
  font-size: var(--font-size-h6);
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: var(--font-weight-normal);
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
  height: fit-content;
  margin: 0px 6px 6px 0px;
  position: relative;
  z-index: 10;
}

.card-category-link:last-child {
  margin-right: 0;
}

.card-category-link:hover {
  background-color: var(--color-main);
  color: var(--color-background);
  transform: translateY(-2px);
}

/* Card date */
.card-date {
  margin-bottom: 0.5rem;
  font-size: var(--font-size-h6);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}
.card-author-title {
  margin-bottom: 0.5rem;
}

.card-title {
  margin-bottom: 0;
  line-height: var(--line-height-medium);
}

.read-more{
  margin: 0;
  font-size: var(--font-size-h6);
}
/* Card authors */
.song-author,
.book-author,
.quote-author,
.post-author {
  margin: 0;
}

/* Video centered layout (when no description) */
.video-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) 0;
}

.video-centered .video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-centered .video-embed iframe {
  width: 100%;
  height: 100%;
}

/* Post Type Badge - Different styling */
.card-post-type {
  background-color: var(--color-main);
  color: var(--color-white);
  /* font-weight: var(--font-weight-bold); */
}

.card-post-type:hover {
  background-color: var(--color-accent-1);
  color: var(--color-white);
}

/* Pathway Badge - Different color */
.card-pathway {
  background-color: var(--color-accent-1);
  color: var(--color-white);
}

.card-pathway:hover {
  background-color: var(--color-accent-2);
  color: var(--color-accent-1);
}

.news-card .card-content {
  margin-bottom: var(--spacing-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

section {
  margin-top: calc(var(--padding)*2) !important;
}

.filled-section {
  position: relative;
  padding: calc(var(--padding) * 2);

  & img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
  }

  & img.grayscale {
    display: none;
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 50%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.8) contrast(0.8) grayscale(1);
  }

  /* &:before {
    content: "";
    position: absolute;
    left: 50%;
    width: 50%;
    height: calc(100% - var(--padding) * 0);
    background: var(--color-main);
    z-index: 1;
    mix-blend-mode: multiply;
  } */

  .two-columns {
    color: #fff;
    margin: 0 auto;
    position: relative;
    align-items: stretch;
    gap: 0;
  }
  .right-column {
    position: relative;
    background: var(--color-main);
    border-top: unset !important;

    .content {
      /* padding-top: calc(var(--padding) * 2); */
      /* padding-bottom: calc(var(--padding) * 2); */
      position: relative;
      z-index: 2;

      & h6 {
        color: var(--color-accent-2);
      }
    }
  }
  .button {
    margin-top: calc(var(--padding)/2);
    color: #fff;
    transition: 0.3s;
  }
  .button:hover {
    color: var(--color-main);
    background: #fff;
  }
}

.image-above-content {
  background: var(--color-black);
  color: var(--color-white);
  position: relative;
  display: inline-block;
  width: 100%;
  margin-top: 0px !important;
  z-index: 10;

  .two-column .content {
    padding: 0;
  }

  .highlight {
    color: var(--color-accent-2);
  }

  & h6 {
    color: var(--color-accent-2);
  }

  .two-columns .left-column:has(.content),
  .two-columns .right-column:has(.content) {
    border-top: var(--light-border);
  }

  .cards-section {
    .card {
      border: unset;
      border-top: var(--light-border);
    }
  }

  .image {
    position: relative;

    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50%;
      z-index: 3;
      background: linear-gradient(
        to top,
        var(--color-black) 0%,
        transparent 100%
      );
    }
  }
  & img {
    width: 100%;
    max-width: unset;
    aspect-ratio: 3/1;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .wrapper {
    position: relative;
    z-index: 10;
    max-width: var(--max-width);
    padding: 0 var(--padding);
    margin: 0 auto;
    margin-top: calc(var(--padding) * -2);
  }

  .accordion {
    .accordion-header {
      background: unset;
      max-width: unset;

      &:hover {
        border-top: var(--light-border);
      }
    }
  }
}

.two-columns {
  position: relative;
  z-index: 11;

  .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding);
    max-width: var(--max-width);
    align-items: stretch;
    margin: 0 auto;
  }

  .cards-section {
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
  }

  .left-column.middle,
  .right-column.middle {
    align-self: center;
  }
  .left-column .image,
  .right-column .image {
    height: 100%; /* padding-left: 60px; */
  }

  .left-column img,
  .right-column img {
    height: 100%;
    object-fit: cover;
  }
  &.no-padding .content {
    padding: 0;
  }
}

/* Border only when no background and no checkboxes */
.two-columns:not(.has-background):not(:has(.checkboxes)) .left-column:has(.content),
.two-columns:not(.has-background):not(:has(.checkboxes)) .right-column:has(.content) {
  border-top: var(--brown-border);
}

.right-column img{
  width: 100%;
  max-width: unset;
}

.left-column img{
  max-width: 100%;
}

/* Buttons in flexible columns align left */
.two-columns .left-column .button-content,
.two-columns .right-column .button-content {
  text-align: left;
}

.two-columns .left-column .button-group,
.two-columns .right-column .button-group {
  justify-content: flex-start;
}

.three-columns {
  display: flex;
  gap: 40px;
  width: 100%;
  max-width: var(--max-width);
  padding: 0 50px;
  margin: 0 auto;
  align-items: stretch;

  .first-column,
  .second-column,
  .third-column {
    flex: 0 0 33.333%;
    border: 2px solid var(--color-main);
    background: var(--color-main);
    color: var(--color-white);
    justify-self: center;
  }
  .first-column .content,
  .second-column .content,
  .third-column .content {
    padding: 60px 30px;
  }
}

.single-column {
  /* max-width: 1100px; */
  max-width: var(--max-width);
  padding: 0 var(--padding);
  margin: 0 auto;

  &.video {
    max-width: var(--max-width);
    /* padding: 0; */
    position: relative;
    z-index: 12;
  }

  .content {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Background sections - full width */
.single-column.has-background,
.two-columns.has-background {
  max-width: 100%;
  width: 100%;
  padding: calc(var(--padding) * 2) 0;
  margin: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.single-column.has-background::before,
.two-columns.has-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Dark overlay for readability */
  z-index: 0;
}

.single-column.has-background .wrapper,
.two-columns.has-background .wrapper {
  position: relative;
  z-index: 1;
}

/* Links in sections with backgrounds - white with red hover */
.single-column.has-background a,
.two-columns.has-background a {
  color: var(--color-white);
  transition: color 0.3s;
}

.single-column.has-background a:hover,
.two-columns.has-background a:hover {
  color: var(--color-main);
}

/* Footer-style background - brown with wood texture overlay */
.footer-style-background,
.two-columns.footer-style-background,
.single-column.footer-style-background {
  background: var(--color-accent-1) !important;
}

.footer-style-background::before,
.two-columns.footer-style-background::before,
.single-column.footer-style-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none !important;
  background-image: url('images/dark_wood_new.png') !important;
  background-position: center !important;
  background-size: cover !important;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Single post specific styles */
.single .single-column .content {
  text-wrap: unset;
}

.single .single-column .content h2:not(:first-child),
.single .single-column .content h3:not(:first-child),
.single .single-column .content h4:not(:first-child),
.single .single-column .content h5:not(:first-child),
.single .single-column .content h6:not(:first-child) {
  padding-top: 2rem;
}

/* Author's Note Card
--------------------------------------------- */
.authors-note-section {
  /* max-width: calc(var(--max-width)*.75); */
  margin: 0 auto;
  padding: 0 0;
}

.authors-note-card {
  position: relative;
  max-width: calc(var(--max-width)*.75);
  margin: 0 auto;
  transform: rotate(-1deg);
}

.authors-note-header, .authors-note-subheader {
  text-align: center;
  font-family: var(--font-writing);
  color: var(--color-text);
  padding: 0;
  margin: 0 0 var(--spacing-xs) 0;
}

.authors-note-subheader{
  margin: 0 0 var(--spacing-md) 0;
}

.authors-note-content {
  position: relative;
  padding: var(--spacing-lg) var(--padding) var(--spacing-xl) var(--padding);
  font-family: var(--font-writing);
  color: var(--color-text);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-normal);
}

.authors-note-content p {
  margin-bottom: var(--spacing-md);
}

.authors-note-cta {
  font-style: italic;
  opacity: 0.7;
  margin-top: var(--spacing-lg);
  font-size: var(--font-size-h5);
  color: var(--color-main);
}

/* Interactive Desk Section
--------------------------------------------- */
.desk-section {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.desk-top{
    /* margin-top: 8rem; */

}

.top .desk-top, .rop .desk-section{
  /* max-width: unset; */
}
/* Desk Instructions */
.desk-instructions-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 2rem auto 3rem auto;
  /* max-width: 900px; */
  gap: 1rem;
}

.desk-instructions-text {
  font-size: var(--font-size-h5);
  color: var(--color-black);
  font-family: var(--font-writing);
  margin: 0;
  text-align: center;
}

.desk-instructions-arrow {
  width: 80px;
  height: auto;
  transform: rotate(200deg);
}

/* Instructions above the desk - text centered, arrow to the right */
.desk-instructions-above {
  margin: 1rem auto 0.5rem auto;
  position: relative;
  display: block;
  text-align: center;
}

.desk-instructions-above .desk-instructions-text {
  display: inline-block;
}

.desk-instructions-above .desk-instructions-arrow {
  transform: rotate(190deg) scale(-1);
  position: absolute;
  margin-left: 1rem;
}

/* Centered text with arrow on the right */
.centered-text-with-arrow {
  position: relative;
  text-align: center;
}

.centered-text-with-arrow .desk-instructions-text {
  display: inline-block;
  text-align: center;
}

.centered-text-with-arrow .desk-instructions-arrow {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
}

.desk {
  width: 100vw;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 60vw;
  position: relative;
  overflow: hidden;
}

.desk-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 auto;
}

/* Desk items - all positioned images */
.desk img:not(.desk-img),
.desk-item {
  position: absolute;
  filter: drop-shadow(-5px 5px 5px rgba(0, 0, 0, 0.5));
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.desk img:not(.desk-img):hover,
.desk-item:hover,
.desk-item:hover img {
  filter: drop-shadow(-5px 5px 5px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 20px rgba(0, 255, 255, 1));
}

/* Individual desk item positioning */
.notebook-img {
  width: 34vw;
  left: 40%;
  top: 30%;
}

.address-book-img {
  width: 18vw;
  left: 2%;
  bottom: 0;
}

.phone-img {
  width: 130% !important;
  left: 40%;
  bottom: 16%;
  max-width: unset;
}

.headphones-img {
  z-index: 9;
  width: 23vw;
  left: 32%;
  bottom: 0%;
  mix-blend-mode: multiply;
}

.book-img {
  width: 20vw;
  left: 76%;
  top: 24%;
}

.trophy-img {
  width: 19vw !important;
  left: 14%;
  top: 5%;
  transform: translateY(-10%) rotate(10deg);
  max-width: unset;
}

.plant-img {
  width: 12vw;
  left: 74%;
  top: 5%;
}

.calculator-img {
  width: 14vw;
  left: 80%;
  bottom: 0;
}

.coffee-img {
  width: 13vw;
  left: 40%;
  top: 5%;
}

.quotes-img {
  width: 34vw;
  left: 0%;
  top: 0;
}

/* Desk item links */
.desk-item {
  display: block;
  text-decoration: none;
}

/* Footer
--------------------------------------------- */
.site-footer {
  background: var(--color-accent-1);
  /* padding-top: 80px; */
  padding-bottom: calc(var(--padding) / 2);
  margin-top: calc(var(--padding) * 2);
  position: relative;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/dark_wood_new.png');
    background-position: center;
    background-size: cover;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
  }

  .wrapper {
    max-width: var(--max-width);
    padding: 0 var(--padding);
    margin: 0 auto 0 auto;
    text-align: center;
  }
  .wp-block-columns .wp-block-column {
    color: var(--color-white);
    padding: 0 var(--padding);
  }
  .wp-block-columns .wp-block-column .button {
    background: #fff;
    font-size: var(--font-size-h6);
    padding: 8px 18px;
  }
  .wp-block-columns .wp-block-column .button:hover {
    background: unset;
    color: #fff;
  }
  .bottom-info {
    color: var(--color-white);
  }
}

/* ================================
   Footer Three Column Layout
   ================================ */

.site-footer {
  /* background: var(--color-background); */
  padding: calc(var(--padding) * 3) 0 calc(var(--padding) * 2) 0;
}

.footer-three-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: calc(var(--padding) * 3);
  margin-bottom: calc(var(--padding) * 3);
}

.footer-column {
  display: flex;
  text-align: left;
  flex-direction: column;
  font-size: var(--font-size-h5);
}

/* Column 1: Vertical Menu */
.footer-menu-column .footer-menu-vertical {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--padding) / 2);
}

.footer-menu-vertical li {
  margin: 0;
}

.footer-menu-vertical a {
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-normal);
  transition: color 0.3s ease;
  display: inline-block;
}

.footer-menu-vertical a:hover {
  color: var(--color-main);
}

/* Column 2: Contact */
.footer-contact-column h4 {
  color: var(--color-white);
  font-weight:(var(--font-weight-bold));
  margin-top: 0;
  /* margin-bottom: calc(var(--padding)); */
  border-bottom: var(--color-background) 2px solid;
}

.footer-contact-column p {
  margin: 0.25rem 0;
  color: var(--color-white);
}

.footer-contact-column a {
  color: var(--color-white);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact-column a:hover {
  color: var(--color-main);
}

.social-icons {
  display: flex;
  gap: calc(var(--padding));
  margin-top: calc(var(--padding));
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
  color: var(--color-white);
}

.social-icon:hover {
  color: var(--color-main);
}

.social-icon svg {
  width: 24px;
  height: 24px;
}

/* Column 3: Newsletter */
.footer-newsletter-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-newsletter-column .newsletter-text {
  color: var(--color-white);
  margin-bottom: calc(var(--padding));
  font-size: var(--font-size-h5);
}

/* Bottom Copyright */
.bottom-info {
  text-align: center;
  color: var(--color-white);
  padding-top: calc(var(--padding) * 2);
  border-top: 1px solid var(--color-accent-2);
  font-size: var(--font-size-body);
}

.bottom-info a {
  color: var(--color-white);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.bottom-info a:hover {
  color: var(--color-main);
}


/* Newsletter Subscribe Bar
--------------------------------------------- */
.newsletter-subscribe-bar {
  padding: var(--padding) 0;
  border-bottom: 3px solid var(--color-accent-1);
}

.newsletter-subscribe-bar .wrapper {
  max-width: var(--max-width);
  padding: 0 var(--padding);
  margin: 0 auto;
}

.newsletter-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--padding);
  align-items: center;
}

.newsletter-text {
  text-align: left;
}

.newsletter-text p {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  color: var(--color-white);
  margin: 0;
  line-height: var(--line-height-normal);
}

.newsletter-button {
  text-align: right;
}

.pen-button {
  position: relative;
  display: inline-block;
  text-decoration: none;
  transition: filter 0.3s ease;
  filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.25));
}

.pen-button:hover {
  filter: var(--light-glow) drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.25));
}

.pen-image {
  display: block;
  max-width: 500px;
  height: auto;
}

.pen-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-writing);
  font-size: var(--font-size-h5);
  color: var(--color-white);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 0em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/
/* Jetpack infinite scroll
--------------------------------------------- */
/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}


.facetwp-facet{
  margin-bottom: 0 !important;
}

/* Filter Section with Corkboard Background - Full Width */
/* Filters Wrapper - Full width corkboard background */
.filters-wrapper.corkboard-background {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 60px 0;
  position: relative;
  background-image: url('images/chalkboard.jpg');
}
section.filters-wrapper.corkboard-background {
  margin-top: 0 !important;
}

/* Clear Filters Link - chalk style */
.clear-filters-link {
  position: absolute;
  bottom: 15px;
  right: var(--padding);
  font-family: var(--font-writing);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
  display: none;
}

.clear-filters-link.visible {
  display: block;
}

.clear-filters-link:hover,
.clear-filters-link:visited,
.clear-filters-link:active,
.clear-filters-link:focus {
  color: #fff !important;
  text-decoration: none !important;
}

/* Filters Grid Container - Max width, responsive columns */
.filters-grid-container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padding);
  padding-right: var(--padding);
  display: grid;
  gap: 50px;
  /* Default to 1 column, will adjust based on number of filters */
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: start;
}

/* Automatic column adjustment based on number of children */
.filters-grid-container:has(.filter-column:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

/* Stack filter columns to 1 column at 700px and below */
@media only screen and (max-width: 700px) {
  .filters-grid-container,
  .filters-grid-container:has(.filter-column:nth-child(2):last-child),
  .filters-grid-container:has(.filter-column:nth-child(3)) {
    grid-template-columns: 1fr;
  }
}

.filters-grid-container:has(.filter-column:nth-child(3)) {
  grid-template-columns: repeat(3, 1fr);
}

/* Filter Column - Each filter section */
.filter-column {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 30px;
}

/* Filter Heading - Tape title at top of each column */
.filter-column .filter-heading {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-column .filter-heading .tape-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-column .filter-heading .tape-title {
  padding:0;
  margin-bottom: 0;
}

/* Filter Checkboxes Container */
.filter-column .filter-checkboxes {
  width: 100%;
}

/* Checkboxes Grid - 2 columns per filter */
.filter-column .filter-checkboxes .facetwp-facet {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}

.facetwp-counter{
  display: none;
}
/* Individual Checkbox with Post-Tape Background */
.filter-column .facetwp-checkbox,
.filter-section .facetwp-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 5px 12px 45px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 60" preserveAspectRatio="none"><defs><linearGradient id="tapeGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:%23d5d5d5;stop-opacity:1" /><stop offset="20%" style="stop-color:%23f0f0f0;stop-opacity:1" /><stop offset="22%" style="stop-color:%23ffffff;stop-opacity:1" /><stop offset="23%" style="stop-color:%23f8f8f8;stop-opacity:1" /><stop offset="100%" style="stop-color:%23ebebeb;stop-opacity:1" /></linearGradient></defs><rect width="300" height="60" fill="url(%23tapeGradient)" /><line x1="65" y1="0" x2="65" y2="60" stroke="%23ffffff" stroke-width="3" opacity="0.5" /></svg>');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  font-family: var(--font-writing);
  font-size: var(--font-size-h6);
  color: var(--color-black);
  cursor: pointer;
  min-height: 55px;
  text-align: left;
}

/* Two-column layout: Add extra left padding to checkboxes */
.filters-grid-container:has(.filter-column:nth-child(2):last-child) .filter-column .facetwp-checkbox {
  padding: 12px 5px 12px 70px;
}

/* Color Overlay with pseudo-element */
.filter-column .facetwp-checkbox::after,
.filter-section .facetwp-checkbox::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.2;
  z-index: 0;
}

/* Color variations - cycle through colors */
.filter-column .facetwp-checkbox:nth-child(4n+1)::after,
.filter-section .facetwp-checkbox:nth-child(4n+1)::after {
  background-color: #00ff00; /* Light green */
}

.filter-column .facetwp-checkbox:nth-child(4n+2)::after,
.filter-section .facetwp-checkbox:nth-child(4n+2)::after {
  background-color: #0000ff; /* Light blue */
}

.filter-column .facetwp-checkbox:nth-child(4n+3)::after,
.filter-section .facetwp-checkbox:nth-child(4n+3)::after {
  background-color: #ffee00; /* Light yellow */
}

.filter-column .facetwp-checkbox:nth-child(4n+4)::after,
.filter-section .facetwp-checkbox:nth-child(4n+4)::after {
  background-color: #ff0026; /* Light red */
}


.filter-column .facetwp-checkbox:nth-child(4n+5)::after,
.filter-section .facetwp-checkbox:nth-child(4n+5)::after {
  background-color: #b700ff; /* Light purple */
}

.filter-column .facetwp-checkbox:nth-child(4n+6)::after,
.filter-section .facetwp-checkbox:nth-child(4n+6)::after {
  background-color: #ff9500; /* Light orange */
}

.filter-column .facetwp-checkbox:nth-child(4n+7)::after,
.filter-section .facetwp-checkbox:nth-child(4n+7)::after {
  background-color: #000000; /* Black */
}

.filter-column .facetwp-checkbox:nth-child(4n+8)::after,
.filter-section .facetwp-checkbox:nth-child(4n+8)::after {
  background-color: #ffffff; /* White */
}

.filter-column .facetwp-checkbox:nth-child(4n+9)::after,
.filter-section .facetwp-checkbox:nth-child(4n+9)::after {
  background-color: #00ffbf; /* Mint */
}

.filter-column .facetwp-checkbox:nth-child(4n+10)::after,
.filter-section .facetwp-checkbox:nth-child(4n+10)::after {
  background-color: #ff00bb; /* Pink */
}

/* Ensure text is above overlay */
.filter-column .facetwp-display-value,
.filter-section .facetwp-display-value {
  position: relative;
  z-index: 1;
}

/* Filter checkbox hover glow - matches desk item glow */
.filter-column .facetwp-checkbox:hover,
.filter-section .facetwp-checkbox:hover {
  filter: drop-shadow(0 0 15px var(--color-accent-2));
}


/* Info icon for mobile (hidden on desktop) */
.filter-info-icon {
  display: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent-1);
  color: #fff;
  font-family: var(--font-primary);
  font-weight: bold;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease;
}

/* Active icon (tooltip currently open for this checkbox) */
.filter-info-icon.is-active {
  background: var(--color-main);
}

/* Visible focus ring for keyboard users */
.filter-info-icon:focus-visible {
  outline: 2px solid var(--color-accent-1);
  outline-offset: 2px;
}

@media only screen and (max-width: 840px) {
  .filter-info-icon {
    display: block;
  }
}

/* Base: both description boxes hidden by default */
.filter-description-box {
  display: none;
}

/* Shared visible styles (used by both variants when shown) */
.filter-description-box--inline,
.filter-description-box--bottom {
  align-items: center;
  justify-content: center;
  max-width: 600px;
  padding: 0.75em 1.25em;
  background: var(--color-main);
  color: #fff;
  text-align: center;
  font-family: var(--font-primary);
  font-size: var(--font-size-h6);
  line-height: 1.4;
}

/* Tablet (2-column filter layout): use the BOTTOM box; height auto-sizes to content */
@media only screen and (min-width: 701px) and (max-width: 840px) {
  .filter-description-box--bottom {
    display: flex;
    margin: var(--spacing-lg) auto 0 auto;
    visibility: hidden;
  }
  .filter-description-box--bottom.is-active {
    visibility: visible;
  }
}

/* Mobile (1-column filter layout): INLINE box grows/collapses with content, no reserved space */
@media only screen and (max-width: 700px) {
  .filter-description-box--inline.is-active {
    display: flex;
    margin: var(--spacing-md) auto 0 auto;
  }
}

/* Category filter tooltip (same look as desk tooltips) */
.filter-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: min(320px, calc(100vw - 40px));
  pointer-events: none;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-family: var(--font-primary);
  font-size: var(--font-size-h6);
  color: #fff;
  background: var(--color-main);
  padding: 0.5em 1em;
  text-align: left;
  line-height: 1.35;
}

.filter-tooltip.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Handwritten Check Icon (✓) */
.filter-column .facetwp-checkbox::before,
.filter-section .facetwp-checkbox::before {
  content: '✓';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-writing);
  font-size: 28px;
  font-weight: bold;
  color: var(--color-black);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
}

/* Show check when selected */
.filter-column .facetwp-checkbox.checked::before,
.filter-section .facetwp-checkbox.checked::before {
  opacity: 1;
}

/* Keep SVG background on checked state */
.filter-column .facetwp-checkbox.checked,
.filter-section .facetwp-checkbox.checked {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 60" preserveAspectRatio="none"><defs><linearGradient id="tapeGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:%23d5d5d5;stop-opacity:1" /><stop offset="20%" style="stop-color:%23f0f0f0;stop-opacity:1" /><stop offset="22%" style="stop-color:%23ffffff;stop-opacity:1" /><stop offset="23%" style="stop-color:%23f8f8f8;stop-opacity:1" /><stop offset="100%" style="stop-color:%23ebebeb;stop-opacity:1" /></linearGradient></defs><rect width="300" height="60" fill="url(%23tapeGradient)" /><line x1="65" y1="0" x2="65" y2="60" stroke="%23ffffff" stroke-width="3" opacity="0.5" /></svg>') !important;
}

/* Move checkmark right for 2-column layout — only at desktop widths */
@media only screen and (min-width: 1101px) {
  .filters-grid-container:has(.filter-column:nth-child(2):last-child) .filter-column .facetwp-checkbox::before {
    left: 20px;
  }
}

/* Ghost/Greyed Out State */
.filter-column .facetwp-checkbox.facetwp-ghost,
.filter-section .facetwp-checkbox.facetwp-ghost {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Hide default checkbox */
.filter-column .facetwp-checkbox input[type="checkbox"],
.filter-section .facetwp-checkbox input[type="checkbox"] {
  display: none;
}

/* Filter Display Value */
.filter-column .facetwp-display-value,
.filter-section .facetwp-display-value {
  font-family: var(--font-writing);
  color: var(--color-black);
  line-height: 1.3;
  word-break: break-word;
  font-size: var(--font-size-h6)
}

/* Date Filter Section - Below corkboard, above pagination */
.date-filter-section {
  display: flex;
  justify-content: flex-start;
  padding: calc(var(--padding) / 2) var(--padding) 0 var(--padding);
}

.date-filter-section .date-filter-row {
  display: flex;
  gap: 20px;
  align-items: flex-end;
}

.date-filter-section .date-filter-item {
  display: flex;
  flex-direction: column;
  width: 160px;
}

.date-filter-section .facetwp-facet {
  width: 100%;
}

.date-filter-section .date-filter-item label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-h6);
  color: var(--color-black);
  margin-bottom: 6px;
}

.date-filter-section .facetwp-dropdown,
.date-filter-section .facetwp-facet .fs-wrap .fs-label-wrap {
  width: 100%;
  /* padding: 10px 15px; */
  font-family: var(--font-body);
  font-size: var(--font-size-h6);
  color: var(--color-black);
  background-color: var(--color-accent-2);
  border: 2px solid var(--color-light-brown);
  border-radius: 0px;
  cursor: pointer;
}

.date-filter-section .facetwp-dropdown:hover,
.date-filter-section .facetwp-facet .fs-wrap .fs-label-wrap:hover {
  border-color: var(--color-dark-brown);
}

.date-filter-section .facetwp-dropdown:focus,
.date-filter-section .facetwp-facet .fs-wrap .fs-label-wrap:focus {
  outline: none;
  border-color: var(--color-main);
}

/* fSelect specific styles */
.date-filter-section .fs-wrap {
  width: 100%;
}

.date-filter-section .fs-wrap .fs-label-wrap {
  border: 2px solid var(--color-light-brown);
  border-radius: 4px;
  background-color: var(--color-white);
}

.date-filter-section .fs-wrap .fs-label-wrap .fs-label {
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: var(--font-size-h6);
}

/* FacetWP Pagination Styles */
.facetwp-pagination-top {
  display: none;
}

.facetwp-pagination-bottom {
  text-align: center;
  margin: 2rem 0;
}

.facetwp-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.facetwp-page {
  display: inline-block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--color-dark-brown);
  background-color: transparent;
  border: 1px solid var(--color-light-brown);
  border-radius: 3px;
  transition: all 0.3s ease;
}

.facetwp-page:hover {
  background-color: var(--color-light-brown);
  color: var(--color-dark-brown);
  text-decoration: none;
}

.facetwp-page.active {
  background-color: var(--color-dark-brown);
  border-color: var(--color-dark-brown);
}

.facetwp-page.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Forminator Quiz Styles
--------------------------------------------- */

/* Quiz wrapper */
.quiz-wrapper {
  margin: 2rem 0;
}

/* Question (legend) styling */
.forminator-question .forminator-legend {
  font-family: var(--font-heading), sans-serif;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-1);
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

/* Answer options container - each on new line */
.forminator-question .forminator-answer {
  margin: 0 0 1rem 0;
  display: block;
  width: 100%;
}

.forminator-button.forminator-quiz-start {
  margin: calc(var(--padding) / 2) auto 0 auto !important;
  display: block !important;
}

.forminator-button.forminator-button-next, .forminator-button.forminator-button-back {
  margin-top: calc(var(--padding) / 2) !important;
}

/* Forminator quiz "Share your results" — share text above, icons below in a row */
.forminator-quiz--social,
.forminator-quiz-social-share,
.forminator-social {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.forminator-social__list,
.forminator-quiz--social ul {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.forminator-quiz--social li,
.forminator-social__list li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove the outline/border on the quiz result container */
.forminator-quiz--result,
.forminator-quiz .forminator-quiz--result,
.forminator-quiz-result {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.single-column .forminator-ui {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* Individual answer label */
.forminator-question .forminator-answer label {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: var(--color-background);
  border: 2px solid var(--color-accent-2);
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-body), sans-serif;
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.5;
}

/* Ensure text wrapper doesn't interfere with alignment */
.forminator-question .forminator-answer .forminator-only--text {
  display: block;
  width: 100%;
}

.forminator-question .forminator-answer label:hover {
  border-color: var(--color-light);
  background-color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Selected answer state */
.forminator-question .forminator-answer input[type="radio"]:checked + label,
.forminator-question .forminator-answer input[type="checkbox"]:checked + label {
  background-color: var(--color-accent-2);
  border-color: var(--color-main);
  color: var(--color-accent-1);
  font-weight: var(--font-weight-bold);
}

/* Show radio/checkbox buttons with custom styling */
.forminator-question .forminator-answer input[type="radio"],
.forminator-question .forminator-answer input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin-right: 1rem;
  margin-top: 0;
  margin-bottom: 0;
  flex-shrink: 0;
  border: 2px solid var(--color-accent-2);
  background-color: var(--color-white);
  cursor: pointer;
  position: relative;
  top: 2px;
  transition: all 0.3s ease;
}

/* Make radio buttons circular */
.forminator-question .forminator-answer input[type="radio"] {
  border-radius: 50%;
  margin-top: 1rem;
  transform: translateY(3px);
}

/* Checked state for radio/checkbox */
.forminator-question .forminator-answer input[type="radio"]:checked,
.forminator-question .forminator-answer input[type="checkbox"]:checked {
  border-color: var(--color-main);
  background-color: var(--color-main);
  box-shadow: inset 0 0 0 4px var(--color-white);
}

/* Answer text */
.forminator-question .forminator-answer--name {
  flex: 1;
}

/* Hide the forminator icon check if you don't want to use it */
.forminator-icon-check {
  display: none;
}

/* Submit button styling */
/* .forminator-button {
  background-color: var(--color-main) !important;
  color: var(--color-white) !important;
  font-family: var(--font-heading), sans-serif !important;
  font-size: var(--font-size-h6) !important;
  font-weight: var(--font-weight-bold) !important;
  padding: 1rem 2rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  margin-top: 2rem !important;
} */

/* Add space between buttons when multiple buttons exist */
.forminator-button-back, .forminator-result--view-answers, .forminator-icon-refresh, .forminator-icon-chevron-left{
  margin-right: 1rem !important;
}
/* 
.forminator-button:hover {
  background-color: var(--color-light) !important; */
  /* transform: translateY(-2px); */
  /* box-shadow: 0 4px 12px rgba(254, 1, 0, 0.3); */
/* } */

/* Quiz results styling */
.forminator-quiz-result {
  padding: 2rem;
  background-color: var(--color-accent-2);
  border-left: 4px solid var(--color-main);
  margin: 2rem 0;
}

.forminator-quiz-result h3,
.forminator-quiz-result h4 {
  color: var(--color-accent-1);
  margin-bottom: 1rem;
}

/* Error messages */
.forminator-error-message {
  color: var(--color-main);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}


/* Accordion Styling */
.accordion-section {
  max-width: var(--max-width);
  margin: 0 auto;
}

.accordion {
  overflow: hidden;

  .accordion-item:last-child {
    border-bottom: none;
  }

  .accordion-header {
    background: var(--color-white);
    padding: calc(var(--padding) / 2) var(--padding);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    max-width: 1000px;
    margin: 0 auto;
    border-top: 1px solid #ccc;

    &:hover {
      border-top: 1px solid var(--color-main);

      .accordion-title {
        transform: translateX(-10px);
      }
    }
  }

  .accordion-header[aria-expanded="true"] {
    border-top: 1px solid var(--color-light);
  }

  .accordion-title {
    margin: 0;
    transition: all 0.3s ease;
  }

  .accordion-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;

    .accordion-body {
      padding: calc(var(--padding) / 2) var(--padding);
      padding-top: 0;
      max-width: 1000px;
      margin: auto;
      max-height: 1000px;
    }
  }

  .material-icons {
    transition: transform 0.3s ease;
  }

  .accordion-header[aria-expanded="true"] .material-icons {
    /* transform: rotate(45deg); */
  }
}



/* Carousel Section
--------------------------------------------- */
.carousel-section {
  position: relative;
  overflow: hidden;
  max-width: unset;
}

/* Content sections carousel - not favorites */
.carousel-section:not(.favorites-carousel) .carousel-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  flex-shrink: 0;
}

/* Favorites vinyl carousel - keep original */
.favorites-carousel .carousel-image-wrapper {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  flex-shrink: 0;
}

.carousel-image-wrapper img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0;
  image-rendering: -webkit-optimize-contrast;
}

/* Frame Styles */
.carousel-image-wrapper.has-frame {
  padding: 60px;
  box-sizing: border-box;
}

.carousel-image-wrapper.has-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-image-wrapper.has-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 110%;
  height: 110%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 2;
  will-change: auto;
  transform: translateX(-5%) translateY(-5%);
}

.carousel-image-wrapper.frame-1::before {
  background-image: url('images/frame1.png');
  background-size: 90% 90%;
}

.carousel-image-wrapper.frame-2::before {
  background-image: url('images/frame2.png');
  background-size: 90% 90%;
}

.carousel-image-wrapper.frame-3::before {
  background-image: url('images/frame3.png');
  background-size: 90% 90%;
}

.carousel-image-wrapper.frame-4::before {
  background-image: url('images/frame4.png');
  background-size: 90% 90%;
}

.carousel-image-wrapper.frame-5::before {
  background-image: url('images/frame5.png');
  background-size: 90% 90%;
}

.carousel-image-wrapper.frame-5 img {
  border-radius: 50%;
  object-fit: cover;
}

.carousel-image-wrapper.frame-6::before {
  background-image: url('images/frame6.png');
  background-size: 90% 90%;
}

.carousel-image-wrapper.frame-6 img {
  border-radius: 50%;
  object-fit: cover;
}

.carousel-image-wrapper.frame-7::before {
  background-image: url('images/frame7.png');
  background-size: 90% 90%;
}

.carousel-image-wrapper.frame-8::before {
  background-image: url('images/frame8.png');
  background-size: 90% 90%;
}

.carousel-image-wrapper.frame-8 img {
  border-radius: 50%;
  object-fit: cover;
}

.carousel-image-wrapper.frame-9::before {
  background-image: url('images/frame9.png');
  background-size: 90% 90%;
}

/* Add more frames as needed following the same pattern */

/* Flexible Column Image Frame Styles */
/* Images without frames - shrink to 75% */
.flexible-image-wrapper:not(.has-frame) img {
  /* max-width: 75%; */
  height: auto;
  display: block;
  margin: 0 auto;
}

.flexible-image-wrapper.has-frame {
  position: relative;
  padding: 50px;
  box-sizing: border-box;
  max-width: 600px;
  margin: 0 auto;
  aspect-ratio: 1/1; /* Standardize to square */
}

.flexible-image-wrapper.has-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.flexible-image-wrapper.has-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 2;
}

.flexible-image-wrapper.frame-1::before {
  background-image: url('images/frame1.png');
}

.flexible-image-wrapper.frame-2::before {
  background-image: url('images/frame2.png');
}

.flexible-image-wrapper.frame-3::before {
  background-image: url('images/frame3.png');
}

.flexible-image-wrapper.frame-4::before {
  background-image: url('images/frame4.png');
}

.flexible-image-wrapper.frame-5::before {
  background-image: url('images/frame5.png');
  background-size: 140% 140%;
}

.flexible-image-wrapper.frame-5 img {
  border-radius: 50%;
  object-fit: cover;
}

.flexible-image-wrapper.frame-6::before {
  background-image: url('images/frame6.png');
  background-size: 160% 160%;
}

.flexible-image-wrapper.frame-6 img {
  border-radius: 50%;
  object-fit: cover;
}

.flexible-image-wrapper.frame-7::before {
  background-image: url('images/frame7.png');
}

.flexible-image-wrapper.frame-8::before {
  background-image: url('images/frame8.png');
}

.flexible-image-wrapper.frame-8 img {
  border-radius: 50%;
  object-fit: cover;
}

.flexible-image-wrapper.frame-9::before {
  background-image: url('images/frame9.png');
}

/* Glow on hover effect for flexible images */
.flexible-image-wrapper.has-glow-hover img {
  transition: filter 0.3s ease;
}

.flexible-image-wrapper.has-glow-hover:hover img {
  filter: var(--light-glow);
}

/* Responsive adjustments for flexible column frames */
/* @media (max-width: 768px) {
  .flexible-image-wrapper.has-frame {
    padding: 50px;
    max-width: 400px;
  }
} */

.carousel-description {
  text-align: center;
  max-width: 600px;
  padding: 0 20px;
  color: var(--color-text);
  font-size: 1.1rem;
  line-height: 1.6;
}

/* ================================
   Swiper Carousel Overrides
   ================================ */

/* Swiper slide width for 3-slide peek effect */
.carousel-swiper .swiper-slide {
  width: 660px !important;
}

/* Position description below the image */
.carousel-swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Container for pagination and arrows */
.carousel-section .carousel-controls-wrapper {
  max-width: var(--max-width);
  margin: 2rem auto 0;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.carousel-controls-wrapper .swiper-pagination {
  position: static !important;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Hide default Swiper button styles and use custom brown theme */
.carousel-controls-wrapper .swiper-button-next,
.carousel-controls-wrapper .swiper-button-prev {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  color: var(--color-accent-1);
  transition: all 0.3s ease;
  position: static !important;
  margin: 0;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

.carousel-controls-wrapper .swiper-button-next:after,
.carousel-controls-wrapper .swiper-button-prev:after {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-accent-1);
}

.carousel-controls-wrapper .swiper-button-next:hover:after,
.carousel-controls-wrapper .swiper-button-prev:hover:after {
  color: var(--color-accent-1);
  opacity: 0.7;
}

.carousel-swiper .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: var(--color-accent-2);
  border: 2px solid var(--color-accent-1);
  opacity: 1;
  transition: all 0.3s ease;
}

.carousel-swiper .swiper-pagination-bullet:hover {
  transform: scale(1.2);
  background: var(--color-light);
}

.carousel-swiper .swiper-pagination-bullet-active {
  background: var(--color-accent-1) !important;
  transform: scale(1.3);
}


/* Three Column Polaroid Cards Section
--------------------------------------------- */
.three-column-polaroid-cards {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.corkboard-background {
  background-image: url('images/corkboard.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  padding: calc(var(--padding) * 2) 0;
  position: relative;
}

.corkboard-background .wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding);
}

/* Tape Title */
.tape-title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-bottom: 2.5%;
  z-index: 2;
  font-family: var(--font-writing) !important;
}

.tape-title .tape-text {
  display: inline-block;
  font-family: var(--font-writing) !important;
  color: var(--color-black) !important;
  padding: 20px 90px;
  background-image: url('images/tape1.png');
  background-size: 100% 100%; /* Stretch tape to fit text both horizontally and vertically */
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  line-height: var(--line-height-medium);
  max-width: 1000px; /* Respect content max-width */
  box-sizing: border-box;
}

/* Remove default paragraph margins inside tape-text */
.tape-title .tape-text p {
  margin: 0;
}

/* Ensure headers inside tape-text inherit the writing font */
.tape-title .tape-text h1,
.tape-title .tape-text h2,
.tape-title .tape-text h3,
.tape-title .tape-text h4,
.tape-title .tape-text h5,
.tape-title .tape-text h6 {
  font-family: var(--font-writing) !important;
  margin: 0;
  line-height: var(--line-height-medium);
  color: var(--color-black) !important;
  margin-bottom: 0;
}

/* Polaroid Grid */
.polaroid-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px var(--padding);
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Individual Polaroid Card */
.polaroid-card {
  position: relative;
  min-width: 280px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-origin: center center;
  will-change: transform;
}

.polaroid-card:hover {
  transform: rotate(0deg) !important;
  z-index: 10;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Polaroid Frame */
.polaroid-frame {
  position: relative;
  background-image: url('images/polaroidframe.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 15px;
  background-color: var(--color-white);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  min-height: 400px; /* Fixed minimum height to keep all polaroids the same size */
}

/* Polaroid Image */
.polaroid-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1; /* Square images */
  overflow: hidden;
  background: var(--color-white);
  flex-shrink: 0; /* Prevent image from shrinking */
}

.polaroid-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Polaroid Description */
.polaroid-description {
  font-family: var(--font-writing);
  color: var(--color-black);
  font-size: var(--font-size-h6);
  height: 60px; /* Fixed height for description */
  line-height: 1.4;
  text-align: center;
  padding: 0px 10px 0;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 15px; /* Space between image and description */
}

.polaroid-description p {
  margin: 0;
}

/* ================================
   Button Group Section
   ================================ */

.button-group-section {
  /* padding: 60px 0; */
  margin-top: -20%;
  position: relative;
  z-index: 10;
}

.button-group-section.has-envelope {
  margin-top: 0;
}

.button-group-section.has-envelope .button-group {
  justify-content: center;
}

.button-group-section .contact-envelope-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
}

.button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.button-group-single {
  justify-content: center;
}

.button-group-double {
  justify-content: center;
}

.button-group .button {
  font-size: var(--font-size-h5);
  padding: calc(var(--padding)/2) var(--padding);
  min-width: 200px;
  text-align: center;
  text-decoration: none;
}

/* Button Style: Brown (existing header style) */
.button-style-brown {
  position: static !important;
  display: inline-block;
  background: var(--color-accent-1) !important;
  border: 2px solid #3b2e1c !important;
  color: var(--color-white) !important;
  /* box-shadow: var(--button-box-shadow-normal); */
  transition: box-shadow 0.1s ease, filter 0.3s ease !important;
  transform: none !important;
  /* text-transform: uppercase; */
}

.button-style-brown:hover {
  background: var(--color-accent-1) !important;
  border: 2px solid #3b2e1c !important;
  color: var(--color-white) !important;
  /* box-shadow: var(--button-box-shadow-hover); */
  transform: none !important;
  position: static !important;
  filter: var(--light-glow);
}

.button-style-brown:active {
  background: #563222 !important;
  border: 2px solid #3b2e1c !important;
  /* box-shadow: var(--button-box-shadow-active); */
  transform: none !important;
  position: static !important;
  filter: var(--light-glow);
}

/* Button Style: Red */
.button-style-red, .forminator-button {
  position: static !important;
  display: inline-block;
  background: var(--color-main) !important;
  border: 2px solid #CC0000 !important;
  color: var(--color-white) !important;
  /* box-shadow: var(--button-box-shadow-normal); */
  transition: box-shadow 0.1s ease, filter 0.3s ease !important;
  transform: none !important;
  /* text-transform: uppercase; */
}

.button-style-red:hover, .forminator-button:hover {
  background: var(--color-main) !important;
  border: 2px solid #CC0000 !important;
  color: var(--color-white) !important;
  /* box-shadow: var(--button-box-shadow-hover); */
  transform: none !important;
  position: static !important;
    filter: var(--light-glow);
}

.button-style-red:active, .forminator-button:active {
  background: #CC0000 !important;
  border: 2px solid #CC0000!important;
  /* box-shadow: var(--button-box-shadow-active); */
  transform: none !important;
  position: static !important;
  filter: var(--light-glow);
}

/* Button Style: Light Brown with Dark Brown Text */
.button-style-light-brown {
  background-color: var(--color-accent-2) !important;
  border-color: var(--color-accent-2) !important;
  color: var(--color-accent-1) !important;
}

.button-style-light-brown:hover {
  background-color: var(--color-accent-1) !important;
  border-color: var(--color-accent-1) !important;
  color: var(--color-white) !important;
}

/* Button Style: Marker (with marker.png background) */
.button-style-marker {
  background-image: url('images/marker.png') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--color-white) !important;
  font-size: var(--font-size-h4) !important;
  overflow: visible !important;
  position: relative !important;
  width: 60vw !important;
  max-width: 600px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0;
  transition: filter 0.3s ease;
  filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.25));
}

.button-style-marker .button-text {
  font-size: var(--font-size-h3);
  text-align: center;
  width: 100%;
  padding: 20px;
  transform: translateX(7%);
  font-family: var(--font-writing)
}

.button-style-marker:hover {
  filter: var(--light-glow) drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.25));
  box-shadow: none !important;
}

/* Button Style: Bookmark with Satin Shine (using bookmark.png) */
.button-style-book-binding, .button-group .button .button-style-book-binding {
  background-image: none !important;
  background-color: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: var(--font-size-h5) !important;
  overflow: visible !important;
  position: relative !important;
  width: 27vw !important;
  min-width: 350px !important;
  aspect-ratio: 4/1 !important;
  max-width: 500px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  /* margin: -5%; */
}

.button-style-book-binding .button-text {
  position: relative;
  z-index: 3;
  top: -10%;
  color: var(--color-white) !important;
  text-align: center;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
}

/* Background image layer - can be moved independently */
.button-style-book-binding::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 65px);
  background-image: url('images/bookmark.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0;
  pointer-events: none;
  transition: filter 0.3s ease;
  filter: drop-shadow(3px 4px 4px rgba(0, 0, 0, 0.3));
}

/* Satin shine effect - starts at 25% where leather begins, contained within button */
.button-style-book-binding::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 1.5s ease;
  z-index: 1;
  pointer-events: none;
  clip-path: inset(0);
}

.button-style-book-binding:hover::before {
  left: 60%;
}

.button-style-book-binding:hover {
  box-shadow: none !important;
}

.button-style-book-binding:hover::after {
  filter: var(--light-glow) drop-shadow(3px 4px 4px rgba(0, 0, 0, 0.3));
}

/* Button Style: Cassette Tape (with record_button_2.0.gif background) */
/* GIF is preloaded behind the static image to prevent flash on hover */
.button-style-ipod {
  background-image: url('images/RECORD_BUTTON_FINAL_STATIC.gif'), url('images/RECORD_BUTTON_FINAL.gif') !important;
  background-size: contain, contain !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center top, center top !important;
  background-color: transparent !important;
  border: none !important;
  color: #333 !important;
  font-size: var(--font-size-h5) !important;
  overflow: visible !important;
  position: relative !important;
  width: 20vw !important;
  min-width: 180px !important;
  aspect-ratio: 3/2 !important;
  max-width: 250px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 0 8% 0 !important;
  margin: 0;
  border-radius: 7px;
  transition: filter 0.3s ease;
  filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.25));
}

.button-style-ipod .button-text {
  font-family: var(--font-writing);
  font-size: var(--font-size-h5);
  text-align: center;
  color: #333 !important;
  background: transparent !important;
  padding: 4px 16px;
  border-radius: 3px;
  position: absolute;
  /* bottom: 8%; */
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  transition: none !important;
  white-space: nowrap;
}

.button-style-ipod:hover {
  background-image: url('images/RECORD_BUTTON_FINAL.gif') !important;
  filter: var(--light-glow) drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.25));
  box-shadow: none !important;
}

.button-style-ipod:hover .button-text {
  background: transparent !important;
  color: #333 !important;
}

/* Button with Icon */
.button.has-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: auto;
}

.button-icon img {
  height: 100%;
  width: auto;
  max-width: 32px;
  object-fit: contain;
}

.button-text {
  display: inline-block;
}


/* Timeline Layout Styles
--------------------------------------------- */

.timeline-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 0;
  max-width: 900px;
  margin: 0 auto;
}

.timeline-item {
  width: 100%;
  display: flex;
  position: relative;
  margin: -3rem 0;
}

/* Left-aligned post-it notes */
.timeline-item-left {
  justify-content: flex-start;
  padding-left: 15%;
}

/* Right-aligned post-it notes */
.timeline-item-right {
  justify-content: flex-end;
  padding-right: 15%;
}

/* Arrow row between timeline items */
.timeline-arrow-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

/* Post-it note styling */
.timeline-postit {
  width: 300px;
  height: 300px;
  padding: 3rem 3.5rem 3rem 3.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  transition: transform 0.3s ease;
  transform-origin: center center;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

.timeline-postit:hover {
  transform: rotate(0deg) !important;
  z-index: 100;
  position: relative;
}

/* Hover image overlay for post-it notes */
.timeline-postit.has-hover-image::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 15%;
  right: 15%;
  bottom: 15%;
  background-image: var(--hover-image);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at center, black 40%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 80% at center, black 40%, transparent 70%);
}

.timeline-postit.has-hover-image:hover::after {
  opacity: 0.25;
}

/* Ensure content stays above the overlay */
.timeline-postit .timeline-title,
.timeline-postit .timeline-description {
  position: relative;
  z-index: 1;
}

/* Post-it background images */
.postit-bg-1 {
  background-image: url('images/post-note-1.png');
}

.postit-bg-2 {
  background-image: url('images/post-note-2.png');
}

.postit-bg-3 {
  background-image: url('images/post-note-3.png');
}

/* Timeline content */
.timeline-title {
  font-family: var(--font-writing);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  margin-bottom: 1rem;
  text-align: center;
  width: 100%;
}

.timeline-description {
  font-family: var(--font-writing);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-black);
  text-align: center;
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.timeline-description p {
  margin: 0 0 0.5rem 0;
}

/* Arrow styling */
.timeline-arrow {
  width: 250px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -4rem 0;
  position: relative;
  z-index: 5;
}

.timeline-arrow img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

/* Arrow rotations based on type */
.timeline-arrow.arrow-1 img {
  transform: rotate(35deg) translateY(-40%); /* Down-right */
  min-width: 350px;
}

.timeline-arrow.arrow-2 img {
  transform: rotate(130deg) translateY(-40%); /* Down-left (180 + 45) */
  min-width: 350px;
}

.timeline-arrow.arrow-3 img {
  transform: rotate(225deg) translateY(-55%) translateX(0%); /* Down-right (needs 180 flip from left) */
  min-width: 350px;
}

.timeline-arrow.arrow-4 img {
  transform: rotate(140deg) translateY(-45%) translateX(-10%); /* Default down-right */
  min-width: 350px;
}

/* When arrow-rotated is enabled, add 180 degrees */
.timeline-arrow.arrow-rotated img {
  transform: rotate(calc(var(--base-rotation, 0deg) + 180deg));
}

.timeline-arrow.arrow-1.arrow-rotated img {
  transform: rotate(140deg) translateX(-7%) translateY(-30%); /* 45 + 180 */
}

.timeline-arrow.arrow-2.arrow-rotated img {
  transform: rotate(45deg) translateX(0%) translateY(-50%); /* 225 + 180 = 405 = 45 */
}

.timeline-arrow.arrow-3.arrow-rotated img {
  transform: scaleX(-1) rotate(220deg) translateX(10%) translateY(-50%)
}

.timeline-arrow.arrow-4.arrow-rotated img {
  transform: scaleX(-1) rotate(130deg) translateX(5%) translateY(-50%); /* 45 + 180 */
}


/* ================================
   Favorite Page Section
   ================================ */


   /* Vinyl Record Carousel for Favorites Page
--------------------------------------------- */
/* Trying to fix the swipe in animation */
/* .favorites-swiper{
  width: 110% !important;
  transform: translateX(-5%) !important;
} */


/* Only apply pointer-events:none to vinyl records carousel, not other carousels */
.favorites-carousel .swiper-backface-hidden .swiper-slide{
  pointer-events: none;
}

.swiper{
  overflow: visible !important;
  touch-action: pan-y pinch-zoom;
}

.swiper-wrapper {
  touch-action: pan-y pinch-zoom;
}

/* Allow swipes on favorites carousel wrapper */
.favorites-carousel .swiper,
.favorites-carousel .swiper-wrapper {
  pointer-events: auto !important;
  touch-action: pan-x pan-y;
}

/* Allow clicks on vinyl links */
.favorites-carousel .swiper-slide * {
  pointer-events: auto;
}

/* Vinyl link wrapper */
.favorites-carousel .vinyl-link {
  display: block;
  text-decoration: none;
  /* width: 100%; */
  pointer-events:all;
}

/* Vinyl record container */
.favorites-carousel .carousel-image-wrapper.vinyl-record {
  position: relative;
  /* width: 100%; */
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 0;
  transition: all 0.3s ease;
  border-radius: 50%;
  box-shadow: -4px 4px 10px 0px rgba(0, 0, 0, 0.8);
  /* overflow: hidden; */
}


/* Hover effect - subtle rotation like a spinning record */
.favorites-carousel .vinyl-link:hover .carousel-image-wrapper.vinyl-record {
  transform: rotate(5deg);
  filter: brightness(130%);

}

/* Album cover image - bottom layer, behind the record frame */
.favorites-carousel .album-cover {
  position: absolute;
  top: calc(50% - 10px) !important;
  left: calc(50% - 10px) !important;
  transform: translate(-50%, -50%);
  width: 80%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  z-index: 1;
}

/* Center hole - on top of album cover */
.favorites-carousel .vinyl-center-hole {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3%;
  height: 3%;
  border-radius: 50%;
  background: var(--color-background);
  z-index: 3;
  pointer-events: none;
  box-shadow: inset -2px 2px 2px rgba(0, 0, 0, 0.4);
}

/* Vinyl record frame - top layer with transparent center */
.favorites-carousel .vinyl-frame {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  /* width: calc(100% + 10px) !important; */
  max-width: unset;
  /* top: -5px;
  left: -5px; */
  overflow: visible;
}

/* Song and artist info below record */
.favorites-carousel .vinyl-info {
  margin-top: var(--spacing-xl);
  text-align: center;
  max-width: 25%;
  margin-left: auto;
  margin-right: auto;
}

.favorites-carousel .song-title {
  color: var(--color-accent-1);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
}

.favorites-carousel .artist-name {
  color: var(--color-text);
  font-size: var(--font-size-h6);
  margin: 0;
  opacity: 0.8;
}

/* Lower navigation arrows by 50px */
.favorites-carousel .carousel-nav {
  bottom: -30px;
}

/* Vinyl Swiper Specific Styles */
.favorites-swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* Container for vinyl pagination and arrows */
.favorites-carousel .vinyl-controls-wrapper {
  max-width: var(--max-width);
  margin: 2rem auto 0;
  padding: calc(var(--padding) / 2) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.vinyl-controls-wrapper .swiper-pagination {
  position: static !important;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Vinyl navigation buttons */
.vinyl-controls-wrapper .swiper-button-next,
.vinyl-controls-wrapper .swiper-button-prev {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  color: var(--color-accent-1);
  transition: all 0.3s ease;
  position: static !important;
  margin: 0;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

.vinyl-controls-wrapper .swiper-button-next:after,
.vinyl-controls-wrapper .swiper-button-prev:after {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-accent-1);
}

.vinyl-controls-wrapper .swiper-button-next:hover:after,
.vinyl-controls-wrapper .swiper-button-prev:hover:after {
  color: var(--color-accent-1) !important;
  opacity: 0.7;
}

.swiper-pagination-bullet-active{
  background-color: var(--color-accent-1) !important;
}


.favorite-books-wrapper {
  margin: calc(var(--padding) * 2) 0 0 0;
}

.favorite-books-wrapper .section-title, {
  text-align: center;
  margin-bottom: 10rem;
  color: var(--color-accent-1);
  font-size: var(--font-size-h2);
}

.favorite-books {
  position: relative;
}

/* Full-width bookshelf background */
.favorite-books.bookshelf-background {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  background-image: url('images/shelf.png');
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(50%);
  overflow: visible
}

.favorite-books .books-container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* 5-column grid for books */
.favorite-books .books-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
  transform: translateY(-80%);
}

.favorite-books .book-item {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* Hide 6th book on larger screens (shown at 1100px and below) */
.favorite-books .book-item:nth-child(6) {
  display: none;
}

.favorite-books .book-link {
  display: block;
  width: 100%;
  max-width: 200px;
  text-decoration: none;
  /* Removed position: relative - moved to .book-content wrapper */
}

/* Book content wrapper - holds the relative positioning for ::before overlay */
.favorite-books .book-content {
  position: relative;
  width: 100%;
  transition: transform 0.3s ease;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 1.1px 1.5px,
    rgba(0, 0, 0, 0.1) 0px 2.8px 3.9px,
    rgba(0, 0, 0, 0.08) 0px 5.8px 7.9px,
    rgba(0, 0, 0, 0.06) 0px 12.0455px 16.4px,
    rgba(0, 0, 0, 0.04) 0px 33px 45px;
  border-radius: 3px;
  overflow: hidden;
}

.favorite-books .book-link:hover .book-content {
  transform: translateY(-5px) scale(1.05);
  filter: var(--light-glow);
  transition: box-shadow 0.1s ease, filter 0.3s ease !important;
}

/* Book Cover Effect */
.favorite-books .book-content::before {
  content: "";
  position: absolute;
  inset: 0px;
  border-radius: 3px;
  pointer-events: none;
  filter: contrast(310%) brightness(100%);
  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.118) 0.65%,
    rgba(255, 255, 255, 0.2) 1.53%,
    rgba(255, 255, 255, 0.1) 2.38%,
    rgba(0, 0, 0, 0.05) 3.26%,
    rgba(255, 255, 255, 0.14) 5.68%,
    rgba(244, 244, 244, 0) 6.96%
  );
  z-index: 1;
}

.favorite-books .book-cover {
  width: 100%;
  height: auto;
  border-radius: 3px;
  display: block;
  object-fit: cover;
}


/* ================================
   Quote of the Month Section
   ================================ */

.quote-of-month {
  position: relative;
  margin: calc(var(--padding) * 3) auto var(--padding) auto !important;
  max-width: 800px;
  padding: 0 var(--spacing-lg);
}

.quote-of-month .index-card-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  min-height: 400px;
}

.quote-of-month .index-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* CSS-based index card with fixed line spacing
   Red line at 60px, first blue line at 100px, spacing 40px */
.quote-of-month .index-card-css,
.authors-note-card .index-card-css {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFF9C4;
  border: 2px solid #E0E0E0;
  border-radius: 3px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  background-image:
    /* Yellow mask for header area (0-59px) to hide any blue lines above red */
    linear-gradient(to bottom, #FFF9C4 0px, #FFF9C4 59px, transparent 59px),
    /* Red header line at 60px (3px thick) - 40% opacity */
    linear-gradient(to bottom, transparent 59px, rgba(229, 57, 53, 0.4) 59px, rgba(229, 57, 53, 0.4) 62px, transparent 62px),
    /* Blue lines: 1px thick, every 40px, starting at 100px - 30% opacity */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 39px,
      rgba(25, 118, 210, 0.3) 39px,
      rgba(25, 118, 210, 0.3) 40px
    );
  background-size:
    calc(100% - 40px) 100%,
    calc(100% - 40px) 100%,
    calc(100% - 40px) 40px;
  background-position:
    20px 0,
    20px 0,
    20px 100px;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat-y;
}

.quote-of-month .quote-text-overlay {
  position: relative;
  width: 100%;
  padding: 1% 8% 5% 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-writing);
  color: #333;
  min-height: 400px;
}

.quote-of-month .quote-header {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  /* margin-bottom: 5%; */
  padding-top: 2%;
  padding-bottom: 2%;
  color: #444;
  text-align: center;
  margin-left: -8%;
  margin-right: -8%;
}

.quote-of-month .quote-content {
  font-size: var(--font-size-h4);
  line-height: 2.2;
  margin: auto;
  /* margin-top: 2.5%; */
  
}

.quote-of-month .quote-content p {
  margin: 0;
  /* transform: translate(0px, -14%); */
  line-height: 1.7em;
  /* transform: rotate(1.5deg) translateY(40%); */
}

.quote-of-month .quote-attribution {
  font-size: clamp(0.8rem, 1.8vw, 1.1rem);
  margin-top: 3%;
  font-style: italic;
  text-align: right;
}

/* ================================
   Stacked Flashcard Quotes
   ================================ */

.quote-stack-section {
  max-width: 900px;
}

/* The stack holds all cards - height set by JS to tallest card */
.quote-stack {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* All cards are absolutely positioned */
.quote-stack .quote-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 380px;
  transition: none;
  cursor: default;
}

/* Quote number */
.quote-card .quote-number {
  position: absolute;
  top: 15px;
  left: 20px;
  font-family: var(--font-writing);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: #333;
  z-index: 10;
}

/* Controls row: prev arrow, counter, next arrow */
.quote-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: var(--spacing-lg);
  position: relative;
  z-index: 20;
}

/* Navigation arrows - override global button styles */
.quote-nav {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  color: var(--color-accent-1) !important;
  padding: 8px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.2s ease;
  letter-spacing: 0;
  line-height: 1;
  font-size: inherit;
}

.quote-nav:hover {
  background: transparent !important;
  color: var(--color-brown) !important;
}

.quote-nav svg {
  width: 32px;
  height: 32px;
}

/* Counter */
.quote-counter {
  font-size: 1.1rem;
  color: var(--color-accent-1);
}

@media (max-width: 480px) {
  .quote-card .quote-number {
    font-size: 1.2rem;
    top: 10px;
    left: 12px;
  }
}

/* Archive count styles */
.archive-count-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--padding) auto 1rem auto;
  max-width: 900px;
  /* gap: 1rem; */
  /* transform: translateY(80%); */
}


.archive-count-text {
  font-size: var(--font-size-h5);
  color: var(--color-black);
  font-family: var(--font-writing);
  margin: 0;
  text-align: center;
}

.archive-count-arrow {
  width: 50px;
  height: auto;
  transform: scaleX(-1) rotate(-30deg);
}

/* ================================
   Header Search Icon & Overlay
   ================================ */

/* Search Toggle Button in Header */
.header-search-toggle {
  position: absolute;
  right: var(--padding);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 100;
  text-decoration: none;
}

.header-search-toggle:hover {
  transform: translateY(-50%) scale(1.1);
}

.header-search-toggle svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-accent-1);
}

.header-search-toggle:hover svg {
  stroke: var(--color-light);
}

/* Search icon responsive positioning */
@media (max-width: 1340px) {
  .header-search-toggle {
    position: absolute;
    top: 20px;
    right: var(--padding);
    transform: none;
  }

  .header-search-toggle:hover {
    transform: scale(1.1);
  }
}

@media (max-width: 768px) {
  .header-search-toggle {
    top: 15px;
    right: 20px;
  }

  .header-search-toggle svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 400px) {
  .header-search-toggle {
    top: 10px;
    right: 10px;
  }

  .header-search-toggle svg {
    width: 18px;
    height: 18px;
  }
}

/* Search Overlay */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.search-overlay.active {
  opacity: 1;
  visibility: visible;
}

.search-overlay-content {
  width: 90%;
  max-width: 700px;
  text-align: center;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.search-overlay.active .search-overlay-content {
  transform: translateY(0);
}

.search-overlay-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: transparent !important;
  border: none !important;
  padding: 10px !important;
  cursor: pointer;
  color: white;
  transition: all 0.2s ease;
}

.search-overlay-close:hover {
  color: var(--color-accent-1);
  transform: scale(1.1);
  background: transparent !important;
}

.search-overlay-close svg {
  stroke: currentColor;
}

.search-overlay-label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  color: white;
  margin-bottom: 2rem;
}

.search-overlay-input-wrapper {
  display: flex;
  background: white;
  /* border-radius: 50px; */
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.search-overlay-input {
  flex: 1;
  padding: 1.25rem 2rem;
  border: none;
  font-size: 1.25rem;
  font-family: var(--font-body);
  outline: none;
  background: transparent;
}

.search-overlay-input::placeholder {
  color: #999;
}

.search-overlay-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 2rem !important;
  background: var(--color-accent-1) !important;
  color: white !important;
  border: none !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

.search-overlay-submit:hover {
  background: var(--color-accent-2) !important;
}

.search-overlay-submit svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

/* Responsive adjustments for search */
@media (max-width: 768px) {
  .search-overlay-close {
    top: 1rem;
    right: 1rem;
  }

  .search-overlay-label {
    font-size: var(--font-size-h3);
    margin-bottom: 1.5rem;
  }

  .search-overlay-input {
    padding: 1rem 1.5rem;
    font-size: 1rem;
  }

  .search-overlay-submit {
    padding: 1rem 1.5rem !important;
  }

  .header-search-toggle {
    margin-left: 0.5rem;
  }
}

/* ================================
   Search Page Styles
   ================================ */

.search-header-section {
  padding: var(--padding) 0 calc(var(--padding) * 2) 0;
  background: var(--color-background);
  /* margin: 0 0 var(--padding) 0; */
  position: relative;
  margin-top: 0 !important;
}

/* Centered bottom line like single.php */
.search-header-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-width);
  height: 2px;
  background: var(--color-accent-2);
}

.search-page-title {
  font-size: var(--font-size-h1);
  color: var(--color-accent-1);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.search-page-title span {
  color: var(--color-text);
  font-style: italic;
}

/* Search Form */
.search-form-wrapper {
  max-width: 700px;
  margin: 0 auto;
}

.search-form .search-input-group {
  display: flex;
  gap: 0;
  border: 2px solid var(--color-accent-1);
  /* border-radius: 50px; */
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.search-form .search-field {
  flex: 1;
  min-width: 0;
  padding: 1rem 1.5rem;
  border: none;
  font-size: var(--font-size-body);
  font-family: var(--font-body);
  outline: none;
  background: transparent;
}

.search-form .search-field:focus {
  outline: none;
}

/* Style native search clear button */
.search-form .search-field::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A3D2A' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
  cursor: pointer;
}

.search-form .search-submit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem !important;
  background: var(--color-accent-1) !important;
  color: white !important;
  border: none !important;
  font-family: var(--font-heading);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
  border-radius: 0 !important;
}

.search-form .search-submit:hover {
  background: var(--color-text) !important;
}

.search-form .search-submit svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* Results Count */
.search-results-count {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.search-results-count p {
  font-family: var(--font-writing);
  font-size: var(--font-size-h5);
  color: var(--color-text);
  margin: 0;
}

/* Search Pagination */
.search-pagination {
  margin: var(--padding) auto;
  text-align: center;
}

.search-pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.search-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  background: white;
  border: 2px solid var(--color-accent-1);
  color: var(--color-accent-1);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  /* border-radius: 8px; */
  transition: all 0.2s ease;
}

.search-pagination .page-numbers:hover {
  background: var(--color-accent-1);
  color: white;
}

.search-pagination .page-numbers.current {
  background: var(--color-accent-1);
  color: white;
}

.search-pagination .page-numbers svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.search-pagination .prev,
.search-pagination .next {
  gap: 0.25rem;
}

/* No Results Section */
.no-results-section {
  /* padding: calc(var(--padding) * 2) var(--padding); */
  text-align: center;
}

.no-results-content {
  max-width: 600px;
  margin: 0 auto;
}

.no-results-icon {
  margin-bottom: var(--spacing-lg);
  color: var(--color-accent-1);
  opacity: 0.5;
}

.no-results-icon svg {
  stroke: currentColor;
}

.no-results-content h2 {
  color: var(--color-accent-1);
  margin-bottom: var(--spacing-md);
}

.no-results-content p {
  color: var(--color-text);
  font-size: var(--font-size-body);
  margin-bottom: var(--spacing-xl);
}

.search-instructions {
  font-size: var(--font-size-h4);
  color: var(--color-text);
  font-style: italic;
}

.search-suggestions {
  margin-top: var(--padding);
  padding-top: var(--padding);
  border-top: 1px solid var(--color-accent-1);
}

.search-suggestions h3 {
  color: var(--color-accent-1);
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-h4);
}

.suggestion-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.suggestion-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: white;
  border: 2px solid var(--color-accent-1);
  color: var(--color-accent-1);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  /* border-radius: 25px; */
  transition: all 0.2s ease;
}

.suggestion-link:hover {
  background: var(--color-accent-1);
  color: white;
}

/* ================================
   Single Post Redesign Styles
   ================================ */

/* Readable Header Section (No Background Image) */
.single-header {
  padding: calc(var(--padding) * 6) var(--padding) 0 var(--padding);
  background: var(--color-background);
  border-bottom: 2px solid var(--color-accent-1);
}

.single-header .content {
  max-width: var(--max-width);
  margin: 0 auto;
}

.single-header .single-title {
  margin-bottom: 0.5rem;
  color: var(--color-accent-1);
}

.single-header .single-subtitle {
  color: var(--color-text);
  font-weight: var(--font-weight-normal);
  margin-top: 0.5rem;
  font-style: italic;
  line-height: var(--line-height-medium);
}

.single-header .header-category {
  margin-top: 1rem;
  font-size: var(--font-size-h5);
  color: var(--color-text);
}

.single-header .header-category a {
  color: var(--color-main);
  text-decoration: none;
  transition: color 0.3s ease;
}

.single-header .header-category a:hover {
  color: var(--color-light);
}

/* Single page uses .top for navigation positioning but needs single-header visual styles */
.single .top {
  padding-bottom: 0px !important;
  background: var(--color-background);
}

.single .top .content {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 var(--padding) !important;
  border-bottom: 2px solid var(--color-accent-2);
}

.single .top h1 {
  margin-bottom: 0.5rem;
  color: var(--color-accent-1);
  order: 1;
}

.single .top .header-category {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: var(--font-size-h5);
  color: var(--color-text);
  order: 2;
}

.single .top .header-category a {
  color: var(--color-main);
  text-decoration: none;
  transition: color 0.3s ease;
}

.single .top .header-category a:hover {
  color: var(--color-light);
}

.single .top .card-categories {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: var(--padding);
  order: 4;
}

.single .top .card-date {
  order: 3;
}

/* Two-Column Layout for Posts, Songs, Quotes, Books */
.two-column-layout {
  /* padding: calc(var(--padding) * 2) 0; */
}

.two-column-layout .content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding);
}

.two-column-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: calc(var(--padding) * 2);
  align-items: start;
}

.column-left {
  padding-right: var(--padding);
}

.column-right {
  position: sticky;
  top: calc(var(--padding) * 2);
}

.sidebar-image {
  max-width: 400px;
}

.sidebar-image img {
  width: 100%;
  height: auto;
  /* border-radius: 8px; */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sidebar-video {
  max-width: 100%;
}

.sidebar-video .video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* border-radius: 8px; */
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sidebar-video .video-embed iframe,
.sidebar-video .video-embed video {
  width: 100%;
  height: 100%;
}

/* Video-specific grid layout - 50/50 split */
.single-video .two-column-grid {
  grid-template-columns: 1fr 1fr;
}

.column-left .spotify-embed {
  margin-top: calc(var(--padding) * 2);
}

.column-left .book-link-wrapper,
.column-left .video-link-wrapper {
  margin-top: calc(var(--padding) * 2);
}

.flexible-content-section {
  margin-top: calc(var(--padding) * 2);
}



/* Tim's Signature
--------------------------------------------- */
.tim-signature {
  display: flex;
  align-items: center;
  gap: 2rem;
  /* margin: calc(var(--padding) * 3) 0 calc(var(--padding) * 2) 0; */
  padding: var(--padding) 0 0 0;
  border-top: 2px solid var(--color-border);
}

.signature-image {
  flex-shrink: 0;
}

.signature-image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.signature-text {
  display: flex;
  flex-direction: column;
  line-height: var(--line-height-tight);  
  /* gap: var(--spacing-xs); */
}

.signature-signoff {
  font-family: var(--font-writing);
  font-size: var(--font-size-h4);
  margin: 0;
  line-height: calc(var(--line-height-tight) * 1.1);  
  color: var(--color-text);
}

.signature-name {
  font-family: var(--font-writing);
  font-size: var(--font-size-h4);
  /* font-weight: var(--font-weight-bold); */
  margin: 0;
  color: var(--color-text);
  line-height: calc(var(--line-height-tight) * 1.1);    
}



/* Newsletter Section */
.newsletter-section {
  /* padding: calc(var(--padding) * 2) 0; */
}

.newsletter-section .content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding);
}

.newsletter-intro {
  text-align: center;
  margin-bottom: calc(var(--padding) * 2);
}

.newsletter-heading {
  text-align: center;
  color: var(--color-accent-1);
  margin-bottom: calc(var(--padding) * 3);
}

.newsletter-category-heading {
  color: var(--color-accent-1);
  font-size: var(--font-size-h3);
  margin-top: calc(var(--padding) * 3);
  margin-bottom: calc(var(--padding) * 1.5);
  padding-bottom: calc(var(--padding) / 2);
  border-bottom: 2px solid var(--color-accent-2);
}

.newsletter-category-heading:first-of-type {
  margin-top: 0;
}

/* Newsletter Item - Text Left / Image Right Layout */
.newsletter-item {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: calc(var(--padding) * 2);
  align-items: start;
  /* margin-bottom: calc(var(--padding) * 2); */
}

.newsletter-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.newsletter-item-content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--padding) / 2);
}

.newsletter-item-title {
  margin: 0;
  font-size: var(--font-size-h4);
}

.newsletter-item-title a {
  color: var(--color-accent-1);
  text-decoration: none;
  transition: color 0.3s ease;
}

.newsletter-item-title a:hover {
  color: var(--color-main);
}

.newsletter-item-author {
  margin: 0;
  font-style: italic;
  color: var(--color-text);
  font-size: 0.95rem;
}

.newsletter-item-excerpt {
  color: var(--color-text);
  line-height: 1.6;
}

.newsletter-item-excerpt p {
  margin: 0;
}

.newsletter-item-link {
  display: inline-block;
  color: var(--color-main);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  transition: all 0.3s ease;
  margin-top: calc(var(--padding) / 2);
}

.newsletter-item-link:hover {
  color: var(--color-light);
  transform: translateX(4px);
}

.newsletter-item-image {
  width: 300px;
  height: 300px;
  justify-self: end;
  flex-shrink: 0;
}

.newsletter-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* border-radius: 8px; */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.newsletter-item-image a:hover img {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Responsive Newsletter Items */
/* @media (max-width: 768px) {
  .newsletter-item {
    grid-template-columns: 1fr;
    gap: var(--padding);
  }

  .newsletter-item-image {
    max-width: 100%;
    order: -1; /* Move image above content on mobile */
  /* } */

  .newsletter-category-heading {
    font-size: var(--font-size-h4);
  }

/* Related Articles Section */
.related-articles-section {
  /* padding: calc(var(--padding) * 3) 0 calc(var(--padding) * 2) 0; */
}

.related-articles-section .content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding);
}

/* Related Articles Heading */
.related-heading {
  text-align: center;
  color: var(--color-accent-1);
  margin-bottom: calc(var(--padding) * 2);
  font-size: var(--font-size-h3);
}

  .sidebar-image,
  .sidebar-video {
    max-width: 100%;
    margin: 0 auto;
  }

/* Featured Section */
.featured-section {
  max-width: var(--max-width);
  margin: 0 auto;
  /* padding: 0 var(--padding); */
}

.featured-section .wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
}

.featured-heading {
  text-align: center;
  color: var(--color-accent-1);
  margin-bottom: var(--padding);
  font-size: var(--font-size-h2);
}

.featured-card-wrapper {
  max-width: 100%;
  margin: 0 auto var(--padding) auto;
}

.featured-card {
  position: relative;
}

.featured-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Overlay pseudo-element makes the entire card area clickable as the link,
   even though nested category badge anchors auto-close the outer link.
   Same trick as .news-card .card-link-wrapper::before. */
.featured-card .featured-card-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.featured-card-link:hover {
  text-decoration: none;
  color: inherit;
}

/* Category badges sit above the overlay so they remain individually clickable */
.featured-card .card-categories,
.featured-card .card-category-link {
  position: relative;
  z-index: 1;
}

.featured-card.two-columns .wrapper {
  overflow: hidden;
  grid-template-columns: 1.5fr 1fr;
  align-items: stretch;
  max-width: calc(var(--max-width) * 0.75);
  border: 2px solid var(--color-accent-1);
  transition: 0.3s;
}

.featured-card.two-columns:hover .wrapper {
  background: #eee;
  transform: translateY(-2px);
}

.featured-card.two-columns .left-column {
  background: none;
  padding: 0;
  overflow: hidden;
  min-width: 0;
  display: flex;
  height: 100%;
}

.featured-card.two-columns .left-column img {
  width: 100%;
  height: 100%;
  flex: 1;
  object-fit: cover;
  object-position: center;
  display: block;
}

.featured-card.two-columns .right-column {
  min-width: 0;
  border-top: none !important;
}

.featured-card.two-columns .right-column .content {
  padding: calc(var(--padding) / 2) calc(var(--padding) / 2) calc(var(--padding) / 2) 0;
}

.featured-card .read-more {
  margin: 0;
  font-size: var(--font-size-h6);
}

.featured-card .card-link {
  color: var(--color-main);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  transition: color 0.3s;
}

/* On card hover, "Read More" turns brown — same behavior as news cards */
.featured-card:hover .card-link {
  color: var(--color-accent-1);
}

.featured-card-wrapper .wrapper {
  padding: 0;
}

.featured-card .card-content {
  margin-bottom: var(--spacing-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.no-featured {
  text-align: center;
  color: var(--color-light);
  font-style: italic;
}

/* Monthly Highlights Page Styles */

/* Featured post sections - stacked layout */
.monthly-featured-post .featured-post-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: var(--padding);
}

/* Single vinyl record - uses carousel styles but centered, no swiper */
.monthly-single-record .single-vinyl-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: var(--padding) 0;
}

.monthly-single-record .single-vinyl-wrapper .vinyl-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

/* Use the exact carousel styles for vinyl record - just center it */
.monthly-single-record .single-vinyl-wrapper .carousel-image-wrapper.vinyl-record {
  width: 500px;
  height: 500px;
  max-width: 90vw;
  max-height: 90vw;
}

.monthly-single-record .single-vinyl-wrapper .vinyl-info {
  text-align: center;
  margin-top: var(--spacing-xl);
  max-width: 80%;
}

/* Single book on bookshelf - override grid transform for single item */
.favorite-books.monthly-single-book .books-grid.single-book-grid {
  display: flex;
  justify-content: center;
  padding: 0 var(--padding);
  transform: translateY(-73%);
  grid-template-columns: none;
}

.monthly-single-book .book-item {
  max-width: 200px;
}