/* ==========================================================================
   ROGEEN Site Styles - Page-Specific Components
   Version: 3.1.0
   ========================================================================== */

/* ==========================================================================
   1. HEADER LAYOUT REFINEMENTS
   ========================================================================== */
.ast-primary-header-bar .site-primary-header-wrap,
.ast-primary-header-bar .ast-builder-grid-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ast-site-identity {
	flex-shrink: 0;
}

.ast-builder-menu-1,
.ast-primary-header-bar nav.site-navigation {
	flex-grow: 1;
	display: flex;
	justify-content: center;
}

/* Header spacing refinements */
.main-header-bar .ast-container {
	max-width: var(--rog-container-xl);
}

/* ==========================================================================
   2. HOME PAGE - HERO LAYOUT
   ========================================================================== */
.home .entry-content > .wp-block-group:first-child .wp-block-columns {
	max-width: var(--rog-container-xl);
	margin: 0 auto;
	align-items: center;
}

.home .entry-content > .wp-block-group:first-child .wp-block-column:first-child {
	padding-right: var(--rog-space-8);
}

@media (max-width: 782px) {
	.home .entry-content > .wp-block-group:first-child .wp-block-column:first-child {
		padding-right: 0;
	}
	
	.home .entry-content > .wp-block-group:first-child .wp-block-columns {
		flex-direction: column;
	}
}

/* Hero image styling */
.home .entry-content > .wp-block-group:first-child .wp-block-image img {
	border-radius: var(--rog-radius-lg);
	box-shadow: var(--rog-shadow-xl);
}

/* ==========================================================================
   3. SERVICES PAGE
   ========================================================================== */
.rog-service-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rog-space-12);
	align-items: center;
	padding: var(--rog-space-10) 0;
	border-bottom: 1px solid var(--rog-gray-200);
}

.rog-service-feature:last-child {
	border-bottom: none;
}

.rog-service-feature.reversed {
	direction: rtl;
}

.rog-service-feature.reversed > * {
	direction: ltr;
}

@media (max-width: 768px) {
	.rog-service-feature,
	.rog-service-feature.reversed {
		grid-template-columns: 1fr;
		gap: var(--rog-space-6);
		direction: ltr;
	}
}

.rog-service-content h3 {
	font-size: var(--rog-text-2xl);
	color: var(--rog-blue-800);
	margin-bottom: var(--rog-space-4);
}

.rog-service-content p {
	margin-bottom: var(--rog-space-4);
	color: var(--rog-gray-700);
}

.rog-service-content ul {
	margin-bottom: var(--rog-space-5);
}

.rog-service-content li {
	color: var(--rog-gray-700);
}

.rog-service-image img {
	width: 100%;
	border-radius: var(--rog-radius-lg);
	box-shadow: var(--rog-shadow-lg);
}

/* Service highlights */
.rog-service-highlight {
	background: var(--rog-gray-50);
	border-radius: var(--rog-radius-md);
	padding: var(--rog-space-4);
	margin-top: var(--rog-space-5);
}

.rog-service-highlight h5 {
	font-size: var(--rog-text-sm);
	font-weight: 600;
	color: var(--rog-blue-700);
	margin-bottom: var(--rog-space-2);
}

.rog-service-highlight p {
	font-size: var(--rog-text-sm);
	margin: 0;
	color: var(--rog-gray-600);
}

/* Alternating service sections */
.rog-section:nth-of-type(even) .wp-block-columns {
	flex-direction: row-reverse;
}

@media (max-width: 782px) {
	.rog-section:nth-of-type(even) .wp-block-columns {
		flex-direction: column;
	}
}

/* ==========================================================================
   4. PRODUCTS PAGE
   ========================================================================== */
.rog-product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rog-space-6);
}

@media (max-width: 992px) {
	.rog-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.rog-product-grid {
		grid-template-columns: 1fr;
	}
}

.rog-product-card {
	position: relative;
	border-radius: var(--rog-radius-lg);
	overflow: hidden;
	aspect-ratio: 4/3;
	background: var(--rog-gray-200);
}

