/*
Theme Name: beanheaven
Author: Pikocode
Author URI: https://pikocode.com/
Description: beanheaven is a modern, sleek WordPress theme crafted for coffee shops and roasters. 
             Showcase your beans, brewing tips, and subscriptions with style. 
             Fully responsive, customizable, and perfect for coffee lovers. 
             Brew your brand online with beanheaven!
Version: 1.0.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beanheaven
Tags: custom-logo, custom-background, custom-header
Tested up to: 6.7
Requires PHP: 5.6
*/

*{
  font-family: 'Poppins',sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  flex: 1;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #F5E1C8;
  color: #000000;
  text-align: center;
}
/* Keyboard Focus */
:focus {
  outline: 3px solid black;
  outline-offset: 4px;
  box-shadow: 0 0 5px 2px yellow;
}
/*underline for links*/
a:not(.btn) {
  text-decoration: underline;
}
.btn{
  text-decoration: none;
}

/* for automatic bottom footer */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; 
  width: 100%; 
  overflow-x: hidden; 
}
main {
  flex: 1; 
}
.footer {
  background-color: #3E2723;
  color: #ffffff;
  font-family: 'Poppins', sans-serif; 
  padding: 40px 0; 
  margin-top: auto; 
  width: 100%; 
}

/*requirements */
.wp-caption {
  max-width: 100%;
  text-align: center;
  font-size: 14px;
  color: #666;
}
.wp-caption-text {
  margin-top: 5px;
  font-style: italic;
}
.sticky {
  background-color: #ffffcc;
  padding: 10px;
  border-left: 5px solid #ffcc00;
}
.gallery-caption {
  font-style: italic;
  text-align: center;
}
.bypostauthor {
  border-left: 3px solid #0073aa;
  padding-left: 10px;
}
.alignright {
  float: right;
  margin-left: 10px;
}
.alignleft {
  float: left;
  margin-right: 10px;
}
.aligncenter {
  display: block;
  margin: 0 auto;
}
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
}

/*OGs*/
h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}
p{
  font-family: 'Playfair Display', serif;
}
.hero-section {
  position: relative;
  width: 100vw;
  height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: white;
  padding: 120px 20px;
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8);
}
/* overlay to the hero section */
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* opacity  */
  z-index: 1; 
}
.hero-section img{
  max-width: 100%;
  max-height: 100vh;
  object-fit: cover;
}

/* Pagination Dots */
.pagination-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%); /* adjust left and right  */
  display: flex;
  gap: 11px;
}
.dot {
  width: 12px;
  height: 12px;
  background-color: rgba(238, 231, 231, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.8); /* contrast */
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.dot.active {
  background-color: white;
}
.hero-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat; 
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.slide.active {
  opacity: 1;
}
.hero-content {
  max-width: 800px; 
  text-align: center;
  padding: 100px 0 0 0;
  margin: 0 auto;
  position: relative;
  z-index: 2; /* makes it above slide */
  text-align: center;
}
.hero-content h1{
  font-size: 36px;
}
.hero-content p{
  font-size: 18px;
}
.btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #aa871f; 
  color: white; 
  font-weight: bold;
  border-radius: 8px;
  margin-top: 50px; 
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); 
  transition: 0.3s;
  border: 2px solid rgba(255, 215, 0, 0.8); 
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); 
}
.btn:hover {
  background-color: #fcda1a;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4); 
}


/*sections*/
.about-section, .products-section, .testimonials-section, .contact-section {
  padding: 50px;
}

/*about us*/
.about-us {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 80px; /* Reduced top padding */
  border-radius: 8px;
  /*  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2); */ 
  gap: 40px;
}
.about-content-title h2 {
  font-size: 36px;
  width: 100%;
  text-align: center;
  margin-top: 125px;
  margin-top: 0; /* Removes extra top space */
}
.about-content h3 {
  font-size: 26px;
  text-align: left;
  margin-bottom: 5px;
  margin-top: 0; 
}
.about-image img {
  width: 100%;
  height: 580px;
  border-radius: 8px;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
}
.about-content {
  max-width: 50%;
}
.about-content p {
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
  margin-bottom: 20px;
}

