/*
Theme Name: Booknet Theme
Author: Ajan Inc
Description: A custom WordPress block theme with customizable patterns.
Version: 1.1
Text Domain: booknet
Tags: block-patterns, full-site-editing, customizable, responsive, theme-json, custom-blocks
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/



/* Target links within navigation items that open in a new tab */
.wp-block-navigation-item a[target="_blank"] .wp-block-navigation-item__label::after {
    content: '\2191'; 
    display: inline-block;
    margin-left: 0.5rem; 
    width: 0.5em;      
    height: 0;
    line-height: 1;  
    vertical-align: top; 
    transform: rotate(45deg);
    position: absolute;
  }
.wp-block-navigation-item a[target="_blank"] .wp-block-navigation-item__label::after {
    text-decoration: none;
}
.is-style-small-text {
  font-size: var(--wp--preset--font-size--small); 
  line-height: 1.6;
}

.is-style-caption-text{
    font-size: 0.75rem !important; 
    line-height: 1rem !important; 
    color: #494949;
}

.test{
  height: 100%;
}


/*
 * Custom List Style with SVG Icon
 * Applies when the 'Custom SVG Icon List' style is selected for a List block.
 */

/* The class WordPress generates is 'is-style-' + your style name */
.wp-block-list.is-style-custom-svg-icon {
    list-style-type: none !important; /* Remove default bullets/numbers */
    padding-left: 0; /* Reset default padding often used for bullets */
}

.wp-block-list.is-style-custom-svg-icon li {
    padding-left: 2em; /* Create space for the SVG icon. Adjust as needed. */
    position: relative;   /* Allows absolute positioning of the ::before pseudo-element */
    margin-bottom: 1rem; /* Optional: space between list items */
}

.wp-block-list.is-style-custom-svg-icon li::before {
    content: ''; /* Necessary for background-image to show */
    display: inline-block; /* Or 'block' if you prefer */

    /* Size of your icon */
    width: 1.2em;  /* Adjust based on your SVG and desired size */
    height: 1.2em; /* Adjust based on your SVG and desired size */

    /* Positioning the icon */
    position: absolute;
    left: 0;
    /* top:7px; */

    /* YOUR SVG ICON GOES HERE as a background-image */
    /* You need to URL-encode your SVG code. */
    /* Example with a simple checkmark SVG (replace with your own): */
    background-image: url("./assets/img/checkbox.svg");
    /* Example with a right arrow SVG: */
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2350575e'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E"); */

    background-repeat: no-repeat;
    background-size: contain;     /* Ensures the SVG scales within the bounds */
    background-position: center;  /* Centers the SVG in the allocated space */
}


/* --- Common styles for custom arrow Details blocks --- */
/* Remove default marker for both custom styles */
.wp-block-details.is-style-arrow-left > summary,
.wp-block-details.is-style-arrow-right > summary {
    list-style: none; /* Try to hide default marker */
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    /* padding-left: 0; Reset padding for custom marker placement */
}

/* More robust way to hide default marker across browsers */
.wp-block-details.is-style-arrow-left > summary::-webkit-details-marker,
.wp-block-details.is-style-arrow-left > summary::marker,
.wp-block-details.is-style-arrow-right > summary::-webkit-details-marker,
.wp-block-details.is-style-arrow-right > summary::marker {
    display: none !important; /* Important to override user agent styles */
    content: "" !important; /* For Firefox */
}

