/* Base Layout */
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #444;
    color: #111;
    text-align: justify;
}

h1 {
    font-size: 2em;
    color: #FFFFFF;
    font-family: Arial;
}

h2 {
    font-size: 1.7em;
    color: #0B74CA;
}

h3 {
    font-size: 1.5em;
    color: #CB5504;
}

h4 {
    font-size: 1.4em;
    color: #926900;
}

h5 {
    font-size: 1.3em;
    color: #000000;
}

h6 {
    font-size: 1.2em;
}

#center_column {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* Header */
#header_bar {
    background: #003b5c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 48px;
}

.logo-box {
    padding: 0px 32px;
    font-weight: bold;
}

.header-tools {
    display: flex;
    gap: 16px;
    align-items: center;
}

.search-box {
    background: #006f92;
    padding: 12px 24px;
}

/* Hero */
#page_hero {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: #e0ecf5;
}

#page_title {
    flex: 1 1 310px;
    min-height: 320px;
    background: #444444;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
    text-align: left;
}

#page_title h1 {
    margin: 0 0 16px;
    font-size: 40px;
    line-height: 1.1;
}

#page_title h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 400;
}

#hero_image {
    flex: 2 1 680px;
    min-height: 500px;
    background: #8bb7d0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
}

#hero_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Decorative flare */
.decor-strip {
    /* Removed fixed min-height so element can shrink to intrinsic ratio */
    background: #1b1b1b;
    width: 100%;
    /* Ensure the image spans full width */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    /* scale width to 100%, preserve natural height */
    /* If you know the intrinsic image dimensions, set --decor-aspect-ratio: width/height on the element (e.g., 1920/120) */
    aspect-ratio: var(--decor-aspect-ratio, 1920 / 120);
    /* fallback ratio */
    display: block;
    /* no flex needed since there's no content */
    position: relative;
    overflow: hidden;
    /* Optional typography retained if you later add overlay text */
    letter-spacing: 2px;
    font-size: 14px;
    color: #fff;
}

/* Flip bottom crystal image */
#bottom_decor {
    transform: scaleX(-1) scaleY(-1); 
    -webkit-transform: scaleX(-1) scaleY(-1);
}

#PAGE_INTEREST_ELEMENT {
    background-color: #FFFFFF;
    height: 400px;
}

/* Nav Bar Base */
#menu_toggle {
    display: none;
    background: #222;
    color: #fff;
    border: none;
    width: 100%;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    letter-spacing: .5px;
}

#nav_bar {
    background: #222;
    color: #fff;
    display: flex;
    width: 100%;
    padding: 10px 28px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
    text-align: left;  
    margin-top: -1px;
}

/* ensure nav links aren't blue and remove default underline */
#nav_bar a,
#nav_bar a:visited {
    color: #fff;
    text-decoration: none;
}

/* hover / focus states */
#nav_bar a:hover,
#nav_bar a:focus {
    color: #e6f7ff;
    text-decoration: none;
    outline: none;
}

.nav-item {
    flex: 1;
    position: relative;
    display: flex;
    /* enable flex so arrow can align right */
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    cursor: pointer;
    font-weight: 600;
    background: #303030;
    /* Use sibling selector below for consistent separators; clear any direct side borders here */
    border: 0;
    user-select: none;
}

/* Consistent vertical separators (including the one previously missing between Intellectual Property Support & Resources) */
#nav_bar .nav-item + .nav-item {
    border-left: none;
}

/* Submenus */
[data-submenu] {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #111;
    width: auto;
    /* allow wrapping */
    min-width: 100%;
    /* at least as wide as parent */
    max-width: 520px;
    /* safety cap */
    box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
    padding: 8px 0;
    box-sizing: border-box;
    overflow: visible;
    /* so third-level flyouts aren't clipped */
}

[data-submenu]>div {
    padding: 10px 16px;
    white-space: normal;
    /* allow multi-line */
    word-break: break-word;
    overflow-wrap: anywhere;
    /* break long single words */
    hyphens: auto;
}

/* Third tier flyout */
.submenu-item {
    position: relative;
}

.submenu-label {
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.submenu-label .arrow {
    font-size: 11px;
    opacity: .7;
}

/* Top-level submenu arrow (mobile only) */
.nav-arrow {
    display: none;
    /* shown only in click (mobile) mode */
    font-size: 11px;
    opacity: .7;
    margin-left: auto;
    pointer-events: none;
    /* let parent handle click */
}

#nav_bar.click-mode .nav-arrow {
    display: inline-block;
}

/* Nav label wrapper so arrow stays aligned with text (not total expanded height) */
.nav-item .nav-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Mobile keeps label full width for tap target */
#nav_bar.click-mode .nav-item .nav-label {
    width: 100%;
}

