/*
Theme Name: 2C
Theme URI: https://www.2cdevgroup.com/
Author: 2C Dev Group
Author URI: https://www.2cdevgroup.com/
Description: 2C is a modern multipurpose WordPress 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: 2c
*/

/* =========================================================
   ROOT TYPOGRAPHY SYSTEM
   Establishes rem baseline, vertical rhythm, and resets
   ========================================================= */

html {
    font-size: 16px; /* Root size for all rem units */
    line-height: 1.6; /* Global vertical rhythm */
    margin: 0;
    padding: 0;
}

/* =========================================================
   BODY TYPOGRAPHY DEFAULTS
   Applies core readable text styling across the site
   ========================================================= */

body {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    font-weight: 300;
    color: #000000;
    letter-spacing: 0.01em;
    background-color: #ffffff;
	margin:0px;
	width: 100%;
    overflow-x: hidden;
}

/* =========================================================
   LINK STYLES
   Core link styling with hover underline accent
   ========================================================= */

a {
    color: #ee4d28;
    text-decoration: none;
}

a:hover {
    color: #ff5733;
    border-bottom: 0.1875rem double #ee4d28;
}

/* =========================================================
   LIST ELEMENTS
   Default typographic structure for ul, ol, dl
   ========================================================= */

ul, ol, dl {
    font-size: 1rem;
    line-height: 1.6;
    color: #000000;
}

ul, ol {
    margin-bottom: 1rem;
}

.wpb-plan-features ul {
    margin-bottom: 1rem;
}

li {
    font-size: 1rem;
    color: #000000;
    line-height: 1.6;
}

/* =========================================================
   HEADINGS
   Global heading family, size scale, rhythm, and spacing
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    color: #ee4d28;
	margin-top: 0;
}

h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-top: 3.8125rem !Important;
}

h2 {
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 1.5625rem;
}

h3 {
    font-size: 2.24rem;
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

h4 {
    font-size: 1.792rem;
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

h5 {
    font-size: 1.4336rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

/* =========================================================
   PHP TEMPLATE TYPOGRAPHY
   Typography and div styles for 404.php, single.php, search.php, category.php
   ========================================================= */

h1.php-template-headline {
    font-size: 3.5rem;
    line-height: 1.1;
    padding-top: 0;
	margin-top: 3.8125rem !important;
}

.error404 .php-template-headline {
    text-align: center;
    font-size: 3.5rem;
    line-height: 1.1;
    margin-top: 3.8125rem !important;
    margin-bottom: 1rem;
}

.page-template-fullwidth .fullwidth-title {
    padding-left: 0.9375rem;
	transform: translateX(-0.25rem);
    padding-right: 0.9375rem;
    font-size: 3.5rem;
    line-height: 1.1;
    margin-top: 3.8125rem !important;
}

h1.singleheader {
    text-align: center;
    font-size: 3.5rem;
    line-height: 1.1;
    margin-top: 1.625rem;
}

.categories .blog-breadcrumb {
    color: #333;
    font-weight: 700;
}

.categories .blog-breadcrumb:hover {
    color: #555;
    transition: color 0.3s ease-in-out;
    text-decoration: none;
    border-bottom: none;
}

.categories a:not(.blog-breadcrumb) {
    color: #ee4d28;
    font-weight: 600;
    text-decoration: none;
    border-bottom: none;
}

.categories a:not(.blog-breadcrumb):hover {
    color: #ff5733;
    text-decoration: none;
    border-bottom: none;
}

.categorylink a {
    text-decoration: none;
    border-bottom: none;
}

.categorylink:hover {
    text-decoration: none;
    border-bottom: none;
}

.search-form {
    padding-bottom: 1.5625rem;
}

.error404 .special-search {
    display: block;
    text-align: center;
    margin: 2.5rem auto 4rem;
}

.error404 .search-form input[type="search"] {
    display: inline-block;
    width: 320px;
    max-width: 80%;
    text-align: center;
    margin-bottom: 1rem;
}

.error404 .search-form input[type="submit"] {
    display: inline-block;
    margin-top: 0;
}

.entry-content {
    color: #000000;
}

h1.snap {
    margin-top: 6rem;
}

h5.try-again {
    font-size: 1.125rem;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-top: 1.25rem;
    padding: 0.625rem;
}

/* =========================================================
   SPECIAL TYPOGRAPHY ELEMENTS
   Preheaders, hero text, intro lines, and numeric stats
   ========================================================= */

h1.php-template-headline {
	font-size: 3.625rem;
	line-height: 140%;
}

.pretext-home {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.01em;
    margin-bottom: 0.4375rem;
    padding-top: 2.6875rem;
}

.blog,
.home h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.home .intro-text-home {
    font-size: 1.5625rem;
    line-height: 1.6;
    color: #ffffff;
    margin-top: 0;
}

.headline-one-white {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 3.4375rem;
}

.intro-text,
.intro-text-underline,
.intro-text-white {
    font-size: 1.5625rem;
    line-height: 2.375rem;
}

.intro-text-white {
    color: #ffffff;
}

.intro-text-underline::after {
    content: "";
    display: block;
    width: 10%;
    height: 0.125rem;
    background-color: #000000;
    margin: 0.125rem 0 0 0;
}

.number-stat {
    font-size: 6.25rem;
    font-weight: 800;
    position: relative;
}

.number-stat::after {
    content: "";
    display: block;
    width: 100%;
    height: 0.125rem;
    background-color: #000000;
    margin: 0.125rem auto 0;
}

/* =========================================================
   Z-INDEX CONTRACTS
   Reserved layering to prevent overlap conflicts
   ========================================================= */

/* Base content: 1–99 */
/* Sticky utilities / banners: 100–499 */
/* Header chrome (desktop & mobile): 1000–1099 */
/* Off-canvas panels / menus: 1100–1199 */
/* Modals / dialogs (site-level): 1300–1399 */
/* WP admin bar: 9999 (WordPress controlled) */

:root {
    --z-header: 1000;
    --z-offcanvas: 1100;
    --z-modal: 1300;
}


