/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

.site-content {
	background-color:#F8F4F1;
}

/* ----- home page hero--------- */
.hero-bg-zoom {
  position: relative !important;
  overflow: hidden !important;
}

/* Force the Elementor container to show your pseudo-element */
.hero-bg-zoom::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  
  /* Path and Image */
  background-image: url("../../uploads/2025/12/hero_home_page_1-scaled.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  
  /* Zoom Logic */
  transform: scale(1);
  transition: transform 8s ease !important;
}

/* Ensure the spacer widget inside doesn't block the view */
.hero-bg-zoom .elementor-widget-spacer {
    position: relative;
    z-index: 2;
    pointer-events: none; /* Allows hover to pass through to the container */
}

/* The Hover Zoom */
.hero-bg-zoom:hover::before {
  transform: scale(1.3) !important;
}
@media (max-width: 767px) {
    .hero-bg-zoom:hover::before {
        transform: scale(1.1) !important; /* Gentler zoom for mobile */
    }
}
/*----------END HERO----------*/
/*home page end*/

/*shop products - shop now button*/
.rustic-etsy-button {
    display: inline-block;
    padding: 14px 30px;
    background-color: #f2b6ac; /* dusty clay pink */
    color: #4a2f36; /* earthy brown */
    text-decoration: none;
   	font-family: "Playfair Display", "Libre Baskerville", Georgia, serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 22px 26px 24px 28px; /* slightly uneven */
    border: 2px solid #4a2f36;
    transition: all 0.3s ease;
  }

  .rustic-etsy-button:hover {
    background-color: #e39a8f;
    transform: translateY(-2px);
  }

	/*product page - product short description*/
	.etsy-short-cta {
	  margin-top: 12px;
	}

	.etsy-short-cta p {
	  margin-bottom: 10px;
	  font-size: 15px;
	  line-height: 1.4;
	}

	/* product page - secondary button */
	.etsy-secondary-button {
	  display: inline-block;
	  padding: 10px 22px;
	  background-color: transparent;
	  color: #334155;
	  font-size: 14px;
	  letter-spacing: 0.4px;
	  text-decoration: none;
	  border: 1.5px solid #5a3a42;
	  border-radius: 20px 22px 18px 24px; /* soft handmade feel */
	  transition: all 0.25s ease;
	}
	/* product page */
	.etsy-secondary-button:hover {
	  background-color: #f2b6ac; /* your main clay pink */
	  color: #3f2a2e;
	  transform: translateY(-1px);
	}

	/*hiding the category and tag in product page*/
	.single-product .product_meta {
		display: none !important;
	}
	/* Hide category link below breadcrumb on product pages */
	.single-product-category {
		display: none !important;
	}



/*START --- classes page ---- */

/*header part*/
.classes-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Just enough to see where it ends */
	padding-top: 90px !important;
    padding-bottom: 90px !important;
    margin-bottom: 60px !important;
	
}

/* 2. The Main Title (H1) */
.classes-header-h1 {
    font-size: 3rem !important; /* Grand but elegant */
    font-weight: 400 !important;
    color: #667063 !important; /* Your signature Studio Green */
    letter-spacing: -0.01em;
    margin-bottom: 25px !important;
    line-height: 1.2;
    text-align: center;
}

/* 3. The Sub-header Description */
.classes-header-desc {
    font-family: 'Libre Baskerville', serif; /* Serif adds a "crafted" feel */
    font-size: 1.1rem !important;
    color: #8c9d87 !important; /* A muted version of your green */
    margin: 0 auto !important;
    line-height: 1.7;
    text-align: center;
    font-style: italic; /* Makes it feel like an invitation */
}

/*Class Filter Widget Styling --- */
.class-categories-filter {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important; /* Removed extra spacing */
    max-width: 100%;
}

/* Sidebar Title - Elegant & Minimal */
.widget-title {
    font-family: "Playfair Display", serif;
    font-size: 1.3rem;
    font-style: italic;
    color: #334155;
    border-bottom: 1px solid rgba(140, 157, 135, 0.2);
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.class-categories-filter li {
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,0.03);
	margin-bottom: 8px; /* Tight spacing between rows */

}

/* The Links */
.class-categories-filter li a {
    text-decoration: none;
    /*font-family: "Libre Baskerville", serif;*/
    font-size: 0.75rem;
    color: #667063 !important; /* Muted Studio Green */
    display: flex;
    justify-content: space-between; /* Pushes counts to the right */
    align-items: center;
    transition: all 0.3s ease;
}

/* Hover & Active State */
.class-categories-filter li a:hover,
.class-categories-filter li a.is-active {
    color: #C16A54 !important; /* Clay Pink */
    transform: translateX(5px); /* Subtle boutique "nudge" */
}

/* The Count (e.g., the "3" or "1") */
.filter-count {
    font-size: 0.75rem;
    background: #f9f7f5; /* Match your header background */
    padding: 2px 8px;
    border-radius: 10px;
    color: #a3a2a2;
}