/* Define the custom arrow pseudo-element (common properties) */
.wp-block-details.is-style-arrow-left > summary::before,
.wp-block-details.is-style-arrow-right > summary::before { /* Using ::before for left, ::after for right might be cleaner */
    content: '';
    width: 1rem;  /* Adjust size as needed */
    height: 1rem; /* Adjust size as needed */
    display: inline-block;
    background-image: url('assets/img/close.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    color: inherit; /* SVG 'currentColor' will use the text color */
    transition: transform 0.2s ease-in-out;
}

/* --- Style for "Arrow Left" (is-style-arrow-left) --- */
.wp-block-details.is-style-arrow-left > summary {
    /* Default flex order (pseudo-element first, then text content) */
}

.wp-block-details.is-style-arrow-left > summary::before {
    margin-right: 0.5em; /* Space between arrow and text */
}

.wp-block-details.is-style-arrow-left[open] > summary::before {
    transform: rotate(90deg); /* Arrow points down when open */
}

/* --- Style for "Arrow Right" (is-style-arrow-right) --- */
.wp-block-details.is-style-arrow-right > summary {
    justify-content: space-between; /* Pushes text to left, pseudo-element to right */
    /* To use ::before on the right, we need to change its order or use ::after */
}

/* Let's use ::after for the right arrow to make flex ordering simpler */
.wp-block-details.is-style-arrow-right > summary::before {
    content: none; /* Hide ::before if it was defined commonly */
}

.wp-block-details.is-style-arrow-right > summary::after { /* Using ::after */
    content: '';
    width: 1em;
    height: 1em;
    display: inline-block;
    background-image: url('assets/img/close.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    color: inherit;
    transition: transform 0.2s ease-in-out;
    margin-left: 0.5em; /* Space between text and arrow */
    order: 1; /* Ensure it's visually last with justify-content:space-between */
}

.wp-block-details.is-style-arrow-right[open] > summary::after { /* Using ::after */
    /* transform: rotate(-90deg);  */
    background-image: url('assets/img/open.png');

}


/* Apply a different background color to posts tagged 'docs' */
.is-doc-post {
    /* background-color: #e6f7ff;
    /* You can add other styles here too, like padding or a border */
    /* padding: 15px; */
    /* border: 1px solid #b3d7ff; */
}

.is-doc-post .wp-block-post-featured-image {
    aspect-ratio: 3 / 4 !important;  /* Sets a 3:4 portrait aspect ratio */
    width: 100%;          /* Or a specific max-width if you prefer */
    height: auto;         /* Height will be determined by width and aspect-ratio */
    overflow: hidden;     /* Ensures image parts outside the new ratio are clipped */
}

/* plugin css for custom post type */

/* Default button style (if not already covered by .wp-block-button__link) */
.wp-block-my-custom-fields-plugin-document-meta-display .document-download-button {
    /* Your existing styles for the button version */
    display: inline-block;
    padding: 8px 15px;
    background-color: #0073aa;
    color: white !important;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}
.wp-block-my-custom-fields-plugin-document-meta-display .document-download-button:hover {
    background-color: #005a87;
}

/* Style for the "Text Link Style" (when .is-style-link-button is active) */
.wp-block-my-custom-fields-plugin-document-meta-display.is-style-link-button .document-download-button-container a, /* Targets the <a> tag directly */
.wp-block-my-custom-fields-plugin-document-meta-display .document-download-link-style { /* Class applied by PHP/JS */
    background-color: transparent !important;
    color: #0073aa !important; /* Or your theme's link color */
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    text-decoration: underline !important;
    font-weight: normal !important;
    box-shadow: none !important;
}

.wp-block-my-custom-fields-plugin-document-meta-display.is-style-link-button .document-download-button-container a:hover,
.wp-block-my-custom-fields-plugin-document-meta-display .document-download-link-style:hover {
    color: #005a87 !important; /* Darker link color on hover */
    text-decoration: none !important;
}

/* Ensure the lock icon color is appropriate for both styles */
.document-download-button .lock-icon svg,
.document-download-link-style .lock-icon svg {
    fill: currentColor; /* Inherits color from parent <a> tag */
}

/* Wrapper classes for styling text within the block (if not using default p tags) */
.document-meta-display-wrapper .document-access-status {
    margin-bottom: 0.5em;
}
.document-meta-display-wrapper .document-download-button-container {
    margin-top: 0.5em;
}




/* Theme css */

/* Active link styles */
/* a:active,
.wp-block-navigation-item__content:active,
.wp-block-button__link:active {
    color: #000000 !important; 
    background-color: #156075 !important;
} */

/* nav description */

/* Make the navigation link a flex container to stack the title and description */
.wp-block-navigation-link a.wp-block-navigation-item__content,
.wp-block-navigation-item > a.wp-block-navigation-item__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    gap: 0.1em; 
}

/* Styling for the navigation item description on the front-end */
.wp-block-navigation-item__description {
    font-size: 0.8em;
    opacity: 0.75;
    line-height: 1.2;
    font-style: normal;
    pointer-events: none;
    color: currentColor;
    margin-top: -0.2em;
}

/* Styling for the description preview inside the block editor */
.wp-block-navigation-link .wp-block-navigation-item__description.is-editor-only-preview {
    display: block;
    font-size: 11px;
    color: #444;
    background-color: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    margin-top: 4px;
    max-width: 90%;
}

.wp-block-navigation-item.has-visible-description .wp-block-navigation-item__description {
    display: block !important; /* Force it to be visible, overriding any 'display: none'. */
}

/* theme styling */
/*
 * Custom Block Styles for H1 Heading Variations
 */

/* --- H1 Sub-heading Style --- */
/* This CSS only applies when a Heading block is an H1 AND has the "H1 Sub-heading" style selected. */
.is-style-h1-sub-heading {
    font-weight: 400;   
    color: var(--wp--preset--color--secondary); 
    font-family: var(--wp--preset--font-family--lato); /* 'Lato' from your theme.json */
    font-size: 2.25rem; 
    line-height: 1;     
    letter-spacing: 0px;

}

/* --- H1 Sub-title Style --- */
/* This CSS only applies when a Heading block is an H1 AND has the "H1 Sub-title" style selected. */
.is-style-h1-sub-title {
    font-weight: 275;   
    font-family: var(--wp--preset--font-family--lato); /* 'Lato' from your theme.json */
    font-size: 2.125rem; 
    line-height: 1;     
    letter-spacing: 0px;
    color: var(--wp--preset--color--primary); 
}

.is-style-h2-sub-title {
    font-weight: 275;   
    font-family: var(--wp--preset--font-family--lato); 
    color: var(--wp--preset--color--black); 
    font-size: 2rem; 
    line-height: 1;     
    letter-spacing: 0px;
}

.is-style-overline-heading{
    font-weight: 700;   
    font-family: var(--wp--preset--font-family--lato); 
    font-size: var(--wp--preset--font-size--small); 
    line-height: 1.125rem;     
    letter-spacing: 0px;
    text-transform: uppercase;
}

.is-style-title-1-heading{
    font-weight: 700;   
    font-family: var(--wp--preset--font-family--lato); 
    font-size: 1.125rem; 
    line-height: 1.375rem;     
    letter-spacing: 0px;
    color:var(--wp--preset--color--link)
}

.is-style-title-2-heading{
    font-weight: 400;   
    font-family: var(--wp--preset--font-family--lato); 
    font-size: 1rem; 
    line-height: 1.25rem;     
    letter-spacing: 0px;
    color: #767676;
}

.is-style-h1 {
    font-family: var(--wp--preset--font-family--lato);
    font-weight: 700 !important;
    font-size: 3.75rem !important;
    line-height: 1;
    letter-spacing: 0px;
}

.is-style-h2 {
    font-family: var(--wp--preset--font-family--lato);
    font-weight: 700 !important;
    font-size: 3rem !important;
    line-height: 1;
    letter-spacing: 0px;
    color: var(--wp--preset--color--primary);
}

.is-style-h3 {
    font-family: var(--wp--preset--font-family--lato);
    font-weight: 400 !important;
    font-size: 2.625rem !important;
    line-height: 1;
    letter-spacing: 0px;
    color: var(--wp--preset--color--primary);
}

.is-style-h4 {
    font-family: var(--wp--preset--font-family--lato);
    font-weight: 275 !important;
    font-size: 1.5rem !important;
    line-height: 1;
    letter-spacing: 0px;
}

.is-style-h5 {
    font-family: var(--wp--preset--font-family--lato);
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    line-height: 1;
    letter-spacing: 0px;
    color: var(--wp--preset--color--primary);
}

.is-style-h6 {
    font-family: var(--wp--preset--font-family--lato);
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    line-height: 1;
    letter-spacing: 0px;
}

/* buttons */

/* Base styles for all our custom buttons for consistency */
.wp-block-button .wp-block-button__link {
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border-width: 2px;
    border-style: solid;
}

/* --- PRIMARY BUTTON --- */
/* Filled Style */
.wp-block-button.is-style-button-primary .wp-block-button__link {
    background-color: var(--wp--preset--color--primary);
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--primary);

}
.wp-block-button.is-style-button-primary .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--primary-variation);
    background: var(--wp--preset--color--primary-variation);
    border-color: var(--wp--preset--color--primary-variation);
    text-decoration: underline;
}
.wp-block-button.is-style-button-primary .wp-block-button__link:active {
    background-color: var(--wp--preset--color--primary);
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    text-decoration: underline;
}