/* =========================================================
   BLOCKQUOTE STYLES
   Global styling for pull quotes and citations across all content areas
   ========================================================= */
   
html body .wpb_wrapper blockquote {
    margin-left: auto !important;
    margin-right: auto !important;
}
.wpb_wrapper blockquote {
    position: relative !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: #333 !important;
    background: #f9f9f9 !important;
    padding: 40px 50px !important;
    border-left: 5px solid #e8e8e9 !important;
    margin: 30px auto !important;
    margin-left: 0px !important; /* Remove 15px indent on the left */
    line-height: 1.6 !important;
    max-width: 800px !important;
}
.wpb_wrapper blockquote::before {
    font-family: "Font Awesome 5 Free" !important;
    content: "\f10d" !important;
    font-weight: 900 !important;
    font-size: 3.5rem !important;
    color: #e8e8e9 !important;
    position: absolute !important;
    top: -2px !important;
    left: 16px !important;
}
.wpb_wrapper blockquote p {
    display: inline-block !important; /* Ensure paragraph text is styled correctly */
    margin-top: -10px !important; /* Overlaps the icon slightly */
    padding-left: 15px !important;
    z-index: 1 !important;
    position: relative !important;
}

/* =========================================================
   TESTIMONIAL COMPONENTS
   Styling for testimonial sliders and call-out boxes
   ========================================================= */

/* Testimonial Slider Raw HTML element from WPBakery - Borrows some styles from blockquote above: quote icon, left grey edge, etc */

.testimonial-slider {
    max-width: 800px;
    margin: 0 auto;
}
.testimonial-slide {
    text-align: center;
    padding: 20px;
}
.testimonial-title {
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: bold;
    color: #ee4d28;
    margin-bottom: 10px;
}
.testimonial-quote {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 20px;
}
html body .testimonial-slider .testimonial-quote {
    padding-left: 62px !important;
}
.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
}
.testimonial-headshot {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}
.author-info {
    text-align: left;
}
.author-name {
    font-weight: bold;
    margin: 0;
}
.author-title {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

/* Testimonial Call-Out Box Styles for Raw HTML Element in WPBakery*/

.testimonial-box {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 0 auto; /* center horizontally */
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative; /* Required for the triangle */
}
.testimonial-box::after { /* Add a triangle at the bottom center */
    content: "";
    position: absolute;
    bottom: -9px;      /* Adjust to control vertical position */
    left: 50%;          /* Center horizontally */
    transform: translateX(-50%);
    border-width: 10px 10px 0 10px;  /* Triangle size (top, right, bottom, left) */
    border-style: solid;
    border-color: #fff transparent transparent transparent; /* White triangle */
}
.testimonial-title { /* Title */
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
    position: relative;
    line-height: 1.2;
}
.testimonial-stars {
    color: #f5c518; /* yellow */
    font-size: 1rem;
}
.testimonial-text {
    font-size: 1rem;
    line-height: 1.4;
    color: #000;
    margin: 0;
}
.testimonial-author {
    font-size: 0.9rem;
    font-style: italic;
    color: #333;
    margin: 0;
}

/* Raw HTML Element in WPBakery: Add Headshot, Name and Company below Blockquote */

.image-text-container {
    display: flex;
    align-items: center; /* Vertically center the image and text */
}
.image-text-container img {
    width: 100px;
    height: 100px;
    border-radius: 50%;    /* Creates a circle */
    object-fit: cover;     /* Covers container without distortion */
    margin-right: 15px;
}

body .vc_column_container.vertical-center > .vc_column-inner { /* Vertically center content in WPB column. Add vertical-center as col CSS Style. */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;  /* Optional: centers horizontally too */
    min-height: 350px !important;      /* Set an appropriate min-height */
    box-sizing: border-box !important;
}


/* =========================================================
   GLOBAL IMAGE ALIGNMENT
   Alignment utilities for images across all theme elements
   ========================================================= */
img.alignright      { float:right; margin:0 0 1em 1em; }
img.alignleft       { float:left;  margin:0 1em 1em 0; }
img.aligncenter     { display:block; margin-left:auto; margin-right:auto; }
a img.alignright    { float:right; margin:0 0 1em 1em; }
a img.alignleft     { float:left;  margin:0 1em 1em 0; }
a img.aligncenter   { display:block; margin-left:auto; margin-right:auto; }

/* =========================================================
   WORDPRESS IMAGE CAPTIONS
   Default styling and spacing for native WordPress caption elements
   ========================================================= */
.wp-caption {
    display: inline-block; 
    max-width: 100%; 
}
.wp-caption.alignright {
    float: right;
    margin: 0.5em 0 1em 1.5em; /* Standard right float margin */
}
.wp-caption.alignleft {
    float: left;
    margin: 0.5em 1.5em 1em 0; /* Standard left float margin */
}
.vc_column-text .wpb_wrapper {
    display: flow-root; 
}

/* =========================================================
   LAYOUT: CONTAINERS & MORE
   Global container structure and layout utilities for core theme elements
   ========================================================= */
.centered {
	max-width: 1300px;
	position: relative;
	margin: 0 auto;
}
.container {
	width: 80%;
	margin: 0 auto;
	padding: 1.25rem;
}
.vbottom {
	vertical-align:bottom;
}
.bottomspace {
	height:3.75rem;
}

/* =========================================================
   LAYOUT: UTILITY BAR (GLOBAL WRAPPER)
   Structural styling for top bar area above main navigation
   ========================================================= */

.utilitybar {
    height: 2.8rem;
    max-height: 2.8rem;
    overflow: hidden;
}

/* =========================================================
   LAYOUT: HEADER & RIGHT MENU
   Shared structural rules for all header layouts
   ========================================================= */

.menucontainer {
    display: flex;
    position: relative;
    padding: 0.4375rem 0.9375rem;
    align-items: center;
}

.custom-logo {
    display: inline-block;
    max-width: 15.625rem;
    padding-right: 0.625rem;
}

.custom-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.custom-logo-link:hover {
    border-bottom: none;
}

.topmenu {
    display: flex;
    flex-grow: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}

.topmenu li {
    position: relative;
    display: inline-block;
    padding-right: 1.25rem;
}

.topmenu > li > a {
    font-size: 0.8rem;
    text-decoration: none;
    position: relative;
}

.topmenu li:has(ul) > a::after {
    content: ' ▼';
    font-size: 0.5625rem;
}

.topmenu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    margin: 0;
    z-index: 1000;
    width: max-content;
}

