/*
 * RiTech Consulting — component styles (ported from the original HTML site).
 * Brand colors come from CSS variables set by the Customizer.
 */

:root {
	--rt-primary: 0 88 255;          /* #0058ff */
	--rt-primary-dark: 0 66 184;     /* #0042b8 */
	--rt-secondary: 255 107 0;       /* #ff6b00 */
	--rt-secondary-dark: 204 85 0;   /* #cc5500 */
	--rt-dark: 11 27 63;             /* #0b1b3f */
	--rt-dark-2: 19 34 74;           /* #13224a */
	--rt-light: 244 247 252;         /* #f4f7fc */
	--rt-muted: 90 98 121;           /* #5a6279 — editable in the Customizer */
}

body {
	font-family: 'Inter', sans-serif;
	background-color: #ffffff;
	color: rgb(var(--rt-dark));
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, .font-heading {
	font-family: 'Poppins', sans-serif;
	line-height: 1.2;
}

/* Navigation */
.nav-link { position: relative; color: rgb(var(--rt-dark)); font-weight: 500; transition: color 0.3s; }
.nav-link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: rgb(var(--rt-primary)); transition: width 0.3s; }
.nav-link:hover { color: rgb(var(--rt-primary)); }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: rgb(var(--rt-primary)); }
.nav-link.active::after { width: 100%; }

/* Buttons */
.btn-primary { background: rgb(var(--rt-primary)); color: #fff; padding: 14px 30px; border-radius: 6px; font-weight: 600; transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 10px 20px rgba(var(--rt-primary), 0.2); }
.btn-primary:hover { background: rgb(var(--rt-primary-dark)); transform: translateY(-2px); box-shadow: 0 15px 25px rgba(var(--rt-primary), 0.25); }
.btn-secondary { background: rgb(var(--rt-secondary)); color: #fff; padding: 14px 30px; border-radius: 6px; font-weight: 600; transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 10px 20px rgba(var(--rt-secondary), 0.2); }
.btn-secondary:hover { background: rgb(var(--rt-secondary-dark)); transform: translateY(-2px); }
.btn-outline { background: transparent; color: rgb(var(--rt-dark)); padding: 13px 29px; border-radius: 6px; border: 2px solid rgb(var(--rt-dark)); font-weight: 600; transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px; }
.btn-outline:hover { background: rgb(var(--rt-dark)); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; padding: 13px 29px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.3); font-weight: 600; transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px; }
.btn-outline-light:hover { background: #fff; color: rgb(var(--rt-dark)); border-color: #fff; }

/* Cards */
.service-card { background: #fff; border-radius: 10px; padding: 35px 30px; box-shadow: 0 10px 30px rgba(var(--rt-dark), 0.06); transition: all 0.4s ease; position: relative; overflow: hidden; border: 1px solid transparent; }
.service-card:hover { transform: translateY(-10px); box-shadow: 0 20px 60px rgba(var(--rt-primary), 0.12); border-color: rgba(var(--rt-primary), 0.1); }
.service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: rgb(var(--rt-primary)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s; }
.service-card:hover::before { transform: scaleX(1); }
.service-card.bg-dark::before { background: rgb(var(--rt-secondary)); }
.service-icon { width: 70px; height: 70px; border-radius: 10px; background: rgba(var(--rt-primary), 0.1); color: rgb(var(--rt-primary)); display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 24px; transition: all 0.3s; }
.service-card:hover .service-icon { background: rgb(var(--rt-primary)); color: #fff; transform: rotate(-5deg); }

/* Hero Slider */
.slider { position: relative; height: 100vh; min-height: 650px; overflow: hidden; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; background-size: cover; background-position: center; }
.slide.active { opacity: 1; }
.slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--rt-dark), 0.85) 0%, rgba(var(--rt-dark), 0.6) 50%, rgba(var(--rt-dark), 0.2) 100%); }
.slide-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 8%; max-width: 1400px; margin: 0 auto; }
.slider-arrow { width: 55px; height: 55px; border-radius: 50%; background: rgba(255,255,255,0.15); backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: all 0.3s; }
.slider-arrow:hover { background: rgb(var(--rt-primary)); border-color: rgb(var(--rt-primary)); }
.slider-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: all 0.3s; cursor: pointer; }
.slider-dot.active { width: 40px; border-radius: 6px; background: rgb(var(--rt-primary)); }