/* --- SECONDARY BUTTON --- */
/* Filled Style */
.wp-block-button.is-style-button-secondary .wp-block-button__link {
    /* background-color: var(--wp--preset--color--secondary);  */
    color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--secondary-variation);
    background: linear-gradient(180deg, rgba(255, 255, 255, 3e-05) -18.59%, rgba(127, 168, 180, 0.163761) 81.93%, rgba(21, 96, 117, 0.3) 123.32%),linear-gradient(0deg, #EDF3F4, #EDF3F4);

}
.wp-block-button.is-style-button-secondary .wp-block-button__link:hover {
    text-decoration: underline;
    color: var(--wp--preset--color--black);
    background: var(--wp--preset--color--secondary);
    border-color: var(--wp--preset--color--secondary);

}
.wp-block-button.is-style-button-secondary .wp-block-button__link:active {
    text-decoration: underline;
    color: var(--wp--preset--color--black);
    background: var(--wp--preset--color--secondary-variation);
    background: var(--wp--preset--color--secondary-variation);
}



/* --- TERTIARY BUTTON --- */
/* Filled Style */
.wp-block-button.is-style-button-tertiary .wp-block-button__link {
    /* background-color: var(--wp--preset--color--tertiary);  */
    color: var(--wp--preset--color--black); 
    border-color: var(--wp--preset--color--tertiary);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3375) 0%, rgba(0, 0, 0, 0.135) 157.2%),linear-gradient(0deg, #CCCCCC, #CCCCCC);


}
.wp-block-button.is-style-button-tertiary .wp-block-button__link:hover {
    text-decoration: underline;
    border-color: var(--wp--preset--color--tertiary-variation);
    background-color: #BEBEBE;
    background: #BEBEBE;
}
.wp-block-button.is-style-button-tertiary .wp-block-button__link:active {
    background: #999999;
    background-color: #999999;
    text-decoration: underline;
    border-color:var(--wp--preset--color--tertiary-variation);
}