.topmenu li:hover ul {
    display: block;
}

.topmenu li ul li {
    display: block;
}

.topmenu li ul li a {
    display: block;
    padding: 0.65rem 0.9375rem; /* 10px → 0.9375rem */
    font-size: 0.8rem;
    text-decoration: none;
}

.topmenu li ul li ul {
    position: static;
    margin-left: 0.9375rem; /* 15px → 0.9375rem */
    display: block;
    padding: 0;
}

.topmenu li ul li ul li a {
    display: block;
    padding: 0.65rem 0.9375rem; /* 10px → 0.9375rem */
    font-size: 0.8rem;
    text-decoration: none;
}

.rightmenu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
}

.search-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-size: 1.625rem;
    padding-left: 1.25rem;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.search-toggle:hover {
    opacity: 0.8;
}

#header-search-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 20vw;               /* restore original behavior */
    max-width: 18.75rem;       /* 300px → 18.75rem */
    background-color: #000;
    padding: 0.9375rem;        /* 15px → 0.9375rem */
    box-sizing: border-box;
    z-index: 999;
    min-height: 3.75rem;       /* 60px → 3.75rem */
}

#header-search-panel form {
    display: block;
    width: 96%;
    margin: 0;
}

#header-search-panel input[type="text"] {
    width: calc(100% - 0.625rem);
    padding: 0.625rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}

#header-search-panel input[type="submit"] {
    display: none;
}

/* =========================================================
   LAYOUT: HEADER 01 (OPAQUE)
   Scoped styles for header01.php visual treatment
   ========================================================= */

body.header01 .menucontainer {
    background: #000;
}

body.header01 .topmenu,
body.header01 .topmenu li ul,
body.header01 .topmenu li ul li ul {
    background: #000;
}

body.header01 .topmenu > li > a,
body.header01 .topmenu li ul li a,
body.header01 .topmenu li ul li ul li a,
body.header01 .search-toggle {
    color: #fff;
}

body.header01 .search-toggle:hover {
    color: #f0f0f0;
}

body.header01 .topmenu li ul li:nth-child(n+3) a {
    border-top: 1px solid #fff;
}

/* =========================================================
   LAYOUT: HEADER 02
   Transparent overlay header for light hero backgrounds
   ========================================================= */

/* WooCommerce page spacing under Header 02 */
body.header02.woocommerce-order-received .mainwrapper,
body.header02.woocommerce-cart .mainwrapper,
body.header02.woocommerce-checkout .mainwrapper,
body.header02.woocommerce-account .mainwrapper {
    padding-top: 65px;
}

/* Base transparency and stacking */
body.header02 .menucontainer {
    background: transparent !important;
    position: relative;
    z-index: 10;
}

/* Dropdown transparency */
body.header02 .topmenu,
body.header02 .topmenu li ul,
body.header02 .topmenu li ul li ul {
    background: transparent;
}

/* Default text color for light surfaces */
body.header02 .topmenu > li > a,
body.header02 .topmenu li ul li a,
body.header02 .topmenu li ul li ul li a,
body.header02 .search-toggle {
    color: #000 !important;
}

body.header02 .search-toggle:hover {
    color: #333 !important;
}

/* Dark-surface variant for image or dark hero backgrounds */
body.header02.dark-surface .topmenu > li > a,
body.header02.dark-surface .topmenu li ul li a,
body.header02.dark-surface .topmenu li ul li ul li a,
body.header02.dark-surface .search-toggle {
    color: #fff !important;
}

body.header02.dark-surface .search-toggle:hover {
    color: #f0f0f0 !important;
}

/* Submenu divider lines */
body.header02 .topmenu li ul li:nth-child(n+3) a {
    border-top: 1px solid rgba(0, 0, 0, 0.3);
}

body.header02.dark-surface .topmenu li ul li:nth-child(n+3) a {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* Search panel styling */
body.header02 #header-search-panel {
    background: rgba(255, 255, 255, 0.95);
}

body.header02.dark-surface #header-search-panel {
    background: rgba(0, 0, 0, 0.9);
}

/* =========================================================
   HEADER 02 HERO OVERLAY
   Optional slide-under behavior for tall WPBakery hero rows
   ========================================================= */

/* Hero rows explicitly marked in WPB with .hero-row slide under menucontainer + secondarymenucontainer,
   but remain below the utility bar. No spacing is added or removed. */
body.header02 .hero-row {
    position: relative;
    margin-top: -6.4rem!important;
    z-index: 1;
}

/* Ensure the visual overlap looks intentional by placing the header layers above the hero */
body.header02 .menucontainer,
body.header02 .secondarymenucontainer {
    position: relative;
    z-index: 10;
}

/* Utility bar stays fully above everything and never overlapped */
body.header02 .utilitybar {
    position: relative;
    z-index: 20;
}

/* =========================================================
   LAYOUT: HEADER 03 (TRANSLUCENT OVERLAY – WHITE TEXT)
   Semi-opaque dark header with blur for cinematic image use.
   ========================================================= */

/* WooCommerce page spacing (preserves layout under fixed header) */
body.woocommerce-order-received .mainwrapper,
body.woocommerce-cart .mainwrapper,
body.woocommerce-checkout .mainwrapper,
body.woocommerce-account .mainwrapper {
    padding-top: 143px;
}

/* Header background and blur */
body.header03 .menucontainer {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(4px);
    position: relative;
    z-index: 10;
}

/* Pull hero beneath main + secondary menus (not utility bar) */
body.header03 .mainwrapper {
    margin-top: -90px !important; /* Approx. combined height of menu + secondary bar */
    position: relative;
    z-index: 1;
}

