/* Reset some basic elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Header Styling */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #e0e0e0; /* Delimiting line */
}

.logo a {
    font-size: 1.5em;
    font-weight: bold;
    color: #333333;
    text-decoration: none;
}

.main-nav ul {
    list-style: none;
    display: flex;
}

.main-nav ul li {
    position: relative;
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid #e0e0e0; /* Delimiting line */
}

.main-nav ul li:first-child {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

.main-nav ul li a {
    text-decoration: none;
    color: #333333;
    font-size: 1em;
    padding: 5px 0;
    display: block;
}

.main-nav ul li a:hover {
    color: #007BFF; /* Change color on hover */
}

/* Dropdown Styling */
.themes-dropdown:hover .dropdown {
    display: block;
}

.dropdown {
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    min-width: 150px;
    z-index: 1000;
}

.dropdown li {
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.dropdown li:last-child {
    border-bottom: none;
}

.dropdown li a {
    color: #333333;
}

.dropdown li a:hover {
    background-color: #f5f5f5;
}

/* Breadcrumb Styling */
.breadcrumb {
    padding: 10px 20px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.9em;
}

.breadcrumb a {
    color: #007BFF;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* Main Content Styling */
main {
    padding: 20px;
}

/* Footer Styling */
footer {
    text-align: center;
    padding: 15px 0;
    border-top: 1px solid #e0e0e0;
    width: 100%;
    bottom: 0;
}

/* Ensure the main container behaves in row direction by default */
#main-calculator-container {
    display: flex;
    flex-direction: row; /* Default to side-by-side */
}

/* Ensure content sections behave properly */
#content-section-wrapper {
    display: flex;
    flex-direction: row; /* Default to row */
    justify-content: space-between;
    width: 100%;
}

#input-section {
    flex: 1;
    max-width: 350px;
    background-color: #f0f0f0;
    border: 2px solid #d3d3d3;
    border-radius: 8px;
    margin-bottom: 20px;
}

#result-section {
    flex: 1;
    max-width: calc(100% - 350px); /* The remaining space */
    background-color: #ffffff;
}


/* Popular Section */
#popular-section {
    flex: 1; 
    max-width: 350px;
    background-color: #e6f6fa;
    border: 1px solid darkblue;
    padding: 15px;
    margin-top: 20px; /* Adds space between sections */
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Main navigation stacking vertically on smaller screens */
    .main-nav ul {
        flex-direction: column;
    }

    .main-nav ul li {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid #e0e0e0;
    }

    .main-nav ul li:first-child {
        border-top: none;
    }

    /* Stack sections vertically on mobile screens */
    #main-calculator-container {
        flex-direction: column; /* Stack sections vertically */
        gap: 20px; /* Adds space between stacked sections */
    }

    /* Make all sections full width on mobile */
    #input-section,
    #result-section,
    #popular-section {
        max-width: 100%; /* Full width for all sections */
        margin-bottom: 20px; /* Space between sections */
    }
}


