/* ============================= */
/* CSS Variables for Technocrats Site */
/* ============================= */
:root {
	/* Primary Brand Colors */
	--main-blue: #005493;
	--darker-blue: #003a66;
	--nav-hover-dark: #002d4d;

	/* Accent Colors */
	--accent-gold: #FFCA4D;
	--subtle-gold: #999900;

	/* Utility Colors */
	--light-border: #CCCCCC;
	--light-hover: #99ccee;
	--white: #FFFFFF;
	--light-gray-blue: #A1B5D6;
	--warm-tan: #FCFADA;

	/* Alert/Status Colors */
	--warning-red: #990000;
	--deep-red: #800000;

	/* Semantic Naming (optional) */
	--link-color: var(--main-blue);
	--link-hover-color: var(--light-hover);
	--background-soft: var(--warm-tan);
	--text-highlight: var(--accent-gold);
	--error-color: var(--warning-red);

  /* Typography */
  --heading-font: 'Play', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body-font: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Box and shadow accents (optional for future use) */
  --box-shadow-light: rgba(0, 0, 0, 0.1);
  --box-shadow-medium: rgba(0, 0, 0, 0.3);
}

/*
===========================================
Technocrats CSS — Cleaned & Reorganized
===========================================

>> Structure:
- Typography & Base Styles
- Layout & Containers
- Header & Logo
- Navigation (Main and Dropdowns)
- Content Area
- Footer (CopyBox)
- Utility Classes
- Gateway-Specific and Legacy Styles (marked for possible removal)

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

/* ============================= */
/* Typography & Base Styles */
/* ============================= */
a { color: var(--white); text-decoration: underline; }
a:hover { color: var(--white); text-decoration: underline; }
a:visited { color: #99aac6; text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--heading-font);
    font-weight: bold;
    color: var(--white);
}
h1 { font-size: 1.5em; text-decoration: underline; text-align: left; margin: 1em 0 0.5em 0; }
h2 {
	color: var(--accent-gold);
	font-size: 1.4em;
	margin-top: 2em;
}
h3, h4 { font-size: 1.2em; }

html {
	scroll-behavior: smooth;
}

li, .mainfont, .boldred, .boldgold, .alittlesmaller, .smallgw, .whitetext, .nobullet, .disclosure {
    font-family: var(--body-font);
    color: var(--white);
}
.mainfont { font-size: 1em; text-align: justify; }
ul.mainfont {
	margin-left: 1.5em;
	list-style-type: disc;
}
.boldred { color: var(--deep-red); font-weight: bold; }
.boldgold { color: var(--subtle-gold); font-weight: bold; }
address { font-style: normal; }

li.smallgw h2, h3, h4 {
  margin-bottom: 0.2em;
}

li.smallgw p {
  margin-top: 0;
}

/* ============================= */
/* Layout & Containers */
/* ============================= */
.technobody { background-color: var(--main-blue); overflow-x: hidden; margin: 0; padding: 0; border: 0; }
.ContentNoBox { width: 90%; max-width: 1000px; margin: 0 auto; }
.TextArea { width: auto; margin: 0 auto; max-width: 1000px; padding: 1rem 1rem 0.5rem 1rem; }

.cta-box {
	background: rgba(255,255,255,0.05);
	padding: 1em;
	margin-top: 2em;
	border: 1px solid var(--accent-gold);
	text-align: center;
	border-radius: 8px;
}

.cta-button {
	display: inline-block;
	padding: 0.5em 1.2em;
	background-color: var(--accent-gold);
	color: #000;
	text-decoration: none;
	font-weight: bold;
	border-radius: 4px;
	margin-top: 0.5em;
}

.highlight-box {
	background-color: rgba(255, 255, 255, 0.05);
	border-left: 4px solid var(--accent-gold);
	padding: 1em;
	margin: 1.5em 0;
	font-style: italic;
}

.contact-info dt {
	font-weight: bold;
	color: var(--accent-gold);
	margin-top: 1em;
}
.contact-info dd {
	margin: 0 0 1em 0;
}

/* ============================= */
/* Header & Logo */
/* ============================= */
#Logo { text-align: center; background-color: var(--main-blue); padding: 0; }
#Logo img { width: 100%; max-width: 553px; height: auto; display: block; margin: 0 auto; }
/*.tagline { font-family: var(--heading-font); color: var(--accent-gold); font-size: 0.8em; font-weight: bold; text-align: center; text-shadow: 2px 2px #000; } */

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.tagline {
	font-family: var(--heading-font);
	color: var(--accent-gold);
	font-size: 0.8em;
	font-weight: bold;
	text-align: center;
	text-shadow: 2px 2px #000;

	opacity: 0;                 /* Start hidden */
	animation: fadeIn 1.2s ease-out 0.5s forwards;
}

/* ============================= */
/* Page Images & Media */
/* ============================= */
.scalable-image { width: 100%; max-width: 300px; height: auto; display: block; }

