:root {

    /* layout */

    --layout-gap: 10px;

    /* borders */

    --border-color: black;
    --border-width: 2px;

    /* surfaces */

    --surface-header: #e5e5e5;
    --surface-content: #f5f5f5;

    /* logo */

    --color-logo-active: #000;
    --color-logo-inactive: #525252;
    --color-text-muted: #777;
}


/* =====================================================
   LAYER 1: BASE STYLES (STATIC FOUNDATION)
   ===================================================== */

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.site-wrapper {
    height: 100dvh;
}

.page-layout {
    height: 100%;
    padding: 10px;
    gap: 10px;
    box-sizing: border-box;
}

.page-content {
    min-height: 0;
    overflow-y: auto;
}

/* -------------------------
   HEADER BASE STRUCTURE
------------------------- */

.page-header {
    background: var(--surface-header); /* e5e5e5 is a medium-light gray */
    padding: 2rem;
    margin: 0;
    border: 2px solid var(--border-color);
}

.page-content {
    background: var(--surface-content); /* f5f5f5 is a light gray */
    padding: 2rem;
    margin: 0;
    border: 2px solid var(--border-color);
}

.header-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;  
}

/* -------------------------
   HEADER LOGO
------------------------- */
.header-logo {
    display: flex;
    justify-content: center;
    width: 100%;
    
}

.layout-logo {
    cursor: pointer;
    display: block;
    width: 100%;
    height: auto;
    /*border: 1px solid var(--border-color);*/
}

.layout-logo rect {
    transition:
        transform 0.45s cubic-bezier(.4, 0, .2, 1),
        fill 0.3s ease;

    transform-box: fill-box;
}

.logo-top-part {
    transform-origin: right center;
}

.logo-sidebar-part {
    transform-origin: center top;
}

.logo-sidebar-part,
.logo-top-part {
    transition: fill 0.2s ease;
}

/* logo hint show only for touch users */

.layout-hint {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
    pointer-events: none;
}

.layout-hint.show {
    opacity: 1;
    visibility: visible;
}

.header-nav ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    list-style: none;
    padding: 0;
    margin: 0;
}

.header-nav a {
    text-decoration: none;
    color: inherit;
}

.header-nav .current-menu-item a {
    font-weight: bold;
}

.page-footer {
    padding: 1rem 2rem;
    border-top: 1px solid  #ddd;
}

.page-info {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #ccc;
}

/* =====================================================
   LAYER 2: COMPONENTS
   ===================================================== */

/* -------------------------
   COLLAPSE HANDLE BASE
------------------------- */

/* Sidebar becomes positioning reference */
.page-header {
    position: relative;
}

/* Collapse Handle 

.collapse-handle {
    background: rgba(255,0,0,.2);
}   showing cklick area */

.collapse-handle {
    display: none;

    position: absolute;
    top: 50%;
    right: 0;

    width: 28px;
    height: 80px;

    transform: translateY(-50%);

    cursor: pointer;
    z-index: 100;
}

/* Triangle base */
.collapse-handle::before {
    content: "";
    position: absolute;
    top: 50%;

    width: 0;
    height: 0;

    transform: translateY(-50%);

    border-style: solid;
}

/* =====================================================
   LAYER 3: DESKTOP STATES
   ===================================================== */

/* SIDEBAR */
.page-layout[data-device="desktop"][data-layout="sidebar"] {
    display: grid;
    grid-template-columns: 250px 1fr;
}

.page-layout[data-device="desktop"][data-layout="sidebar"] .collapse-handle {
    display: flex;
}

.page-layout[data-device="desktop"][data-layout="sidebar"] .header-nav {
    border-top: 1px solid #ccc;
    padding-top: 1rem;
}

.page-layout[data-device="desktop"][data-layout="sidebar"] .collapse-handle::before {
    right: 0;

    border-width: 16px 20px 16px 0;
    border-color: transparent #333 transparent transparent;
}

.page-layout[data-layout="sidebar"] .logo-sidebar-part {
    fill: var(--color-logo-active);
}

.page-layout[data-layout="sidebar"] .logo-top-part {
    fill: var(--color-logo-active);
}

/* sidebar hover logo morph */
@media (any-hover: hover) {

    .page-layout[data-device="desktop"][data-layout="sidebar"]
    .layout-logo:hover .logo-top-part {

        transform:
            translateY(-75px)
            scaleX(1.45);
        
    }

    .page-layout[data-device="desktop"][data-layout="sidebar"]
    .layout-logo:hover .logo-sidebar-part {

        transform:
            scaleY(0.36);
    }
}

/* COLLAPSED */

.page-layout[data-device="desktop"][data-layout="collapsed"] .collapse-handle::before {
    right: 6px;

    border-width: 16px 0 16px 20px;
    border-color: transparent transparent transparent #333;
}

.page-layout[data-device="desktop"][data-layout="collapsed"] {
    display: grid;
    grid-template-columns: 1px 1fr;
    /* column-gap: 5px; */
}

.page-layout[data-device="desktop"][data-layout="collapsed"] .page-header {
    padding: 0;
    margin: 10px;
    width: 1px;

    border-left: none;
    border-top: none;
    border-bottom: none;
    border-right: none;

    overflow: visible;
}

