@import "./glightbox.css";

/* Fix content padding */
html body { max-width:1300px; padding:20px 0; margin:0 auto; overflow-x:hidden; }
.TopBoxes { --my-max-width:1060px; }
.TabContents { --my-max-width:1280px; }
.TabContents.Description { --my-max-width:1060px; }

.HasMaxWidth {
	box-sizing:border-box;
	--new-width:min(var(--my-max-width), calc(100% - 20px));
	width:var(--new-width); margin-inline:calc((100% - var(--new-width))/2);
}
@media (max-width:480px) { .HasMaxWidth { --new-width:100%; } }

/* Visibility of tabs content sections */
.TabContents:not(.Selected), .TopBoxes.Boxes:not(.Selected) { display:none; }

/* Button trays */
.TopBoxes {
	display:inline-flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; padding:10px; border:1px solid rgba(255, 255, 255, 0.10); border-radius:12px;
	background:rgba(0, 0, 0, 0.25);
}
@media (max-width: 800px) { .TopBoxes { justify-content:center; } } /* Note: This value will need to be adjusted for the width of all the buttons */
.Tab {
	min-height:40px; padding:12px 13px; border-radius:12px; border:1px solid rgba(255, 255, 255, 0.12);
	background:rgba(255, 255, 255, 0.06); color:rgba(255, 255, 255, 0.85);
	font-size:16px; font-weight:600; line-height:1; letter-spacing:0.2px; white-space:nowrap;
	transition:transform 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
	user-select:none; cursor:pointer;
}
.Tab:hover { background:rgba(255, 255, 255, 0.10); border-color:rgba(255, 255, 255, 0.18); }
.Tab.Selected, .Tab:has(.Selected) { background:rgba(255, 255, 255, 0.16); border-color:rgba(255, 255, 255, 0.28); color:rgba(255, 255, 255, 0.98); }
.Tab:active { transform:translateY(1px); }
button.Tab { display:flex; align-items:center; gap:12px; }
.TabLogo { flex:0 0 auto; }
.TabLogo img { display:block; height:64px; width:auto; object-fit:contain; }
.TabText { display:flex; flex-direction:column; justify-content:center; line-height:1.4; text-align:center; }
a.Tab, div.Tab { min-height:inherit; }

/* HTML Contents sections */
.TabContents {
	display:inline-block; padding:14px 19px; border:1px solid rgba(255, 255, 255, 0.10); border-radius:14px;
	background:rgba(0, 0, 0, 0.20);
}
.TabContents.Selected { animation:TabFade 120ms ease-out; }
@keyframes TabFade {
	from{ opacity:0; transform:translateY(2px); }
	to	{ opacity:1; transform:translateY(0); }
}

/* Disables button */
.Tab.Disabled, .Tab[aria-disabled="true"] {
	position:relative;
	opacity:0.55; filter:saturate(0.6);
	cursor:not-allowed; pointer-events:none;
}
.Tab.Disabled::after, .Tab[aria-disabled="true"]::after {
	position:absolute; inset:0; border-radius:inherit;
	content:""; line-height:1.3; text-align:center; background:rgba(0, 0, 0, 0.35);
}
.Tab.Disabled::before, .Tab[aria-disabled="true"]::before {
	position:absolute; inset:0; border-radius:inherit;
	content:""; background:linear-gradient(160deg, transparent 47%, rgba(255, 60, 60, 0.95) 48%, rgba(255, 60, 60, 0.95) 52%, transparent 53%);
	pointer-events:none;
}
.Tab.Disabled>*, .Tab[aria-disabled="true"]>* { position:relative; z-index:1; }
.Tab.Disabled>span {
	position:absolute !important; width:100%; height:100%; top:-4px; left:0;
	text-align:center; line-height:1.5; color:limegreen;
}

/* Pictures */
.LogoGrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(308px, 1fr)); }
.LogoCard {
	position:relative; display:inline-flex; width:300px; height:174px; margin:5px 5px 5px 0; border:1px solid rgba(255, 255, 255, 0.12); border-radius:10px; padding-top:1px;
	align-items:center; justify-content:center; vertical-align:top; justify-self:center; overflow:hidden;
	background:rgba(20, 22, 26, 0.90); box-shadow:0 10px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.LogoCard img { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.LogoCard span {
	position:absolute; left:0; bottom:0; padding:10px 12px; z-index:1;
	color:white; font-size:15px; text-shadow:0 2px 10px rgba(0, 0, 0, 0.9);
}
.LogoCard::after {
	position:absolute; inset:auto 0 0 0; height:70px;
	content:""; background:linear-gradient(to top, rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.0));
	pointer-events:none;
}
.LogoCard::before {
	position:absolute; inset:0;
	content:""; background:rgba(0, 0, 0, 0.5);
	opacity:0; transition:opacity 180ms ease;
	pointer-events:none;
}
.LogoCard:hover::before { opacity:1; }
.DisplayImage { cursor:pointer; }

/* Articles */
.Tab.Article .Title { font-weight:bold; }
.Tab.Article .Date { padding-top:3px; font-size:65%; }
.TabContents.Article .Title { font-size:29px; font-weight:700; }
.TabContents.Article .Date { display:block; margin-bottom:12px; font-size:13px; font-weight:500; color:#666; }

/* Popup menu */
body:has(.MenuPopup.FullScreen) { overflow:hidden; } /* Fullscreen popup needs to turn off background scrolling */
.Tab.MenuContainer:active { transform:none; }
.Tab.MenuContainer:has(.MenuPopup.FullScreen) { -webkit-tap-highlight-color:transparent; } /* Do not show click during full screen popup */
.Tab.MenuContainer:active:not(:has(.MenuPopup.FullScreen)) { background-color:rgba(255, 255, 255, 0.30); } /* Do not show click during full screen popup */
.MenuPopup:not(.Active) { display:none; }
.MenuPopup {
	position:fixed; display:inline-block; box-sizing:border-box; width:auto; max-width:300px;
	padding:10px; border:1px solid rgba(255, 255, 255, 0.10); border-radius:12px;
	background:rgba(0, 0, 0, 0.95); overflow-x:hidden; overflow-y:auto; z-index:100;
}
.MenuPopup.FullScreen {
	position:fixed; inset:0; top:0 !important; left:0 !important; width:100%; height:100dvh; max-width:none; overflow-x:hidden; overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}
.MenuPopup .PopupClose {
	display:none; position:sticky; top:-15px; height:25px; margin:-25px -7px 0 auto; border:0; padding:0;
	background:transparent; color:white; font-size:28px; z-index:1;
}
.MenuPopup.FullScreen .PopupClose { display:block; }
.MenuPopup .PopupClose:hover { color:#cccc !important; }
.MenuPopup .Tab { display:block; border-radius:0; white-space:normal; }

/* Lightbox */
body .glightbox-clean .gslide-description { position:relative; background-color:transparent; }
body .glightbox-clean .gdesc-inner { padding:0 20px; margin:5px 0 10px; border:1px solid rgba(255, 255, 255, 0.10); border-radius:12px; background:rgba(0, 0, 0, 0.25); backdrop-filter:blur(6px); }
body .glightbox-clean .gslide-title { margin:5px; color:white; }