/* ============================= */
/* Navigation */
/* ============================= */
.nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; background-color: var(--main-blue); padding: 0; margin: 20px auto 0 auto; max-width: 100%; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.nav li { position: relative; flex: 1 1 auto; text-align: center; min-width: 0; }
.nav a { display: block; padding: 10px 15px; font-family: var(--heading-font); color: var(--accent-gold); font-size: 0.9em; font-weight: bold; text-shadow: 2px 2px #000; text-decoration: none; transition: 0.3s background-color; word-wrap: break-word; white-space: normal; overflow-wrap: break-word; }
.nav a:hover, .nav a.active { background-color: #003a66; color: var(--white); }

.nav li ul { position: absolute; top: 100%; left: 0; display: none; flex-direction: column; background-color: var(--main-blue); border: 2px solid var(--white); padding: 0; margin: 0; width: auto; z-index: 999; }
.nav li:hover ul { display: flex; }
.nav li ul li { width: 100%; }
.nav li ul a { padding: 10px; font-size: 0.85em; }

@media (max-width: 700px) {
    .nav ul { flex-direction: column; align-items: stretch; }
    .nav li { flex: none; }
    .nav li ul { position: static; display: none; width: 100%; border: none; }
    .nav li:hover ul { display: block; }
    .nav li ul li a { background-color: var(--darker-blue); color: var(--accent-gold); }
    .nav li ul li a:hover { background-color: var(--nav-hover-dark); color: var(--white); }
}

/* ============================= */
/* Footer */
/* ============================= */
.CopyBox { font-family: var(--body-font); font-size: 0.8em; text-align: center; color: var(--white); padding: 0.5em 0; margin: 1em auto 0.5em auto; border-top: 1px solid var(--light-border); border-bottom: 1px solid var(--light-border); }
.CopyBox a { color: var(--light-hover); text-decoration: none; }
.CopyBox a:hover { text-decoration: underline; color: var(--white); }

/* ============================= */
/* Utility Classes */
/* ============================= */
.clearit { clear: both; }
.centered-block { display: block; margin: 0 auto; }
.centered-text { text-align: center; }
.section-separator {
	height: 1px;
	width: 80%;
	margin: 2em auto;
	background: linear-gradient(to right, transparent, var(--light-border), transparent);
	border: none;
}

/* ============================= */
/* Gateway Styles */
/* ============================= */
.disclosure {
	font-family: var(--body-font);
	font-size: 0.9em;
	color: #000; /* dark text for readability */
	padding: 1rem;
	background-color: #e6eef8;
	border: 1px solid var(--light-border);
	border-radius: 6px;
}

.warningred { color: var(--warning-red); }

.GW_Column_Left, .GW_Column_Right {
	font-family: var(--body-font);
	font-size: 10pt;
	width: 47%;
	height: auto;
	float: left;
	padding: 5px;
	margin-top: 10px;
	border: 0;
	box-sizing: border-box;
}

.GW_Column_Left { border-right: thin solid var(--white); padding-right: 15px}

.GW_Column_Right { padding-left: 15px; }

.smallgw {
	font-family: var(--body-font);
	font-size: 1em;
	color: var(--white);
}

.nobullet {
	font-family: var(--body-font);
	font-size: 1em;
	color: var(--white);
	list-style-type: none;
}

.gw-card {
	background-color: var(--darker-blue);
	border: 1px solid #ddd;
	padding: 0 1.5rem 1.5rem;
	margin: 1rem 0;
	border-radius: 6px;
}

.gw-card h2 {
	border-bottom: 2px solid #ffcc33;
	padding-bottom: 0.25rem;
	margin-bottom: 1rem;
}

.gw-card h4 {
	margin-left: 1.5rem;  /* Matches typical <ul> indentation */
	font-size: 1.1em;      /* Optional: slightly smaller than h3 */
	color: var(--accent-gold);  /* Optional: keeps it consistent with h2 */
}

.gw-card:hover {
	background-color: #064b84; /* or any accessible darkened blue */
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
	border: 1px solid var(--accent-gold);
}

/* Clearfix for container around floated columns */
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

/* Responsive fallback for gateway columns */
@media (max-width: 700px) {
	.GW_Column_Left, .GW_Column_Right {
		width: 100%;
		float: none;
		margin-top: 10px;
		border-right: none;
	}
}

/* ============================= */
/* For Sale Banner Styles */
/* ============================= */
.domain-banner {
	position: relative;
	width: 300px;
	height: 300px;
	margin: 1rem auto;
}

.bg-img {
	width: 100%;
	height: auto;
	display: block;
}

.label {
	position: absolute;
	font-family: var(--heading-font);
	font-size: 0.75em;
	font-weight: bold;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	padding: 0.25em 0.5em;
	border-radius: 4px;
	white-space: nowrap;
}

/* Approximate positions based on resized image */
.com { top: 58px; left: 35px; }
.net { top: 65px; right: 25px; }
.org { bottom: 80px; left: 30px; }


/* ============================= */
/* Legacy Styles (Review for removal) */
/* ============================= */
/* Marked styles for possible cleanup:
- .ColoredBox, .ColoredBox_FixedWidth, .ColoredBox_FixedWidthScroll, .ColoredBox_FullWidth
- .LinkArea, .LinkBox, .LinkBoxTitleLeft, .LinkBoxTitleCenter, .LinkBoxTextLeft, .LinkBoxTextCenter
- .usa (absolute positioned legacy element)
- .DarkGreenBox, .MenuBox, .PageWrapper
- .spacerwhite, .spacergreen, .spacergreen_left, .spacertan, .spacerblue
- .mergeit (legacy float-based block)
- .WrapItUp, .WrapItUpBordered
- .TopLinks (may no longer be used)
*/