/* ===== Moved from base.html inline <style> blocks (externalized for caching) ===== */
/* skip-to-content link: hidden until keyboard-focused */
	    .skip-link {
	        position: absolute; left: -999px; top: 0; z-index: 1000;
	        background: #007bff; color: #fff; padding: 8px 14px; border-radius: 0 0 4px 0;
	    }
	    .skip-link:focus { left: 0; }
	    /* visually hidden but available to screen readers / heading outline */
	    .sr-only {
	        position: absolute !important;
	        width: 1px; height: 1px;
	        padding: 0; margin: -1px;
	        overflow: hidden; clip: rect(0,0,0,0);
	        white-space: nowrap; border: 0;
	    }
	    .hidden-main {
	        display: none;
	    }
        /* Ensure body and html take up the full height of the page */
        html, body {
            height: 100%;
            margin: 0;
        }

        body {
            max-width: 1100px;
			padding: 0px !important;
            margin: 0 auto !important;
            display: flex !important;
            flex-direction: column !important;
        }

        main {
            flex-grow: 1;
        }

		.container-fluid {
		
			padding-right: 0px !important;
			padding-left: 0px !important;

		}
        .navbar {
            width: 100%;
            padding-bottom: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #ffffff !important;
            border-bottom: 1px solid #ddd;
			padding: 5px 0 0 5px !important;
        }

        /* Style for the burger menu icon with equal margins */
        .navbar-toggler {
            margin: 5px;
        }

        .nav-tabs {
            border-bottom: none;
            margin-bottom: 0;
        }

        .nav-tabs .nav-link {
            background: linear-gradient(to bottom, #f8f9fa, white);
            border: 1px solid #ddd;
            border-bottom: none;
            margin-right: 2px;
            border-radius: 0.25rem 0.25rem 0 0;
            padding: 8px 16px;
            color: #555;
        }

        .nav-tabs .nav-link.active {
            background-color: #007bff;
            border-color: #007bff #007bff #fff;
            color: white;
        }

        .nav-tabs .nav-link:hover {
            background-color: #e9ecef;
        }

        .navbar .navbar-brand {
            color: inherit;
        }

        footer {
            max-width: 1100px;
            margin: 0 auto;
            text-align: left;
            width: 100%;
            border-top: 1px solid #ddd;
            padding-top: 10px;
            clear: both;
        }

        /* Mobile view styling */
        @media (max-width: 992px) {
            /* Stack the nav items vertically when in mobile view */
            .nav-tabs .nav-item {
                width: 100%;
            }

            .nav-tabs .nav-link {
                display: block;
                width: 100%;
                text-align: left;
                padding: 10px 16px;
                border-radius: 0;
                border: 1px solid #ddd;
                margin-bottom: 2px;
            }
        }

/* General container styling */
	#main-calculator-container {
	    display: flex;
	}

	/* Content sections for inputs and results */
	.content-half {
	    flex: 1 1 350px;
	    max-width: 350px;
	}


	/* General container styling */
	/* General container styling */
	#popular-section {
	    background-color: beige;
	    border: 1px solid darkgoldenrod;
	    padding: 20px;
	    margin-top: 20px;
	    border-radius: 0px;
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Slight shadow */
	    flex-basis: 350px; /* Fixed width */
	    flex-grow: 0; /* Prevent it from growing larger */
	    flex-shrink: 0; /* Prevent it from shrinking */
	    height: auto; /* Ensure height adjusts based on content */
	    margin-left: 10px; /* Optional: Add spacing between sections */
	}



	/* Remove margin-left for mobile screens */
	@media (max-width: 768px) {
	    #main-calculator-container {
	        flex-direction: column;
	        align-items: center;
	    }

	    #popular-section {
	        margin-left: 0; /* Remove left margin */
	        width: 100%; /* Full width for mobile */
	    }
	}

	/* Tooltip styling remains unchanged */
	.tooltip-container {
	    position: relative;
	    display: inline-block;
	    cursor: pointer;
	    text-decoration: underline dotted grey;
	    text-underline-offset: 2px; /* Adjust the space between text and the underline */
	}

	.tooltip-container .tooltip-text {
	    visibility: hidden;
	    width: 200px;
	    background-color: black;
	    color: #fff;
	    text-align: center;
	    border-radius: 5px;
	    padding: 5px 10px;
	    position: absolute;
	    z-index: 1;
	    bottom: 100%; /* Position above the text */
	    left: 50%;
	    margin-left: -100px;
	    opacity: 0;
	    transition: opacity 0.3s;
	}

	.tooltip-container:hover .tooltip-text {
	    visibility: visible;
	    opacity: 1;
	}