/* Chatbot */
.chatbot-toggle { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; border-radius: 50%; background: rgb(var(--rt-primary)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; z-index: 100; box-shadow: 0 10px 25px rgba(var(--rt-primary), 0.4); border: none; transition: all 0.3s; }
.chatbot-toggle:hover { background: rgb(var(--rt-primary-dark)); transform: scale(1.05); }
.chatbot-window { position: fixed; bottom: 105px; right: 30px; width: 380px; max-width: calc(100vw - 40px); height: 550px; max-height: calc(100vh - 150px); background: #fff; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; z-index: 100; transform: scale(0) translateY(20px); transform-origin: bottom right; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 20px 50px rgba(var(--rt-dark), 0.2); border: 1px solid rgba(0,0,0,0.05); }
.chatbot-window.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }
.chat-header { padding: 18px 24px; background: rgb(var(--rt-primary)); color: #fff; display: flex; align-items: center; gap: 12px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 12px; background: rgb(var(--rt-light)); }
.message { max-width: 80%; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; box-shadow: 0 2px 5px rgba(0,0,0,0.05); white-space: pre-line; }
.message.bot { align-self: flex-start; background: #fff; color: rgb(var(--rt-dark)); border-bottom-left-radius: 4px; }
.message.user { align-self: flex-end; background: rgb(var(--rt-primary)); color: #fff; border-bottom-right-radius: 4px; }
.chat-input { padding: 16px; border-top: 1px solid #eef0f4; display: flex; gap: 10px; background: #fff; }
.chat-input input { flex: 1; background: rgb(var(--rt-light)); border: 1px solid #eef0f4; border-radius: 8px; padding: 12px 16px; color: rgb(var(--rt-dark)); font-family: inherit; font-size: 14px; outline: none; transition: all 0.2s; }
.chat-input input:focus { border-color: rgb(var(--rt-primary)); background: #fff; }
.chat-input button { width: 44px; height: 44px; border-radius: 8px; background: rgb(var(--rt-primary)); color: #fff; border: none; cursor: pointer; transition: all 0.2s; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.chat-input button:hover { background: rgb(var(--rt-primary-dark)); }
.typing span { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--rt-primary)); display: inline-block; animation: typing 1.4s infinite; margin: 0 2px; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
.suggestion-chip { padding: 8px 14px; border-radius: 20px; background: #fff; border: 1px solid rgb(var(--rt-primary)); color: rgb(var(--rt-primary)); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.suggestion-chip:hover { background: rgb(var(--rt-primary)); color: #fff; }

/* Animations & Utilities */
.fade-up { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.2,0,0.2,1); }
.fade-up.visible { opacity: 1; transform: translateY(0); }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: rgba(var(--rt-primary), 0.1); color: rgb(var(--rt-primary)); border-radius: 30px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Poppins', sans-serif; }
.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--rt-primary)); }
.section-title { font-size: 42px; font-weight: 800; line-height: 1.2; margin-bottom: 20px; color: rgb(var(--rt-dark)); }
@media (max-width: 768px) { .section-title { font-size: 30px; } }

.stat-number { font-family: 'Poppins', sans-serif; font-size: 52px; font-weight: 800; line-height: 1; color: rgb(var(--rt-primary)); }

.program-tab { padding: 12px 28px; border-radius: 6px; cursor: pointer; transition: all 0.3s; font-weight: 600; border: 2px solid #eef0f4; background: #fff; color: rgb(var(--rt-dark)); font-family: 'Poppins', sans-serif; }
.program-tab.active { background: rgb(var(--rt-primary)); color: #fff; border-color: rgb(var(--rt-primary)); box-shadow: 0 10px 20px rgba(var(--rt-primary), 0.2); }
.program-tab:not(.active):hover { border-color: rgb(var(--rt-primary)); color: rgb(var(--rt-primary)); }
.program-content { display: none; }
.program-content.active { display: block; animation: pageIn 0.5s ease; }
.skill-tag { display: inline-block; padding: 6px 14px; background: rgb(var(--rt-light)); border: 1px solid #eef0f4; border-radius: 20px; font-size: 13px; color: rgb(var(--rt-dark)); margin: 4px; font-weight: 500; transition: all 0.2s; }
.skill-tag:hover { background: rgb(var(--rt-primary)); color: #fff; border-color: rgb(var(--rt-primary)); }

.mobile-menu { position: fixed; inset: 0; background: #fff; z-index: 99; padding: 80px 24px 40px; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); overflow-y: auto; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a { display: block; padding: 18px 0; font-size: 24px; font-family: 'Poppins', sans-serif; font-weight: 600; color: rgb(var(--rt-dark)); border-bottom: 1px solid #eef0f4; }
.mobile-menu a.nav-link::after { display: none; }

.form-input { width: 100%; background: rgb(var(--rt-light)); border: 1px solid #eef0f4; border-radius: 8px; padding: 14px 18px; color: rgb(var(--rt-dark)); font-family: inherit; font-size: 15px; outline: none; transition: all 0.3s; }
.form-input:focus { border-color: rgb(var(--rt-primary)); background: #fff; box-shadow: 0 0 0 4px rgba(var(--rt-primary), 0.1); }

.nav-scrolled { background: #fff; box-shadow: 0 5px 20px rgba(var(--rt-dark), 0.08); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgb(var(--rt-light)); }
::-webkit-scrollbar-thumb { background: rgb(var(--rt-primary)); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--rt-primary-dark)); }

.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: rgb(var(--rt-dark)); color: #fff; padding: 16px 28px; border-radius: 8px; z-index: 200; opacity: 0; transition: all 0.4s; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-weight: 500; max-width: calc(100vw - 40px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* -------------------------------------------------------------------------
 * WordPress integration extras
 * ---------------------------------------------------------------------- */

/* Keep the fixed header below the admin bar */
body.admin-bar #navbar { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar #navbar { top: 46px; } }

/* Entry content (posts & pages edited with the block editor) */
.entry-content { font-size: 17px; line-height: 1.8; color: rgb(var(--rt-dark)); }
.entry-content p { margin-bottom: 1.5em; color: rgb(var(--rt-muted)); }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { font-family: 'Poppins', sans-serif; font-weight: 700; margin: 1.4em 0 0.6em; color: rgb(var(--rt-dark)); }
.entry-content h2 { font-size: 32px; }
.entry-content h3 { font-size: 26px; }
.entry-content a { color: rgb(var(--rt-primary)); text-decoration: underline; }
.entry-content a:hover { color: rgb(var(--rt-primary-dark)); }
.entry-content ul, .entry-content ol { margin: 0 0 1.5em 1.4em; color: rgb(var(--rt-muted)); }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 0.5em; }
.entry-content blockquote { border-left: 4px solid rgb(var(--rt-primary)); background: rgb(var(--rt-light)); padding: 24px 28px; border-radius: 0 10px 10px 0; font-style: italic; margin: 2em 0; }
.entry-content blockquote p { margin: 0; color: rgb(var(--rt-dark)); }
.entry-content img { border-radius: 10px; }
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; }
.entry-content th, .entry-content td { border: 1px solid #eef0f4; padding: 10px 14px; text-align: left; }
.entry-content th { background: rgb(var(--rt-light)); font-weight: 600; }
.entry-content code { background: rgb(var(--rt-light)); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }

/* Pagination */
.pagination-wrap .nav-links { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pagination-wrap .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 8px; border: 2px solid #eef0f4; background: #fff; color: rgb(var(--rt-dark)); font-weight: 600; transition: all 0.2s; }
.pagination-wrap .page-numbers:hover, .pagination-wrap .page-numbers.current { background: rgb(var(--rt-primary)); border-color: rgb(var(--rt-primary)); color: #fff; }

/* Comments */
.comment-list { list-style: none; margin: 0; }
.comment-list .comment { background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(var(--rt-dark), 0.06); padding: 24px; margin-bottom: 20px; }
.comment-list .children { list-style: none; margin-top: 20px; }
.comment-reply-link, .comment-reply-title a { color: rgb(var(--rt-primary)); font-weight: 600; }
.comment-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; }
.comment-form .submit { background: rgb(var(--rt-primary)); color: #fff; border: none; padding: 14px 30px; border-radius: 6px; font-weight: 600; cursor: pointer; }
.comment-form .submit:hover { background: rgb(var(--rt-primary-dark)); }
.comment-content p { color: rgb(var(--rt-muted)); }

/* Sticky posts & misc */
.sticky { border-left: 4px solid rgb(var(--rt-secondary)); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
.gallery-caption, .wp-caption-text { font-size: 13px; color: rgb(var(--rt-muted)); text-align: center; }

/* Placeholder inputs used by WP forms (search) */
.search-form .form-input { background: #fff; }