/* remove underline in tile component category */
.is-component-tile .taxonomy-category a{
    text-decoration: none;
}



/*
 * Custom Styles for Navigation Block Links as Buttons
 * Ensure your Navigation block has the class "styled-nav-buttons"
 */

/* Target the individual link elements within your styled navigation */
.styled-nav-buttons .wp-block-navigation-item__content {
    display: inline-block; /* Allows padding, margin, etc., like a button */
    padding: 1rem 1.24rem;    /* Vertical and horizontal padding */
    margin: 4px;           /* Space around each button */
    border: 1px solid;
    text-decoration: none; /* Remove underline from links */
    border-radius: 8px;    /* Rounded corners for button look */
    font-weight: 500;      /* Slightly bolder text */
    line-height: 1.25;      /* Adjust for text vertical centering if needed */
    text-align: center;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Smooth transitions */
    font-size: 1rem;
    font-family: var(--wp--preset--font-family--lato);
    color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--secondary);
    background: linear-gradient(180deg, rgba(255, 255, 255, 3e-05) -18.59%, rgba(127, 168, 180, 0.163761) 81.93%, rgba(21, 96, 117, 0.3) 123.32%);
    

}

/* Hover and Focus styles for all buttons */
.styled-nav-buttons .wp-block-navigation-item__content:hover{
    text-decoration: underline;
    color: var(--wp--preset--color--black);
    background: var(--wp--preset--color--secondary);
    border-color: var(--wp--preset--color--secondary);
}

.styled-nav-buttons .wp-block-navigation-item__content:focus {
    text-decoration: underline;
    color: var(--wp--preset--color--black);
    background: var(--wp--preset--color--secondary-variation);
    background: var(--wp--preset--color--secondary-variation);
}


/*
 * Highlight style for the Current Page Item's Link
 * WordPress adds classes like .current-menu-item or .current-page-item to the <li> parent.
 */
.styled-nav-buttons .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.styled-nav-buttons .wp-block-navigation-item.current-page-item > .wp-block-navigation-item__content {
    background-color: var(--wp--preset--color--primary);
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--primary);
}

/* Optional: Adjustments for the UL container if needed */
.styled-nav-buttons .wp-block-navigation__container {
    display: flex;     /* Helps align items in a row if not already */
    flex-wrap: wrap;   /* Allows buttons to wrap to the next line on smaller screens */
    list-style: none;  /* Ensure no list bullets if not already handled */
    padding-left: 0;   /* Remove default UL padding */
}