.rog-product-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.rog-product-card:hover img {
	transform: scale(1.05);
}

.rog-product-card-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--rog-space-5);
	background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.rog-product-card h4 {
	color: var(--rog-white);
	font-size: var(--rog-text-lg);
	margin: 0;
}

/* Quality assurance grid */
.rog-qa-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rog-space-6);
	max-width: 900px;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.rog-qa-grid {
		grid-template-columns: 1fr;
	}
}

.rog-qa-item {
	text-align: center;
	padding: var(--rog-space-6);
}

.rog-qa-item svg,
.rog-qa-item .icon {
	width: 48px;
	height: 48px;
	margin: 0 auto var(--rog-space-4);
	color: var(--rog-blue-600);
}

.rog-qa-item h4 {
	font-size: var(--rog-text-base);
	margin-bottom: var(--rog-space-2);
	color: var(--rog-gray-900);
}

.rog-qa-item p {
	font-size: var(--rog-text-sm);
	color: var(--rog-gray-600);
	margin: 0;
}

/* ==========================================================================
   5. ABOUT PAGE
   ========================================================================== */
.rog-about-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rog-space-12);
	align-items: center;
}

@media (max-width: 768px) {
	.rog-about-intro {
		grid-template-columns: 1fr;
		gap: var(--rog-space-8);
	}
}

.rog-about-intro img {
	border-radius: var(--rog-radius-lg);
	box-shadow: var(--rog-shadow-xl);
}

/* Vision/Mission cards */
.rog-vm-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--rog-space-6);
}

@media (max-width: 768px) {
	.rog-vm-grid {
		grid-template-columns: 1fr;
	}
}

.rog-vm-card {
	background: var(--rog-white);
	border: 1px solid var(--rog-gray-200);
	border-radius: var(--rog-radius-lg);
	padding: var(--rog-space-8);
}

.rog-vm-card h4 {
	display: flex;
	align-items: center;
	gap: var(--rog-space-3);
	font-size: var(--rog-text-lg);
	color: var(--rog-blue-800);
	margin-bottom: var(--rog-space-4);
}

.rog-vm-card h4 svg {
	width: 24px;
	height: 24px;
	color: var(--rog-blue-600);
}

.rog-vm-card p {
	margin: 0;
	color: var(--rog-gray-700);
}

/* Values grid */
.rog-values-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--rog-space-5);
}

@media (max-width: 992px) {
	.rog-values-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.rog-values-grid {
		grid-template-columns: 1fr;
	}
}

.rog-value-card {
	text-align: center;
	padding: var(--rog-space-6);
	background: var(--rog-white);
	border: 1px solid var(--rog-gray-200);
	border-radius: var(--rog-radius-lg);
	transition: all 0.2s ease;
}

.rog-value-card:hover {
	box-shadow: var(--rog-shadow-md);
	transform: translateY(-2px);
}

.rog-value-card svg,
.rog-value-card .icon {
	width: 40px;
	height: 40px;
	margin: 0 auto var(--rog-space-4);
	color: var(--rog-blue-600);
}

.rog-value-card h4 {
	font-size: var(--rog-text-base);
	margin-bottom: var(--rog-space-2);
	color: var(--rog-gray-900);
}

.rog-value-card p {
	font-size: var(--rog-text-sm);
	margin: 0;
	color: var(--rog-gray-600);
}

/* Markets */
.rog-markets-grid {
	display: flex;
	justify-content: center;
	gap: var(--rog-space-12);
	flex-wrap: wrap;
}

.rog-market-item {
	text-align: center;
	max-width: 200px;
}

.rog-market-circle {
	width: 100px;
	height: 100px;
	background: var(--rog-gray-100);
	border-radius: var(--rog-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--rog-space-4);
	font-size: 2.5rem;
}

.rog-market-item h4 {
	font-size: var(--rog-text-base);
	margin-bottom: var(--rog-space-2);
	color: var(--rog-gray-900);
}

.rog-market-item p {
	font-size: var(--rog-text-sm);
	color: var(--rog-gray-600);
}

/* ==========================================================================
   6. TRADE CONSULTANCY PAGE
   ========================================================================== */
