/*
Theme Name: Cafe Coffee Charm
Theme URI: https://www.seothemesexpert.com/products/cafe-coffee-charm-theme
Author: drakearthur
Author URI: https://www.seothemesexpert.com/
Description: Cafe Coffee Charm is a multipurpose WordPress theme crafted for cafes, coffee shops, restaurants, cafe coffee, coffee shop, espresso cafe, cappuccino bar, latte lounge, mocha cafe, brew house, coffee house, coffee lounge, coffee corner, coffee istro, and coffee hub seeking a minimal yet elegant online presence. Designed with sophistication in mind, this theme offers a clean, modern, and luxurious layout that adapts seamlessly across all devices, making it fully responsive and mobile-friendly. With retina-ready graphics and interactive features, your website will look stunning and captivate visitors instantly. Developers and business owners alike will appreciate the optimized codes, faster page load time, and secure, clean code structure. The theme is built on a powerful Bootstrap framework and comes with handy shortcodes to simplify the design process. It provides extensive customization options, allowing you to personalize every element, from banners and call-to-action buttons (CTA) to testimonial sections and team showcases. Whether you want to highlight your special brews, share customer stories, or introduce your expert baristas, Cafe Coffee Charm ensures a user-friendly and engaging experience. The elegant banner layouts and animated sections create an interactive flow, while built-in social media integration helps you connect with your audience effortlessly. Agency-friendly and translation-ready, this theme supports global reach and multilingual audiences. With clean, retina-ready visuals and luxurious design elements, it delivers both beauty and performance. Perfect for professionals, creatives, and developers, Cafe Coffee Charm offers flexibility, personalization, and sophistication in every detail. If you want a modern, stunning, and multipurpose theme that blends elegance with functionality, Cafe Coffee Charm is the perfect choice to elevate your cafe or coffee business online.
Version: 0.3
Tested up to: 6.8
Requires PHP: 7.2
License: GPLv3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: cafe-coffee-charm
Template: coffee-tea
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, grid-layout, wide-blocks, editor-style, full-width-template, custom-background, custom-colors, custom-header, custom-logo, custom-menu, sticky-post, featured-images, footer-widgets, flexible-header, featured-image-header, post-formats, theme-options, threaded-comments, translation-ready, rtl-language-support, e-commerce, food-and-drink, entertainment

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

a{
    text-decoration: none;
    color: var(--color-primary1);
}
.blog-item.inner-related-post .post-title a{
  color: var(--color-primary1);
  text-decoration: none;
}
.singel-page-area a{
  color: var(--color-primary1);
}
.footer-area{
  background-color:var(--color-primary1);
}
/* Make sure the section can host the pseudo-element */

/* Hero / Brown background height control */
#slider-section{
  position: relative;
  /* This reserves space below the artwork responsively */
  padding-top: min(40vw, 300px);
}
/* Draw the hanging image at the top center */
#slider-section:before{
  content: "" !important;                 /* critical: renders the pseudo */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: min(60vw, 560px);               /* responsive height */
  
  background-image: url(assets/images/slider-bg.png) !important;
  background-repeat: no-repeat !important;
  background-position: center 12px !important;  /* nudge down a bit */
  background-size: contain !important;          /* keep proportions */

  /* neutralize the old semicircle/crop effects */
  clip-path: none !important;
  filter: none !important;
  box-shadow: none !important;
  z-index: 0;
}

/* Small phones: give a touch more room if needed */
@media (max-width: 480px){
  #slider-section { padding-top: 66vw; }
  #slider-section:before { background-position: center 8px; }
}

}
.navbar-menubar .current-menu-item a{
  color: #F49B3F !important;
}
.navbar-menubar .current-menu-item a::after{
  background-color: #F49B3F !important;
}
.navbar-menubar .current-menu-item a::after {
    content: "";
    position: absolute;
    left: 20px;
    bottom: -20px;
    right: 20px;
    width: 60%;
    height: 2px;
    background-color: #F49B3F;
}
.navbar-menubar .current-menu-item a::before{
  content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    right: 20px;
    width: 60%;
    height: 2px;
    background-color:#F49B3F;
}
.navbar-menubar .sub-menu a::after, .navbar-menubar .sub-menu a::before{
  content: none;
}
/* Product Grid */
#product_cat_slider h2{
  font-size: 68px;
  color: #38220F;
}
#product_cat_slider p.short_head:before, #product_cat_slider p.short_head:after{
  width: 8%;
}
#product_cat_slider p.short_head{
  font-size: 25px;
  color: #38220F;
  font-weight: 500;
}
#product_cat_slider .product-box {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  height: 320px;
}
#product_cat_slider .product-image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
#product_cat_slider .product-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.7) 60%,
    rgba(0,0,0,0.9) 100%
  );
  border-radius: 16px;
  z-index: 1;
  height: 320px;
}
.product-image h3 {
  font-weight: 600;
    margin: 0;
    text-align: center;
    position: absolute;
    bottom: 10%;
    z-index: 999;
    text-align: center;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}