/* Optional: Ensure list items don't add extra styling */
.styled-nav-buttons .wp-block-navigation-item {
    margin: 0; /* Reset default margins on list items if any */
}





/*
 * ========================================
 * Global Components styling
 * ========================================
 */
li{
    line-height: 1.25rem;
    /* margin-bottom: 1rem; */
}
h4{
    font-weight: 275;
}



/* page css */

.page-layout{
    margin: 0 auto;
    padding: var(--wp--preset--spacing--20);

}

.page-layout .wp-block-image{
    flex-shrink: 0 ; 
    flex-grow: 0 ;   
}

.page-layout p{
    flex-shrink: 1; 
    flex-grow: 1;  
    flex-basis: 0;
}

@media (max-width: 600px) {
    .page-layout aside{
        padding-bottom: 0 !important;
    }

    .page-layout-blog-home .wp-block-columns{
        flex-direction: column-reverse;
    }
    .page-layout-blog-home .page-layout-blog-home--list .wp-block-columns{
        flex-direction: column-reverse;
    }
    .page-layout-blog-home img {
        width: 70% !important;
        height: auto;
    }
    .page-layout p{  
        flex-basis: auto;
    }

}

@media (max-width: 450px) {
    
}

/* home and archive page */
ul.is-custom-category{
    padding-left: 0;
    /* margin: 0; */
}
.is-custom-category li{
    list-style: none;
    margin-bottom: 0.5rem;
}

/* single post page */
/*
 * =========================================
 * Responsive Images within Post Content
 * =========================================
 */

/* 1. Base Responsive Rule for ALL Images in Content */
/* This makes images scale down gracefully if their container is too small. */
.page-layout-post-content img {
    max-width: 100%;
    height: auto;
    display: block; 
}


/* 2. Styles for Aligned Images on Desktop */
/* These styles handle images aligned left or right with text wrapping around them. */
.page-layout-post-content .alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}

.page-layout-post-content .alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.page-layout-post-content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}


/*
 * ========================================
 * Responsive Breakpoints
 * ========================================
 */

/* Tablet Styles (600px and below) */
@media (max-width: 600px) {
    /* On tablets, stop images from floating so they don't crowd the text.
       They will now take up their own line. */
    .page-layout-post-content .alignleft,
    .page-layout-post-content .alignright {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobile Styles (450px and below) */
@media (max-width: 450px) {
    .page-layout-post-content .alignleft,
    .page-layout-post-content .alignright,
    .page-layout-post-content .aligncenter {
        margin-left: 0;
        margin-right: 0;
    }
}

/*
 * Responsive Category Display
 * Hides and shows the correct version based on screen size.
 */

/* On desktop (screens wider than 600px), HIDE the mobile dropdown. */
@media (min-width: 601px) {
    .show-on-mobile {
        display: none;
    }
}

/* On mobile (screens 600px and smaller), HIDE the desktop list. */
@media (max-width: 600px) {
    .hide-on-mobile {
        display: none;
    }
}

/*
 * =========================================
 * Custom Styling for Mobile Category Dropdown
 * =========================================
 */

/* Target the <select> element inside our mobile-only block */
.show-on-mobile select {
    /* --- Reset default browser appearance --- */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* --- Custom styling --- */
    width: 100%; /* Make it full width of its container */
    padding: 0.75rem 2.5rem 0.75rem 1rem; /* Top/Bottom, Right (for arrow), Left */
    border: 2px solid var(--wp--preset--color--primary); /* Use a theme color */
    border-radius: 5px;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--primary);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;

    /* --- Custom Arrow Icon --- */
    /* We use a URL-encoded SVG for a clean, consistent arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23094150'%3E%3Cpath d='M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.6-3.6.9 1.2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5em;
}

/* Optional: Style on focus */
.show-on-mobile select:focus {
    outline: 2px solid var(--wp--preset--color--primary-variation);
    outline-offset: 2px;
}





/* responsive breakpoints */

/* Styles for large screens */
@media (min-width: 1200px) {  

}


 /* Styles for tablets */

@media (max-width: 768px) {

}

 /* Styles for mobile devices */

 @media (max-width: 480px) {

 }

 @media (max-width: 320px) {

 }