/* T2 Template - Bare Bones */
:root {
    --t2-accent:      #2a6ebb;
    --t2-font:        system-ui;
    --t2-page-bg:     #888888;
    --t2-wrap-bg:     #ffffff;
    --t2-wrap-width:  100%;
    --t2-header-bg:   #ffffff;
    --t2-header-text: #333333;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--t2-font);
    color: #333;
    background: var(--t2-page-bg);
}

#wrapper {
    background: var(--t2-wrap-bg);
    max-width: var(--t2-wrap-width);
    margin: 0 auto;
}

a       { color: var(--t2-accent); }
a:hover { text-decoration: underline; }

/* ---- Shared container ---- */
#header,
#utility-bar,
#main-wrap,
#info-row,
#footer {
    width: 100%;
    padding: 0 1rem;
}

/* ---- Header ---- */
#header {
    padding: 1rem;
    border-bottom: 2px solid var(--t2-accent);
    background: var(--t2-header-bg);
}
#header-image      { width: 100%; overflow: hidden; }
#header-image img  { width: 100%; height: auto; display: block; }
#site-title        { font-size: 1.8rem; font-weight: bold; color: var(--t2-header-text); }
#site-title a      { text-decoration: none; color: inherit; }
#site-tagline      { font-size: 0.95rem; color: var(--t2-header-text); opacity: 0.75; }

/* ---- Utility bar: breadcrumbs left, search/option right ---- */
#utility-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 1rem;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

/* ---- Main content area: content left, navigation right ---- */
#main-wrap {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    align-items: flex-start;
}
#content    { flex: 1 1 auto; min-width: 0; }
#navigation { flex: 0 0 220px; }

/* ---- Info row (InfoLeft / InfoCenter / InfoRight) ---- */
#info-row {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid #ddd;
}
.info-col { flex: 1; }

/* ---- Footer ---- */
#footer {
    padding: 0.75rem 1rem;
    background: #f5f5f5;
    border-top: 1px solid #ccc;
    text-align: center;
    font-size: 0.85rem;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    #main-wrap,
    #info-row { flex-direction: column; }
    #navigation { flex: 1 1 auto; }
    #utility-bar { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}