/* Dropdown transparency */
body.header03 .topmenu,
body.header03 .topmenu li ul,
body.header03 .topmenu li ul li ul {
    background: transparent;
}

/* White nav and icon color */
body.header03 .topmenu > li > a,
body.header03 .topmenu li ul li a,
body.header03 .topmenu li ul li ul li a,
body.header03 .search-toggle {
    color: #ffffff !important;
}

/* Hover brightness */
body.header03 .search-toggle:hover {
    color: #f0f0f0 !important;
}

/* Divider line for dropdowns */
body.header03 .topmenu li ul li:nth-child(n+3) a {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* Search dropdown overlay */
body.header03 #header-search-panel {
    background: rgba(0, 0, 0, 0.9);
}

/* Inherit white text inside menu lists */
body.header03 .menucontainer ul,
body.header03 .menucontainer ol,
body.header03 .menucontainer dl {
    color: inherit;
}

/* =========================================================
   SECONDARY MENU CONTAINER
   Full-width wrapper for left and right secondary menus positioned beneath the main header
   ========================================================= */
.secondarymenucontainer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background-color: #000000; /* Full-width black bar */
	padding: 0 15px;
	box-sizing: border-box;
}

/* =========================================================
   SECONDARY MENUS (LEFT AND RIGHT) BELOW MENU CONTAINER
   Structural and styling rules for secondary navigation areas positioned beneath the main menu on desktop
   ========================================================= */

/* Left and right containers */
.secondarymenuleft {
	display: inline-block;
	text-align: left;
}

.secondarymenuright {
	display: inline-block;
	float: right;
	text-align: right;
}

/* General Menu Styling - Left and Right Menus */
#menu-left-secondary-menu,
#menu-right-secondary-menu {
	list-style: none;   /* Remove default list styling */
	padding: 0;
	margin: 0;
	display: flex;      /* Horizontal layout */
	color: #ffffff;     /* Default white text inside black bar */
}

/* Menu items - Left and Right Menus */
#menu-left-secondary-menu li,
#menu-right-secondary-menu li {
	display: inline-block;
}

/* Menu links - Left and Right Menus */
#menu-left-secondary-menu a,
#menu-right-secondary-menu a {
    display: block;                               /* Make full block clickable */
    padding: 0.625rem 0.9375rem;                  /* Adjust spacing as needed */
    text-decoration: none !important;
    color: #ffffff;                               /* White text for normal state */
    transition: background-color 0.3s, color 0.3s; /* Smooth hover effect */
    font-size: 0.8rem;
}

/* Hover / Focus / Active States - Left and Right Menus */
#menu-left-secondary-menu a:hover,
#menu-left-secondary-menu a:focus,
#menu-left-secondary-menu a:active,
#menu-right-secondary-menu a:hover,
#menu-right-secondary-menu a:focus,
#menu-right-secondary-menu a:active {
	background-color: #333333;       /* Gray background on hover */
	color: #ffffff !important;       /* White text on hover */
	border-bottom: none !important;  /* Remove underline or border */
}

/* Righthand Secondary Menu */
#menu-right-secondary-menu {
	margin-left: auto;  /* Push to the right inside flex container */
}


/* =========================================================
   BACK LINK (REFERRER-BASED NAVIGATION)
   Styling for the “← Return to Previous Page” link under H1 on author.php, search.php, tag.php, taxonomy.php
   ========================================================= */

.back-link {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    color: #ee4d28;
    text-decoration: none;
    margin: 0 0 1.25rem 0; /* bottom spacing below the link */
    padding-bottom: 0.25rem; /* slight visual anchor */
}

.back-link:hover {
    color: #ff5733;
    text-decoration: none;
	border-bottom: none !important;
}

/* =========================================================
   BUTTON: SITE-WIDE WP
   Global button styling aligned with brand orange palette
   ========================================================= */
.wp-element-button {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background-color: #ee4d28;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    padding: 0.625rem 0.9375rem;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.wp-element-button:hover {
    background-color: #ec2e03;
    color: #fff;
}

.wp-element-button:active,
.wp-element-button:focus {
    background-color: #df2a01;
    color: #fff;
    outline: none;
    box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.5);
}

/* =========================================================
   GLOBAL INPUT BASELINE
   Universal input appearance across forms, search, and widgets
   ========================================================= */
input:not([type="submit"]),
textarea {
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: #414546;
    background-color: #fff;
    border: 1px solid #cacaca !important;
    border-radius: 0.25rem !important;
    padding: 0 0.75rem !important;
    height: 2.8125rem;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    margin-bottom: 1.25rem;
}

/* Removes bottom margin from inputs inside filter/search rows */
.catfilters-row input:not([type="submit"]),
.search-form-category input:not([type="submit"]),
.authorfilters-row input:not([type="submit"]) {
    margin-bottom: 0 !important;
}