/* Products Section */
.products-section {
  padding: 50px 80px; /*alignment */
}
.products-grid {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px; 
  padding-top: 30px;
  padding-bottom: 50px;
}
.product {
  background: #ffffff; 
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 1; 
}
.products-section h2{
  font-size: 34px;
  padding-top: 50px;
}
.products-section h3{
  font-size: 24px;
}
.products-section p {
  font-size: 20px;
}
.product img {
  width: 100%;
  max-width: 769px;
  height: auto;
  border-radius: 10px;
 transition: transform 0.9s ease-in-out; 
}
.product:hover {
  transform: scale(1.2); 
}

/* Subscription Plan Section */
.subscription-section {
  padding: 50px 80px;
  text-align: center;
  background-color: #f3e1c9;
}
.subscription-section h2 {
  font-size: 32px; 
  margin-bottom: 20px;
  color: #000000; 
  font-family: 'Playfair Display', serif; 
}
.subscription-grid {
  display: flex;
  justify-content: center;
  gap: 30px; 
  margin-top: 30px;
}
.plan {
  background: #ffffff; 
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
  width: 600px; 
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.plan:hover {
  transform: translateY(-10px); 
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /
}
.plan h3 {
  font-size: 26px; 
  margin-bottom: 15px;
  font-family: 'Playfair Display', serif; 
  color: #000000; 
}
.plan .price {
  font-size: 32px; 
  font-weight: bold;
  color: #000000;; 
  font-family: 'Playfair Display', serif; 
}
.plan .price span {
  font-size: 18px; 
  color:  #000000;; 
}
.plan ul {
  list-style: none;
  padding: 0;
  margin: 25px 0; 
}
.plan ul li {
  margin: 12px 0;
  color:  #000000;; 
  font-size: 18px;
  font-family: 'Poppins', sans-serif; 
}
.plan .btn {
  display: inline-block;
  margin-top: 25px; 
  padding: 12px 24px; 
  background-color: #aa871f; 
  color: white;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  font-family: 'Poppins', sans-serif; 
  font-size: 18px; 
}
.plan .btn:hover {
  background-color: #fcda1a; 
}

/* Brewing Guide Section */
.brewing-tips-section {
  padding: 50px 80px; /*alignment */
  background-color: #f3e1c9;
  text-align: center;
}
.brewing-tips-section h2{
  font-size: 32px;
}
.tips-grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 40px;
}
.tip {
  background: #ffffff;
  padding: 20px; /*padding for all*/
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 1;
  text-align: center;
}
.tip:hover {
  transform: translateY(-10px); 
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /
}
.tip img {
  width: 100%; 
  height: 300px;
  border-radius: 5px;
  transition: transform 0.3s ease-in-out;
}
.tip h3 {
  font-size: 24px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.tip p {
  font-size: 18px;
  color: #0c0808;
}
.tip .btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #aa871f;
  color: white;
  font-weight: bold;
  border-radius: 5px;
  transition: 0.3s;
}
.tip .btn:hover {
  background-color: #fcda1a;
}

/* Modal Styles */
.modal {
  display: none; /*to be hidden by default */
  position: fixed;   /* stay in place */
  z-index: 1010; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.8); /*  background opacity */
}
.modal-content {
  background-color: #f3e1c9;
  margin: 5% auto; 
  padding: 50px;
  border: 1px solid #888;
  border-radius: 10px;
  width: 80%; 
  max-width: 700px;
  position: relative;
}
.modal-description {
  font-style: italic;
  color: #050000;
  padding-bottom: 20px;
}
.ingredients-list, .steps-list {
    text-align: left;
    padding: 0;
}
.close-modal {
  color: #6f4e37;
  float: right;
  font-size: 38px;
  font-weight: bold;
  cursor: pointer;
}
.close-modal:hover,
.close-modal:focus {
  color: #4a2c2a;
}
.modal-content h3 {
  font-size: 28px;
  margin-bottom: 20px;
}
.modal-content p {
  font-size: 18px;
  margin-bottom: 10px;
}
.modal-content ul,
.modal-content ol {
  font-size: 16px;
  margin-bottom: 20px;
  padding-left: 20px;
}
.modal-content ul{
  list-style-type: none;
}
.modal-content li {
  margin-bottom: 18px;
}

