/* ===== CSS VARIABLES - BURNT AMBER THEME ===== */




/* INVESTIGATION NOTE: All these are in the at-amber-core.css */
/* INVESTIGATION NOTE: So disabled this block by renaming root to root-disabled */
	/* :root { } */
     /* REMOVED THIS BLOCK: It is exactly the same as in the at-amber-core.css version */


/* INVESTIGATION NOTE: All these are in the at-amber-core.css */
/* INVESTIGATION NOTE: So disabled this block using comments */
   
	/* ===== BASE STYLES ===== */
    /* REMOVED THIS BLOCK: It is exactly the same as in the at-amber-core.css version */








/* INVESTIGATION NOTE: All these are in the at-amber-core.css */
/* REMOVED THIS BLOCK: It is exactly the same as in the at-amber-core.css version */
	/* body {	} */






	/* ===== SCROLLBAR STYLES ===== */
	/* Firefox */
	/* REMOVED THIS BLOCK: It is exactly the same as in the at-amber-core.css version */



	/* ===== TOP NAVIGATION ===== */
	.hp-top-nav {
		background: var(--bg-nav);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--border);
		padding: 1rem 2rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: sticky;
		top: 0;
		z-index: 100;
		flex-wrap: wrap;
		gap: 1rem;
	}

	.hp-logo {
		font-family: 'Orbitron', sans-serif;
		font-weight: 700;
		font-size: 1.5rem;
		color: #e0b890;
		letter-spacing: -0.5px;
	}

	.hp-nav-links {
		display: flex;
		gap: 2rem;
		flex-wrap: wrap;
	}

	.hp-nav-links a {
		color: var(--text-secondary);
		text-decoration: none;
		font-weight: 500;
		transition: all 0.2s ease;
		white-space: nowrap;
	}

	.hp-nav-links a:hover {
		color: var(--accent);
	}

	.hp-search-bar {
		padding: 0.5rem 1rem;
		background: var(--bg-card);
		border: 1px solid var(--border);
		border-radius: 6px;
		color: var(--text-primary);
		min-width: 200px;
		transition: all 0.2s ease;
	}

	.hp-search-bar:focus {
		outline: none;
		border-color: var(--accent);
		box-shadow: 0 0 0 2px var(--accent-glow);
	}

	.hp-search-bar::placeholder {
		color: var(--text-secondary);
	}







