/**
 * Oshieba Theme Overrides for BusinessPress
 * 
 * This file contains CSS overrides to ensure the Oshieba design
 * displays correctly within the BusinessPress theme.
 */

/* CSS Variables */
:root {
	--background: 0 0% 100%;
	--foreground: 214 81% 19%;
	--primary: 214 81% 19%;
	--primary-foreground: 0 0% 100%;
	--secondary: 41 79% 57%;
	--secondary-foreground: 0 0% 0%;
	--muted: 210 40% 96.1%;
	--muted-foreground: 215.4 16.3% 46.9%;
	--accent: 41 79% 57%;
	--accent-foreground: 0 0% 0%;
	--border: 214.3 31.8% 91.4%;
	--input: 214.3 31.8% 91.4%;
	--ring: 222.2 84% 4.9%;
	--radius: 0.5rem;
}

/* Ensure text color classes work correctly */
.text-primary {
	color: hsl(var(--primary)) !important;
}

.text-secondary {
	color: hsl(var(--secondary)) !important;
}

.text-foreground {
	color: hsl(var(--foreground)) !important;
}

.text-muted-foreground {
	color: hsl(var(--muted-foreground)) !important;
}

.text-accent {
	color: hsl(var(--accent)) !important;
}

.bg-primary {
	background-color: hsl(var(--primary)) !important;
}

.bg-secondary {
	background-color: hsl(var(--secondary)) !important;
}

.bg-muted {
	background-color: hsl(var(--muted)) !important;
}

.bg-background {
	background-color: hsl(var(--background)) !important;
}

.border-primary {
	border-color: hsl(var(--primary)) !important;
}

.border-border {
	border-color: hsl(var(--border)) !important;
}

/* Ensure hover states work correctly for buttons */
/* Fix for button with border-primary and text-primary - Normal state */
button.border.border-primary.text-primary,
button.border-2.border-primary.text-primary {
	color: hsl(var(--primary)) !important;
	border: 1px solid hsl(var(--primary)) !important;
	border-color: hsl(var(--primary)) !important;
	background-color: transparent !important;
}

button.border-2.border-primary.text-primary {
	border-width: 2px !important;
}

/* Fix for button with border-primary and text-primary - Hover state */
button.border.border-primary.text-primary:hover,
button.border-2.border-primary.text-primary:hover,
button.border.border-primary.text-primary.hover\:bg-primary:hover,
button.border-2.border-primary.text-primary.hover\:bg-primary:hover {
	background-color: hsl(var(--primary)) !important;
	color: #ffffff !important;
	border-color: hsl(var(--primary)) !important;
}

/* Fix for button with bg-secondary - Normal state */
button.bg-secondary {
	background-color: hsl(var(--secondary)) !important;
	color: #ffffff !important;
}

/* Fix for button with bg-secondary - Hover state */
button.bg-secondary:hover,
button.bg-secondary.hover\:bg-secondary\/90:hover {
	background-color: hsl(var(--secondary)) !important;
	opacity: 0.9;
	color: #ffffff !important;
}

/* General hover states */
.hover\:bg-primary:hover {
	background-color: hsl(var(--primary)) !important;
}

.hover\:bg-secondary:hover {
	background-color: hsl(var(--secondary)) !important;
}

.hover\:bg-secondary\/90:hover {
	background-color: hsla(var(--secondary), 0.9) !important;
}

.hover\:text-white:hover {
	color: #ffffff !important;
}

.hover\:text-primary:hover {
	color: hsl(var(--primary)) !important;
}

/* Fix footer text colors */
footer.bg-primary {
	color: #ffffff !important;
}

footer.bg-primary * {
	color: inherit;
}

footer.bg-primary .text-white\/80,
footer.bg-primary .text-white\/60 {
	color: rgba(255, 255, 255, 0.8) !important;
}

footer.bg-primary .text-white\/60 {
	color: rgba(255, 255, 255, 0.6) !important;
}

footer.bg-primary h3,
footer.bg-primary .font-semibold {
	color: #ffffff !important;
}

footer.bg-primary a {
	color: rgba(255, 255, 255, 0.8) !important;
}

footer.bg-primary a.hover\:text-secondary:hover {
	color: hsl(var(--secondary)) !important;
}

/* Fix hero section text colors - only for specific texts */
section.text-white h1 span:first-child,
section.text-white h1 .block:first-child {
	color: #ffffff !important;
}

section.text-white h2 span:first-child,
section.text-white h2 .block:first-child,
section.text-white h2 span:last-child,
section.text-white h2 .block:last-child {
	color: #ffffff !important;
}

section.text-white h2.opacity-90,
section.text-white h2.opacity-90 * {
	color: #ffffff !important;
	opacity: 0.9 !important;
}