/* Desktop: force equal widths independent of content / submenu sizing */
/* Desktop: let items size from their label text, then flex to fill leftover space proportionally */
#nav_bar:not(.click-mode) .nav-item {
    flex: 1 1 auto;
    min-width: max-content;
}

#nav_bar:not(.click-mode) .nav-item .nav-label {
    white-space: nowrap;
}

/* Mobile click mode: switch nav-item to block but keep label flex for arrow alignment */
#nav_bar.click-mode .nav-item {
    display: block;
    padding-right: 0;
}

#nav_bar.click-mode .nav-item .nav-label {
    padding-right: 12px;
}

[data-flyout] {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: #161616;
    min-width: 200px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
}

[data-flyout]>div {
    padding: 10px 16px;
    white-space: normal;
    /* wrap inside flyout too */
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Main Article */
#main_article {
    background: #ffffff;
    padding: 0px 145px 145px;
    display: grid;
    grid-gap: 64px;
    align-items: start;
}

.article-body {
    min-height: 480px;
    position: relative;
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    /* Reduced gap to better match tighter vertical rhythm of strawman page */
    gap: 12px;
}

/* Normalize internal margins so spacing is controlled solely by flex gap */
.article-body > * { margin: 0; }

/* Optional: fine-tune paragraph line-height for readability while keeping compact block spacing */
.article-body p { line-height: 1.5; }

/* Increase vertical separation before headings (except the very first element) */
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 { 
    margin-top: 28px; /* space above headings */
    margin-bottom: 4px; /* tight space to following content; flex gap still adds 12px */
}

/* Remove top margin from first child if it's a heading */
.article-body > :first-child { margin-top: 0 !important; }

.article-body h3 {
    margin: 0;
    font-size: 1.5rem;
}

.article-callout {
    background: #ffc299;
    padding: 24px;
    font-weight: 600;
    text-align: center;
}

.end-article-wrapper {
    padding-left: 50px;
    display: flex;
    justify-content: flex-start;
    margin-top: 40px;
    min-height: 200px;
}

#end_of_article_image {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
}

#end_of_article_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bottom Flare */
#flare_bottom {
    background: #111;
    color: #e6e6e6;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    letter-spacing: 3px;
}

/* Footer */
.footer {
    background: #222;
    color: #bcd0db;
    padding: 48px 56px;
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: flex-start;
    box-sizing: border-box;
}

.footer-contact {
    flex: 1 1 480px;
    background: #222;
    padding: 32px 40px;
    border-radius: 4px;
    box-sizing: border-box;
}

.footer-contact h4 {
    margin: 0 0 16px;
    font-size: 20px;
    letter-spacing: .5px;
    color: #fff;
}

.contact-lines {
    margin: 0 0 24px;
    line-height: 1.5;
    font-size: 15px;
}

.quick-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 150px;
}

.quick-actions a,
.quick-actions button {
    background: #333;
    border: 0;
    color: #fff;
    padding: 10px 18px;
    font-size: 14px;
    letter-spacing: .5px;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
}

.quick-actions a:hover,
.quick-actions button:hover {
    background: #014568;
}

.footer-social {
    flex: 1 1 260px;
    background: #333;
    padding: 32px 32px 40px;
    border-radius: 4px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-social h4 {
    margin: 0;
    font-size: 20px;
    letter-spacing: .5px;
    color: #fff;
}

/* Social icons: wrap in pairs (2x2) instead of 3+1 */
.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* uniform gap so space between groups matches space between icons */
    justify-content: space-evenly;
    align-items: center;
}

.social-icons .icon-group {
    display: flex;
    gap: 16px;
    flex: 0 0 auto; /* keep intrinsic width so group wraps as a unit */
}

/* On extra-narrow screens allow vertical stacking within a group */
@media (max-width: 380px) {
    .social-icons .icon-group { flex-direction: column; }
}

.social-icons a {
    width: 72px;
    height: 72px;
    background: #222;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background .2s, transform .18s ease;
    flex: 0 1 72px;
    /* allows flexbox to calculate even spacing while keeping fixed icon size */
}

.social-icons a:hover {
    background: #014568;
    transform: translateY(-3px);
}


.btn-call {
    border: none;
    /* remove default border */
    outline: none;
    /* remove focus ring */
    background: none;
    /* or set your own background */
    padding: 0;
    /* adjust as needed */
    font-size: inherit;
    /* inherit from parent */
    cursor: pointer;
    /* show pointer on hover */
}

.btn-call:focus {
    outline: none;
    /* ensure no outline when focused */
}

