/* ==================================================================================================
 * newcss.css — Nortel Norstar & BCM Troubleshooting Guide
 * Combined stylesheet: PbxMechanic.com base framework + page-specific additions
 * ================================================================================================== */

/* ==================================================================================================
 * SECTION 1: PbxMechanic.com/css/default.css (base framework, used as-is where possible)
 * Design by RTBWizards.com
 * Main Colors:   #867356 (dark), #b5a58b (medium), #dcd5c8 (light)
 * Accent Colors: #568686 (dark), #8bb5b4 (medium), #e0ecec (light)
 * Google Fonts Used: 'Open Sans', 'Cinzel Decorative', 'Raleway'
 * ================================================================================================== */

/* ============================== GENERAL RULES ================================================= */
html {height: 101%;}
header, figure, figcaption, footer, nav, article, section, aside {display: block;}
body {
   background: #fff;
   font-family: 'Open Sans', Verdana, Helvetica, sans-serif;
   font-size: 16px;
   color: #000000;
   margin: 0;
   padding: 0;
   line-height: 1.5em;
   height: 100%;
}
table {
   padding: 0; border-collapse: collapse; font-size: 100%; width: 100%;
}

/* ============================== HORIZONTAL RULES AND CLEAR FLOATS ============================== */
hr {background-color: #e5e7e9; border: none; color: #e5e7e9; height: 1px; clear: both;}
hr.noshow {background-color: transparent; border: none; color: #fff; height: 0; clear: both; visibility: hidden;}
.clear {margin: 0; padding: 0; height: 0; clear: both;}

/* ============================== LISTS ========================================================== */
ul {margin: 10px 0 20px 10px; padding: 0 0 0 15px;}
ul li a {color: #b5a58b; text-decoration: none; font-weight: bold; padding: 0;}
ul li a:hover {color: #8bb5b4; text-decoration: underline;}
ul.list2 li {list-style-type: none; position: relative; margin-left: -10px; padding-left: 10px;}
ul.list2 li::before {position: absolute; font-family: 'FontAwesome'; font-size: 14px; top: 0; left: 0; content: "\f0da"; color: #867356;}
ul.list2 li ul {margin-top: 0; margin-bottom: 0;}

/* ============================== TYPOGRAPHY ====================================================== */
a {
   color: #b5a58b;
   text-decoration: underline;
   outline: none;
   font-weight: bold;
}
a:hover {
   color: #8bb5b4;
   text-decoration: underline;
   font-weight: bold;
}
h1 {
   font: 44px 'Cinzel Decorative', Verdana, Helvetica, sans-serif;
   margin: 0.3em 0;
}
h2 {
   font: 34px 'Raleway', Verdana, Helvetica, sans-serif;
   margin: 0.3em 0;
}
h3 {
   font: 32px 'Raleway', Verdana, Helvetica, sans-serif;
   margin: 0.3em 0;
   padding: 1px 0 0 0;
   font-variant: small-caps;
   letter-spacing: -1px;
}
h4 {
   font: 30px 'Raleway', Verdana, Helvetica, sans-serif;
   font-style: italic;
   margin: 0.3em 0;
}
.heading-line {
   background: #867356 none repeat scroll 0 0;
   display: block;
   height: 3px;
   margin: 0 auto 10px auto;
   width: 100px;
}
.heading-line-left {
   background: #867356 none repeat scroll 0 0;
   display: inline-block;
   height: 3px;
   margin: 0 0 10px 0;
   width: 100px;
}

/* ============================== PARAGRAPHS =================================================================== */
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.small {font-size: 0.85em;}

/* ============================== IMAGE STYLES ============================================================== */
img {border: none; max-width: 100%; box-sizing: border-box;}
.img-round {border-radius: 50%;}

/* ============================== Text and Background Colors ================================================= */
.bg-color-main {background-color: #867356;}
.bg-color-mainlight {background-color: #b5a58b;}
.bg-color-accent {background-color: #568686;}
.bg-color-accentlight {background-color: #8bb5b4;}
.bg-color-light {background-color: #e0ecec;}
.bg-color-gray {background-color: #e5e7e9;}
.bg-color-black {background-color: #222;}

.text-color-main {color: #867356;}
.text-color-mainlight {color: #b5a58b;}
.text-color-accent {color: #568686;}
.text-color-accentlight {color: #8bb5b4;}
.text-color-gray {color: #777;}
.text-color-lightgray {color: #e5e7e9;}
.text-color-white {color: #ffffff;}

.border1 {border-bottom: 1px dashed #555;}

/* ============================== LAYOUT RULES and BLOCK ELEMENTS =========================================== */
.row {padding: 15px 0; margin: 0;}
.container {padding: 0; margin: 0 auto; width: 1200px;}
.inside {width: 96%; padding: 0 2%;}

/* ===== HEADER AREA ======== */
header {
   margin: 0 0 0 0;
   background-color: #000;
}

/* ===== LOGO/SITE NAME AREA ======== */
.brand {
	font: 22px 'Cinzel Decorative', Verdana, Helvetica, sans-serif;
	color: #ffffff;
	margin: 0;
	padding: 10px 0 12px 0;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
.brand a, .brand a:hover {
	color: #ffffff;
	text-decoration: none;
	font-weight: normal;
}

/* ============================== FOOTER AREA ========================================================= */
footer {
	width: 100%;
	background-color: #000000;
	color: #fff;
	line-height: 1.4em;
	padding: 20px 0 0 0;
	margin: 0 0 0 0;
}
footer ul {
	list-style-type: none;
	line-height: normal;
	position: relative;
	margin: 0 0 10px 0;
	padding: 0;
}
footer ul li {
	list-style-type: none;
	position: relative;
	margin: 0 20px 0 0;
	padding: 4px 0 2px 15px;
	display: inline-block;
}
footer ul li:before {
	position: absolute;
	font-family: 'FontAwesome';
	color: #8bb5b4;
	top: 6px;
	left: 0;
	content: "\f101";
}
footer ul li a {
	color: #b5a58b;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 2px;
}
footer ul li a:hover {
	color: #8bb5b4;
}
footer a {color: #b5a58b;}
footer a:hover {color: #8bb5b4;}
.copyright {
	letter-spacing: 1px;
	text-align: center;
	color: #fff;
	margin: 0;
	padding: 0;
   font-size: 14px;
}

/* ============================== MISCELLANEOUS ========================================================= */
/* ===== BUTTONS ===== */
.btn-main {
	display: inline-block;
	margin: 6px 0 0 0;
	font-size: 14px;
	font-weight: normal;
	padding: 6px 10px;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	border-radius: 8px;
   background-color: #867356;
	color: #fff;
	border: none;
	cursor: pointer;
}
.btn-main:hover {
	font-weight: normal;
	text-decoration: none;
   background-color: #b5a58b;
	color: #000;
}
.btn-accent {
	display: inline-block;
	font-size: 14px;
	font-weight: normal;
	padding: 6px 10px;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	border-radius: 8px;
   background-color: #568686;
	color: #fff;
	border: none;
	cursor: pointer;
}
.btn-accent:hover {
	font-weight: normal;
	text-decoration: none;
   background-color: #8bb5b4;
	color: #000;
}

/* ===== BREADCRUMBS ===== */
.breadcrumbs {text-align: left;}
.breadcrumbs ul {display: inline-block; list-style: outside none none; margin: 0; overflow: hidden; padding: 3px 0;}
.breadcrumbs ul li {display: inline-block; color: #777;}
.breadcrumbs ul li a {color: #867356;}
.breadcrumbs ul li a::after {color: #b5a58b; content: "\f105"; font-family: FontAwesome; font-size: 14px; padding: 0 10px;}
.breadcrumbs ul li a:hover {color: #568686; text-decoration: none;}

/* ===== COLORBOX (reused for callouts) ===== */
.colorbox2 {
   width: 94%;
   padding: 10px 3%;
   margin: 10px 0;
   background-color: #557990;
   color: #ffffff;
   box-shadow: inset 0 0 50px #426086, 0 10px 20px -10px rgba(0, 0, 0, 0.5);
   border-radius: 8px;
   text-align: center;
}

/* ===== SHOWCODE (reused for feature codes) ===== */
.showcode {
   font-family: "Courier New", Courier, monospace; font-size: 0.85em; background-color: #f5f5f5; border-radius: 3px;
   border: 1px dotted #bbb; color: #f00000; vertical-align: middle; padding: 1px 4px;
}

/* ============================== MEDIA QUERIES (base framework breakpoints) ========================== */
@media screen and (max-width: 480px) {
   .container {width: 98%; margin: 0 auto; box-sizing: border-box;}
}
@media screen and (min-width: 481px) and (max-width: 1024px) {
   .container {width: 98%; margin: 0 auto; box-sizing: border-box;}
}
@media screen and (min-width: 1025px) and (max-width: 1279px) {
   .container {width: 98%; margin: 0 auto;}
}


/* ==================================================================================================
 * SECTION 2: Page-specific additions for the Troubleshooting Guide
 * Only rules for components PbxMechanic's base framework does not already cover.
 * Colors, fonts, and tone are drawn from the base framework's own palette above.
 * ================================================================================================== */

:root {
    --primary: #867356;         /* base "dark" (was #1a5276) */
    --primary-light: #b5a58b;   /* base "medium" */
    --primary-dark: #5e5039;    /* darker shade of base for contrast text/backgrounds */
    --accent: #568686;          /* base accent "dark" (was #e67e22) */
    --accent-light: #8bb5b4;    /* base accent "medium" */
    --bg: #f4f2ee;              /* warm neutral, kin to base light #dcd5c8 */
    --card-bg: #ffffff;
    --text: #3a3226;
    --text-light: #6a6152;
    --border: #ded6c9;
    --warn: #a1442f;            /* muted brick red, kept distinct for safety warnings */
    --code-bg: #f7f5f1;
    --tip-bg: #f1ece2;
    --tip-border: var(--primary-light);
    --warn-bg: #f8ece9;
    --warn-border: var(--warn);
    --info-bg: #e6efee;
    --info-border: var(--accent);
}

* {
    box-sizing: border-box;
}

body {
    background: var(--bg);
    color: var(--text);
}

/* ===== Site header ===== */
header {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 12px 20px;
}

.brand-block .brand {
    padding: 0;
    line-height: 1.2;
}

.brand-block .brand span {
    color: var(--accent-light);
}

.header-tagline {
    font-size: 0.85rem;
    color: #d8cdbb;
    margin-top: 2px;
    font-family: 'Open Sans', Verdana, Helvetica, sans-serif;
}

.header-search {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-search input {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    width: 220px;
    background: rgba(255,255,255,0.95);
    font-family: 'Open Sans', Verdana, Helvetica, sans-serif;
}

.header-search .btn-accent {
    margin: 0;
}

/* ===== Breadcrumb ===== */
.breadcrumb-wrap {
    padding: 8px 20px;
    font-size: 0.8rem;
}

/* ===== Main layout ===== */
.main-wrapper {
    padding: 0 20px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
}

/* ===== Sidebar ===== */
.sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.sidebar h3 {
    font: 700 0.8rem 'Raleway', Verdana, Helvetica, sans-serif;
    text-transform: uppercase;
    font-variant: normal;
    letter-spacing: 1px;
    color: var(--text-light);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
}

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

.sidebar li {
    margin-bottom: 2px;
}

.sidebar a {
    display: block;
    padding: 8px 10px;
    color: var(--text);
    text-decoration: none;
    font-weight: normal;
    font-size: 0.85rem;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.sidebar a:hover {
    background: var(--bg);
    color: var(--primary);
    padding-left: 14px;
    text-decoration: none;
    font-weight: normal;
}

.sidebar .sidebar-section {
    margin-top: 16px;
}

.sidebar .sidebar-num {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 6px;
}

/* ===== Main content ===== */
.content {
    padding: 16px 0 40px;
    min-width: 0;
}

.content > h1 {
    font-size: 2.1rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
    line-height: 1.25;
}

.content > .subtitle {
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 20px;
    font-weight: normal;
}

/* ===== Quick nav grid ===== */
.quick-nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 28px;
}

.quick-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.quick-nav a:hover {
    border-color: var(--accent-light);
    box-shadow: 0 2px 8px rgba(86,134,134,0.2);
    transform: translateY(-1px);
    text-decoration: none;
}

.quick-nav .qn-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ===== Issue cards ===== */
.issue-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.issue-card h2 {
    font-size: 1.5rem;
    font-variant: normal;
    letter-spacing: normal;
    color: var(--primary-dark);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.issue-card h2 .issue-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
}

.issue-card .issue-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.issue-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tag-norstar { background: #e3dccd; color: var(--primary-dark); }
.tag-bcm { background: #dcecea; color: #2f6058; }
.tag-meridian { background: #f3ded9; color: #8a3c2b; }
.tag-voip { background: #eae2f0; color: #6c3483; }
.tag-all { background: #efe4cf; color: #8a6a1f; }

.issue-card h3 {
    font: 600 1.05rem 'Raleway', Verdana, Helvetica, sans-serif;
    font-variant: normal;
    letter-spacing: normal;
    color: var(--primary);
    margin: 16px 0 8px;
    padding: 0;
}

.issue-card p {
    margin-bottom: 12px;
}

.issue-card ol, .issue-card ul {
    margin: 8px 0 16px 20px;
    padding: 0;
}

.issue-card ul li a, .sidebar a, .quick-nav a, .toc-inline a {
    font-weight: inherit;
}

.issue-card li {
    margin-bottom: 6px;
}

/* ===== Callout boxes ===== */
.callout {
    border-left: 4px solid;
    padding: 12px 16px;
    margin: 14px 0;
    border-radius: 0 6px 6px 0;
    font-size: 0.9rem;
}

.callout strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.callout-tip {
    background: var(--tip-bg);
    border-color: var(--tip-border);
}
.callout-tip strong { color: var(--primary); }

.callout-warn {
    background: var(--warn-bg);
    border-color: var(--warn-border);
}
.callout-warn strong { color: var(--warn); }

.callout-info {
    background: var(--info-bg);
    border-color: var(--info-border);
}
.callout-info strong { color: var(--accent); }

/* ===== Feature codes / tables ===== */
.feature-code {
    display: inline-block;
    background: var(--code-bg);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary-dark);
}

.feature-table {
    margin: 12px 0;
    font-size: 0.88rem;
}

.feature-table th {
    background: var(--primary);
    color: white;
    padding: 8px 12px;
    text-align: left;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feature-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.feature-table tr:nth-child(even) td {
    background: var(--code-bg);
}

.feature-table td:first-child {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 600;
    color: var(--primary-dark);
    white-space: nowrap;
}

/* ===== Decision tree ===== */
.decision-tree {
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
    margin: 12px 0;
}

.decision-tree .dt-step {
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
}

.decision-tree .dt-step:last-child {
    border-bottom: none;
}

.decision-tree .dt-if {
    font-weight: 600;
    color: var(--primary);
}

.decision-tree .dt-then {
    margin-left: 16px;
    color: var(--text);
}

.decision-tree .dt-arrow {
    color: var(--accent);
    font-weight: 700;
}

/* ===== Inline table of contents ===== */
.toc-inline {
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.toc-inline h3 {
    font: 700 0.8rem 'Raleway', Verdana, Helvetica, sans-serif;
    text-transform: uppercase;
    font-variant: normal;
    letter-spacing: 1px;
    color: var(--text-light);
    margin: 0 0 10px 0;
}

.toc-inline ol {
    margin-left: 20px;
    columns: 2;
    column-gap: 24px;
}

.toc-inline li {
    margin-bottom: 4px;
    font-size: 0.88rem;
}

/* ===== System info bar ===== */
.system-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.system-pill {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    background: white;
    border: 1px solid var(--border);
    color: var(--text-light);
}

/* ===== Section divider ===== */
.divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border), transparent);
    margin: 32px 0;
}

/* ===== Footer overrides for this page ===== */
footer {
    margin-top: 40px;
    padding: 24px 0;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.82rem;
    padding: 0 20px;
}

.footer-inner strong {
    color: #fff;
}

footer .footer-nav-list {
    margin: 6px 0 0 0;
}

footer .footer-nav-list li {
    padding-left: 0;
    margin: 0 16px 6px 0;
}

footer .footer-nav-list li:before {
    display: none;
}

.footer-disclaimer {
    font-size: 0.75rem;
    color: #b9ac97;
    margin-top: 8px;
    max-width: 600px;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .main-wrapper {
        grid-template-columns: 1fr;
    }
    .sidebar {
        position: static;
        order: 2;
    }
    .header-search input {
        width: 140px;
    }
    .toc-inline ol {
        columns: 1;
    }
}

@media (max-width: 600px) {
    .header-inner {
        flex-direction: column;
        gap: 8px;
    }
    .header-search input {
        width: 180px;
    }
    .content > h1 {
        font-size: 1.5rem;
    }
    .issue-card {
        padding: 16px;
    }
    .quick-nav {
        grid-template-columns: 1fr;
    }
}

/* ===== Print styles ===== */
@media print {
    header, .sidebar, .quick-nav, .header-search, footer {
        display: none;
    }
    .main-wrapper {
        grid-template-columns: 1fr;
    }
    .issue-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #999;
    }
}