/* GUIDES.CSS - Dark Tech Theme */

/* Reuse variables for consistency if not loaded by common,
   but ideally these inherit from the new common.css */
:root {
    --accent: #ff9000;
    --bg-card: #1e1e1e;
    --text-main: #e0e0e0;
    --text-muted: #a0a0a0;
    --border: #333333;
}

/* GUIDE LAYOUT */
#descContainer {
    /* Ensures it overrides any specific old ID styles */
    background: transparent !important;
    border: none !important;
    padding: 20px !important;
    max-width: 900px;
    margin: 0 auto;
}

.guide-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* TYPOGRAPHY */
.guide-header { text-align: center; margin-bottom: 40px; }
.guide-header h1 { font-size: 2.2rem; color: #fff; margin: 10px 0; }
.badge {
    background: var(--accent);
    color: #000;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
}
.subtitle { color: var(--text-muted); font-size: 1.1rem; }

h2 { color: #fff; border-left: 4px solid var(--accent); padding-left: 15px; margin-top: 40px; }
p { color: #ccc; line-height: 1.7; margin-bottom: 20px; }
a { color: var(--accent); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }

/* COMPONENTS */
.alert-box {
    background: rgba(255, 144, 0, 0.1);
    border: 1px solid var(--accent);
    padding: 15px;
    border-radius: 6px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin: 25px 0;
}
.alert-box .material-icons { color: var(--accent); }
.alert-box p { margin: 0; font-size: 0.95rem; color: #e0e0e0; }

.cta-banner {
    background: #000;
    border: 1px solid #333;
    padding: 25px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0;
    flex-wrap: wrap;
    gap: 20px;
}
.cta-content h3 { margin: 0 0 5px 0; color: #fff; }
.cta-content p { margin: 0; font-size: 0.9rem; color: #888; }

.divider { border-color: #333; margin: 40px 0; }

/* STEPS LIST STYLING */
.steps-list {
    counter-reset: guide-counter;
    list-style: none;
    padding: 0;
}
.steps-list li {
    position: relative;
    padding-left: 60px;
    margin-bottom: 30px;
}
.steps-list li::before {
    counter-increment: guide-counter;
    content: counter(guide-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: #333;
    color: var(--accent);
    font-weight: 800;
    font-size: 1.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #444;
}
.steps-list strong {
    display: block;
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

/* FAQ STYLING */
.faq-item {
    background: rgba(255,255,255,0.03);
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.faq-item:hover { border-color: #444; }
.faq-item strong { color: var(--accent); display: block; margin-bottom: 8px; }
.faq-item p { margin: 0; font-size: 0.95rem; }

/* TAGS CLOUD (Models) */
.tags-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
/* Targeting links generated by the CMS inside the models div */
#models a {
    background: #252525;
    color: #aaa;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
    border: 1px solid #333;
    text-decoration: none;
    transition: 0.2s;
}
#models a:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(255, 144, 0, 0.1);
}

/* FINAL CTA */
/*.final-cta {
    text-align: center;
    background: #111;
    padding: 40px;
    border-radius: 8px;
    margin-top: 60px;
    border: 1px solid #333;
}
.final-cta h2 { border: none; padding: 0; margin-top: 0; }*/

/* FINAL CTA - Updated for robust centering */
.final-cta {
    /* Use Flexbox to center everything robustly */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center;    /* Center items horizontally */
    justify-content: center; /* Center items vertically (if height increases) */

    /* Keep existing styles */
    text-align: center; /* Failsafe for text inside child blocks */
    background: #111;
    padding: 40px;
    border-radius: 8px;
    margin-top: 60px;
    border: 1px solid #333;
}

/* Ensure the Heading doesn't have weird margins throwing off centering */
.final-cta h2 {
    border: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 15px; /* Add a little space below header */
}

/* FIX: Prevent button text from turning orange on hover */
.callButton:hover {
    color: #000 !important; /* Force text to stay black */
    text-decoration: none;  /* Ensure no underline appears */
    filter: brightness(1.1); /* Keep the brightness effect */
}

.imageMobile {
	display: none;
}

.dataContainer {
	position: relative;
	width: 50%;
	height: auto;
	top: 0;
	left: 0;
	display: inline-block;
	float: left;
	text-decoration: none;
}

/* Mobile responsiveness for the Black CTA Banner */
@media (max-width: 768px) {
	.guide-card { padding: 20px; }
    .cta-banner {
        /* Stack items vertically instead of side-by-side */
        flex-direction: column;

        /* Center text and items horizontally */
        text-align: center;
        justify-content: center;

        /* Ensure the gap is vertical now */
        gap: 20px;
    }

    /* Optional: Make the button full width or centered on mobile */
    .cta-banner .callButton {
        width: 100%;       /* Makes button span the full width of the box */
        max-width: 300px;  /* Prevents it from getting absurdly wide on tablets */
        margin: 0 auto;    /* Centers the button itself if max-width kicks in */
        padding: 0px 0px;
    }

    /* Ensure the text container takes full width to center properly */
    .cta-content {
        width: 100%;
    }

    .dataContainer {
		float: none;
		width: 100%;
		display: block;
	}

	.imageContainer {
		display: none;
	}

	.imageMobile {
		display: block;
	}
}