/* Testimonials Section */
.testimonials-section {
  padding: 40px 80px;
  background: #f3e1c9; 
  text-align: center;
}
.testimonials-section h2 {
  font-size: 32px;
  margin-top: 0px;
  margin-bottom: 40px;
  color: #000000; 
}
.testimonials-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.testimonial-card {
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  text-align: left;
  transition: transform 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-10px);
}
.testimonial-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
  object-fit: cover; 
}
.testimonial-info h4 {
  margin: 0;
  font-size: 18px;
  color: #000000;
}
.star-rating {
  color: #FFD700; /* color for stars */
  font-size: 18px;
}
.testimonial-text {
  font-size: 18px;
  line-height: 1.6;
  color: #000000;
  margin: 0;
}

/* Contact Section */
.contact-us {
  width: 100%;
  padding: 60px 0;
  background: #f3e1c9; 
  text-align: center;
}
.contact-content {
  max-width: 60%;
  margin: auto;
  background: #ffffff; 
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* shadow effect */
}
.contact-us h2 {
  font-size: 32px;
  font-weight: bold;
  color: #000000; 
  margin-bottom: 20px;
}
/* Contact Grid */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.contact-info {
  border-radius: 6px;
  margin: 0 12px;
}
.contact-info h3 {
  font-size: 20px;
  color: black; 
  margin-bottom: 10px;
}
.contact-info p {
  font-size: 16px;
  color: #000000; 
}

/* Input Fields */
.contact-content input,
.contact-content textarea,
.contact-content button {
  width: calc(100% - 24px); /*  all elements the same width */
  padding: 12px;
  margin: 8px 0;
  border: 1px solid #b08968; 
  border-radius: 6px;
  font-size: 18px;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}
.input-row {
  display: flex;
  gap: 10px; 
  width: 100%;
  padding: 12px;
}
/* Message box height */
.contact-content textarea {
  height: 180px; 
  resize: vertical;
}
.contact-content button {
  padding: 12px;
  font-weight: bold;
  background-color: #aa871f;
  color: white;
  font-size: 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}
.contact-content button:hover {
  background-color: #e6a700;
  color: #000000;
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 1.5s forwards;
}
@keyframes fadeIn {
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Header Section */
.site-header {
  background-color: #3E2723;
  padding: 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.container {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo img {
  width: 80px;
}
.main-navigation .nav-menu {
  list-style: none;
  display: flex;
  gap: 20px;
}
.main-navigation .nav-menu li {
  display: inline;
}
.main-navigation .nav-menu a {
  color: white;
  font-size: 16px;
  transition: 0.3s;
}
.main-navigation .nav-menu a:hover {
  color: #FFD700;
}

/* Sidebar Indicator */
#sidebar-indicator {
  position: fixed;
  top: 20px; 
  left: -10px; 
  background-color: #5B331D; 
  color: white;
  padding: 20px; 
  border-radius: 5px; 
  cursor: pointer;
  z-index: 1000;
  border: 3px solid white; 
  font-size: 24px; /* makes larger icon */
  display: block; 
}
#sidebar-indicator span {
  font-size: 30px;
}
/* Sidebar Collapse Button */
#collapse-button {
  position: absolute;
  width: 100%;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%); /* moves left or right */
  background-color: #5B331D;
  color: white;
  cursor: pointer;
  font-size: 55px;
  text-align: center;
}
#collapse-button:hover {
  background-color: #99644e;
  width: 100%;
}
/* Sidebar */
#sidebar {
  width: 250px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: -250px; 
  background: #5B331D; 
  transition: left 0.3s ease;
  z-index: 1000; 
}
.sidebar-logo {
  text-align: center;
  padding: 10px 0;
}
.sidebar-logo img {
  padding-top: 20px;
  width: 150px; 
  height: auto; 
  border-radius: 8px; 
  text-align: left;
}
.sidebar-logo h2 {
  margin-top: 10px; 
  font-size: 28px; 
  color: white; 
  font-family: 'Playfair Display', serif; 
  text-align: center;
}
#sidebar ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(75vh - 150px); /*adjust the ul alignment*/
  margin: 0;
  padding: 0;
  list-style: none;
}
#sidebar ul li {
  padding: 20px 25px; 
  text-align: left;
  width: 100%;
}
#sidebar ul li a {
  color: rgb(255, 255, 255);
  display: block;
  font-size: 18px;
  transition: background 0.3s ease;
}
#sidebar ul li a:hover {
  background: #99644e;
}
#main-content {
  flex: 1;
  transition: margin-left 0.3s ease;
}