.rog-consultancy-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rog-space-6);
}

@media (max-width: 992px) {
	.rog-consultancy-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.rog-consultancy-grid {
		grid-template-columns: 1fr;
	}
}

.rog-consultancy-card {
	background: var(--rog-white);
	border: 1px solid var(--rog-gray-200);
	border-radius: var(--rog-radius-lg);
	padding: var(--rog-space-6);
	height: 100%;
	transition: all 0.2s ease;
}

.rog-consultancy-card:hover {
	box-shadow: var(--rog-shadow-md);
	transform: translateY(-2px);
}

.rog-consultancy-card svg,
.rog-consultancy-card .icon {
	width: 48px;
	height: 48px;
	margin-bottom: var(--rog-space-4);
	color: var(--rog-blue-600);
}

.rog-consultancy-card h4 {
	font-size: var(--rog-text-lg);
	color: var(--rog-blue-800);
	margin-bottom: var(--rog-space-3);
}

.rog-consultancy-card p {
	font-size: var(--rog-text-sm);
	margin-bottom: var(--rog-space-4);
	color: var(--rog-gray-700);
}

.rog-consultancy-card h5 {
	font-size: var(--rog-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rog-gray-500);
	margin-bottom: var(--rog-space-2);
}

.rog-consultancy-card ul {
	font-size: var(--rog-text-sm);
	padding-left: var(--rog-space-4);
	margin: 0;
}

.rog-consultancy-card li {
	margin-bottom: var(--rog-space-1);
	color: var(--rog-gray-600);
}

/* ==========================================================================
   7. FAQ PAGE - ENHANCED
   ========================================================================== */
.rog-faq-categories {
	display: flex;
	justify-content: center;
	gap: var(--rog-space-3);
	margin-bottom: var(--rog-space-10);
	flex-wrap: wrap;
}

.rog-faq-cat-btn {
	padding: var(--rog-space-2) var(--rog-space-5);
	border: 1px solid var(--rog-gray-300);
	border-radius: var(--rog-radius-full);
	background: var(--rog-white);
	color: var(--rog-gray-600);
	font-size: var(--rog-text-sm);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}

.rog-faq-cat-btn:hover,
.rog-faq-cat-btn.active {
	background: var(--rog-blue-700);
	border-color: var(--rog-blue-700);
	color: var(--rog-white);
}

/* FAQ section headings */
.rog-section h3.wp-block-heading {
	font-size: var(--rog-text-xl);
	color: var(--rog-blue-800);
	margin-bottom: var(--rog-space-6);
	padding-bottom: var(--rog-space-3);
	border-bottom: 2px solid var(--rog-gray-200);
}

/* Explore more cards */
.rog-explore-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rog-space-6);
}

@media (max-width: 768px) {
	.rog-explore-grid {
		grid-template-columns: 1fr;
	}
}

.rog-explore-card {
	background: var(--rog-white);
	border: 1px solid var(--rog-gray-200);
	border-radius: var(--rog-radius-lg);
	padding: var(--rog-space-6);
	text-align: center;
	text-decoration: none;
	transition: all 0.2s ease;
	display: block;
}

.rog-explore-card:hover {
	box-shadow: var(--rog-shadow-lg);
	transform: translateY(-2px);
	border-color: var(--rog-blue-300);
}

.rog-explore-card h4 {
	font-size: var(--rog-text-base);
	color: var(--rog-gray-800);
	margin-bottom: var(--rog-space-2);
}

.rog-explore-card p {
	font-size: var(--rog-text-sm);
	color: var(--rog-gray-600);
	margin: 0;
}

/* ==========================================================================
   8. CONTACT PAGE - ENHANCED
   ========================================================================== */
.rog-contact-wrapper {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: var(--rog-space-10);
	align-items: start;
}

@media (max-width: 992px) {
	.rog-contact-wrapper {
		grid-template-columns: 1fr;
	}
}

.rog-contact-detail {
	display: flex;
	gap: var(--rog-space-4);
	margin-bottom: var(--rog-space-6);
}

.rog-contact-detail:last-of-type {
	margin-bottom: 0;
}

