/*
Theme Name: Button Bashed Technologies
Theme URI: https://buttonbashed.co.nz/
Author: Button Bashed Technologies
Description: Custom theme with persistent left sidebar and WooCommerce support.
Version: 1.0
Text Domain: button-bashed-technologies
*/

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #FFFFFF;
    color: #000000;
}

/* Header */

.bbt-site-header {
    background: #050816;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bbt-site-header .bbt-logo a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Layout with left sidebar */

.bbt-layout {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 60px); /* header height-ish */
}

/* Sidebar column */

.bbt-layout-sidebar {
    width: 64px;   
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.06);
    background: #000000;
    color: #FFFFFF;  
    overflow: hidden;
    transition: width 0.25s ease;
}

/* On hover: expand to show labels */
.bbt-layout-sidebar:hover {
    width: 220px;                /* expanded width */
}

/* Main content */

.bbt-layout-main {
    flex: 1;
    padding: 2rem 2.5rem;
    box-sizing: border-box;
}

/* Sidebar styling */

.bbt-sidebar {
    padding: 1.5rem 1.25rem;
    box-sizing: border-box;
    color: #FFFFFF;
}

.bbt-sidebar-title {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.bbt-sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bbt-sidebar-menu li {
    margin-bottom: 0.25rem;
}

/* ==== SIDEBAR MENU + PILL BEHAVIOUR ==== */

/* Base link styles (collapsed defaults) */
.bbt-sidebar-menu a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;         /* icons centered when collapsed */
    width: 40px;
    height: 40px;
    border-radius: 999px;
    text-decoration: none;
    color: #000000;
    overflow: hidden;
/*    margin: auto auto; */
    padding: 0px 0px;
    transition:
        color 0.15s ease,
        transform 0.10s ease,
        width 0.25s ease,
        padding 0.25s ease; 
}

/* Gradient background – circle when collapsed */
.bbt-sidebar-menu a::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;                      /* circle behind icon */
    height: 64px;
/*    border-radius: 100%; */
    background: #ffffff; 
    z-index: 0;
    transition:
        width 0.25s ease,
        height 0.25s ease,
        border-radius 0.25s ease,
        inset 0.25s ease,
        margin 0.25s ease;
    padding: 0;
}

/* Icon above gradient */
.bbt-menu-icon {
    position: relative;
    z-index: 1;
    width: 1.5em;
    height: 1.5em;
    overflow: visible;
    flex-shrink: 0;
    fill: currentColor;
    display: block;
    transform: translateX(5px);
}

/* Label hidden when collapsed */
.bbt-menu-label {
    position: relative;
    z-index: 1;
    opacity: 0;
    white-space: nowrap;              /* prevent wrapping when expanded */
    transform: translateX(-4px);      /* tiny slide-in feel */
    padding: 0px 5px;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

/* Hover / active state – keep existing colour + nudge */
.bbt-sidebar-menu a:hover,
.bbt-sidebar-menu .current-menu-item > a,
.bbt-sidebar-menu .current_page_item > a {
    color: #000000;
    transform: translateX(2px);
}

/* Expanded sidebar: full pill + visible labels */
.bbt-layout-sidebar:hover .bbt-sidebar-menu a {
    width: 100%;
    height: 40px;
    justify-content: flex-start;
    padding: 0 0px; 
}

/* Turn circle into full pill when expanded */
.bbt-layout-sidebar:hover .bbt-sidebar-menu a::before {
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%; 
    border-radius: 999px;
}

/* Show labels when expanded */
.bbt-layout-sidebar:hover .bbt-menu-label {
    opacity: 1;
    transform: translateX(0);
    margin-left: 8px;
}

/* ==== END SIDEBAR MENU ==== */

/* Content typography */

.bbt-layout-main h1,
.bbt-layout-main h2,
.bbt-layout-main h3 {
    margin-top: 0;
    font-weight: 700;
}

.bbt-layout-main a {
   /* color: #; */
}

/* Make standard WP content readable */

.entry-content {
    max-width: 900px;
}

/* WooCommerce general container inside main */

.bbt-woo-area .woocommerce {
    max-width: 1100px;
}

/* Keep Woo buttons close to default but branded */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    border-radius: 999px;
}

/* Responsive */

@media (max-width: 900px) {
    .bbt-layout {
        flex-direction: column;
        min-height: auto;
    }

    .bbt-layout-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .bbt-layout-main {
        padding: 1.5rem 1rem 3rem;
    }

    /* On mobile you might prefer always-expanded menu;
       if so, you can uncomment these:

    .bbt-sidebar-menu a {
        width: 100%;
        justify-content: flex-start;
        padding: 6px 12px;
    }

    .bbt-sidebar-menu a::before {
        inset: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        border-radius: 999px;
    }

    .bbt-menu-label {
        opacity: 1;
        transform: translateX(0);
        margin-left: 8px;
    }

    */
}
/* ========= NEW: collapsed pill behaviour ========= */

/* When the sidebar is collapsed (not hovered):
   make each link a fixed square so the gradient pill becomes a circle */
.bbt-layout-sidebar:not(:hover) .bbt-sidebar-menu a {
    width: 40px;
    height: 40px;
    justify-content: left;
    padding: 0;                  /* no extra horizontal padding */
}

/* Keep the pill fully rounded in collapsed state */
.bbt-layout-sidebar:not(:hover) .bbt-sidebar-menu a:hover,
.bbt-layout-sidebar:not(:hover) .bbt-sidebar-menu .current-menu-item > a,
.bbt-layout-sidebar:not(:hover) .bbt-sidebar-menu .current_page_item > a {
    border-radius: 999px;        /* ensures it's a circle when width = height */
}