/* Footer Section */
.footer-container {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto; 
  padding: 0 80px; 
  flex-wrap: wrap;
}
.footer {
  background-color: #3E2723;
  color: #ffffff;
  font-family: 'Poppins', sans-serif; 
  padding: 40px 0;
  margin-top: auto; 
  width: 100%; 
}
.footer-column {
  width: 22%; 
  min-width: 200px;
}
.footer h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer ul li {
  margin-bottom: 10px;
}
.footer ul li a {
  color: #fff;
  font-size: 14px;
  transition: color 0.3s ease;
}
.footer ul li a:hover {
  color: #f8b400;
}
.newsletter input {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #fff;
  color: rgb(0, 0, 0);
  font-size: 14px;
}
.newsletter button {
  margin-top: 10px;
  background-color: #f8b400;
  color: black;
  border: none;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}
.newsletter button:hover {
  background-color: #e6a700;
}
/* Copyright Section */
.footer-bottom {
  text-align: center;
  padding-top: 15px;
  font-size: 16px;
  color: #ffffff;
  border-top: 2px solid #7a7474;
  margin-top: 20px;
}
.footer-bottom a{
  color: #ffffff;
}

/* Single Post Page Styling */
.single-post-container {
  max-width: 800px;
  margin: 60px auto;
  padding: 40px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.single-post-container h1 {
  font-size: 36px;
  font-family: 'Playfair Display', serif;
  text-align: center;
  color: #3E2723;
  margin-bottom: 20px;
}
.single-post-container .post-thumbnail {
  text-align: center;
  margin-bottom: 25px;
}
.single-post-container .post-thumbnail img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.single-post-container .entry-content {
  font-size: 18px;
  line-height: 1.8;
  color: #000;
  text-align: justify;
  font-family: 'Poppins', sans-serif;
}
/* Post Pagination */
.post-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 2px solid #7a7474;
}
.post-navigation a {
  text-decoration: none;
  color: #aa871f;
  font-weight: bold;
  font-size: 18px;
  transition: color 0.3s ease;
}
.post-navigation a:hover {
  color: #fcda1a;
}
.author-bio {
  margin-top: 40px;
  padding: 20px;
  background: #F5E1C8;
  border-left: 5px solid #aa871f;
  border-radius: 5px;
}
.author-bio h3 {
  font-size: 24px;
  font-family: 'Playfair Display', serif;
  color: #3E2723;
}
.author-bio p {
  font-size: 18px;
  color: #000;
}
/* Comments Section */
.comments-area {
  margin-top: 50px;
  padding: 30px;
  background-color: #F5E1C8;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.comments-area h2 {
  font-size: 26px;
  color: #3E2723;
  text-align: center;
  font-family: 'Playfair Display', serif;
}
.comment-list {
  list-style: none;
  padding: 0;
}
.comment-list li {
  padding: 15px;
  border-bottom: 2px solid #7a7474;
}
.comment-list li:last-child {
  border-bottom: none;
}
.comment-meta {
  font-size: 16px;
  font-weight: bold;
  color: #aa871f;
}
.comment-text {
  font-size: 18px;
  color: #000;
}