input:focus,
textarea:focus {
    outline: none;
    border-color: #cacaca !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

textarea {
  resize: vertical; /* Allow vertical resize only */
  transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* =========================================================
   WP SEARCH BLOCK
   Gutenberg search block input, button, and wrapper styling
   ========================================================= */

.wp-block-search__inside-wrapper {
    display: flex;
    align-items: center;
    align-items: stretch;
    margin-bottom: 1.25rem;
}

.wp-block-search__input {
    width: 100%;
    border-radius: 0.25rem;
    border: 1px solid #cacaca;
    height: 2.8125rem;
    line-height: 2.8125rem;
}

.wp-block-search__input:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    border-color: #cacaca;
}

.wp-block-search__button {
    background-color: #ee4d28;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: 0.25rem;
    height: 2.8125rem;
    padding: 0 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-block-search__button:hover {
    background-color: #ec2e03;
    color: #fff;
}

.wp-block-search__button:active,
.wp-block-search__button:focus {
    background-color: #df2a01;
    color: #fff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   DROPDOWN + SEARCH CONTAINERS (CATEGORY.PHP, TAG.PHP, SEARCH.PHP)
   Styling for filter dropdowns and search containers across archive templates
   ========================================================= */

/* Base layout — used by normal archive views (dropdown + search) */
.catfilters-row {
    display: flex;
    justify-content: flex-end;    /* positions dropdown + search to the right */
    align-items: flex-end;        /* aligns baseline of dropdown and search */
    gap: 1.875rem;
    margin-bottom: 1.5625rem;
    flex-wrap: wrap;
}

/* Variant — used by search results within any archive type */
.category.search-results .catfilters-row,
.tag.search-results .catfilters-row,
.author.search-results .catfilters-row {
    justify-content: space-between;  /* back-link left, search right */
    align-items: flex-start;         /* aligns top edge of search form */
}


/* Variant - left-align with page content on search.php */
.search.search-results .catfilters-row {
    display: flex;
    justify-content: flex-start;  /* override default right-align */
    align-items: flex-start;
}

/* Disable flex alignment when no-results on search.php */
body.search.search-no-results .catfilters-row {
  display: block !important;
}

/* Column container for each filter element */
.catdropdowncontainer {
    width: 39.625rem;
    display: block;
}

body.search .catdropdowncontainer {
    width: auto; /* remove fixed width so form fits natural flow on search.php */
}

/* Form control height alignment */
.catdropdowncontainer > select,
.catdropdowncontainer input,
.catdropdowncontainer button {
    height: 2.8125rem;
}

/* Base widths for dropdown and search box */
.categoryselect,
#search-box {
    width: 18.75rem;
    max-width: 100%;
}

/* Dropdown label */
.choosecat {
    font-weight: bold;
    font-size: 0.875rem;
    color: #333;
    margin-bottom: 0.3125rem;
}

/* Dropdown appearance */
.categoryselect {
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    background: #fff;
    color: #414546;
    font-size: 0.875rem;
}

.categoryselect:focus {
    outline: none !important;
    box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.5);
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    color: #414546;
}

/* Shared search form layout (category.php, tag.php) */
.search-form-category {
    display: flex;
    justify-content: flex-end; /* aligns search to right */
    align-items: flex-end; /* aligns baseline with dropdown */
    gap: 0.5rem;
    margin: 0;
    position: relative;
    top: 0.1875rem; /* nudges input + button slightly down for perfect alignment */
}

/* SEARCH.PHP SPECIFIC — keep search box left-aligned always */

/* Overide search form layout (search.php) */ 
body.search .search-form-category { 
   justify-content: flex-start; /* align input + button left */ 
   align-items: flex-end; /* keep input and button perfectly level */ 
}

/* Shared search input appearance */
#search-box {
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    background: #fff;
    color: #414546;
    font-size: 0.875rem;
    flex: 0 0 18.75rem;
    min-width: 0;
    padding: 0 0.75rem;
    box-sizing: border-box;
}

#search-box:focus {
    outline: none !important;
    box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.5);
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    color: #414546;
}

/* Shared search submit width */
.search-submit {
    width: 6.375rem;
    text-align: center;
}

/* Mobile adjustments */
@media (max-width: 768px) {

    .catfilters-row {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5625rem;
        margin-bottom: 2.1875rem;
    }

    .catdropdowncontainer,
    .catdropdowncontainer .search-form-category {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .categoryselect,
    #search-box {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    .categoryselect {
        margin-bottom: 0.625rem;
    }

    .catdropdowncontainer .search-form-category {
        margin-top: 0;
    }

    #search-box {
        margin: 0;
        padding-left: 0.75rem;
    }

    .search-form-category {
        display: flex;
        align-items: stretch;
        gap: 0;
        justify-content: stretch;
    }

    button.search-submit.wp-element-button {
        margin-left: 0.3125rem;
        padding: 0 1.125rem;
        font-size: 0.9rem;
        white-space: nowrap;
        height: 2.8125rem;
    }

    body.search .search-form-main-wrapper {
        display: block;
    }

    form.wp-block-search.wp-block-search__button-outside .wp-block-search__inside-wrapper {
        display: flex !important;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        flex-wrap: nowrap;
        box-sizing: border-box;
    }

    form.wp-block-search.wp-block-search__button-outside .wp-block-search__input {
        flex: 1 1 auto;
        min-width: 0;
        height: 2.8125rem;
        background: #fff;
        color: #414546;
        border: 1px solid #ccc;
        border-radius: 0.25rem;
        font-size: 0.875rem;
        padding: 0 0.75rem;
        box-sizing: border-box;
        -webkit-appearance: none;
    }

    form.wp-block-search.wp-block-search__button-outside .wp-block-search__button {
        flex: 0 0 auto;
        height: 2.8125rem;
        background: #e1e1e1;
        color: #333;
        border: 1px solid #cbcbcb;
        border-radius: 0.25rem;
        font-size: 0.875rem;
        padding: 0 1.125rem;
        cursor: pointer;
        margin-left: 0.3125rem;
        white-space: nowrap;
    }
}

/* =========================================================
   SEARCH FORM SUBMIT BUTTONS (SEARCH.PHP & ARCHIVE LAYOUTS)
   Matches .wp-element-button colors and radius for consistency
   ========================================================= */

.search-form input[type="submit"],
.search-submit {
    background-color: #ee4d28;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 4px;
    border: none;
    height: 2.8125rem;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.search-form input[type="submit"]:hover,
.search-submit:hover {
    background-color: #ec2e03 !important;
}

.search-form input[type="submit"]:active,
.search-form input[type="submit"]:focus,
.search-submit:active,
.search-submit:focus {
    background-color: #df2a01 !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
    outline: none !important;
}

/* =========================================================
   UNIFIED FILTER ROWS (AUTHOR, CATEGORY, TAG)
   Shared layout for archive on-page search results
   ========================================================= */

body.author .filters-row,
body.category .filters-row,
body.tag .filters-row, {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 81.25rem;
    margin: 0 auto 1.5rem auto;
    padding-top: 0.75rem;
}

.filter-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;
}