.page-layout[data-device="desktop"][data-layout="collapsed"] .collapse-handle {
    right: -27px;
}

.page-layout[data-device="desktop"][data-layout="collapsed"] .header-inner {
    display: none;
}

.page-layout[data-device="desktop"][data-layout="collapsed"] .collapse-handle {
    display: flex;
}

/* TOPBAR */
.page-layout[data-layout="top"] .header-logo {
    display: block;
    width: auto;
}

.page-layout[data-layout="top"] .layout-hint {
    display: none;
}

.page-layout[data-device="desktop"][data-layout="top"] .page-header {
    padding: 0.75rem 2rem;
}

.page-layout[data-device="desktop"][data-layout="top"] {
    display: flex;
    flex-direction: column;
}

.page-layout[data-device="desktop"][data-layout="top"] .header-inner {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}

.page-layout[data-device="desktop"][data-layout="top"] .header-logo {
    width: auto;
    flex-shrink: 0;
}

.page-layout[data-device="desktop"][data-layout="top"] .layout-logo {
    width: auto;
    height: 40px;
    flex-shrink: 0;
}

.page-layout[data-device="desktop"][data-layout="top"] .header-nav ul {
    flex-direction: row;
}

.page-layout[data-device="desktop"][data-layout="top"] .page-content {
    flex: 1;
    min-height: 0;
}

/*page info in row*/
.page-layout[data-device="desktop"][data-layout="top"] .page-info {
    display:none;
    flex-direction: row;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
    border-bottom: none;
    margin-left: auto;
}

.page-layout[data-layout="top"] .logo-sidebar-part {
    fill: var(--color-logo-active);
}

.page-layout[data-layout="top"] .logo-top-part {
    fill: var(--color-logo-active);
}

/* logo hover morph topbar */
@media (any-hover: hover) {

    .page-layout[data-layout="top"]
    .layout-logo:hover .logo-top-part {

        transform:
            translateX(-75px)
            scaleX(0.35);
    }

    .page-layout[data-layout="top"]
    .layout-logo:hover .logo-sidebar-part {

        transform:
            scaleY(1.4);
    }

}

/* IMPORTANT: no collapse in top mode */
.page-layout[data-device="desktop"][data-layout="top"] .collapse-handle {
    display: none;
}

/* =====================================================
   MOBILE STATES
   ===================================================== */

/* EXPANDED */
.page-layout[data-device="mobile"][data-layout="expanded"] .layout-hint {
    display: none;
}

.page-layout[data-device="mobile"][data-layout="expanded"] .header-logo {
    display: block;
    width: auto;
}

.page-layout[data-device="mobile"][data-layout="expanded"] .page-header {
    padding: 0.75rem 2rem;
}

.page-layout[data-device="mobile"][data-layout="expanded"] .header-logo {
    width: auto;
    flex-shrink: 0;
}

.page-layout[data-device="mobile"][data-layout="expanded"] .layout-logo {
    width: auto;
    height: 40px;
    flex-shrink: 0;
}

.page-layout[data-device="mobile"][data-layout="expanded"] {
    display: flex;
    flex-direction: column;
}

.page-layout[data-device="mobile"][data-layout="expanded"] .header-inner {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}

.page-layout[data-device="mobile"][data-layout="collapsed"] .collapse-handle::before {
    border-width: 20px 16px 0 16px;
    border-color: #333 transparent transparent transparent;
}

/* COLLAPSED */
.page-layout[data-device="mobile"][data-layout="collapsed"] {
    display: flex;
    flex-direction: column;
}

.page-layout[data-device="mobile"][data-layout="collapsed"] .header-inner {
    display: none;
}

.page-layout[data-device="mobile"][data-layout="collapsed"] .collapse-handle {
    display: flex;
    transform: translate(-50%, 100%)
}

.page-layout[data-device="mobile"][data-layout="expanded"] .collapse-handle::before {
    border-width: 0 16px 20px 16px;
    border-color: transparent transparent #333 transparent;
}

.page-layout[data-device="mobile"][data-layout="collapsed"] .page-header {
    padding: 0;
    min-height: 0;

    border-left: none;
    border-top: none;
    border-bottom: none;
    border-right: none;

    overflow: visible;
}

.page-layout[data-device="mobile"][data-layout="collapsed"] {
    gap: 0;
}


/* =====================================================
   MOBILE GLOBAL
   ===================================================== */

.page-layout[data-device="mobile"] .page-info {
    display: none;
}

/*disabled cklicking area
.page-layout[data-device="mobile"] .collapse-handle {
    background: red;
}*/

.page-layout[data-device="mobile"] .collapse-handle {
    display: flex;
    position: absolute;
    top: auto; /* override desktop */
    right: auto; /* override dektop */
    left: 50%;
    bottom: 0;
    width: 48px;
    height: 20px;
    transform: translateX(-50%);
}

.page-layout[data-device="mobile"] .collapse-handle::before {
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

.page-layout[data-device="mobile"] .header-nav ul {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
}

.page-layout[data-device="mobile"] .header-nav {
    overflow-x: auto;
}

.page-layout[data-device="mobile"] .page-content {
    flex: 1;
    min-height: 0;
}