/*
Theme Name: Learn Theme
Theme URI: https://learninsidecourses.com
Author: Phil Wilson
Author URI: https://learninsidecourses.com
Description: A purpose-built WordPress theme designed specifically for the Learn plugin, featuring a Skool-inspired modern course platform design. Clean, professional, and optimized for course delivery.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: learn-theme
Tags: education, courses, learning, modern, clean, minimal
*/

/**
 * Learn Theme - Skool-Inspired Course Platform
 * Purpose-built theme for Learn plugin
 */

/* Reset & Base Styles */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	/* Skool Color Palette */
	--skool-header-bg: #1a1a1a;
	--skool-header-text: #ffffff;
	--skool-header-text-muted: #a0a0a0;
	--skool-primary-blue: #3b82f6;
	--skool-primary-blue-light: #dbeafe;
	--skool-success-green: #22c55e;
	--skool-success-green-light: #dcfce7;
	--skool-gray: #6b7280;
	--skool-gray-light: #9ca3af;
	--skool-gray-lighter: #e5e7eb;
	--skool-gray-dark: #374151;
	--skool-text: #111827;
	--skool-text-secondary: #6b7280;
	--skool-text-muted: #9ca3af;
	--skool-border: #e5e7eb;
	--skool-border-light: #f3f4f6;
	--skool-hover: #f9fafb;
	--skool-active: #eff6ff;
	--skool-radius: 6px;
	--skool-radius-sm: 4px;
	--skool-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	--skool-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--skool-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
	--skool-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	
	/* Spacing System (16px grid) */
	--spacing-xs: 0.25rem;   /* 4px */
	--spacing-sm: 0.5rem;    /* 8px */
	--spacing-md: 1rem;      /* 16px */
	--spacing-lg: 1.5rem;    /* 24px */
	--spacing-xl: 2rem;      /* 32px */
	--spacing-2xl: 3rem;     /* 48px */
	--spacing-3xl: 4rem;     /* 64px */
}

html {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Don't set margin-top here - let WordPress handle it for admin bar */
	/* WordPress will add margin-top: 32px (or 46px on mobile) when admin-bar class is present */
}

/* Only remove margin-top when admin-bar class is NOT present (non-admins) */
html:not(.admin-bar) {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--skool-text);
	background: #F8F7F5; /* EXACT: Background color */
	margin: 0;
	padding: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.2;
	color: var(--skool-text);
	margin: 0 0 var(--spacing-md) 0;
}

h1 {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 20px;
}

h4 {
	font-size: 18px;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 14px;
}

p {
	margin: 0 0 var(--spacing-md) 0;
}

a {
	color: var(--skool-primary-blue);
	text-decoration: none;
	transition: var(--skool-transition);
}

a:hover {
	color: #2563eb;
	text-decoration: none;
}

/* Layout */
.site-container {
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	min-height: 100vh;
	display: block;
}

/* For Learn pages, don't use flex layout */
body.learn-dashboard-body .site-container,
body.learn-course-view .site-container {
	display: block;
}

.site-main {
	flex: 1;
	width: 100%;
}

/* WordPress Admin Bar - Remove margin only when admin-bar class is NOT present */
/* When admin-bar class IS present (admins), WordPress will handle the margin automatically */
body.learn-dashboard-body:not(.admin-bar),
body.learn-course-view:not(.admin-bar) {
	margin-top: 0 !important;
}

/* Only hide admin bar for non-admins - admins should see it */
body:not(.admin-bar) #wpadminbar {
	display: none !important;
}

/* Hide default WordPress elements we don't need */
.site-header,
.site-footer,
.widget-area,
.comments-area,
.post-navigation,
.posts-navigation {
	display: none;
}

/* Learn Plugin Integration */
.learn-theme-wrapper {
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Responsive Breakpoints */
@media (max-width: 1023px) {
	:root {
		font-size: 15px;
	}
	
	h1 {
		font-size: 28px;
	}
	
	h2 {
		font-size: 22px;
	}
}

@media (max-width: 767px) {
	:root {
		font-size: 14px;
	}
	
	h1 {
		font-size: 24px;
	}
	
	h2 {
		font-size: 20px;
	}
}

/* Accessibility */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Print Styles */
@media print {
	.site-header,
	.site-footer,
	.widget-area,
	.comments-area {
		display: none;
	}
}

/* Fix Learn header when WordPress admin bar is present */
#wpadminbar ~ * header.learn-header,
body.admin-bar header.learn-header {
	top: 32px !important;
	z-index: 99999 !important;
}

body.admin-bar header.learn-header {
	top: 0px !important;
	z-index: 99999 !important;
}

/* Ensure the admin bar stays on top */
#wpadminbar {
	z-index: 100000 !important;
}

/* Push body content down when admin bar is present */
body.admin-bar {
	margin-top: 32px !important;
}

/* Mobile admin bar (WordPress changes height on mobile) */
@media screen and (max-width: 782px) {
	#wpadminbar ~ * header.learn-header,
	body.admin-bar header.learn-header {
		top: 46px !important;
	}
	
	body.admin-bar {
		margin-top: 46px !important;
	}
}

/* Elementor Button Width - High Specificity */
.elementor-kit-15 button,
.elementor-kit-15 input[type="button"],
.elementor-kit-15 input[type="submit"],
.elementor-kit-15 .elementor-button,
.elementor-kit-15 .elementor-button-wrapper .elementor-button,
.elementor-kit-15 .elementor-widget-button .elementor-button,
.elementor-kit-15 .elementor-widget-button .elementor-button-link,
.elementor-kit-15 .elementor-button-link {
	width: 270px !important;
	min-width: 270px !important;
	max-width: 270px !important;
}