/* =========================================================
   SEARCH RESULTS (AUTHOR, CATEGORY, TAG) 
   Shared message, and retry form
   ========================================================= */

.no-results-message {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.noresults-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start;
    margin-top: 0.5rem;
}

.author .noresults-form #search-box,
.category .noresults-form #search-box,
.tag .noresults-form #search-box, {
    width: 20rem !important;
    max-width: 100%;
    flex: 0 0 auto !important;
}

body.author.search .search-form-category #search-box,
body.category.search .search-form-category #search-box,
body.tag.search .search-form-category #search-box,{
    height: 2.8125rem !important; /* match global filter form control height */
    line-height: 2.8125rem !important;
}

.author .search-submit,
.category .search-submit,
.tag .search-submit,{
    height: 2.8125rem !important; /* match global form control height */
    line-height: 2.8125rem !important;
}

/* =========================================================
   SEARCH RESULTS LAYOUT (SEARCH.PHP)
   Layout and visual styling for search results listings and containers
   ========================================================= */

/* Result link wrapper */
.searchlink {
    text-decoration: none;
}

/* Search results card layout */
.search-result {
    display: flex;
    border: 1px solid #ccc;       /* Box outline */
    background-color: #f9f9f9;    /* Background color */
    margin-bottom: 1.25rem;       /* Spacing between results */
    padding: 0.625rem;            /* Internal padding */
    border-radius: 0.25rem;
}

.search-result .post-thumbnail {
    width: 20%;                   /* 20% width for the thumbnail */
    display: flex;
    align-items: center;          /* Center vertically */
    justify-content: center;      /* Center horizontally */
    margin-right: 0.9375rem;      /* Space between image and content */
}

.search-result .post-details {
    width: 80%;                   /* 80% width for post details */
}

.search-result img {
    max-width: 100%;              /* Fit within container */
    height: auto;                 /* Maintain aspect ratio */
}

/* =========================================================
   CATEGORY/ARCHIVE 4-ACROSS POST GRID
   Flexible 4-column layout aligned to 1300px main container
   ========================================================= */

.category-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.875rem;
    max-width: 81.25rem; /* 1300px */
    margin: 0 auto 1.875rem auto;
}

.categorylink {
    text-decoration: none;
    flex: 0 0 calc(25% - 1.40625rem); /* four columns */
}

.category-result {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 0.25rem;
    padding: 0.625rem;
    height: 20rem;
    box-sizing: border-box;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    transform: translateZ(0); /* prevents subpixel jitter on transform */
}

.category-result:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.15);
}

/* Ensures image never resizes or nudges on hover */
.category-result img {
    display: block;
    width: 100%;
    height: 15.625rem;
    object-fit: cover;
    border-radius: 0.1875rem;
    margin-bottom: 0.625rem;
    transition: none;
    backface-visibility: hidden; /* fixes subpixel rounding on transform */
}

.post-thumbnail > img {
    height: 12.5rem;
}

.entry-title {
    font-size: 1rem;
    line-height: 1.2;
    color: #ee4d28;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    text-align: left;
    flex-shrink: 0;
}

/* =========================================================
   BLOG POST TEMPLATE (SINGLE.PHP)
   Styling for individual blog post layout and content elements
   ========================================================= */
.singleheader {
    text-align: center;
    font-size: 2.8125rem;
}

.preheaderholder {
    margin: auto;
    width: 81.25rem;
}

.preheader {
    background: #f9f9f9;
    padding: 3.125rem 0;
}

.preheader > h2 {
    text-align: center;
}

.preheader > h2 > a {
    text-decoration: none;
    color: black;
}

.categories {
    text-align: center;
}

.categories > a {
    text-decoration: none;
    color: #bf422e;
    font-size: 1.6875rem;
    font-weight: bold;
}

.categories .blog-breadcrumb {
    color: #333;       /* Controls Color of Blog & Right Triangle in Breadcrumbs */
    font-weight: 700;  /* Make it slightly bold */
}

/* Blog Footer Columns Styles */
.blogfooter {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 81.25rem;
    margin: auto;
}

.blogfooter-column {
    box-sizing: border-box;
    width: 25.8125rem;
    background-color: #f9f9f9; /* Adjust the background color as needed */
    display: inline-block;
    border-radius: 0.25rem;
    padding: 1.875rem;
}

.blogfooter-column h2.blog-footer-widget-title {
    font-size: 1.2em;
    margin-bottom: 0.625rem;
}

/* 1 Column */
.column-count-1 > div {
    width: 100%;
}

/* 2 Columns */
.column-count-2 > div {
    width: 50%;
}

/* 3 Columns */
.column-count-3 > div {
    width: 33.33%;
}

/* 4 Columns */
.column-count-4 > div {
    width: 25%;
}

/* =========================================================
   FOOTER
   Styling for footer layout, typography, and link appearance across all pages
   ========================================================= */
.footer-row {
    margin-bottom: 0.9375rem;
}

footer {
    background: black;
    padding: 0 0.9375rem;
}

.footerwidgetcontainer {
    max-width: 81.25rem;
    margin: 0 auto;
    background: black;
    padding: 0 0.9375rem;
}

.footer-widgets {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 3.75rem 0 1.25rem;
    box-sizing: border-box;
}

.footer-widgets > div {
    flex: 1 1 calc(25% - 1.875rem); /* four columns with breathing room */
    box-sizing: border-box;
    min-width: 15.625rem;
}

.footercopyrightcontainer {
    padding-top: 1.25rem;
    padding-bottom: 3.75rem;
    width: 81.25rem;
    margin: auto;
}

.footer-row p {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    padding-bottom: 0.9375rem;
    text-transform: uppercase;
}

.footer-row a {
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
}