/* Fix container width to match oshieba theme */
.container {
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

@media (min-width: 640px) {
	.container {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}
}

@media (min-width: 1024px) {
	.container {
		padding-left: 2rem !important;
		padding-right: 2rem !important;
	}
}

/* Match oshieba container max-width at 1400px */
@media (min-width: 1400px) {
	.container {
		max-width: 1400px !important;
	}
}

/* Override businesspress default styles for oshieba pages */
html {
	font-size: 100% !important;
}

html:lang(ja) {
	font-size: 100% !important;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	color: hsl(var(--foreground)) !important;
	background-color: hsl(var(--background)) !important;
}

body:lang(ja) {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
	font-size: 16px !important;
	font-weight: normal !important;
	line-height: 1.5 !important;
}

/* Override businesspress container styles */
.site-content,
.site-main,
.content-area,
.main-header-content,
.container-content {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Ensure full width for body and html */
html, body {
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: hidden !important;
}

/* Fix site-content width */
#content.site-content {
	width: 100% !important;
	max-width: 100% !important;
	margin-bottom: 0 !important;
}

/* Fix content spacing when header is sticky/fixed */
/* Header has py-4 (16px top + 16px bottom) + h-10 logo (40px) + border (1px) = ~73px total height */
/* For sticky header, no padding needed as it's in normal flow */
body {
	padding-top: 0 !important;
}

/* Ensure header sticky positioning works correctly */
header.sticky {
	position: sticky !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 50 !important;
}

header.fixed {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 50 !important;
}

/* On mobile, when menu is open, header can be taller */
/* The mobile menu expands below, so we keep the same padding */
@media (max-width: 767px) {
	body {
		padding-top: 73px !important;
	}
}

/* Remove businesspress default spacing */
.site-header {
	margin-bottom: 0 !important;
	border-bottom: none !important;
}

/* Ensure sections have proper spacing */
section {
	position: relative !important;
}

/* Override businesspress entry styles */
.hentry {
	margin-bottom: 0 !important;
}

/* Ensure mobile menu button only shows on mobile */
/* Hide on desktop (md breakpoint and above) */
@media (min-width: 768px) {
	#mobile-menu-toggle {
		display: none !important;
	}
}

/* Show on mobile (below md breakpoint) */
@media (max-width: 767px) {
	#mobile-menu-toggle {
		display: flex !important;
	}
}

.rounded-xl {
	border-radius: 0.75rem !important;
}

.rounded-2xl {
	border-radius: 1rem !important;
}

.shadow-sm {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.shadow-md {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.shadow-lg {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.shadow-xl {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.shadow-2xl {
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.drop-shadow-2xl {
	filter: drop-shadow(0 25px 50px -12px rgba(0, 0, 0, 0.25)) !important;
}

.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.aspect-video {
	aspect-ratio: 16 / 9;
}

/* Fix for hero section background gradient */
.bg-gradient-to-br {
	background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important;
}

.from-slate-50 {
	--tw-gradient-from: #f8fafc;
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(248, 250, 252, 0));
}

.via-blue-50 {
	--tw-gradient-to: #eff6ff;
	--tw-gradient-stops: var(--tw-gradient-from), #eff6ff, var(--tw-gradient-to, rgba(239, 246, 255, 0));
}

.to-slate-100 {
	--tw-gradient-to: #f1f5f9;
}

.bg-gradient-to-r {
	background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}
/* Fix text-gray-900 and text-gray-600 colors */
.text-gray-900 {
	color: #111827 !important;
}

.text-gray-700 {
	color: #374151 !important;
}

.text-gray-600 {
	color: #4b5563 !important;
}

.text-gray-500 {
	color: #6b7280 !important;
}

.border-gray-100 {
	border-color: #f3f4f6 !important;
}

.bg-gray-200 {
	background-color: #e5e7eb !important;
}

/* Fix blur-3xl */
.blur-3xl {
	filter: blur(64px) !important;
}

/* Ensure proper spacing for hero section */
section.relative.overflow-hidden {
	position: relative !important;
	overflow: hidden !important;
}

/* Fix for text-white in bg-secondary highlight */
.bg-secondary.text-white {
	color: #ffffff !important;
}

/* Ensure px-2 py-1 works correctly */
.px-2 {
	padding-left: 0.5rem !important;
	padding-right: 0.5rem !important;
}

.py-1 {
	padding-top: 0.25rem !important;
	padding-bottom: 0.25rem !important;
}

/* Fix for leading-tight and tracking-tight */
.leading-tight {
	line-height: 1.25 !important;
}

.tracking-tight {
	letter-spacing: -0.025em !important;
}

/* Custom height for hero section */
.h-\[70vh\] {
	height: 70vh !important;
}

.min-h-\[600px\] {
	min-height: 600px !important;
}

/* Max width utilities */
.max-w-3xl {
	max-width: 48rem !important; /* 768px */
}

.max-w-4xl {
	max-width: 56rem !important; /* 896px */
}

.max-w-5xl {
	max-width: 64rem !important; /* 1024px */
}

/* Additional CSS for About page and other pages */
.from-primary {
	--tw-gradient-from: hsl(var(--primary));
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsla(var(--primary), 0));
}

.to-primary\/80 {
	--tw-gradient-to: hsla(var(--primary), 0.8);
}

.bg-gradient-to-r.from-primary.to-primary\/80 {
	background-image: linear-gradient(to right, hsl(var(--primary)), hsla(var(--primary), 0.8)) !important;
}

/* Table styles for About page */
table.w-full {
	width: 100% !important;
}

table tbody tr {
	border-bottom: 1px solid hsl(var(--border)) !important;
}

table tbody tr:last-child {
	border-bottom: none !important;
}

table td {
	padding: 1rem 1.5rem !important;
}

table td.bg-gray-50 {
	background-color: #f9fafb !important;
}

/* Ensure text colors work correctly */
.text-gray-800 {
	color: #1f2937 !important;
}

.text-gray-700 {
	color: #374151 !important;
}

.text-gray-600 {
	color: #4b5563 !important;
}

/* Ensure border colors work */
.border-gray-200 {
	border-color: #e5e7eb !important;
}

.divide-gray-200 > * + * {
	border-top-color: #e5e7eb !important;
}

/* Ensure space-y works */
.space-y-1 > * + * {
	margin-top: 0.25rem !important;
}

.space-y-3 > * + * {
	margin-top: 0.75rem !important;
}

.space-y-6 > * + * {
	margin-top: 1.5rem !important;
}