.product-image h3 a {
  color: #fff;
  text-decoration: none;
  padding: 3px 10px;
  font-size: 20px;
  text-align: center;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  display: inline-block;
  text-transform: capitalize;
}
.product-box:hover h3 a{
  padding: 3px 22px;
  border-top: 1px solid #634832;
  border-bottom: 1px solid #634832;
}
/* Price Circle */
#product_cat_slider .product-price del {
    display: none;
}
#product_cat_slider .product-price {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #fff;
  color: #000;
  font-weight: bold;
  z-index: 999;
  border-radius: 50%;
  /* padding: 8px 14px; */
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-weight: 700;
  text-decoration: none;
  width: 64px;
  font-size: 16px;
  height: 64px;
  align-items: center;
  display: flex;
  justify-content: center;
}
#product_cat_slider .owl-carousel .owl-nav.disabled{
  display: block !important;
}
#product-carousel .owl-stage-outer{
  padding: 10px 0;
}
.footer-area .footer-widget .widget:not(.widget_social_widget):not(.widget_tag_cloud) li a:hover{
  color: #fff;
}
@media (max-width: 767px) {
 #product_cat_slider p.short_head{
  font-size: 14px;
 }
 #product_cat_slider h2{
  font-size: 46px;
 }
}
@media (min-width: 768px) and (max-width: 999px) {
  #product_cat_slider p.short_head{
  font-size: 14px;
 }
 #product_cat_slider h2{
  font-size: 46px;
 }
  .product-image h3 a{
    font-size: 16px;
  }
 #product_cat_slider .product-box::after, #product_cat_slider .product-image img{
  height: 220px;
 }
 #product_cat_slider .owl-next span{
  font-size: 24px;
  width: 40px;
  height: 40px;
 }
 #product_cat_slider .product-price{
  width: 54px;
  height: 54px;
  font-size: 13px;
 }
}
@media (min-width: 999px) and (max-width: 1024px) {
  #product_cat_slider p.short_head{
  font-size: 16px;
 }
 #product_cat_slider h2{
  font-size: 46px;
 }
  .product-image h3 a{
    font-size: 16px;
  }
 #product_cat_slider .product-box::after, #product_cat_slider .product-image img{
  height: 270px;
 }
 #product_cat_slider .owl-next span{
  font-size: 24px;
  width: 40px;
  height: 40px;
 }
 #product_cat_slider .product-price{
  width: 54px;
  height: 54px;
  font-size: 13px;
 }
}
@media (max-width: 1000px) {
  .navbar-menubar .current-menu-item a::before, .navbar-menubar .current-menu-item a::after{
    content: none;
  }
}
#slider-section::after {
  content: "Your Daily Coffee Reading\A As I gaze into your cup, a quiet current weaves through the symbols—today’s theme is letting go gracefully and starting fresh. From the East, I see a moon, pointing to intuition, dreams, hidden tides. Expect a fresh opening where a conversation lands at the perfect moment. The West shows a ring, echoing commitment, contract, agreements. It reminds you to honor an old promise.";
  white-space: pre-line;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: clamp(110px, 30vw, 180px);

  /* 🔑 Control line length instead of raw width */
  max-width: 70ch;   /* about 70 characters per line */
  width: 90%;        /* prevent overflow on smaller screens */
  
  text-align: center;
  color: #e5c79b;    /* cream text */
  font-family: 'Great Vibes', cursive;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 600;

  z-index: 20;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  #slider-section::after {
    max-width: 40ch;   /* shorter line length on mobile */
    font-size: 12px;
    line-height: 1.5;
  }
}
/* 1) Make the brown hero a fixed, smaller height */
#slider-section {
  position: relative;
  height: 280px !important;   /* ← shrink/expand the brown area here */
  padding: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* keep the sun size (change only if you want a different sun size) */
#slider-section::before {
  height: 240px !important;   /* sun image height */
  background-position: center 10px !important;
}

/* 2) Pull the next section upward so the boundary is closer */
#slider-section + * {
  margin-top: -60px !important;   /* tweak this: -40px … -140px */
}

/* Mobile tweak (optional) */
@media (max-width: 768px) {
  #slider-section { height: 220px !important; }
  #slider-section::before { height: 200px !important; }
  #slider-section + * { margin-top: -40px !important; }
}
/* ===== Nuke the white rounded menu bar (header-wide) ===== */

/* 1) Make every header container transparent and flat */
header,
.site-header,
header *,
.site-header * {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  filter: none !important;
}

/* 2) Kill any pseudo-elements used to draw the pill */
header *::before,
header *::after,
.site-header *::before,
.site-header *::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 3) If the pill is on a specific “bottom/header/menu” row, flatten it too */
.header-bottom,
.header-bottom .container,
.menu-area,
.menu-area .container,
.navbar-menubar,
.navbar-menubar .container {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* 4) Some themes inject inline background styles—override those as well */
header [style*="background"],
.site-header [style*="background"] {
  background: transparent !important;
}

/* Keep menu links readable on the brown background */
.navbar-menubar a { color: #f5deb3 !important; }
.navbar-menubar a:hover,
.navbar-menubar .current-menu-item > a { color: #F49B3F !important; }
/* TEMP TEST — should hide the entire menu bar */
.navbar-menubar { display: none !important; }
/* Target the logo GIF circle */
.header-bottom img,
.site-logo img,
.logo img {
  border-radius: 50% !important;   /* force perfect circle */
  overflow: hidden !important;     /* hide anything outside the circle */
  display: block;                  /* removes inline gaps */
  margin: 0 auto;                  /* centers it if needed */
  border: none !important;         /* remove extra borders/lines */
}

/* Make sure parent wrapper is also circular */
.header-bottom,
.site-logo,
.logo {
  border-radius: 50% !important;
  overflow: hidden !important;
  border: none !important;
}
/* NUCLEAR: pin the last Buttons block you added */
body .wp-block-buttons:last-of-type {
  position: fixed !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 999999 !important;

  display: flex !important;
  gap: 10px !important;

  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Button styling (optional) */
body .wp-block-buttons:last-of-type .wp-block-button__link,
body .wp-block-buttons:last-of-type .wp-element-button {
  background: #38210f !important;
  color: #f5deb3 !important;
  border-radius: 9999px !important;
  padding: 10px 16px !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Mobile tweak */
@media (max-width: 768px) {
  body .wp-block-buttons:last-of-type {
    top: 10px !important;
    left: 10px !important;
    gap: 8px !important;
  }
}