/* Theme: ICORE 2026 Modernized
    Description: Consolidated styles for Project-005 / ICORE.org
*/

/* =========================================
   1. GLOBAL VARIABLES & RESET
   ========================================= */
:root {
	/* Brand Colors */
	--core-blue: #054870;          /* rgba(5,72,112,1) */
	--core-blue-dark: #032d46;
	--core-orange: #E5A255;        /* rgba(229,162,85,1) */
	--core-orange-dark: #cf8836;
	--core-green: #c2b930;         /* rgba(194,185,48,1) */

	/* Neutrals */
	--gunmetal: #2c3e50;
	--text-dark: #212529;          /* rgba(33,37,41,1) */
	--text-muted: #6c757d;
	--text-light-grey: #9e9f9e;    /* rgba(158,159,158,1) */

	/* Functional */
	--bkgrd-light: #ffffff;
	--border-color: #e0e0e0;
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 1.1rem; /* Slightly adjusted from 1.25 for better density */
	color: var(--text-dark);
	background-color: #f8f9fa;
}

/* =========================================
   2. TYPOGRAPHY & UTILITIES
   ========================================= */
.black-ops { font-family: 'Black Ops One', cursive; }

/* Color Utilities (mapped to variables) */
.text-orange { color: var(--core-orange) !important; }
.text-blue   { color: var(--core-blue) !important; }
.text-green  { color: var(--core-green) !important; }
.text-light  { color: #f8f9fa !important; } /* Bootstrap override */
.text-dark   { color: var(--text-dark) !important; }

/* Background Utilities */
.bkgrd-orange { background-color: var(--core-orange) !important; }
.bkgrd-blue   { background-color: var(--core-blue) !important; }
.bkgrd-green  { background-color: var(--core-green) !important; }
.bkgrd-light  { background-color: var(--bkgrd-light) !important; }
.bkgrd-dark   { background-color: var(--gunmetal) !important; }

/* Border Utilities */
.border-start { border-left: 1px solid var(--border-color) !important; }
.drop-shadow  { filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.5)); }

/* =========================================
   3. NAVIGATION (Global & Legacy)
   ========================================= */

/* Base Navbar Styling */
.navbar-brand img { filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.3)); }
.nav-link { font-size: 1rem; vertical-align: middle; }

/* Dropdown Menus */
.dropdown-menu {
	margin-top: 0;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	border-radius: 0 0 4px 4px;
	border-top: 3px solid var(--core-orange);
}

/* Special Prominent Menus (Admins/Reps) */
.nav-special {
	color: var(--core-orange) !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border: 1px solid rgba(229, 162, 85, 0.3);
	border-radius: 4px;
	margin-left: 5px;
	padding: 6px 10px !important;
	transition: all 0.3s ease;
}
.nav-special:hover {
	background-color: rgba(229, 162, 85, 0.1);
	color: #fff !important;
	border-color: var(--core-orange);
}

/* Floating Logo Logic (Legacy Support) */
.logo-holder { position: relative; display: block; width: 100px; height: auto; margin: 0 auto; }
.logo-main img {
	position: absolute; left: 0; right: 0; z-index: 1050; width: 100px; height: auto;
	background: white; padding: 0.25rem; border-radius: 0 0 20px 20px;
	border: 1px solid black; border-top: none;
}

@media(min-width: 1200px){
	.logo-holder { width: 150px; }
	.logo-main img { width: 150px; }
}

/* Legacy Page Specific Nav Overrides (#home, #help) */
#home .navbar, #help .navbar {
	background: linear-gradient(145deg, #349aed 50%, #34d8ed 100%);
	transition: box-shadow 200ms ease-in;
}
#home .nav-link, #help .nav-link {
	text-transform: uppercase; font-weight: 500; color: #fff;
}
#home { padding-top: 0px; }

/* =========================================
   4. LAYOUT & CONTAINERS
   ========================================= */