/* Styles for the print button and date */
		.header-anchor-links-left {
		    display: flex;
		    align-items: center;
		    gap: 10px;
		    margin-bottom: 3px; /* Optional: Add spacing below */
		}

		.header-anchor-links-left button {
			flex: none !important;
			width: auto !important;
		    background: none;
		    border: none;
		    color: inherit;
		    font: inherit;
		    text-decoration: none;
		    cursor: pointer;
		    padding: 0;
		    margin: 0;
		    display: inline-flex; /* Align icon and text horizontally */
		    align-items: center;
		}

		.header-anchor-links-left button:hover {
		    text-decoration: underline;
		}

		.header-anchor-links-left .print-date {
		    font-size: 14px;
		    color: #555; /* Optional: Different color for date */
		}

		/* Styles for Cite, Link, Share buttons */
		.header-anchor-links-right {
		    display: flex;
		    align-items: center;
		    gap: 10px;
		}

		.header-anchor-links-right button {
			flex: none !important;
			width: auto !important;
		    background: none;
		    border: none;
		    color: inherit;
		    font: inherit;
		    text-decoration: none;
		    cursor: pointer;
		    padding: 0;
		    margin: 0;
		    display: inline-flex;
		    align-items: center;
		}

		.header-anchor-links-right button:hover {
		    text-decoration: underline;
		}

		.header-anchor-links-right .pipe {
		    color: #ccc; /* Color for pipe separators */
		}
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		/* Remove button styles and make them look like links */
		.header-anchor-links button {
		    background: none !important;       /* No background */
		    border: none !important;           /* Remove border */
		    color: inherit !important;         /* Use the color of the surrounding text */
		    font: inherit !important;          /* Inherit the font from the parent element */
		    text-decoration: none !important;  /* Remove any text decoration */
		    cursor: pointer !important;       /* Show pointer cursor to indicate clickable element */
		    padding: 0 !important;             /* Remove any padding */
		    margin: 0 !important;              /* Remove any margin */
		    display: inline !important;        /* Ensure they are inline with text */
		}

		/* Optional: Styling to add hover effect like links */
		.header-anchor-links button:hover {
		    text-decoration: underline !important;  /* Underline on hover to resemble links */
		}
		
		.header-hidden {
		    display: none !important;
		}
		/* Info Layer Styling */
		#citeLayer {
		    background-color: #f8f9fa; /* Light gray background */
		    border: 1px solid #ccc; /* Light border */
		    padding: 10px; /* Add some padding */
		    margin-top: 10px; /* Space below the link */
		    border-radius: 5px; /* Rounded corners */
		    position: relative; /* Ensure it appears below the clicked link */
		    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for better visibility */
			transition: background-color 0.3s ease;
			
		}
		/* Hide the 'X' icon when the layer is closed */
		#citeLayer.hidden {
		    display: none;
		}

		.info-layer p {
		    margin: 0; /* Remove default margins */
		}

		.info-layer button {
		    margin-top: 5px; /* Space between text and button */
		    background-color: #007bff; /* Blue button */
		    color: white; /* White text */
		    border: none; /* No border */
		    padding: 5px 10px; /* Button padding */
		    border-radius: 3px; /* Rounded corners */
		    cursor: pointer; /* Pointer cursor */
		}

		.info-layer button:hover {
		    background-color: #0056b3; /* Darker blue on hover */
		}
		
		
		.grey-divider {
		    border: 1px solid #dddddd !important; /* Add a grey top border */
		    width: 100%;                /* Ensure it spans the full width */
		    margin: 20px 0;             /* Optional: Add vertical spacing */
		}
		/* Ensure links are inline */
		.header-anchor-links {
		    display: flex !important; /* Use flexbox for layout */
		    gap: 10px !important; /* Add spacing between items */
		}

		.header-anchor-links a {
		    text-decoration: none !important; /* Remove underlines */
		    color: inherit !important; /* Use the parent color */
		    font-size: 16px !important; /* Adjust font size */
		}

		.header-anchor-links a:hover {
		    text-decoration: underline !important; /* Optional: Add underline on hover */
		}
	/* Cite Button Styling */
	.cite-button {
		margin-bottom: 10px;
	}

	.cite-button a {
	    display: inline-flex;
	    align-items: center;
	    background-color: #f8f9fa;
	    padding: 8px 12px;
	    border-radius: 5px;
		
	    text-decoration: none;
	    font-size: 14px;
	    font-weight: 500;
	    transition: background-color 0.2s ease;
	}

	.cite-button a:hover {
	    background-color: #e9ecef;
	    text-decoration: none;
	}
	/* Close button (X) */
	.close-btn {
	    position: absolute;
	    top: 5px;
	    right: 8px;
	    cursor: pointer;
	    font-size: 12px;
	    color: #cccccc;
	}

	/* Styling for the copy button */
	#copyButton {
		display: block;
	    background-color: #808080;  /* Default grey color */
	    border: none;
	    padding: 5px 10px;
	    cursor: pointer;
	    font-weight: bold;
	    border-radius: 5px;
	    transition: background-color 0.3s ease, color 0.3s ease;
	    margin-left: 0px;
		  
	}

	/* When the copy button text changes to 'COPIED' */
	#copyButton.copied {
	    background-color: #d3d3d3;  /* Darker grey when clicked */
	    color: #fff;
	}
	
	#copyButton.hidden {
	    display: none !important;
	}
	@media (max-width: 480px) {
	    .last-updated {
	        display: none;
	    }
	}
	
	
	
	/* General styles for the themes list */
	.themes-list {
	    font-family: Arial, sans-serif;
	    margin: 0px;
	    line-height: 1.4; /* Adjusted for readability */
	}

	/* Theme section container */
	.theme-section {
	    margin-bottom: 0px; /* Spacing between themes */
	}

	/* H2 for theme titles */
	.theme-section h2 {
	    font-size: 1.5rem; /* Slightly larger font for H2 */
	    font-weight: bold;
	    margin: 0px 0; /* Spacing above and below */
	}

	/* H3 for categories */
	.theme-section h3 {
	    font-size: 1.2rem; /* Smaller than H2 */
	    font-weight: normal;
	    margin: 0; /* No additional margin */
	    display: inline-block; /* Ensures inline display for categories */
	}

	/* Links inside H2 and H3 */
	.theme-section h2 a,
	.theme-section h3 a {
	    text-decoration: none; /* Remove underline */
	}

	.theme-section h2 a:hover,
	.theme-section h3 a:hover {
	    text-decoration: underline; /* Add underline on hover for accessibility */
	}

	/* Hidden-main class styling */
	.hidden-main {
	    font-size: 0.9rem; /* Slightly smaller for the extra text */
	    color: #777; /* Muted text color */
	    font-weight: normal;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	/* TWO COLUMN IN CATEGORY */
	.calculators-two-col {
		
		margin-bottom: 0.5rem;
	}
	
	.calculators-two-col ul {
	  /* Enable bullet points */
	  list-style-type: disc;
  
	  /* Provide space for bullets */
	  margin: 0;
  
	  /* Single column by default (mobile) */
	  column-count: 1;
	  column-gap: 1rem;
	}

	.calculators-two-col ul li {
	}

	/* For desktop screens */
	@media (min-width: 768px) {
	  .calculators-two-col ul {
	    column-count: 2; /* Switch to two columns on larger screens */
	  }
	}
	
	
	
	
	
	
	
	
	/* --- START: Add/Modify these styles for Search --- */

	    /* Style for the full-width search bar below the nav */
	    #full-width-search-bar {
	        /* Visible by default on larger screens, hidden on mobile via media query */
	        padding: 15px 10px;
	        background: linear-gradient(to bottom, white, #f8f9fa);
	        border-bottom: 1px solid #ddd;
	        margin-bottom: 0px; /* Optional spacing below search bar */
	    }
	    #full-width-search-bar .input-group .btn {
	         flex-shrink: 0; /* Prevent button shrinking */
	    }

	    /* Container for mobile search in dropdown */
	    .mobile-search-container {
	        display: none; /* Hidden by default, shown on mobile via media query */
	        padding: 10px 15px; /* Spacing within the dropdown */
	    }
	    .mobile-search-container input {
	         width: 100%;
	         padding: 8px 12px;
	         border: 1px solid #ccc;
	         border-radius: 0.25rem;
	    }

	    /* Responsive adjustments - MODIFY existing @media query */
	    @media (max-width: 991.98px) { /* Match Bootstrap LG breakpoint */
	        /* Keep existing mobile styles for .nav-tabs .nav-item and .nav-tabs .nav-link */
	        .nav-tabs .nav-item {
	            width: 100%;
	        }
	        .nav-tabs .nav-link {
	            display: block;
	            width: 100%;
	            text-align: left;
	            padding: 10px 16px;
	            border-radius: 0;
	            border: 1px solid #ddd;
	            margin-bottom: -1px; /* Overlap borders slightly */
	            margin-right: 0;
	            white-space: normal; /* Allow text wrapping in mobile tabs */
	        }
	         .nav-tabs .nav-link.active {
	             /* Ensure active border is visible if needed, e.g.: */
	             border-color: #007bff;
	         }

	        /* ADD these rules inside this existing media query */
	        #full-width-search-bar {
	             display: none !important; /* Hide desktop bar on mobile */
	        }
	        .mobile-search-container {
	             display: block !important; /* Show mobile bar in dropdown */
	        }
	    }

	    /* ADD this new media query for desktop */
	    @media (min-width: 992px) {
	         /* Hide mobile search container on desktop */
	         .mobile-search-container {
	              display: none !important;
	         }
	         /* Ensure desktop search bar is visible (optional reinforcement) */
	         #full-width-search-bar {
	              display: block; /* Or flex if using flex layout inside */
	         }
	    }
	    /* --- END: Add/Modify these styles for Search --- */

	/* --- Cross-locale language switcher ---
	   The legacy site theme defines a bare `.dropdown` rule
	   (`position:absolute; top:35px; left:0; display:none; ...`) for its
	   hover menu. The Bootstrap language switcher wrapper also carries the
	   `.dropdown` class, so it inherited that absolute positioning and floated
	   to the top-left corner (and vanished on mobile via the legacy display:none).
	   Neutralize the legacy rule for the switcher only, so Bootstrap positions it
	   inline: desktop = to the right of the search box, mobile = left of the burger. */
	.lang-switcher.dropdown {
	    position: relative !important;
	    top: auto !important;
	    left: auto !important;
	    min-width: 0 !important;
	    background: transparent !important;
	    border: 0 !important;
	}
	.lang-switcher .dropdown-menu li {
	    padding: 0 !important;
	    border: 0 !important;
	}
	/* legacy `.dropdown{display:none}` hides the mobile switcher below lg — restore it */
	.lang-switcher.d-lg-none { display: inline-block !important; }
	@media (min-width: 992px) { .lang-switcher.d-lg-none { display: none !important; } }
	
	
		.mobile-search-container .input-group .btn.btn-outline-secondary {
		    border-color: #ced4da !important; /* Match default form-control border color. Use !important to be sure. */
		}

		/* Optional: Keep border color consistent on hover too */
		/* If you want the border to stay light grey even when hovering over the button */
		/* Remove this block if you prefer the button border to darken on hover */
		.mobile-search-container .input-group .btn.btn-outline-secondary:hover {
		     border-color: #ced4da !important;
		     /* Keep default hover background/text for visual feedback */
		     color: #fff;
		     background-color: #6c757d;
		}
	
	
	
	
	
	
	
	
	
		/* --- Styles for Nav Text (New/Blog) --- */

		/* By default (which applies to desktop), hide the text part */
		.nav-text-mobile-only {
		    display: none;
		}

		/*
		   When the navbar is collapsed (mobile view) AND the menu (#themeMenu) is expanded (has class .show),
		   then display the text.
		   We target screens up to the point Bootstrap collapses the navbar-expand-lg (991.98px).
		*/
		@media (max-width: 991.98px) {
		    .navbar-collapse.show .nav-text-mobile-only {
		        display: inline; /* Or 'inline-block' if you need more control */
		        /* Optional: Add a little space between emoji and text if needed */
		        /* margin-left: 4px; */
		    }
		}
		
		
		
		
		
		.calculator-tags {
		  margin-top: 10px; /* Add some space above the tags section */
		  margin-bottom: 5px; /* Add some space below the tags section */
		}

		.tags-list {
		  list-style: none; /* Remove default bullet points */
		  padding: 0;
		  margin: 0;
		  display: flex; /* Arrange tags in a row */
		  flex-wrap: wrap; /* Allow tags to wrap to the next line if they don't fit */
		  gap: 8px; /* Space between tags */
		}

		.tags-list li {
		  margin: 0; /* Remove default li margin if any */
		}

		.tags-list .tag {
		  display: inline-block; /* Allows padding and margins */
		  padding: 6px 12px; /* Vertical and horizontal padding for the pill shape */
		  background-color: #e0e0e0; /* Light grey background */
		  color: #333; /* Dark grey text color */
		  text-decoration: none; /* Remove underline from links */
		  border-radius: 16px; /* Makes it pill-shaped (adjust for more/less roundness) */
		  font-size: 0.9em; /* Slightly smaller font size */
		  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* Smooth hover effect */
		  border: 1px solid #c0c0c0; /* Subtle border */
		}

		.tags-list .tag:hover {
		  background-color: #007bff; /* Primary color on hover (e.g., blue) */
		  color: #fff; /* White text on hover */
		  border-color: #0056b3; /* Darker border on hover */
		}


/* Reserve space for icon font so async Font Awesome load doesn't shift layout (CLS) */
.fa, .fas, .far, .fab, .fal { display: inline-block; min-width: 1em; }
/* Keep the search button a stable size before icons load */
#full-width-search-bar .btn, .mobile-search-container .btn { min-width: 44px; }