#contact-info-bottom.contact-info {
    width: 260px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    box-sizing: border-box;
    padding: 8px 12px 16px;
    margin: 0 0 25px 28px;
    margin-left: auto; /* right align in wider parent */
    background: #fff;
    font-size: 14px;
    line-height: 1.35;
}

#contact-info-bottom .contact-info__badge {
    width: 60%;
    margin: 0 auto;
    display: block;
}

#contact-info-bottom .contact-info__address { font-style: normal; }

#contact-info-bottom .contact-info__actions {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    /* Nudge right slightly to visually balance with badge & address */
    margin-left: 24px;
}

#contact-info-bottom .contact-info__action {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
    transition: background .18s, transform .18s;
}

#contact-info-bottom .contact-info__action:hover { background: #e9f3fa; transform: translateY(-2px); }

#contact-info-bottom .contact-info__action img { width: 100%; height: auto; display: block; }

@media (max-width: 520px) {
    .social-icons {
        justify-content: center;
    }
}

.social-icons img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Footer contact: side-by-side address + vertical buttons when space allows */
@media (min-width: 700px) {
    .footer-contact {
        display: flex;
        gap: 40px;
        /* space between address block and buttons column */
        align-items: flex-start;
    }

    .footer-contact .contact-lines {
        margin: 0;
        /* remove bottom margin so buttons align toward top */
        flex: 1 1 auto;
    }

    .footer-contact .quick-actions {
        flex: 0 0 220px;
        /* fixed-ish column width for buttons */
        display: flex;
        flex-direction: column;
        /* stack buttons vertically */
        gap: 14px;
    }

    .footer-contact .quick-actions a,
    .footer-contact .quick-actions button {
        text-align: center;
    }
}

#copyright_bar {
    background: #111;
    color: #7fa2b3;
    font-size: 13px;
    padding: 16px 32px;
    text-align: center;
    letter-spacing: .4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 32px;
    /* row gap, column gap */
}

#copyright_bar a {
    color: #aac6d3;
    text-decoration: none;
}

#copyright_bar a:hover {
    text-decoration: underline;
}

#copyright_bar .cp-left {
    white-space: nowrap;
}

@media (max-width: 400px) {
    #copyright_bar .cp-left {
        white-space: normal;
    }
}

@media (max-width: 920px) {
    .footer {
        padding: 48px 40px;
    }

    .footer-contact,
    .footer-social {
        flex: 1 1 100%;
    }
}

@media (max-width: 560px) {
    .footer {
        padding: 40px 32px;
        gap: 40px;
    }

    .social-icons a {
        width: 64px;
        height: 64px;
    }

    #end_of_article_image {
        display: none;
    }
}

/* Responsive Tweaks (merged) */
@media (max-width: 1200px) {
    #main_article {
        padding: 64px 72px 96px;
        grid-template-columns: 1fr 320px;
        grid-gap: 48px;
    }
}

@media (max-width: 1440px) {
    #main_article {
        grid-template-columns: 1fr;
    }

    #main_article aside {
        flex-direction: row;
        overflow-x: auto;
    }

    #main_article aside>div,
    #main_article aside>section {
        min-width: 260px;
    }

    #hero_image {
        display: none !important;
    }

    #page_title {
        min-height: 0px;
    }
}

@media (max-width: 760px) {
    #header_bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 32px;
    }

    #page_title {
        padding: 40px 32px;
    }

    #main_article {
        padding: 56px 40px 80px;
    }

    #nav_bar {
        padding: 0 32px;
    }
}

@media (max-width: 520px) {
    #main_article {
        padding: 48px 28px 72px;
    }

    #page_title h1 {
        font-size: 32px;
    }

    #contact-info-bottom.contact-info {
        margin: 16px auto 32px;
        width: min(260px, 100% - 32px);
    }
	/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    /*    border-bottom: 1px dotted black;  If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	bottom: 100%;
	left: 50%;
	margin-left: -25px; /* Use half of the width (120/2 = 60), to center the tooltip */
	/* Position the tooltip text  */
	position: absolute;
	z-index: 1;
	font-family: "Courier New";
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}		
#MAIN_IMAGE_CONTAINER {
	left: -8%;
	position: relative;
	background-image: url(images/background-images/NoteBook_MASTERV4.gif);
	height: 850px;
	background-repeat: no-repeat;
	width: 110%;
	margin-right: 0px;
	max-height: 950px;
}	
	#SUB_SCROLLER1 {
	position: absolute;
	left: 637px;
	top: 378px;
	width: 194px;
	height: 288px;
	font-family: "Courier New";
	font-size: 0.95em;
}
	#PAGE_SELECTOR_MENU {
	position: absolute;
	top: 10px;
	font-family: "Courier New";
	font-size: 0.93em;
	left: 30px;
	float: left;
	clear: left;
	background-image: url(/images/background-images/NoteBook_MASTERV4.gif);
	background-repeat: no-repeat;
}
}