.footer-row a:hover {
    color: #ee4d28;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

/* =========================
   COPYRIGHT CONTAINER
   ========================= */

.copyrightcontainer {
    background: #000000;
}

/* =========================
   RESPONSIVE: ≤1300px
   ========================= */
@media only screen and (max-width: 1300px) {
	.footerwidgetcontainer {
		width: 100%;
	}
	.column-count-2 > div {
		width: 33%;
	}
	.column-count-3 > div {
		width: 33%;
	}
	.column-count-4 > div {
		width: 50%;
	}
}

/* =========================
   RESPONSIVE: ≤1200px
   ========================= */
@media (max-width: 1200px) {
	.secondarymenuleft,
	.secondarymenuright {
		display: none !important;
	}
}

/* =========================================================
   RESPONSIVE: ≤1199px
   Mobile Menu System
   ========================================================= */


/* ==== DEFAULT / GLOBAL STATES ==== */

.mobile-menu-container,
.mobile-menu__toggle-button {
    display: none;
}

.mobile-menu li.menu-item-has-children.is-open > .sub-menu {
    display: block;
}

/* Prevent background scroll when off-canvas menu is open */
body.menu-open {
    overflow: hidden;
    touch-action: none;
}


/* ==== MOBILE ACTIVATION (≤1199px) ==== */

@media (max-width: 1199px) {

    input,
    textarea,
    select {
        font-size: 16px !important;
    }
	
	.menucontainer,
    .secondarymenucontainer,
    .topmenu,
    .rightmenu {
        display: none !important;
    }

    /* =========================================================
       FIXED MOBILE HEADER
       Safe-area aware (iOS notches + dynamic island)
       ========================================================= */

    .mobile-menu-container {
        display: block;
        position: relative;
        left: 0;
        width: 100%;
        background-color: #000;
        z-index: var(--z-header);
    }

    /* Admin bar + safe-area stacking */
    body.admin-bar .mobile-menu-container {
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* Header row (logo + toggle) */
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #000;
        padding: 0.652rem 0.75rem;
        overflow: visible;
    }

    /* Hamburger / close toggle */
    .mobile-menu__toggle-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        background: none;
        border: none;
        cursor: pointer;
        color: #fff;
        position: relative;
        padding: 0;
        overflow: visible;
    }

    .mobile-menu__toggle-button .mobile-menu__bar {
        position: absolute;
        width: 32px;
        height: 4px;
        background-color: currentColor;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    .mobile-menu__toggle-button .mobile-menu__bar:nth-child(1) {
        transform: translateY(-10px);
    }

    .mobile-menu__toggle-button .mobile-menu__bar:nth-child(2) {
        transform: translateY(0);
    }

    .mobile-menu__toggle-button .mobile-menu__bar:nth-child(3) {
        transform: translateY(10px);
    }

    body.menu-open .mobile-menu__toggle-button .mobile-menu__bar:nth-child(1) {
        transform: rotate(45deg);
    }

    body.menu-open .mobile-menu__toggle-button .mobile-menu__bar:nth-child(2) {
        opacity: 0;
    }

    body.menu-open .mobile-menu__toggle-button .mobile-menu__bar:nth-child(3) {
        transform: rotate(-45deg);
    }
}


/* ==== OFF-CANVAS PANEL ==== */
/* Panel opens directly beneath fixed header */

.mobile-menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: calc(100vh - 100% - env(safe-area-inset-top, 0px));
    background: #ffffff;
    z-index: var(--z-offcanvas);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.menu-open .mobile-menu-panel {
    transform: translateX(0);
}


/* ==== MENU LIST RESET & LAYOUT ==== */

.mobile-menu,
.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    row-gap: 0.75rem;
}


/* ==== TOP-LEVEL MENU ITEMS ==== */

.mobile-menu li.menu-item-has-children {
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}

/* Vertical divider applies ONLY to parent row */
.mobile-menu li.menu-item-has-children::after {
    content: "";
    position: absolute;
    right: 2.25rem;
    top: 0.75rem;
    height: 2.5rem; /* limits divider to parent row height */
    width: 1px;
    background-color: #e6e6e6;
}

.mobile-menu li.menu-item-has-children > a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.mobile-menu > li.menu-item {
    border-bottom: 1px solid #e6e6e6;
}

.mobile-menu li.menu-item > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    padding-block: 1rem;
    padding-inline: 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #000;
    text-decoration: none;
}

.mobile-menu li.menu-item > a:hover,
.mobile-menu li.menu-item-has-children .sub-menu li a:hover {
    color: #ff5733;
    border-bottom: none;
}

.mobile-menu li.menu-item > a::after {
    content: "›";
    font-size: 1.25rem;
    color: #ee4d28;
}


/* ==== SUBMENU TOGGLE CONTROLS ==== */

.submenu-toggle {
    width: 2.25rem;
    height: 2.25rem;
    margin-left: 0.75rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ee4d28;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mobile-menu li.menu-item-has-children.is-open > .submenu-toggle {
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}


/* ==== SUBMENUS ==== */

.mobile-menu li.menu-item-has-children .sub-menu {
    display: none;
    padding-left: 1rem;
    width: 100%;
}

.mobile-menu li.menu-item-has-children .sub-menu li a {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-left: 0.875rem;
    padding-right: 1rem;
    padding-block: 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    color: #000;
    border-bottom: none; /* Remove divider from all submenu links */
    gap: 0.35rem;
}

.mobile-menu li.menu-item-has-children .sub-menu li a::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #ee4d28;
}

/* Add divider ONLY to last submenu item */
.mobile-menu li.menu-item-has-children .sub-menu li:last-child a {
    border-bottom: 1px solid #e6e6e6;
    width: 100%;
}


/* ==== UTILITY HELPERS ==== */

.u-color-white {
    color: #ffffff;
}

.u-flex {
    display: flex;
    align-items: center;
}

/* =========================
   RESPONSIVE: ≤992px
   ========================= */
@media only screen and (max-width: 992px) {
	.footerwidgetcontainer {
		width: 100%;
	}
	.column-count-2 > div {
		width: 33%;
	}
	.column-count-3 > div {
		width: 33%;
	}
	.column-count-4 > div {
		width: 50%;
	}
}

/* ==== ADMIN BAR OVERRIDE (≤782px) ==== */
/* Taller admin bar on small screens */