/* From here on renamed/scoped all classes with the prefix `hp-`*/
/* TODO: Investigate if there are identical classes in the main theme and migrate to them.*/







	/* ===== MAIN CONTAINER ===== */
	.hp-container {
		max-width: 1400px;
		margin: 2rem auto;
		padding: 0 2rem;
	}



	/* ===== SECTIONS ===== */
	.hp-card-section {
		margin-bottom: 3rem;
	}

	.hp-section-heading {
		font-family: 'Exo 2', sans-serif;
		font-size: 1.8rem;
		color: var(--accent);
		margin-bottom: 1.5rem;
		padding-bottom: 0.5rem;
		border-bottom: 2px solid var(--border);
		position: relative;
	}

	.hp-section-heading::after {
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0;
		width: 60px;
		height: 2px;
		background: var(--accent);
	}

	/* ===== CARD GRID LAYOUT ===== */
	.hp-card-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 1.5rem;
		margin-bottom: 2rem;
	}

	/* ===== CARD STYLES ===== */
	.hp-card {
		background: var(--bg-card);
		border: 1px solid var(--border);
		border-radius: 12px;
		padding: 1.5rem;
		position: relative;
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		cursor: pointer;
		min-height: 300px;
		max-height: 400px;
		display: flex;
		flex-direction: column;
	}

	/* THE SIGNATURE HOVER EFFECT */
	.hp-card:hover {
		transform: translateY(-4px) rotate(0.5deg);
		border-color: var(--accent);
		box-shadow: 0 10px 25px -5px var(--accent-glow);
	}

	/* Card Size Variations */
	.hp-card-large {
		grid-column: span 2;
		grid-row: span 2;
		max-height: 600px;
	}

	.hp-card-wide {
		grid-column: span 2;
	}

	.hp-card-tall {
		grid-row: span 2;
		max-height: 600px;
	}

	/* Card Header */
	.hp-card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1rem;
		border-bottom: 1px solid var(--border);
		padding-bottom: 0.75rem;
	}

	.hp-card-title {
		font-family: 'Exo 2', sans-serif;
		font-weight: 600;
		color: var(--accent);
		font-size: 1.1rem;
	}

	.hp-flip-indicator {
		color: var(--text-secondary);
		font-size: 0.75rem;
		opacity: 0.7;
	}

	/* Card Content - Scrollable */
	.hp-card-content {
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		margin: -0.5rem;
		padding: 0.5rem;
	}

	/* Link Lists */
	.hp-link-list {
		list-style: none;
	}

	.hp-link-list li {
		margin-bottom: 0.75rem;
	}

	.hp-link-list a {
		color: var(--text-primary);
		text-decoration: none;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem;
		border-radius: 6px;
		transition: all 0.2s ease;
	}

	.hp-link-list a:hover {
		background: var(--bg-primary);
		color: var(--accent);
		transform: translateX(4px);
	}

	.hp-link-list a i {
		width: 20px;
		text-align: center;
	}

	/* Card Front Content */
	.hp-card-front {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 1.5rem;
		background: var(--bg-card);
		border-radius: 12px;
		opacity: 1;
		pointer-events: all;
		transition: opacity 0.3s ease;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	/* Card Back Content */
	.hp-card-back {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 1.5rem;
		background: var(--bg-card);
		border-radius: 12px;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}

	.hp-card.hp-flipped .hp-card-front {
		opacity: 0;
		pointer-events: none;
	}

	.hp-card.hp-flipped .hp-card-back {
		opacity: 1;
		pointer-events: all;
	}

	.hp-card-back p {
		color: var(--text-secondary);
		font-size: 0.95rem;
		margin-bottom: 1rem;
		line-height: 1.6;
	}

	.hp-back-link {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--accent);
		text-decoration: none;
		font-size: 0.9rem;
		margin-top: auto;
		transition: all 0.2s ease;
	}

	.hp-back-link:hover {
		transform: translateX(-4px);
	}

	/* ===== JULIA IMAGE FILTER ===== */
	.hp-julia-image {
		width: 100%;
		height: auto;
		display: block;
		transition: all 0.3s ease;
		/* Burnt amber filter - warm orange/amber tones, avoiding green/yellow */
		filter: sepia(1) saturate(1.8) hue-rotate(-10deg) brightness(0.9) contrast(1.1);
	}

	.hp-julia-image:hover {
		filter: sepia(1) saturate(2.0) hue-rotate(-10deg) brightness(0.95) contrast(1.15);
		transform: scale(1.02);
	}

	/* Clickable image link styling */
	.hp-julia-image-link {
		display: block;
		width: 100%;
		cursor: pointer;
		text-decoration: none;
		border-radius: 8px;
		overflow: hidden;
	}

	/* ===== LINK LEGEND (Card Back) ===== */
	.hp-link-legend {
		list-style: none;
		padding: 0;
		margin: 1rem 0;
	}

	.hp-link-legend dt {
		font-family: 'Exo 2', sans-serif;
		font-weight: 600;
		color: var(--accent);
		font-size: 0.95rem;
		margin-top: 1rem;
		margin-bottom: 0.25rem;
	}

	.hp-link-legend dt:first-child {
		margin-top: 0;
	}

	.hp-link-legend dd {
		margin: 0;
		padding-left: 0;
		color: var(--text-secondary);
		font-size: 0.85rem;
		line-height: 1.5;
	}

	.hp-link-legend .legend-url {
		display: block;
		color: var(--accent);
		font-family: 'Courier New', monospace;
		font-size: 0.8rem;
		margin-top: 0.25rem;
		word-break: break-all;
		opacity: 0.9;
	}

	/* ===== FEATURED BANNER ===== */
	.hp-featured-banner {
		background: linear-gradient(135deg, var(--bg-card) 0%, #1e1813 100%);
		border: 1px solid var(--border);
		border-radius: 12px;
		padding: 2rem;
		margin-bottom: 2rem;
		text-align: center;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	/* Featured banner with background image */
	.hp-featured-banner.hp-with-image {
		background-image: url('/Media/site-banners/new-home-hero-1.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		min-height: 200px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	/* Dark overlay for text readability */
	.hp-featured-banner.hp-with-image::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(26, 22, 19, 0.8) 0%, rgba(30, 24, 19, 0.85) 100%);
		z-index: 1;
	}

	.hp-featured-banner.hp-with-image h1,
	.hp-featured-banner.hp-with-image p {
		position: relative;
		z-index: 2;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
		padding: 0.5rem 1rem;
		background-color: rgba(0, 0, 0, 0.4);
		border-radius: 8px;
		backdrop-filter: blur(5px);
	}

	.hp-featured-banner:hover {
		border-color: var(--accent);
		box-shadow: 0 5px 20px -5px var(--accent-glow);
	}

	.hp-featured-banner h1 {
		color: var(--accent);
		margin-bottom: 0.5rem;
		font-family: 'Exo 2', sans-serif;
		font-size: 2rem;
	}

	.hp-featured-banner h3 {
		color: var(--accent);
		margin-bottom: 0.5rem;
		font-family: 'Exo 2', sans-serif;
		font-size: 1.3rem;
	}

	.hp-featured-banner p {
		color: var(--text-primary);
		font-size: 0.95rem;
	}





/* ===== FLIP CARD V2.0 - HOMEPAGE SCOPED VERSION ===== */
/* Flip trigger button - positioned in top-right */
.hp-card .hp-flip-trigger {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    color: var(--accent);
    font-size: 0.875rem;
}

.hp-card .hp-flip-trigger:hover {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
    transform: scale(1.1);
}

/* Icon switching */
.hp-card .hp-flip-trigger .fa-arrow-left {
    display: none;
}

.hp-card.hp-flipped .hp-flip-trigger .fa-info {
    display: none;
}

.hp-card.hp-flipped .hp-flip-trigger .fa-arrow-left {
    display: inline-block;
}

/* Hide old flip indicator text */
.hp-flip-indicator {
    display: none;
}





























/* INVESTIGATION NOTE: All these are in the at-amber-footer.css */
    /* ===== FOOTER ===== */
        /* REMOVED THIS BLOCK: It is exactly the same as in the at-amber-footer.css version */





















	/* ===== RESPONSIVE DESIGN ===== */
    
	@media (max-width: 768px) {
        /* ===== TOP NAVIGATION ===== */
		.hp-top-nav {
			padding: 1rem;
		}

		.hp-logo {
			font-size: 1.2rem;
		}

		.hp-nav-links {
			gap: 1rem;
			font-size: 0.9rem;
		}

		.hp-search-bar {
			width: 100%;
		}

        /* From here on renamed/scoped all classes with the prefix `hp-`*/

        /* ===== SECTIONS ===== */
		.hp-container {
			padding: 0 1rem;
		}

		.hp-section-heading {
			font-size: 1.4rem;
		}

        /* ===== CARD GRID LAYOUT =====*/
		.hp-card-grid {
			grid-template-columns: 1fr;
			gap: 1rem;
		}

		.hp-card-large,
		.hp-card-wide,
		.hp-card-tall {
			grid-column: span 1;
			grid-row: span 1;
			max-height: 400px;
		}

        /* ===== FOOTER ===== */
		/* .footer-content {} */
            /* REMOVED THIS BLOCK: It is exactly the same as in the at-amber-footer.css version */
	}

	@media (min-width: 769px) and (max-width: 1024px) {
		.hp-card-grid {
			grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		}

		.hp-card-large {
			grid-column: span 2;
			grid-row: span 1;
		}
	}