/* =============================================================
    DEMO NAV COLOR SCHEME OVERRIDES (for screenshots)
    Uses !important to force palette without touching base logic.
    Requirements:
    1. Keep dark #nav_bar background.
    2. All menu items & sub-items have white background.
    3. Top-level "Services" & "Contact Us" text = #0000FF; others = #111.
    4. Submenu & nested submenu items cycle text colors through palette:
        [ "#0000FF", "#008000", "#800000", "#4B0082", "#D2691E", "#008080", "#FF8C00", "#A52A2A" ]
    Remove this block when finished capturing screenshots.
    ============================================================= */
/* 2: Force white background on every top-level nav item */
#nav_bar > .nav-item { background:#ffffff !important; color:#777777 !important; }
/* Ensure anchors/labels inherit */
#nav_bar > .nav-item > a.nav-label,
#nav_bar > .nav-item > .nav-label { color:inherit !important; }

/* 3: Specific top-level items (structure-based):
    Order: 1 Home, 2 About Us, 3 Services, 4 IP Support, 5 Resources, 6 Contact Us, 7 Submit Samples, 8 Careers */
#nav_bar > .nav-item:nth-child(3) > .nav-label, /* Services label div */
#nav_bar > .nav-item:nth-child(3) > a.nav-label,
#nav_bar > .nav-item:nth-child(6) > .nav-label, /* Contact Us label div */
#nav_bar > .nav-item:nth-child(6) > a.nav-label { color:#0000FF !important; }

/* 2 (continued): Force white backgrounds on all dropdown / flyout containers & their row items */
#nav_bar [data-submenu],
#nav_bar [data-flyout] { background:#ffffff !important; }
#nav_bar [data-submenu] > div,
#nav_bar [data-flyout] > div { background:#ffffff !important; }

/* Normalize links & labels inside submenus to inherit cycling text color */
#nav_bar [data-submenu] a,
#nav_bar [data-flyout] a,
#nav_bar [data-submenu] .submenu-label,
#nav_bar [data-flyout] .submenu-label { color:inherit !important; }

/* 4: Color cycle for submenu items (applies recursively anywhere under #nav_bar)
    Pattern repeats every 8 items within each submenu / flyout container */
#nav_bar [data-submenu] > div:nth-child(8n+1),
#nav_bar [data-flyout] > div:nth-child(8n+1) { color:#0000FF !important; }
#nav_bar [data-submenu] > div:nth-child(8n+2),
#nav_bar [data-flyout] > div:nth-child(8n+2) { color:#008000 !important; }
#nav_bar [data-submenu] > div:nth-child(8n+3),
#nav_bar [data-flyout] > div:nth-child(8n+3) { color:#800000 !important; }
#nav_bar [data-submenu] > div:nth-child(8n+4),
#nav_bar [data-flyout] > div:nth-child(8n+4) { color:#4B0082 !important; }
#nav_bar [data-submenu] > div:nth-child(8n+5),
#nav_bar [data-flyout] > div:nth-child(8n+5) { color:#D2691E !important; }
#nav_bar [data-submenu] > div:nth-child(8n+6),
#nav_bar [data-flyout] > div:nth-child(8n+6) { color:#008080 !important; }
#nav_bar [data-submenu] > div:nth-child(8n+7),
#nav_bar [data-flyout] > div:nth-child(8n+7) { color:#FF8C00 !important; }
#nav_bar [data-submenu] > div:nth-child(8n+8),
#nav_bar [data-flyout] > div:nth-child(8n+8) { color:#A52A2A !important; }

/* Keep overall nav bar dark (requirement 1) */
#nav_bar { background:#222 !important; }

/* Ensure contrast for focus states while preserving color */
#nav_bar a:focus { outline:2px solid #0000FF !important; outline-offset:2px; }

/* ============================================================= */

/* Submenu stacking: keep parent submenu shadow visible above its children without adding a visual gap */
#nav_bar:not(.click-mode) > .nav-item > [data-submenu] { position: absolute; z-index: 60; }
#nav_bar:not(.click-mode) [data-submenu] .submenu-item > [data-submenu],
#nav_bar:not(.click-mode) [data-submenu] .submenu-item > [data-flyout] { z-index: 50; margin-left: 0; border-left: none; }
/* If a third depth is ever introduced, continue decrementing (e.g., z-index: 40) */