@media (max-width: 782px) {

    body.admin-bar .mobile-menu-container {
        top: 46px;
    }
}


/* =========================
   RESPONSIVE: ≤768px
   ========================= */
@media only screen and (max-width: 768px) {
	.footerwidgetcontainer {
		width: 100%;
	}
	.column-count-2 > div {
		width: 50%;
	}
	.column-count-3 > div {
		width: 100%;
	}
	.column-count-4 > div {
		width: 50%;
	}
}

/* =========================================================
   RESPONSIVE: ≤767px
   ========================================================= */
@media (max-width: 767px) {

	/* Reverse stacking order for specific rows */
	.reverse-mobile-row {
		display: flex;
		flex-direction: column-reverse;
	}

	/* Adjust empty space height for WPBakery elements */
	.vc_empty_space_32 {
		height: 2rem !important;
	}
}

/* =========================
   RESPONSIVE: ≤600px
   ========================= */
@media only screen and (max-width: 600px) {

	/* Header / navigation */
	.menucontainer {
		display: none !important;
	}

	.custom-logo {
		height: 3.125rem;
	}

	.topmenu > ul > li {
		display: block;
	}

	/* Preheader (single post header strip) */
	.preheaderholder {
		width: 100%;
	}

	/* Main layout & content wrappers */
	.centered {
		padding: 0rem 0.9375rem;
	}

	main {
	}

	.precontentcontainer {
		position: relative;
		z-index: 0;
	}

	.category-result {
		padding: 0.625rem;
		width: 100%;
		box-sizing: border-box;
	}

	/* Search block (Gutenberg / block search) */
	.wp-block-search__inside-wrapper {
		display: block;
		margin: auto;
		margin-bottom: 1.25rem;
	}

	.wp-block-search__input {
		width: 100%;
		border-radius: 4px;
		border: 1px solid #cacaca;
	}

	/* VC slider *
	.vc_pageable-slide-wrapper {
		margin-right: 0 !important;
	}

	/* Blog footer (blog-only footer area) */
	.blogfooter {
		width: 100%;
		padding: 0px;
	}

	.blogfooter-column {
		flex: 1 1 100%;
		margin-bottom: 1.25rem;
	}

	/* Global footer widgets & copyright */
	.footerwidgetcontainer {
		width: 100%;
	}

	.column-count-2 > div,
	.column-count-3 > div,
	.column-count-4 > div {
		width: 100%;
	}

	.footercopyrightcontainer {
		width: 100%;
	}

	.copyrightcontainer {
		padding: 0px 0.9375rem;
	}
}

/* ==== ACCESSIBILITY: REDUCED MOTION ==== */
/* Respect user preference for reduced motion */

@media (prefers-reduced-motion: reduce) {

    .mobile-menu-panel {
        transition: none;
    }

    .mobile-menu__toggle-button .mobile-menu__bar {
        transition: none;
    }

}

/* =========================
   WOOCOMMERCE STORE NOTICE (DESKTOP, ADMIN BAR, MOBILE)
   ========================= */

/* Desktop layout */
:root {
	--notice-h: 3.375rem;
}

.woocommerce-store-notice,
.woocommerce-store-notice.demo_store,
p.demo_store {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 10000;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	line-height: 1.4;
	overflow: hidden;
	max-height: var(--notice-h);
}

body.woocommerce-demo-store {
	padding-top: var(--notice-h);
}

/* Admin bar spacing on desktop */
body.admin-bar .woocommerce-store-notice,
body.logged-in.admin-bar .woocommerce-store-notice {
	top: 2rem;
}

@media (max-width: 782px) {
	body.admin-bar .woocommerce-store-notice,
	body.logged-in.admin-bar .woocommerce-store-notice {
		top: 2.875rem;
	}

	body.woocommerce-demo-store { 
		padding-top: 0; 
	}
}

/* Mobile layout */
@media (max-width: 768px) {

	/* Allow natural wrapping on small screens */
	.woocommerce-store-notice,
	.woocommerce-store-notice.demo_store,
	p.demo_store {
		white-space: normal;
		overflow: visible;
		max-height: none;
		line-height: 1.4;
		padding: 0.625rem 1rem;
	}

	/* Adjust notice height for multi-line text */
	:root {
		--notice-h: 4.375rem;
	}

	body.woocommerce-demo-store {
		padding-top: var(--notice-h);
	}

	/* Align utility bar below notice */
	body.woocommerce-demo-store .utilitybar {
		margin-top: 0;
	}

	/* Responsive utility bar layout */
	.utilitybar {
		height: auto;
		max-height: none;
		overflow: visible;
	}
}


/* =========================
   WooCommerce Messages
   ========================= */
.woocommerce-message {
    margin-top: 1.25rem !important;            /* Added to Cart Message */
    background-color: #f9f9f9;
    color: #000;
    border-top: none;
    outline: none !important;
    box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.5) !important;
}

.wc-block-components-notice-banner.is-error {
    background-color: #f6f5f8 !important;
    border-color: #cc1818;
    outline: none !important;
    box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.5) !important;
}

.wc-block-components-notice-banner.is-info {
    background-color: #f6f5f8 !important;
    border-color: #cacaca;
    outline: none !important;
    box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.5) !important;
}

.wc-block-components-notice-banner.is-success {
    background-color: #f6f5f8 !important;
    border-color: #4ab866;
    outline: none !important;
    box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.5) !important;
}

.wc-block-components-notice-banner.is-warning {
    background-color: #f6f5f8 !important;
    border-color: #f0b849;
    outline: none !important;
    box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.5) !important;
}

/* "No Shipping Address" message icon */
.wc-block-components-shipping-rates-control__no-shipping-address-message::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f06a";      /* exclamation-circle */
    font-size: 13px;       /* keep px for icons */
    color: #cc1818;
    margin-right: 0.3125rem;
}

.wc-block-components-shipping-rates-control__no-shipping-address-message {
    border-top: none;
    outline: none !important;
    box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.5) !important;
    background-color: #f6f5f8 !important;
    color: #515151 !important;
}