/* Wide Monitor Support */
@media(min-width: 1600px){
	.container, .container-lg, .container-md, .container-sm, .container-xl {
		max-width: 1600px;
	}
}

/* Sticky Sidebar (Simple CSS Implementation) */
.sticky-sidebar-content {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 100px; /* Offset for Fixed Navbar */
	display: block;
}

/* Divider Lines */
hr.tactical-divider { border-top: 1px solid var(--border-color); opacity: 1; margin: 1.5rem 0; }

/* =========================================
   5. CARDS & COMPONENTS
   ========================================= */

/* --- LEGACY CARD (Blue Background) --- */
.card {
	background-color: var(--core-blue);
	color: var(--text-light-grey);
	padding: 1rem;
	height: auto;
	margin-bottom: 1rem;
}

/* --- NEW TACTICAL CARD (White Background - Overrides Legacy) --- */
.card.card-tactical {
	background-color: #fff !important; /* Force override of legacy blue */
	color: var(--text-dark) !important;
	border: 1px solid #e9ecef;
	border-top: 4px solid var(--core-blue);
	/* Bottom border handled inline or via utility */
	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
	border-radius: 4px;
	padding: 0; /* Bootstrap handles padding in card-body */
}

/* Flip Cards */
.flip-card { background-color: transparent; width: 100%; height: 260px; perspective: 1000px; }
.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 4px; }
.flip-card-back { transform: rotateY(180deg); z-index: 2; }
.flip-card-front { background-color: var(--gunmetal); color: #fff; border: 1px solid #34495e; }
.hover-hint { position: absolute; bottom: 10px; font-size: 0.65rem; color: #aaa; text-transform: uppercase; letter-spacing: 1px; }

/* Grid Layout for Cards */
.cards {
	max-width: 1200px; margin: 0 auto; display: grid; gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* =========================================
   6. BUTTONS
   ========================================= */
.btn-tactical {
	font-family: 'Roboto', sans-serif; font-weight: 500;
	text-transform: uppercase; letter-spacing: 0.5px;
	border-radius: 2px; padding: 8px 16px; transition: all 0.2s ease;
}
.btn-tactical-blue {
	background-color: var(--core-blue); color: white; border: 1px solid var(--core-blue);
}
.btn-tactical-blue:hover {
	background-color: var(--core-blue-dark); border-color: var(--core-blue-dark); color: var(--core-orange);
}
.btn-tactical-orange {
	background-color: var(--core-orange); color: #fff; border: 1px solid #d48f3f;
}
.btn-tactical-orange:hover {
	background-color: var(--core-orange-dark); color: white;
}

/* =========================================
   7. FOOTER
   ========================================= */
.footer-link { color: #ffffff; text-decoration: none; font-weight: 500; transition: color 0.2s; }
.footer-link:hover { color: var(--core-orange); text-decoration: underline; }

/* =========================================
   8. MISC / LEGACY COMPONENTS
   ========================================= */

/* SVG Responive */
.svg-content { display: inline-block; position: absolute; top: 0; left: 0; }
.svg-container { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; vertical-align: middle; overflow: hidden; max-width: 300px; }

/* Tooltips */
span[data-tool-tip] { position: relative; }
span[data-tool-tip]::after {
	content: attr(data-tool-tip); display: block; position: absolute;
	background-color: rgba(72,101,131,1.00); padding: 1em 2em; color: #fff;
	border-radius: 5px; font-size: 0.8em; bottom: 0; left: 0;
	white-space: nowrap; transform: scale(0); transition: transform ease-out 150ms, bottom ease-out 150ms;
}
span[data-tool-tip]:hover::after { transform: scale(1); bottom: 100%; }

/* Award Winners Background */
.awardWinners {
	border: 2px double black;
	background-image: url(/images/backgrounds/background_award_silver.jpg);
	background-size: cover;
}

/* Blockquotes */
blockquote {
	font-size: 1.1em; line-height: 1.6em; padding: 20px 20px 20px 40px;
	border-left: none; position: relative; text-indent: -19px;
}
blockquote p { font-size: 1em; }
blockquote:before, blockquote:after {
	font-family: Arial, serif; font-size: 2.5em; vertical-align: middle; line-height: 0;
}
blockquote:before { content: open-quote; margin-right: 4px; }
blockquote:after { content: close-quote; margin-left: 3px; }

blockquote.blockstyle { border-left: 3px solid #f0715f; position: relative; background: #fff; font-style: italic; }
blockquote.blockstyle>span.triangle:before {
	text-indent: 0; content: "\f0da"; font-family: FontAwesome;
	color: #f0715f; position: absolute; left: -1px; top: 50%; margin-top: -11px; font-style: normal;
}

/* --- CALLOUTS & ALERTS --- */
.callout-tactical {
	background-color: #fff;
	border: 1px solid #eee;
	border-left: 5px solid var(--core-orange); /* Uses the theme variable */
	border-radius: 4px;
	padding: 1.25rem;
	margin: 1.25rem 0;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Ensure images inside columns don't overflow */
.img-fluid {
	max-width: 100%;
	height: auto;
}

/* --- AWARDS PAGE STYLES --- */
.award-banner {
	background-image: url('../images/backgrounds/background_award_blue.jpg');
	background-size: cover;
	background-position: center;
	border-radius: 4px;
	padding: 2rem 0;
	margin-bottom: 3rem;
	box-shadow: inset 0 0 0 1000px rgba(5, 72, 112, 0.85); /* Blue overlay to ensure text readability */
}

.award-year-block {
	background-color: rgba(255, 255, 255, 0.9);
	padding: 1.5rem;
	border-radius: 4px;
	text-align: center;
	height: 100%;
	border: 1px solid #ddd;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.award-year-title {
	font-family: 'Black Ops One', cursive;
	color: var(--core-blue);
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

/* --- AWARDS PAGE STYLES --- */

/* 1. Gunmetal Background (Replaces Wood) */
.bg-gunmetal {
	background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%); /* Blue-Grey Gradient */
	border: 1px solid #1a252f;
	border-radius: 6px;
	padding: 2rem;
	box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
}

/* 2. Metallic Plaque Style */
.plaque-metal {
	/* Brushed Metal Effect */
	background: repeating-linear-gradient(
			45deg,
			#f0f0f0,
			#f0f0f0 10px,
			#e0e0e0 10px,
			#e0e0e0 20px
	);
	color: #222;
	border: 4px solid #aaa; /* Bevel look */
	border-radius: 2px;
	padding: 1.5rem;
	height: 100%;
	text-align: center;
	position: relative;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Inner border for the plaque to look engraved */
.plaque-inner {
	border: 1px solid #999;
	padding: 1rem;
	height: 100%;
	background: rgba(255,255,255,0.7); /* Lighten the center */
}

.plaque-text {
	font-family: 'Times New Roman', serif;
	color: #111;
}

/* 3. Flip Card Specifics for Awards */
.award-flip-container {
	height: 400px; /* Fixed height to ensure uniformity */
}
.award-flip-back {
	overflow-y: auto; /* Scroll if text is too long */
	text-align: left;
	background-color: #fff;
	color: #333;
	border: 1px solid #ccc;
}

/* 4. Lightbox Cursor */
.zoom-trigger {
	cursor: pointer;
	transition: transform 0.2s;
}
.zoom-trigger:hover {
	transform: scale(1.02);
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* --- TACTICAL TABS --- */
.tab-content-tactical {
	background-color: #fff;
	border: 1px solid #dee2e6;
	border-top: none;
	padding: 2rem;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.nav-tabs-tactical .nav-link {
	color: var(--text-muted);
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 4px 4px 0 0;
}

.nav-tabs-tactical .nav-link.active {
	color: var(--core-blue);
	border-top: 3px solid var(--core-orange);
	background-color: #fff;
}