.rog-contact-detail-icon {
	width: 44px;
	height: 44px;
	min-width: 44px;
	background: var(--rog-white);
	border-radius: var(--rog-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rog-blue-600);
	box-shadow: var(--rog-shadow-sm);
}

.rog-contact-detail-icon svg {
	width: 20px;
	height: 20px;
}

.rog-contact-detail-content h4 {
	font-size: var(--rog-text-sm);
	font-weight: 600;
	margin-bottom: var(--rog-space-1);
	color: var(--rog-gray-900);
}

.rog-contact-detail-content p {
	font-size: var(--rog-text-sm);
	color: var(--rog-gray-700);
	margin: 0;
}

.rog-contact-detail-content a {
	color: var(--rog-blue-700);
}

.rog-contact-detail-content a:hover {
	color: var(--rog-blue-900);
}

/* Map placeholder */
.rog-map-container {
	margin-top: var(--rog-space-10);
	background: var(--rog-gray-100);
	border-radius: var(--rog-radius-lg);
	padding: var(--rog-space-12) var(--rog-space-8);
	text-align: center;
}

.rog-map-container svg {
	width: 48px;
	height: 48px;
	color: var(--rog-blue-600);
	margin-bottom: var(--rog-space-4);
}

.rog-map-container h4 {
	margin-bottom: var(--rog-space-2);
	color: var(--rog-gray-900);
}

.rog-map-container p {
	color: var(--rog-gray-600);
	margin: 0;
}

/* ==========================================================================
   9. MOBILE MENU REFINEMENTS
   ========================================================================== */
.ast-mobile-popup-drawer .ast-mobile-popup-content {
	padding: 0;
}

.ast-mobile-popup-drawer .close-popup-icon {
	padding: var(--rog-space-4);
}

.ast-mobile-popup-drawer nav {
	padding: var(--rog-space-4) 0;
}

/* Mobile language switcher position */
@media (max-width: 921px) {
	#rog-lang-switcher,
	.rog-lang-switcher {
		top: auto;
		bottom: var(--rog-space-5);
		right: var(--rog-space-5);
	}
}

/* ==========================================================================
   10. EMOJI ICON STYLING
   ========================================================================== */
/* Ensure emoji icons in headings display properly */
h3.wp-block-heading:first-letter,
h4.wp-block-heading:first-letter {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ==========================================================================
   11. EQUAL HEIGHT CARDS
   ========================================================================== */
.wp-block-columns.rog-cards-row {
	align-items: stretch;
}

.wp-block-columns.rog-cards-row > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.wp-block-columns.rog-cards-row > .wp-block-column > :last-child {
	margin-top: auto;
}

/* ==========================================================================
   12. SECTION SPACING IMPROVEMENTS
   ========================================================================== */
/* Ensure proper vertical rhythm between sections */
.entry-content > .wp-block-group + .wp-block-group {
	margin-top: 0;
}

/* Gray section background extends full width */
.rog-section-gray.alignfull,
.wp-block-group.rog-section-gray.alignfull {
	background: var(--rog-gray-50);
}

/* Blue section background extends full width */
.rog-section-blue.alignfull,
.wp-block-group.rog-section-blue.alignfull {
	background: var(--rog-gradient-hero);
}

/* ==========================================================================
   13. PRINT STYLES
   ========================================================================== */
@media print {
	.site-header,
	.site-footer,
	.rog-lang-switcher,
	.rog-cta-banner {
		display: none !important;
	}
	
	body {
		font-size: 12pt;
		line-height: 1.5;
		color: #000;
	}
	
	h1 { font-size: 24pt; }
	h2 { font-size: 18pt; }
	h3 { font-size: 14pt; }
	
	a {
		text-decoration: underline;
		color: #000;
	}
	
	.rog-hero,
	.rog-section-blue,
	.rog-cta-banner {
		background: #f0f0f0 !important;
		color: #000 !important;
	}
	
	.rog-hero h1,
	.rog-hero h2,
	.rog-hero p,
	.rog-section-blue h2,
	.rog-section-blue p {
		color: #000 !important;
	}
}