.filter-link {
    display: flex;
    justify-content: space-between; /* Pushes name to left, count to right */
    align-items: center;
    text-decoration: none;
    color: #334155; /* Default font color */
    font-size: 16px;
    padding: 4px 0; /* Minimal vertical padding */
    transition: color 0.3s ease;
}

/* Hover State */
.filter-link:hover .filter-name {
    color:#f09b8e ; /* #8C9D87 for Green on hover */
}

/* THE ACTIVE STATE */
.filter-link.is-active .filter-name {
    color: #f2b6ac !important; /* Your Pink */
    font-weight: 700; /* Bold for high visibility */
}

.filter-link.is-active .filter-count {
    color: #f2b6ac !important;
    font-weight: 700;
}

/* Secondary style for the numbers */
.filter-count {
    font-size: 14px;
    color: #8C9D87; /* Green for numbers to keep them subtle but matching */
}
/* END --- Class Filter Widget Styling --- */

/* --- BOUTIQUE CLASSES GRID --- */
/* 1. THE CARD: Make it a flex container */
.classes_grid .wp-block-post {
    background-color: #ffffff;
    padding: 25px !important;
    border-radius: 0px 40px 0px 40px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); 
    border: 1px solid rgba(140, 157, 135, 0.1); 
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; 
}

/* 2. THE INNER GROUP: Force it to stretch top-to-bottom */
.classes_grid .wp-block-group.is-layout-flow {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* 3. THE TITLE: Fixed height for straight horizontal lines */
.classes_grid .wp-block-post-title {
    min-height: 3.5rem; 
    margin-bottom: 15px !important;
}

/* 4. THE DESCRIPTION: The "Spring" that pushes items down */
.classes_grid .short_desc {
    flex-grow: 1 !important; 
    margin-bottom: 20px !important;
	/* Justification logic */
    text-align: justify;
    text-justify: inter-word; /* Makes the spacing between words look natural */
}

/* 5. THE BOTTOM ANCHORS: Price/Duration and Read More */
/* margin-top: auto pushes this whole group to the floor */
.classes_grid .wp-block-columns, 
.classes_grid .wp-block-post-excerpt {
    margin-top: auto !important;
}

/* 6. LABELS & VALUES */
.classes_grid p {
    text-transform: uppercase;
	letter-spacing: 1.1px;
    font-size: 0.85rem !important;
    color: #8C9D87 !important; 
    margin-bottom: 2px !important;
    font-weight: 600;
}

/* 7. READ MORE LINK: Subtle boutique style */
.wp-block-post-excerpt__more-link {
    display: inline-block !important;
   /* font-family: "Playfair Display", serif;
    font-style: italic;
    color: #C16A54 !important;*/
    text-decoration: none;
    border-bottom: 1px solid rgba(193, 106, 84, 0.3);
    transition: all 0.3s ease;
    margin-top: 10px !important;
}

.wp-block-post-excerpt__more-link:hover {
    border-bottom: 1px solid rgba(193, 106, 84, 1);
    padding-left: 5px; 
}

/* Unified Image Height for all Class Cards */
.classes_grid .wp-block-post-featured-image img {
    height: 220px !important; /* Forces all images to this height */
    width: 100% !important;
    object-fit: cover !important; /* Crops the image instead of squashing it */
    border-radius: 7px 7px 0 0 !important; /* Keeps your rounded corners at the top */
}

.original_price_field .value, .original_price_field .prefix{
	opacity:0.5;
	text-decoration: line-through;
	display: inline !important;
}

.current_price_field .value, .current_price_field .prefix{
	display: inline !important;
}


/*mobile css for all classes page*/
@media (max-width: 921px) {

    /*start - remove sidebar from mobile view */
    .classes-categories-coloumn {
        display: none !important;;       
    }

	/*end - remove sidebar from mobile view */

    /* 4. Fix card grid for mobile */
    .classes_grid.wp-block-post-template {
        grid-template-columns: 1fr !important; /* Single column cards */
    }
	
	.classes-page-content{
		padding: 20px 0px 0px 0px !important;
	}
	
	/* header part*/
	.classes-header {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
		margin-bottom: 0px !important;;
    }
	.classes-header-h1 {
        font-size: 2rem !important;
    }
}

/*END --- classes page ---- */


/* Custom Sidebar Padding Override */
@media (min-width: 993px) {
   /* .ast-left-sidebar #secondary {
        padding-right: 30px !important;
    }*/
}

/* --- single class - start ---*/
/* --- Automatic Sculpted Class Layout --- */
.classes{
	padding:0px !important; /* removing space at the top of the page*/
	margin:0px !important;
}
.class-single-content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1100px;
    margin: 0px auto;
    padding: 0px;
    align-items: stretch;
}

