/* Navigation styles moved to menu.css */

.card-width-text {
    width: 640px;
    padding-right: 2rem;
}






.bottombreather{
	padding-bottom:12px;
}

/* ========================================
   UNUSED CLASSES - COMMENTED OUT
   ======================================== */

/* Unused classes - commented out
li{
	padding:6px 6px 6px 0px;
}
li>a{
	text-decoration: none;
}
#holder{
	display:flex;
	flex-direction: column;
	height:100%;
}
#menu{
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: var(--color-brand-blue);
	overflow-x: hidden;
}
#menu>ol{
	display:contents;
}
#menu>ol>li{
	font-size: var(--font-size-4xl);
	padding-left: var(--spacing-6);
}
#menubutton{
	cursor: pointer;
	padding: var(--spacing-3) var(--spacing-6);
}
#closebutton{
	cursor: pointer;
	padding: var(--spacing-3) var(--spacing-6);
	color: var(--color-brand-black);
}
#menulist{
	margin-top:0;
}
.none{
	display:none;
}

.holder{
	display: flex;
	flex-direction: column;
	align-items:center;
}
.holder.text{
	height:60%;
	padding-left: var(--spacing-6);
}
.holder>h1{
	min-width:540px;
	padding:0;
	font-size: var(--font-size-6xl);
}
.holder.bottom{
	justify-content: flex-end;	
}
.holder.sectiontitle>p{
	margin:0;
	min-width:150px;
	border-left: 1px solid var(--color-brand-white);
    padding-left: var(--spacing-4);
	font-size: var(--font-size-xs);
}
.holder.image{
	justify-content: center;
	height: 100%;
	padding-left: var(--spacing-3);
	width:-webkit-min-content;
}
.image>img{
	height:60%;
	border: solid var(--color-brand-white) var(--spacing-3);
}
.image>img.noborder{
	border: none;
}
.holder.arrow{
	height: 60%;
	padding-left: var(--spacing-3);
}
.arrow{
	width:36px;
	height:36px;
	padding-top:4px;
}
.holder.nopad{
	padding-left:0;
}
.holder.credits{
	height:60%;
	padding-left: var(--spacing-6);
	min-width:480px;
	align-items: flex-start;
}
.credits>p{
	margin-top:0;
}
.holder.stack{
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: var(--spacing-3);
    border: var(--spacing-3) solid var(--color-brand-white);
	background-color: var(--color-brand-white);
}
.stack>img{
	height:50%;
}
.quote{
	font-size:1.3rem;
	margin-bottom:0;
}
.quote.attribution{
	font-size: var(--font-size-sm);
	padding-bottom: var(--spacing-6);
}
.bis{
	min-width:800px;
	height:480px;
	border:none;
}
.holder.bisproto{
	height:60%;
	background-color: var(--color-brand-white);
	border: var(--spacing-3) solid var(--color-brand-white);
	margin-left: var(--spacing-3);
	color: var(--color-brand-black);
	align-items:flex-start;
	justify-content: space-between;
}
.bisproto>p{
	margin-bottom:0;
	font-size: var(--font-size-sm);
    padding-bottom: var(--spacing-1);
}
.intro{
	width:300px;
	min-width:300px;
	align-items:flex-start;
}
.notopmargin{
	margin-top:0;
}
a.canon{
	color: var(--color-brand-white);
	text-decoration:none;	
}

.pinktext{
	color: var(--color-brand-pink);
}
.linkarrow{
	padding-left:8px;
	height:16px;
	width:16px;
}
.holder.canon{
	margin: 0px var(--spacing-4);
	min-width:300px;
	align-items:flex-start;
}
.holder.canon.last{
	margin-right: var(--spacing-45);
}
.canon>p{
	font-size:1.3rem;
}
.bold{
	font-family: var(--font-family-primary-bold);
}
.processarrow{
	padding-top: var(--spacing-37);
}
ul.process{
	display:contents;
	list-style-type: "+";
}
ul.process>li{
	padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-2);
}
.addmin{
	min-width: 300px;
}
ul.fur{
	display:contents;
	list-style-type: none;
	padding-bottom:6px;
}
ul.fur>li{
	margin-top: var(--spacing-1);
}
ul.fur>li>a{
	color: var(--color-brand-white);
}
*/





/* Mobile devices (landscape tablets, 480px and up) - commented out as unused
@media only screen and (max-width: 480px) {
	h1{
		font-size: var(--font-size-5xl);
	}
	#menu>ol>li {
		font-size: var(--font-size-3xl);
		padding-left: var(--spacing-6);
	}
	.holder.credits {
		min-width: 300px;
	}
	.image>img {
		max-width: 300px;
		background-color: var(--color-brand-white);
	}
	.holder>h1{
		font-size: var(--font-size-5xl);
		min-width: 0;
	}
	.holder {
	    height:80%;
	}
	.holder.text{
		height: 80%;
		min-width:300px;
	}
	.image>img {
		height: 80%;
	}
	.holder.credits {
		height: 80%;
	}
	body{
		font-size: var(--font-size-sm);
	}
} */

/* ========================================
   DESIGN SYSTEM TABS NAVIGATION
   ======================================== */

/* Design System Tabs Container */
.ds-tabs-container {
    background-color: var(--color-brand-black);
    border-bottom: 1px solid var(--color-gray-600);
    border-right: 1px solid var(--color-gray-600);
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    height: 40px;
    z-index: 999;
}

/* Design System Tabs */
.ds-tabs {
    display: flex;
    align-items: center;
    height: 40px;
}

/* Design System Tab */
.ds-tab {
    height: 100%;
    display: flex;
    align-items: center;
    border-left: 1px solid var(--color-gray-600);
    padding: 0 var(--spacing-4);
    color: var(--color-brand-purple);
    text-decoration: none;
}

.ds-tab:hover {
    color: var(--color-brand-purple);
    text-decoration: underline;
}

/* Current tab indicator */
.ds-tab.current {
    background-color: var(--color-brand-black);
    color: var(--color-brand-white);
    font-weight: bold;
    border-bottom: 1px solid var(--color-gray-600);
}

.ds-tab.current:hover {
    background-color: var(--color-brand-black);
    color: var(--color-brand-white);
}

/* Add right border to the last tab (guidelines) */
.ds-tab:last-child {
    border-right: 1px solid var(--color-gray-600);
}

/* Mobile responsive adjustments for design system tabs */
@media (max-width: 768px) {
    .ds-tabs-container {
        top: 48px;
    }
    
    .ds-tabs {
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    .ds-tabs::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    .ds-tab {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-xs);
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .ds-tabs-container {
        top: 56px;
    }
    
    .ds-tab {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-xs);
    }
} 

/* ========================================
   SUBNAV MODIFIER CLASS
   ======================================== */

.subnav {
    padding-top: 80px !important;
}

@media (max-width: 768px) {
    .subnav {
        padding-top: 88px !important;
    }
}

@media (max-width: 480px) {
    .subnav {
        padding-top: 96px !important;
    }
}