/*
Theme Name: The Cabinet Craftsmen
Theme URI: #
Author: The Cabinet Craftsmen LLC
Author URI: #
Description: A modern and sleek WordPress theme designed for The Cabinet Craftsmen LLC, specializing in custom cabinets and finish carpentry, built with Tailwind CSS.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thecabinetcraftsmen
Tags: custom-background, custom-colors, custom-header, custom-menu, featured-images, flexible-header, full-width-template, theme-options, translation-ready, accessibility-ready, block-editor-styles, wide-blocks

This theme is designed for "The Cabinet Craftsmen LLC," a business focused on high-quality custom cabinets and finish carpentry.
It aims for a modern aesthetic with subtle nods to the craft of woodworking, powered by Tailwind CSS.
*/

/* No specific CSS rules here now. Tailwind will handle styling. */
/* Any custom styles not handled by Tailwind can go here, or in a separate CSS file enqueued in functions.php */

/* Basic dropdown menu styling not covered by Tailwind config directly */
/* These specific styles are needed to make the sub-menus work visually */
.menu-item-has-children { position: relative; }
.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    /* Tailwind will define brand-wood-dark, use a direct hex if Tailwind not loaded yet */
    background-color: #8B4513; /* brand-wood-dark */
    border-radius: 0 0 0.375rem 0.375rem; /* rounded-b-md */
    padding: 0.5rem 0; /* py-2 */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* shadow-md */
    min-width: 14rem; /* Custom width */
    z-index: 50; /* z-50 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease-in-out; /* transition all duration-300 ease-in-out */
}
.menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.sub-menu li a {
    display: block; /* block */
    color: #f9f9f9; /* brand-cream */
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    white-space: nowrap; /* whitespace-nowrap */
    transition: all 0.2s ease; /* transition duration-200 ease */
}
.sub-menu li a:hover {
    background-color: #A0522D; /* brand-wood-light */
    color: white; /* text-white */
}

/* Custom styles for menu link hover effect (The underline) */
/* This specific class `wp-menu-link` is added manually to the logo link and applied via 'link_before'/'link_after' in wp_nav_menu */
.wp-menu-link {
    position: relative;
    overflow: hidden;
}
.wp-menu-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #A0522D; /* Using brand-wood-light from our new palette */
    transition: width 0.3s ease-out;
}
.wp-menu-link:hover::after {
    width: 100%;
}

/* Ensure images fill their containers but don't overflow */
img {
    max-width: 100%;
    height: auto;
}





/* ... (existing styles, like dropdowns and wp-menu-link hover effects) ... */

/* Adjustments for the Custom Logo size */
a.custom-logo-link {
    display: inline-flex; /* Use flex to vertically align the image if needed, and constrain its own height */
    align-items: center; /* Vertically center the logo within its link area */
    height: 50px; /* Set the desired height for the logo's clickable area. Adjust this value. */
    /* You can also add max-width here if you want to limit the overall width of the logo area */
}

a.custom-logo-link img.custom-logo {
    max-height: 100%; /* Make the image fill the height of its parent link */
    width: auto;     /* Maintain aspect ratio */
    /* If you want to force a max-width for the image itself: */
    /* max-width: 200px; */ /* Example: adjust as needed */
}

/* Ensure the hardcoded site title (if no custom logo is set) also matches this general height */
/* This ensures consistency in the header's height regardless of logo type */
.block.h-10.wp-menu-link {
    height: 50px; /* Match the height set for custom-logo-link */
    /* The other existing Tailwind classes (text-2xl, font-heading, etc.) will still apply */
}


/*
 * Fix for position: sticky on mobile.
 * This overrides any parent 'overflow: hidden' properties that break sticky positioning.
*/
@media (max-width: 1023px) {
  html, 
  body, 
  #page, 
  .site {
    overflow: visible !important;
  }
}


/* Final fix for Astra sticky header on mobile */
html {
    overflow-x: visible !important;
}