/* LEFT SIDE: Featured Image */
.class-featured-image {
    flex: 1;
    min-width: 350px;
	display: flex;
}

.class-featured-image img {
	width: 100%;
	object-fit: cover;
    border-radius: 0px 0px 0px 120px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* RIGHT SIDE: The Details Bubble */
.class-details-bubble {
    flex: 1;
    min-width: 350px;
    background-color: white; 
    padding: 30px;
    border-radius: 0 120px 0px 0; /* The big sculpted top-right corner */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically if text is short */
    box-shadow: 10px 10px 30px rgba(0,0,0,0.03);
}

/* Title Styling */
.entry-title {
	margin:0px;
	padding:10px;
}

/* Detail Items with Icons */
.detail-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    color: #334155;
}

/* Using WordPress Dashicons (Free) */
.detail-item:before {
    font-family: "dashicons";
    color: #8C9D87; /* Your Green */
    font-size: 24px;
}

.item-price:before { content: "\f323"; }    /* Tag icon */
.item-duration:before { content: "\f469"; } /* Clock icon */

.detail-item strong {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8C9D87;
}
/* full description - START */
/* Description Styling (Polished & Professional) */
.class-description {
    max-width: 800px;
    margin: 0px auto; /* Centers the whole section below the photo/bubble */
    padding: 0 20px;
    color: #475569; /* Soft Slate Grey */
	background-color: white;
	padding-bottom: 50px;
}

/* The Intro Paragraph */
.class-description p:first-of-type {
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 40px;
    color: #334155; /* Slightly darker for emphasis */
}

/* Section Headers (What's Included / Ideal For) */
.class-description h3 {
    color: #8C9D87; /* Your Green */
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 50px 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(140, 157, 135, 0.15); /* Faded Green divider */
}

/* What's Included List */
.class-description ul {
    list-style: none;
}
.class-description li {
	padding-left:15px;
    border-radius: 10px;
    border-left: 4px solid #8C9D87; /* Green accent bar */
    font-style: italic;
}
/*full description -  END*/

/* single class breadcrumb*/
.class-breadcrumbs {
    max-width: 1100px; /* Aligns with your main container width */
    margin: 20px auto 10px;
    padding: 0 20px;
    font-size: 0.75rem; /* Small and subtle */
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #b5c2b1; /* A very faded version of your green */
}

.class-breadcrumbs a {
    text-decoration: none;
    color: #b5c2b1;
    transition: color 0.3s ease;
}

.class-breadcrumbs a:hover {
    color: #f2b6ac; /* Your pink for a soft interaction */
}

.class-breadcrumbs .sep {
    margin: 0 8px;
    opacity: 0.5;
}

.class-breadcrumbs .current {
    color: #8C9D87; /* Your actual green to show where they are */
    font-weight: 500;
}

/* The Enquire Button */
.book-now-button {
    display: block;
    background-color: #C16A54; /* Your Pink */
    color: white !important;
    padding: 18px;
    text-align: center;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 30px;
    transition: 0.3s;
}

.book-now-button:hover {
	background-color: #A55642; /* Deeper clay tone */
    transform: translateY(-3px);
}

/* animation*/
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.class-single-content {
  animation: fadeInUp 0.8s ease-out forwards;
}
/* Mobile Fix */
@media (max-width: 800px) {
    .class-single-content { flex-direction: column; }
    .class-featured-image img { border-radius: 20px 20px 0 0; }
    .class-details-bubble { border-radius: 0 0 20px 20px; border-top-right-radius: 60px; }	
}
@media (max-width: 600px) {
    .class-description {
        margin: 40px auto;
    }
}
/* --- single class - end ---*/

/*  ---- my studio page start ---*/
/* 1. FORCE UNIFIED SQUARE CROPPING */
.gallery-item img, .wp-gallery-item img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
}

/* 2. FORCE 2 COLUMNS ON MOBILE */
@media (max-width: 767px) {
    /* Target the gallery container */
    .gallery, .wp-gallery, .elementor-image-gallery > div {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Forces 2 equal columns */
        gap: 15px !important; /* Space between pots */
        width: 100% !important;
    }

    /* Clean up any old WordPress margins that might break the grid */
    .gallery-item {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ensure the caption doesn't mess up the alignment */
    .gallery-caption {
        display: none; 
    }
}
/*  ---- my studio page end ---*/

/* START - contact me page  */
/* Target the Contact Page Container */
@media (max-width: 767px) {
    /* The parent container holding the two columns */
    .contact-me-grid > .e-con-inner {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

}
/* END - contact me page  */

/* START - footer  */
.footer-logo-img{
	width:80px;
}
.footer-paragraph{
	 text-align: justify;
	 margin-right:30px;
	 margin-left:30px;
}
.footer-header{
	letter-spacing:0.05em;
	font-weight:300;
}
.footer-copyright{
	font-family:Rosario;
}
/* END - footer  */